<template> <v-container class="mx-auto content"> <v-carousel cycle height="360" hide-delimiter-background show-arrows="hover" class="tw-mb-16"> <v-carousel-item src="/banner1.png" cover> </v-carousel-item> <v-carousel-item src="/banner2.jpeg" cover> </v-carousel-item> <v-carousel-item src="/banner3.jpeg" cover> </v-carousel-item> </v-carousel> <!-- 优势 --> <div class="tw-mb-[64px]"> <HomeProductList :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-mb-[64px]"> <HomeProductList :cardNum="3" :title="t('材料试剂')" :list="materials" desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials" /> </div> <!-- 设备 --> <div class="tw-mb-[64px]"> <HomeProductList :title="t(store.list[3].categoryDisplayName)" :list="store.list[3].list" desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials " /> </div> <!-- Customized Battery --> <div class="tw-mb-[64px]"> <HomeProductList :title="t('Customized Battery')" :list="batteries" desc="200mAh~10Ah, winding/laminating, non liquid filled cell/liquid filled cell/three electrode, etc" /> </div> <!-- Testing --> <div class="tw-mb-[64px]"> <HomeProductList :title="t('Testing')" :list="tests" desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units" /> </div> <!-- Pack --> <div class="tw-mb-[64px]"> <HomeProductList :cardNum="3" :title="t('Pack')" :list="packs" desc="200mAh~10Ah, winding/laminating, non liquid filled cell/liquid filled cell/three electrode, etc" /> </div> </v-container> </template> <script setup lang="ts"> import HomeProductList from '@/components/HomeCategoryList.vue' import { useCategoryStore } from '@/stores/category' import { useI18n } from 'vue-i18n' import { computed } from 'vue' const { t } = useI18n() const store = useCategoryStore() const strengths = [{ name: t('优势1') }, { name: t('优势2') }, { name: t('优势3') }] const materials = [{ name: '能源材料' }, { name: '实验耗材' }, { name: '低维材料' }] const tests = [ { name: 'Electrochemical performance' }, { name: 'Reliability testing' }, { name: 'Material testing' }, { name: 'Calibration' } ] const batteries = [ { name: 'Material evaluation' }, { name: 'R&D foundry' }, { name: 'Chemical system' }, { name: 'Semi product customization' } ] const packs = [ { name: 'Power bank' }, { name: 'Energy storage' }, { name: 'low-dimensional materials' } ] </script> <style lang="scss" scoped> .content { max-width: 1200px; } </style>