sanmu
authored
about a year ago
1
2
<template>
<v-rows class="tw-w-full">
3
4
5
6
7
8
9
10
11
12
13
14
15
<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"
>
sanmu
authored
about a year ago
16
17
</v-carousel-item>
</v-carousel>
18
19
20
21
22
23
24
25
26
27
28
29
30
<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"
>
sanmu
authored
about a year ago
31
32
33
</v-carousel-item>
</v-carousel>
</v-rows>
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
<!-- 能源材料 -->
<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>
sanmu
authored
about a year ago
91
92
93
</template>
<script setup lang="ts">
94
95
96
97
98
99
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";
sanmu
authored
10 months ago
100
onMounted(() => {
101
102
103
104
105
106
console.log(
"%c [ onMounted ]-10",
"font-size:13px; background:pink; color:#bf2c9f;",
111
);
});
sanmu
authored
about a year ago
107
useHead({
108
title: "canrud",
sanmu
authored
about a year ago
109
110
meta: [
{
111
name: "title",
sanmu
authored
about a year ago
112
content:
113
114
115
116
117
118
119
120
"科路得,助您科研之路势在必得。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",
},
{
sanmu
authored
10 months ago
121
name: "description",
sanmu
authored
about a year ago
122
content:
123
124
125
126
127
"科路得,助您科研之路势在必得。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" }],
});
sanmu
authored
about a year ago
128
129
130
131
132
133
134
// 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',
135
// 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
sanmu
authored
about a year ago
136
137
// }]
// })
138
console.log(11);
sanmu
authored
about a year ago
139
140
const store = useCategoryStore();
sanmu
authored
about a year ago
141
142
143
144
const lab = computed(
() =>
store?.list?.[3] || {
145
146
categoryDisplayName: "",
list: [],
sanmu
authored
about a year ago
147
}
148
);
sanmu
authored
about a year ago
149
150
const banners = [
151
152
153
154
155
"/banner/banner1.jpg",
"/banner/banner2.jpg",
"/banner/banner3.jpg",
"/banner/banner5.jpg",
];
sanmu
authored
about a year ago
156
157
const mobileBanners = [
158
159
160
161
"/mobile/banner-index1.png",
"/mobile/banner-index2.png",
"/mobile/banner-index3.png",
];
sanmu
authored
about a year ago
162
163
const materials = [
164
{ name: "Energy materials", imageUrl: "/home/1.jpg", href: "/products" },
sanmu
authored
about a year ago
165
{
166
167
168
name: "Laboratory consumables",
imageUrl: "/home/2-Universal-consumables.png",
href: "/products",
sanmu
authored
about a year ago
169
170
},
{
171
172
173
174
175
name: "Low-dimensional materials",
imageUrl: "/home/3-Low-dimensional-materials.png",
href: "/products",
},
];
sanmu
authored
about a year ago
176
177
178
const tests = [
{
179
180
181
182
183
184
185
186
name: "Electrochemical performance",
imageUrl: "/home/8_Electrochemical_performance.svg",
href: "/test",
},
{
name: "Reliability testing",
imageUrl: "/home/9 Reliability testing.svg",
href: "/test",
sanmu
authored
about a year ago
187
},
188
189
190
191
192
193
194
{
name: "Material testing",
imageUrl: "/home/10 Material testing.svg",
href: "/test",
},
{ name: "Calibration", imageUrl: "/home/11 Calibration.svg", href: "/test" },
];
sanmu
authored
about a year ago
195
196
const batteries = [
{
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
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",
},
];
sanmu
authored
about a year ago
217
const packs = [
218
{ name: "Power bank", imageUrl: "/home/12-power-bank.png", href: "/pack" },
sanmu
authored
about a year ago
219
{
220
221
222
223
224
225
226
227
228
229
230
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",
},
];
sanmu
authored
about a year ago
231
</script>
232
233
234
235
236
237
238
239
240
241
242
243
<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;
244
width: 85%;
245
246
}
}
247
248
249
250
@media screen and (max-width: 1280px) {
.tabs {
border-bottom: 2px solid #1f88e5;
margin: 10px auto 0px;
251
width: 88%;
252
253
}
}
254
255
256
257
258
259
260
261
262
263
264
.active {
background-color: #1086e8;
}
@media screen and (min-width: 1537px) {
#image-container {
display: flex;
align-items: center;
justify-content: center;
height: 320px;
265
margin: 10px auto 50px;
266
267
268
269
270
271
272
273
width: 80%;
}
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
#image-container {
display: flex;
align-items: center;
justify-content: center;
274
height: 240px;
275
276
277
278
margin: 10px auto 0px;
width: 80%;
}
}
279
280
281
282
283
284
@media screen and (max-width: 1280px) {
#image-container {
display: flex;
align-items: center;
justify-content: center;
height: 260px;
285
margin: 10px auto 0px;
286
287
288
width: 90%;
}
}
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
.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;
}
}
305
306
307
308
309
310
@media screen and (max-width: 1280px) {
.image-row {
display: flex;
height: 220px;
}
}
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
@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 {
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
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;
357
358
}
}
359
360
361
362
363
364
365
@media screen and (max-width: 1280px) {
.image-row img {
width: 160px;
height: 160px;
margin-left: 10px;
}
}
366
367
@media screen and (min-width: 1537px) {
.image-name {
368
369
370
371
372
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 */
373
374
375
376
margin-top: 5px;
font-size: 16px;
width: 180px;
color: #555;
377
text-align: center; /* Centers the text horizontally */
378
379
380
381
382
margin-left: 50px;
}
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
.image-name {
383
384
385
386
387
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 */
388
389
390
391
margin-top: 5px;
font-size: 16px;
width: 180px;
color: #555;
392
text-align: center; /* Centers the text horizontally */
393
394
395
margin-left: 10px;
}
}
396
397
@media screen and (max-width: 1280px) {
.image-name {
398
399
400
401
402
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 */
403
404
405
406
margin-top: 5px;
font-size: 16px;
width: 180px;
color: #555;
407
text-align: center; /* Centers the text horizontally */
408
409
410
margin-left: 5px;
}
}
411
412
413
414
415
416
417
button .recommendButton {
margin: 0 0px;
cursor: pointer;
}
.recommend-left-box {
}
418
419
420
421
422
423
424
425
426
427
428
429
430
431
@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;
}
}
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
.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;
}
453
454
455
456
457
458
459
.image-grid {
padding: 16px;
}
.v-card {
transition: all 0.3s ease-in-out;
}
460
461
462
463
464
465
466
467
468
469
.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行 */
}
470
</style>