canrd-main / canrud-nuxt-front · Files

<template>
  <v-rows class="tw-w-full">
    <v-carousel
      hide-delimiter-background
      show-arrows="hover"
      height="auto"
      v-if="!isMobile()"
    >
      <v-carousel-item
        v-for="banner in banners"
        :src="banner"
        cover
        alt="canrud"
        :key="banner"
      >
      </v-carousel-item>
    </v-carousel>
    <v-carousel
      hide-delimiter-background
      show-arrows="hover"
      height="auto"
      v-if="isMobile()"
    >
      <v-carousel-item
        v-for="banner in mobileBanners"
        :src="banner"
        cover
        alt="canrud"
        :key="banner"
      >
      </v-carousel-item>
    </v-carousel>
  </v-rows>
  <!-- 能源材料 -->
  <div class="tw-py-8 py-sm-16">
    <v-container>
      <MainTitleListOdd
        title="Material Reagents"
        :list="materials"
        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
      />
    </v-container>
  </div>

  <!-- 设备 -->
  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList
        title="Lab Device"
        listType="equipment"
        :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
        desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
        href="/equipment"
      />
    </v-container>
  </div>

  <!-- Customized Battery -->
  <div class="tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList
        :title="'Customized Battery'"
        :list="batteries"
        href="/customize"
        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
      />
    </v-container>
  </div>
  <!-- Testing -->
  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList
        title="Testing"
        :list="tests"
        href="/test"
        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
      />
    </v-container>
  </div>
  <!-- Pack -->
  <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
    <v-container>
      <MainTitleList
        title="Pack"
        href="/pack"
        :list="packs"
        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
      />
    </v-container>
  </div>
</template>

<script setup lang="ts">
import MainTitleList from "../components/MainTitleList.vue";
import MainTitleListOdd from "../components/MainTitleListOdd.vue";
import { useCategoryStore } from "../stores/category";
import { computed, onMounted, reactive, ref } from "vue";
import { isMobile } from "../utils";

onMounted(() => {
  console.log(
    "%c [ onMounted ]-10",
    "font-size:13px; background:pink; color:#bf2c9f;",
    111
  );
});
useHead({
  title: "canrud",
  meta: [
    {
      name: "title",
      content:
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
    {
      name: "keywords",
      content:
        "科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack",
    },
    {
      name: "description",
      content:
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
  ],
  link: [{ rel: "preload", href: "/banner/banner1.jpg", as: "image" }],
});

// useAsyncData(async ({ app }) => {
//   console.log('%c [ app ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', app)
//   app.head.title = 'canrud'
//   app.head.meta = [
//     {
//       name: 'description',
//       content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at
//     }]
// })
console.log(11);

const store = useCategoryStore();

const lab = computed(
  () =>
    store?.list?.[3] || {
      categoryDisplayName: "",
      list: [],
    }
);

const banners = [
  "/banner/banner1.jpg",
  "/banner/banner2.jpg",
  "/banner/banner3.jpg",
  "/banner/banner5.jpg",
];

const mobileBanners = [
  "/mobile/banner-index1.png",
  "/mobile/banner-index2.png",
  "/mobile/banner-index3.png",
];

const materials = [
  { name: "Energy materials", imageUrl: "/home/1.jpg", href: "/products" },
  {
    name: "Laboratory consumables",
    imageUrl: "/home/2-Universal-consumables.png",
    href: "/products",
  },
  {
    name: "Low-dimensional materials",
    imageUrl: "/home/3-Low-dimensional-materials.png",
    href: "/products",
  },
];

const tests = [
  {
    name: "Electrochemical performance",
    imageUrl: "/home/8_Electrochemical_performance.svg",
    href: "/test",
  },
  {
    name: "Reliability testing",
    imageUrl: "/home/9 Reliability testing.svg",
    href: "/test",
  },
  {
    name: "Material testing",
    imageUrl: "/home/10 Material testing.svg",
    href: "/test",
  },
  { name: "Calibration", imageUrl: "/home/11 Calibration.svg", href: "/test" },
];
const batteries = [
  {
    name: "Material evaluation",
    imageUrl: "/home/4-Material-evaluation.png",
    href: "/customize",
  },
  {
    name: "R&D foundry",
    imageUrl: "/home/5-R&D-foundry.png",
    href: "/customize",
  },
  {
    name: "Chemical system",
    imageUrl: "/home/6-Chemical-system.png",
    href: "/customize",
  },
  {
    name: "Semi product customization",
    imageUrl: "/home/7-Semi-product-customization.png",
    href: "/customize",
  },
];
const packs = [
  { name: "Power bank", imageUrl: "/home/12-power-bank.png", href: "/pack" },
  {
    name: "Energy storage",
    imageUrl: "/home/13-Energy-storage.png",
    href: "/pack",
  },
  { name: "power tool", imageUrl: "/home/3-powertool.png", href: "/pack" },
  {
    name: "portable energy storage",
    imageUrl: "/home/4-portableenergystorage.png",
    href: "/pack",
  },
];
</script>
<style scoped>
@media screen and (min-width: 1537px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 100px;
    width: 85%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 20px;
    width: 85%;
  }
}
@media screen and (max-width: 1280px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 0px;
    width: 88%;
  }
}

