<template> <div class=""> <v-carousel cycle height="450" hide-delimiter-background show-arrows="hover"> <v-carousel-item src="/banner/banner1.jpg" cover> </v-carousel-item> <v-carousel-item src="/banner/banner2.jpg" cover> </v-carousel-item> <v-carousel-item src="/banner/banner3.jpg" cover> </v-carousel-item> <v-carousel-item src="/banner/banner4.png" cover> </v-carousel-item> <!-- <v-carousel-item src="/banner3.jpeg" cover> </v-carousel-item> --> </v-carousel> </div> <!-- 优势 --> <!-- <div class="tw-mb-[64px]"> <MainTitleList :cardNum="3" :title="t('优势')" :list="strengths" desc="Canrd is aimed to be the world's top one-stop service provider in the field of new energy research Dedicated, professional, and quick response/solution" /> </div> --> <!-- 能源材料 --> <div class="tw-py-[64px]"> <v-container> <MainTitleListOdd :title="t('材料试剂')" :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-[64px]"> <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-[64px]"> <v-container> <MainTitleList :title="t('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-[64px]"> <v-container> <MainTitleList :title="t('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="tw-pt-[64px] tw-pb-[128px]"> <v-container> <MainTitleList :title="t('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 { useI18n } from 'vue-i18n' import { computed } from 'vue' const { t } = useI18n() const store = useCategoryStore() const lab = computed( () => store?.list?.[3] || { categoryDisplayName: '', list: [] } ) const materials = [ { name: 'Energy materials', imageUrl: '/home/1.jpg', href: '/products' }, { name: 'Experimental consumables', imageUrl: '/home/2-Universal-consumables.png', href: '/products' }, { name: 'Low-dimensional material', 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: 'low-dimensional materials', imageUrl: '/home/3-powertool.png' }, { name: 'low-dimensional materials', imageUrl: '/home/4-portableenergystorage.png' } ] </script>