<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> <HotProducts /> <!-- 能源材料 --> <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 HotProducts from "../components/HotProducts.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", }, ]; // const hotLength = computed(() => // hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0 // ); </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 { } .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>