sanmu
authored
about a year ago
1
<template>
2
<div class="tw-m-auto tw-pb-[64px]" style="padding-bottom: 0px">
sanmu
authored
about a year ago
3
4
<CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
<MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<v-container class="">
<div class="tw-text-center tw-mt-[32px]" v-if="loading">
<v-progress-circular
color="blue-lighten-2"
indeterminate
size="64"
class="tw-m-auto"
></v-progress-circular>
</div>
<v-item-group multiple>
<v-row v-if="!loading">
<v-col
v-for="(item, i) in productStore.list"
:key="i"
cols="6"
lg="3"
md="4"
sm="6"
>
<v-hover v-slot="{ isHovering, props }" open-delay="200">
<v-card
26
id="product-card"
27
28
29
30
31
32
:elevation="isHovering ? 16 : 2"
:class="{ 'on-hover': isHovering }"
class="mx-auto"
v-bind="props"
:to="`/products/detail/${item.id}`"
>
33
<v-img :src="item.imgList[0].url" :alt="item.name"> </v-img>
34
35
36
37
<v-card-text
class="tw-text-left font-weight-medium title"
style="height: auto"
>
38
<h3 style="color: red" v-if="item.price">
39
${{ item.price }} - ${{ item.maxPrice }}
40
</h3>
41
<h4 class="item-name">{{ item.name }}</h4>
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
</v-card-text>
</v-card>
</v-hover>
</v-col>
</v-row>
<div
v-if="!productStore.total && !loading"
class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
>
no data
</div>
</v-item-group>
<v-row>
<v-col>
<v-pagination
57
58
59
60
61
62
63
64
:size="isMobile() ? 'small' : 'default'"
v-if="productStore.total"
v-model="productStore.pageNo"
@update:modelValue="productStore.updatePageNo"
:length="length"
rounded="0"
class="tw-float-right tw-mt-[32px]"
total-visible="5"
65
></v-pagination></v-col
66
></v-row>
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<v-tabs
class="tabs2"
ref="tabs2"
v-model="tabRecom"
style="margin-top: 25px; margin-bottom: 20px"
color="white"
bg-color="#eeeeee"
slider-color="blue-lighten-1"
selected-class="active"
v-if="isMobile()"
>
<v-tab :value="1">Best Sellers</v-tab>
<!-- <v-tab :value="3">商品百科</v-tab> -->
</v-tabs>
81
<div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
82
83
84
85
86
87
88
89
<v-progress-circular
color="blue-lighten-2"
indeterminate
size="64"
class="tw-m-auto"
></v-progress-circular>
</div>
<v-item-group multiple v-if="isMobile()">
90
<v-row v-if="!hotLoadingMobile">
91
<v-col
92
v-for="(item, i) in recommendImagesMobile"
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
:key="i"
cols="6"
lg="3"
md="4"
sm="6"
>
<div v-if="item !== null">
<v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
<!-- 设置 eager 属性,确保图片直接加载 -->
<v-img
:src="item[0].url"
:alt="item[0].name"
eager
class="d-block"
/>
<v-card-text class="tw-text-left font-weight-medium title">
109
<h4 class="clamp-text">{{ item[0].name }}</h4>
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
</v-card-text>
</v-card>
</div>
</v-col>
</v-row>
<!-- <div
v-if="!hotTotal"
class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
>
no data
</div> -->
</v-item-group>
<v-row v-if="isMobile()">
<v-col>
<v-pagination
:size="isMobile() ? 'small' : 'default'"
126
127
v-if="hotTotalMobile"
v-model="currentIndexMobile"
128
129
130
131
132
133
134
@update:modelValue="toggleRowMobile"
:length="hotLength"
rounded="0"
class="tw-float-right tw-mt-[32px]"
total-visible="5"
></v-pagination></v-col
></v-row>
sanmu
authored
about a year ago
135
136
137
138
139
</v-container>
</div>
</template>
<script setup lang="ts">
140
import type { ProductImage } from "~/type";
141
142
143
144
145
146
import { isMobile, isEqual } from "~/utils";
import { useProductListStore } from "~/stores/product_list";
import { useCategoryStore } from "~/stores/category";
import CategoryList from "~/components/CategoryList.vue";
import MobileCategoryList from "~/components/MobileCategoryList.vue";
import { watchEffect, computed, ref } from "vue";
sanmu
authored
about a year ago
147
148
149
150
const productStore = useProductListStore();
const categoryStore = useCategoryStore();
const loading = ref(false);
151
const hotLoading = ref(false);
152
const route = useRoute(); // 获取路由信息
153
154
const router = useRouter(); // 获取路由信息
const title = ref("");
155
const keywordTitle = ref("");
156
157
const maxPage = ref(1);
const tabRecom = ref();
158
159
const recommendList = ref({});
const recommendImages = ref({});
160
const currentIndex = ref(1);
161
const hotTotal = ref(10);
162
163
164
165
166
167
168
const isOrNotMobile = ref(isMobile());
const maxPageMobile = ref(1);
const recommendListMobile = ref({});
const recommendImagesMobile = ref({});
const currentIndexMobile = ref(1);
const hotLoadingMobile = ref(false);
const hotTotalMobile = ref(10);
169
170
const loadHotProducts = async () => {
171
const pageSize = 5;
172
173
174
175
176
177
178
let { data: hotProducts } = await useAsyncData(
"hotProducts",
() =>
$fetch("/shop/product/hotProducts", {
method: "GET",
params: {
pageNo: currentIndex.value,
179
pageSize: pageSize,
180
181
182
183
184
185
},
}),
{
server: true, // 仅在服务器端获取数据
}
);
186
hotTotal.value = hotProducts.value.data.total;
187
188
189
recommendList.value = hotProducts.value.data.records;
maxPage.value = hotProducts.value.data.pages;
// recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
190
191
192
193
194
195
196
197
198
199
200
recommendImages.value = Array.from({ length: 5 }).map((_, index) => {
const item = recommendList.value[index];
if (!item) {
return null;
}
// 检查 productimageliststore 是否为字符串格式,如果是,则尝试解析
if (typeof item.productimageliststore === "string") {
try {
item.productimageliststore = JSON.parse(item.productimageliststore);
} catch (error) {
item.productimageliststore = []; // 解析失败时,设置为空数组
201
}
202
}
203
204
205
206
207
208
209
210
211
212
213
const ree = (item.productimageliststore = item?.productimageliststore.map(
(productItem: ProductImage) => ({
...productItem,
// url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
name: item.name,
productUrl: `https://www.canrud.com/products/detail/${item.id}`,
})
));
return ree;
});
214
};
215
216
217
218
219
220
221
const toggleRowLeft = () => {
if (currentIndex.value !== 1) {
currentIndex.value--;
} else if (currentIndex.value == 1) {
currentIndex.value = maxPage.value;
}
222
startTimer();
223
};
224
let intervalId: any;
225
226
227
228
229
230
const toggleRowRight = () => {
if (currentIndex.value < maxPage.value) {
currentIndex.value++;
} else if (currentIndex.value == maxPage.value) {
currentIndex.value = 1;
}
231
startTimer();
232
};
233
234
235
236
237
238
239
240
241
242
243
244
const startTimer = () => {
// 清除已有计时器,防止重复
clearInterval(intervalId);
intervalId = setInterval(() => {
toggleRowRight();
}, 5000); // 每6秒调用一次
};
onMounted(() => {
startTimer();
});
245
const toggleRowMobile = (value: number) => {
246
currentIndexMobile.value = value;
247
};
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
const { width } = useDisplay();
const firstHotIndex = ref(true);
// // 监听屏幕宽度变化
// watch(width, async (newWidth) => {
// console.log(newWidth, "5656widthvalue");
// if (firstHotIndex.value) {
// if (newWidth > 600) {
// await loadHotProducts();
// } else {
// await loadHotProductsMobile();
// }
// }
// });
// // 监听路由变化
// watch(
// () => route.fullPath,
// async () => {
// if (firstHotIndex.value) {
// if (width.value > 600) {
// await loadHotProducts();
// } else {
// await loadHotProductsMobile();
// }
// }
// }
// );
276
277
278
279
280
watch(currentIndex, (newIndex) => {
loadHotProducts(); // Call loadHotProducts when currentIndex changes
});
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
const loadHotProductsMobile = async () => {
hotLoadingMobile.value = true;
let { data: hotProductsMobile } = await useAsyncData(
"hotProducts",
() =>
$fetch("/shop/product/hotProducts", {
method: "GET",
params: {
pageNo: currentIndexMobile.value,
pageSize: 4,
},
}),
{
server: true, // 仅在服务器端获取数据
}
);
hotTotalMobile.value = hotProductsMobile.value.data.total;
recommendListMobile.value = hotProductsMobile.value.data.records;
maxPageMobile.value = hotProductsMobile.value.data.pages;
// recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
recommendImagesMobile.value = Array.from({ length: 4 }).map((_, index) => {
const item = recommendListMobile.value[index];
if (!item) {
return null;
}
// 检查 productimageliststore 是否为字符串格式,如果是,则尝试解析
if (typeof item.productimageliststore === "string") {
try {
item.productimageliststore = JSON.parse(item.productimageliststore);
} catch (error) {
item.productimageliststore = []; // 解析失败时,设置为空数组
}
}
const ree = (item.productimageliststore = item?.productimageliststore.map(
(productItem: ProductImage) => ({
...productItem,
// url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
name: item.name,
productUrl: `https://www.canrud.com/products/detail/${item.id}`,
})
));
return ree;
});
hotLoadingMobile.value = false;
};
watch(currentIndexMobile, (newIndex) => {
loadHotProductsMobile(); // Call loadHotProducts when currentIndex changes
});
watchEffect(async () => {
console.log("Current route:", route.fullPath, "Width:", width.value);
if (firstHotIndex.value) {
if (width.value > 600) {
await loadHotProducts();
} else {
await loadHotProductsMobile();
}
}
});
341
342
343
344
watchEffect(() => {
// 遍历数组
if (router.currentRoute.value.query.categories) {
title.value = `${router.currentRoute.value.query.categories}`;
345
} else if (router.currentRoute.value.query.function) {
346
347
title.value += `,${router.currentRoute.value.query.function}`;
}
348
349
350
if (router.currentRoute.value.query.keyword) {
keywordTitle.value = `${router.currentRoute.value.query.keyword}`;
}
351
});
352
353
useHead({
354
title: title.value || keywordTitle.value,
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
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:
"科路得,助您科研之路势在必得。We offer a wide range of research materials and related equipment, technical services, and battery material performance evaluation in areas such as pouch cells, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries, and sodium-ion batteries.",
},
],
});
373
const firstIndex = ref(0);
374
const loadProducts = async () => {
sanmu
authored
about a year ago
375
376
let params: any = {
pageNo: productStore.pageNo,
377
378
pageSize: 20,
};
sanmu
authored
about a year ago
379
380
loading.value = true;
sanmu
authored
about a year ago
381
if (productStore.keyword && !isEqual(productStore.params, params)) {
382
383
384
385
386
params.keyword = productStore.keyword;
productStore.updateParams(params);
await productStore.getList(params);
loading.value = false;
return;
sanmu
authored
about a year ago
387
}
388
389
390
391
392
393
const categories = ref();
const mainCategory = ref();
if (router.currentRoute.value.query.categories) {
categories.value = router.currentRoute.value.query.categories.split(",");
mainCategory.value = categories.value[0].trim(); // 取第一个值
}
sanmu
authored
about a year ago
394
395
params.productCategoryId = categoryStore.selectedSubCategory;
sanmu
authored
about a year ago
396
397
// productCategoryId: '78b86c6e917841cf9a292234f2805e24',
if (categoryStore.selectedFuncCategory) {
398
params.productFunctionId = categoryStore.selectedFuncCategory;
399
400
401
402
403
404
405
if (firstIndex.value == 1) {
params.productFunctionId = selectedFuncCategoryBak.value;
firstIndex.value += 1;
if (
params.productFunctionId == "" &&
selectedFuncCategoryBak.value == ""
) {
406
categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
407
params.productFunctionId = categoryStore.selectedFuncCategory;
408
// categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
409
410
411
412
413
414
415
416
417
418
419
420
}
console.log(
params.productFunctionId,
selectedFuncCategoryBak.value,
categoryStore.selectedFuncCategory
);
}
// const savedSubCategory = localStorage.getItem("selectedFuncCategory2");
// console.log(savedSubCategory, "5656savedSubCategory");
// localStorage.setItem("selectedFuncCategory3", "2");
} else if (mainCategory.value == "Energy materials") {
params.productCategoryId = categoryStore.selectedSubCategory;
sanmu
authored
about a year ago
421
422
}
423
424
425
426
427
428
429
430
console.log(
// params,
// productStore?.params,
// categoryStore.selectedSubCategory,
// categoryStore.selectedFuncCategory,
window.selectedSubCategory,
window.selectedFuncCategory
);
431
432
433
434
if (
categoryStore.selectedSubCategory &&
!isEqual(productStore.params, params)
) {
435
// console.log(route, "5656route");
436
productStore.updateParams(params);
437
438
439
const categories = ref("Laboratory consumables,Others");
const mainCategory = categories.value[0].trim(); // 取第一个值
// console.log(categoryStore.selectedSubCategory, "5656mobi");
sanmu
authored
about a year ago
440
441
await productStore.getList(params);
sanmu
authored
about a year ago
442
}
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
// if (
// categoryStore.selectedFuncCategory &&
// !isEqual(productStore.params, params)
// ) {
// console.log(
// categoryStore.selectedFuncCategory,
// "5656categoryStore.selectedFuncCategoryss"
// );
// productStore.updateParams(params);
// await productStore.getList(params);
// }
if (firstIndex.value === 0 && categoryStore.selectedFuncCategory) {
// console.log(route, "5656route");
productStore.updateParams(params);
// const categories = ref("Laboratory consumables,Others");
// const mainCategory = categories.value[0].trim(); // 取第一个值
// console.log(categoryStore.selectedFuncCategory, "5656mobi");
await productStore.getList(params);
firstIndex.value = 1;
}
463
464
loading.value = false;
};
465
466
467
const isWindowAssigned = ref(false);
const selectedSubCategoryBak = ref();
const selectedFuncCategoryBak = ref();
468
watchEffect(async () => {
469
470
if (route.query.keyword !== undefined) {
productStore.keyword = route.query.keyword;
471
}
472
473
474
475
476
477
478
479
// console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
if (typeof window !== "undefined" && !isWindowAssigned.value) {
window.selectedSubCategory = categoryStore.selectedSubCategory;
window.selectedFuncCategory = categoryStore.selectedFuncCategory;
selectedSubCategoryBak.value = categoryStore.selectedSubCategory;
selectedFuncCategoryBak.value = categoryStore.selectedFuncCategory;
isWindowAssigned.value = true;
}
480
loadProducts();
481
});
sanmu
authored
about a year ago
482
483
484
const length = computed(() =>
productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
485
);
486
const hotLength = computed(() =>
487
hotTotalMobile.value ? Math.ceil(hotTotalMobile.value / 4) : 0
488
);
sanmu
authored
about a year ago
489
490
491
492
493
494
495
496
497
498
499
</script>
<style scoped>
.title {
height: 60px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
500
501
502
503
504
@media screen and (min-width: 1537px) {
.tabs {
border-bottom: 2px solid #1f88e5;
margin: 10px auto 20px;
505
width: 93%;
506
507
508
509
510
511
}
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
.tabs {
border-bottom: 2px solid #1f88e5;
margin: 10px auto 40px;
512
width: 77%;
513
514
515
516
517
518
}
}
@media screen and (max-width: 1280px) {
.tabs {
border-bottom: 2px solid #1f88e5;
margin: 10px auto 40px;
519
width: 92.5%;
520
}
521
}
522
523
524
/* .tabs {
border-bottom: 2px solid #1f88e5;
} */
525
526
527
528
529
530
531
532
533
534
535
.active {
background-color: #1086e8;
}
@media screen and (min-width: 1537px) {
#image-container {
display: flex;
align-items: center;
justify-content: center;
height: 320px;
536
margin: 10px auto 50px;
537
538
539
540
541
542
543
544
width: 80%;
}
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
#image-container {
display: flex;
align-items: center;
justify-content: center;
545
546
height: 260px;
margin: 10px auto 0px;
547
548
549
550
width: 80%;
padding: 0;
}
}
551
552
553
554
555
@media screen and (max-width: 1280px) {
#image-container {
display: flex;
align-items: center;
justify-content: center;
556
557
height: 260px;
margin: 10px auto 0px;
558
559
560
561
width: 80%;
padding: 0;
}
}
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
.image-row {
display: flex;
height: 245px;
}
@media screen and (min-width: 1537px) {
.imageTotal {
display: inline-block;
margin: 0 5px;
text-align: center;
width: 300px;
}
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
.imageTotal {
display: inline-block;
margin: 0 5px;
text-align: center;
width: 200px;
}
}
582
583
584
585
586
@media screen and (max-width: 1280px) {
.imageTotal {
display: inline-block;
margin: 0 5px;
text-align: center;
587
width: 200px;
588
589
}
}
590
591
592
593
594
595
596
597
598
599
600
601
@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: 140px;
height: 140px;
}
}
602
603
@media screen and (max-width: 1280px) {
.image-row img {
604
605
width: 120px;
height: 120px;
606
607
}
}
608
609
@media screen and (min-width: 1537px) {
.image-name {
610
611
612
613
614
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 */
615
616
617
618
margin-top: 5px;
font-size: 16px;
width: 180px;
color: #555;
619
text-align: center; /* Centers the text horizontally */
620
621
622
623
624
margin-left: 50px;
}
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
.image-name {
625
626
627
628
629
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 */
630
631
632
633
margin-top: 5px;
font-size: 16px;
width: 180px;
color: #555;
634
text-align: center; /* Centers the text horizontally */
635
636
637
margin-left: 10px;
}
}
638
639
@media screen and (max-width: 1280px) {
.image-name {
640
641
642
643
644
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 */
645
646
647
648
margin-top: 5px;
font-size: 16px;
width: 180px;
color: #555;
649
text-align: center; /* Centers the text horizontally */
650
651
652
margin-left: 10px;
}
}
653
654
655
656
657
658
659
660
661
button .recommendButton {
margin: 0 0px;
cursor: pointer;
}
.recommend-left-box {
}
662
663
664
665
666
667
668
@media screen and (max-width: 1280px) {
.recommend-img-left {
width: 26px;
height: 27px;
margin-bottom: 60px;
}
}
669
670
671
672
.recommend-img-left {
width: 26px;
height: 27px;
margin-right: 30px;
673
margin-bottom: 60px;
674
675
676
677
678
679
680
681
682
683
684
685
}
.recommend-img-left:hover {
cursor: pointer;
}
.recommend-right-box {
}
.recommend-img-right {
width: 26px;
height: 27px;
margin-left: 30px;
686
margin-bottom: 60px;
687
}
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
@media screen and (max-width: 1536px) and (min-width: 1281px) {
.recommend-img-left {
width: 26px;
height: 27px;
margin-right: 30px;
margin-bottom: 60px;
}
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
.recommend-img-right {
width: 26px;
height: 27px;
margin-left: 30px;
margin-bottom: 60px;
}
}
@media screen and (min-width: 1600px) {
.recommend-img-left {
width: 26px;
height: 27px;
margin-right: 70px;
margin-bottom: 60px;
}
}
@media screen and (min-width: 1600px) {
.recommend-img-right {
width: 26px;
height: 27px;
margin-left: 70px;
margin-bottom: 60px;
}
}
720
721
722
723
.recommend-img-right:hover {
cursor: pointer;
}
724
725
726
727
.v-card {
transition: all 0.3s ease-in-out;
}
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
.v-card-text {
max-width: 100%; /* 确保文字宽度受限 */
}
.item-name {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
text-align: left;
line-height: 1.5em;
min-height: calc(3 * 1.5em); /* 强制未满三行时高度一致 */
}
#product-card .v-responsive.v-img {
width: 274px !important; /* 设置宽度 */
height: 274px !important; /* 设置高度 */
}
.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行 */
}
sanmu
authored
about a year ago
759
</style>