Home.vue
4.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
<v-rows class="tw-w-full">
<v-carousel 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>
</v-rows>
<!-- 优势 -->
<!-- <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>