Blame view

pages/products/index.vue 22.4 KB
1
<template>
boyang authored
2
  <div class="tw-m-auto tw-pb-[64px]" style="padding-bottom: 0px">
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>
135
136
137
138
139
    </v-container>
  </div>
</template>

<script setup lang="ts">
boyang authored
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";
147
148
149
150
const productStore = useProductListStore();
const categoryStore = useCategoryStore();
const loading = ref(false);
151
const hotLoading = ref(false);
152
const route = useRoute(); // 获取路由信息
boyang authored
153
154
const router = useRouter(); // 获取路由信息
const title = ref("");
155
const keywordTitle = ref("");
boyang authored
156
157
const maxPage = ref(1);
const tabRecom = ref();
158
159
const recommendList = ref({});
const recommendImages = ref({});
boyang authored
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
boyang authored
170
const loadHotProducts = async () => {
171
  const pageSize = 5;
boyang authored
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,
boyang authored
180
181
182
183
184
185
        },
      }),
    {
      server: true, // 仅在服务器端获取数据
    }
  );
186
  hotTotal.value = hotProducts.value.data.total;
boyang authored
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
      }
boyang authored
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;
  });
boyang authored
214
};
215
boyang authored
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();
boyang authored
223
};
224
let intervalId: any;
boyang authored
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();
boyang authored
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
boyang authored
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();
    }
  }
});
boyang authored
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) {
boyang authored
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}`;
  }
boyang authored
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 () => {
375
376
  let params: any = {
    pageNo: productStore.pageNo,
377
378
    pageSize: 20,
  };
379
380
  loading.value = true;
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;
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(); // 取第一个值
  }
394
395
  params.productCategoryId = categoryStore.selectedSubCategory;
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 == ""
      ) {
boyang authored
406
        categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
407
        params.productFunctionId = categoryStore.selectedFuncCategory;
boyang authored
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;
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");
440
441
    await productStore.getList(params);
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
});
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
);
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;
}
boyang authored
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
  }
boyang authored
521
}
522
523
524
/* .tabs {
  border-bottom: 2px solid #1f88e5;
} */
boyang authored
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;
boyang authored
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;
boyang authored
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;
  }
}
boyang authored
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
  }
}
boyang authored
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
  }
}
boyang authored
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 */
boyang authored
615
616
617
618
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
619
    text-align: center; /* Centers the text horizontally */
boyang authored
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 */
boyang authored
630
631
632
633
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
634
    text-align: center; /* Centers the text horizontally */
boyang authored
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;
  }
}
boyang authored
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;
  }
}
boyang authored
669
670
671
672
.recommend-img-left {
  width: 26px;
  height: 27px;
  margin-right: 30px;
673
  margin-bottom: 60px;
boyang authored
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;
boyang authored
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;
  }
}
boyang authored
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行 */
}
759
</style>