.active {
  background-color: #1086e8;
}

@media screen and (min-width: 1537px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    margin: 10px auto 50px;
    width: 80%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    margin: 10px auto 0px;
    width: 80%;
  }
}
@media screen and (max-width: 1280px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    margin: 10px auto 0px;
    width: 90%;
  }
}
.image-row {
  display: flex;
  height: 305px;
}
@media screen and (min-width: 1537px) {
  .image-row {
    display: flex;
    height: 305px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row {
    display: flex;
    height: 245px;
  }
}
@media screen and (max-width: 1280px) {
  .image-row {
    display: flex;
    height: 220px;
  }
}
@media screen and (min-width: 1537px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 290px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 210px;
  }
}
@media screen and (min-width: 1537px) {
  .image-row img {
    width: 240px;
    height: 240px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row img {
    width: 180px;
    height: 180px;
  }
}

@media screen and (min-width: 1537px) {
  .image-row .image-substitute {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row .image-substitute {
    width: 200px;
    height: 200px;
  }
}

@media screen and (max-width: 1280px) {
  .image-row .image-substitute {
    width: 185px;
    height: 185px;
  }
}
@media screen and (max-width: 1280px) {
  .image-row img {
    width: 160px;
    height: 160px;
    margin-left: 10px;
  }
}
@media screen and (min-width: 1537px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 50px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 10px;
  }
}
@media screen and (max-width: 1280px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 5px;
  }
}
button .recommendButton {
  margin: 0 0px;
  cursor: pointer;
}

.recommend-left-box {
}
@media screen and (min-width: 1537px) {
  .recommend-img-left {
    width: 26px;
    height: 27px;
    margin-right: 20px;
  }
}
@media screen and (min-width: 1537px) {
  .recommend-img-right {
    width: 26px;
    height: 27px;
    margin-left: 20px;
  }
}
.recommend-img-left {
  width: 26px;
  height: 27px;
  margin-right: 30px;
}

.recommend-img-left:hover {
  cursor: pointer;
}
.recommend-right-box {
}

.recommend-img-right {
  width: 26px;
  height: 27px;
  margin-left: 30px;
}

.recommend-img-right:hover {
  cursor: pointer;
}
.image-grid {
  padding: 16px;
}

.v-card {
  transition: all 0.3s ease-in-out;
}
.clamp-text {
  display: -webkit-box; /* 使用弹性盒子 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  -webkit-line-clamp: 3; /* 限制最多显示3行 */
  overflow: hidden; /* 隐藏多余内容 */
  text-overflow: ellipsis; /* 添加省略号 */
  white-space: normal; /* 允许换行 */
  line-height: 1.5em; /* 设置每行的高度 */
  min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
}
</style>