canrd-main / canrud-nuxt-front · Commits

Commit 7ca465a9fef3f606ac322bb5ac5d4af5b9ebe6c5

Authored by boyang
1 parent 741479b9
build: skipped

fix: 只有商品详情页保留推荐商品，prod2-58/59

Inline Side-by-side
Showing 7 changed files with 9 additions and 804 deletions
components/CategoryList.vue
  View file @7ca465a
... ... @@ -70,63 +70,6 @@
70 70 </v-col>
71 71 </v-row>
72 72 </div>
73   - <v-tabs
74   - class="tabs"
75   - v-model="tabRecom"
76   - style="margin-top: 25px"
77   - color="white"
78   - bg-color="#eeeeee"
79   - slider-color="blue-lighten-1"
80   - selected-class="active"
81   - v-if="recommendImages[0] !== null && !isMobile()"
82   - >
83   - <v-tab :value="1">Best Sellers</v-tab>
84   - <!-- <v-tab :value="3">商品百科</v-tab> -->
85   - </v-tabs>
86   - <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
87   - <div class="recommend-left-box">
88   - <v-img
89   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
90   - alt="往左移"
91   - class="recommend-img-left"
92   - @click="toggleRowLeft"
93   - />
94   - </div>
95   - <div class="image-row" id="row1">
96   - <!-- <img
97   - v-for="(imageObj, index) in recommendImages.slice(0, 5)"
98   - :key="'row1-' + index"
99   - :src="imageObj[0]?.url"
100   - :alt="'Image ' + (index + 1)"
101   - style="margin: 0 5px; width: 200px; height: 200px"
102   - /> -->
103   - <div
104   - v-for="(imageObj, index) in recommendImages"
105   - :key="'row1-' + index"
106   - class="imageTotal"
107   - >
108   - <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
109   - <img
110   - :src="imageObj[0]?.url"
111   - :alt="'Image ' + (index + 1)"
112   - class="item-imgHot"
113   - />
114   - <span class="image-name">
115   - {{ imageObj[0]?.name }}
116   - </span>
117   - </a>
118   - <div v-else style="width: 200px; height: 200px"></div>
119   - </div>
120   - </div>
121   - <div class="recommend-right-box">
122   - <v-img
123   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
124   - alt="往右移"
125   - class="recommend-img-right"
126   - @click="toggleRowRight"
127   - />
128   - </div>
129   - </div>
130 73 </v-container>
131 74 </template>
132 75  
... ...
components/HotProducts.vue deleted 100644 → 0
  View file @741479b
1   -<template>
2   - <v-tabs
3   - class="tabs"
4   - v-model="tabRecom"
5   - color="white"
6   - bg-color="#eeeeee"
7   - style="margin-top: 40px"
8   - slider-color="blue-lighten-1"
9   - selected-class="active"
10   - v-if="recommendImages[0] !== null && !isMobile()"
11   - >
12   - <v-tab :value="1">Best Sellers</v-tab>
13   - <!-- <v-tab :value="3">商品百科</v-tab> -->
14   - </v-tabs>
15   - <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
16   - <div class="recommend-left-box">
17   - <v-img
18   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
19   - alt="往左移"
20   - class="recommend-img-left"
21   - @click="toggleRowLeft"
22   - />
23   - </div>
24   - <div class="image-row" id="row1">
25   - <!-- <img
26   - v-for="(imageObj, index) in recommendImages.slice(0, 5)"
27   - :key="'row1-' + index"
28   - :src="imageObj[0]?.url"
29   - :alt="'Image ' + (index + 1)"
30   - style="margin: 0 5px; width: 200px; height: 200px"
31   - /> -->
32   - <div
33   - v-for="(imageObj, index) in recommendImages"
34   - :key="'row1-' + index"
35   - class="imageTotal"
36   - >
37   - <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
38   - <img
39   - :src="imageObj[0]?.url"
40   - :alt="'Image ' + (index + 1)"
41   - class="item-imgHot"
42   - />
43   - <span class="image-name">
44   - {{ imageObj[0]?.name }}
45   - </span>
46   - </a>
47   - <div v-else class="image-substitute"></div>
48   - </div>
49   - </div>
50   - <div class="recommend-right-box">
51   - <v-img
52   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
53   - alt="往右移"
54   - class="recommend-img-right"
55   - @click="toggleRowRight"
56   - />
57   - </div>
58   - </div>
59   - <div style="padding-left: 16px; padding-right: 16px">
60   - <v-tabs
61   - class="tabs2"
62   - ref="tabs2"
63   - v-model="tabRecom"
64   - style="margin-top: 25px; margin-bottom: 20px; width: 100%"
65   - color="white"
66   - bg-color="#eeeeee"
67   - slider-color="blue-lighten-1"
68   - selected-class="active"
69   - v-if="isMobile()"
70   - >
71   - <v-tab :value="1">Best Sellers</v-tab>
72   - <!-- <v-tab :value="3">商品百科</v-tab> -->
73   - </v-tabs>
74   - <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
75   - <v-progress-circular
76   - color="blue-lighten-2"
77   - indeterminate
78   - size="64"
79   - class="tw-m-auto"
80   - ></v-progress-circular>
81   - </div>
82   - <v-item-group multiple v-if="isMobile()">
83   - <v-row v-if="!hotLoadingMobile">
84   - <v-col
85   - v-for="(item, i) in recommendImagesMobile"
86   - :key="i"
87   - cols="6"
88   - lg="3"
89   - md="4"
90   - sm="6"
91   - >
92   - <div v-if="item !== null">
93   - <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
94   - <v-img
95   - :src="item[0].url"
96   - :alt="item[0].name"
97   - eager
98   - class="d-block"
99   - />
100   - <v-card-text class="tw-text-left font-weight-medium title">
101   - <h4 class="clamp-text">{{ item[0].name }}</h4>
102   - </v-card-text>
103   - </v-card>
104   - </div>
105   - </v-col>
106   - </v-row>
107   - </v-item-group>
108   - <v-row v-if="isMobile()">
109   - <v-col>
110   - <v-pagination
111   - :size="isMobile() ? 'small' : 'default'"
112   - v-if="hotTotalMobile"
113   - v-model="currentIndexMobile"
114   - @update:modelValue="toggleRowMobile"
115   - :length="hotLength"
116   - rounded="0"
117   - class="tw-float-right tw-mt-[32px]"
118   - total-visible="5"
119   - ></v-pagination></v-col
120   - ></v-row>
121   - </div>
122   -</template>
123   -
124   -<script setup lang="ts">
125   -import { computed, onMounted, reactive, ref } from "vue";
126   -import { isMobile } from "../utils";
127   -import { useRoute } from "vue-router";
128   -
129   -const route = useRoute(); // 获取路由信息
130   -const maxPage = ref(1);
131   -const maxPageMobile = ref(1);
132   -const tabRecom = ref();
133   -const recommendList = ref({});
134   -const recommendImages = ref({});
135   -const currentIndex = ref(1);
136   -const hotLoading = ref(false);
137   -const hotTotal = ref(10);
138   -const isOrNotMobile = isMobile();
139   -const recommendListMobile = ref({});
140   -const recommendImagesMobile = ref({});
141   -const currentIndexMobile = ref(1);
142   -const hotLoadingMobile = ref(false);
143   -const hotTotalMobile = ref(10);
144   -const loadHotProducts = async () => {
145   - hotLoading.value = true;
146   - let { data: hotProducts } = await useAsyncData(
147   - "hotProducts",
148   - () =>
149   - $fetch("/shop/product/hotProducts", {
150   - method: "GET",
151   - params: {
152   - pageNo: currentIndex.value,
153   - pageSize: 5,
154   - },
155   - }),
156   - {
157   - server: true, // 仅在服务器端获取数据
158   - }
159   - );
160   - hotTotal.value = hotProducts.value.data.total;
161   - recommendList.value = hotProducts.value.data.records;
162   - maxPage.value = hotProducts.value.data.pages;
163   - // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
164   - recommendImages.value = Array.from({ length: 5 }).map((_, index) => {
165   - const item = recommendList.value[index];
166   - if (!item) {
167   - return null;
168   - }
169   - // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
170   - if (typeof item.productimageliststore === "string") {
171   - try {
172   - item.productimageliststore = JSON.parse(item.productimageliststore);
173   - } catch (error) {
174   - item.productimageliststore = []; // 解析失败时，设置为空数组
175   - }
176   - }
177   - const ree = (item.productimageliststore = item?.productimageliststore.map(
178   - (productItem: ProductImage) => ({
179   - ...productItem,
180   - // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
181   - url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
182   - name: item.name,
183   - productUrl: `https://www.canrud.com/products/detail/${item.id}`,
184   - })
185   - ));
186   - return ree;
187   - });
188   - hotLoading.value = false;
189   -};
190   -
191   -const toggleRowLeft = () => {
192   - if (currentIndex.value !== 1) {
193   - currentIndex.value--;
194   - } else if (currentIndex.value == 1) {
195   - currentIndex.value = maxPage.value;
196   - }
197   - startTimer();
198   -};
199   -let intervalId: any;
200   -const toggleRowRight = () => {
201   - if (currentIndex.value < maxPage.value) {
202   - currentIndex.value++;
203   - } else if (currentIndex.value == maxPage.value) {
204   - currentIndex.value = 1;
205   - }
206   - startTimer();
207   -};
208   -const startTimer = () => {
209   - // 清除已有计时器，防止重复
210   - clearInterval(intervalId);
211   - intervalId = setInterval(() => {
212   - toggleRowRight();
213   - }, 5000); // 每6秒调用一次
214   -};
215   -
216   -onMounted(() => {
217   - startTimer();
218   -});
219   -
220   -const toggleRowMobile = (value: number) => {
221   - currentIndexMobile.value = value;
222   -};
223   -const { width } = useDisplay();
224   -const firstIndex = ref(true);
225   -watch(currentIndex, (newIndex) => {
226   - loadHotProducts(); // Call loadHotProducts when currentIndex changes
227   -});
228   -
229   -const loadHotProductsMobile = async () => {
230   - hotLoadingMobile.value = true;
231   - let { data: hotProductsMobile } = await useAsyncData(
232   - "hotProducts",
233   - () =>
234   - $fetch("/shop/product/hotProducts", {
235   - method: "GET",
236   - params: {
237   - pageNo: currentIndexMobile.value,
238   - pageSize: 4,
239   - },
240   - }),
241   - {
242   - server: true, // 仅在服务器端获取数据
243   - }
244   - );
245   - hotTotalMobile.value = hotProductsMobile.value.data.total;
246   - recommendListMobile.value = hotProductsMobile.value.data.records;
247   - maxPageMobile.value = hotProductsMobile.value.data.pages;
248   - // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
249   - recommendImagesMobile.value = Array.from({ length: 4 }).map((_, index) => {
250   - const item = recommendListMobile.value[index];
251   - if (!item) {
252   - return null;
253   - }
254   - // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
255   - if (typeof item.productimageliststore === "string") {
256   - try {
257   - item.productimageliststore = JSON.parse(item.productimageliststore);
258   - } catch (error) {
259   - item.productimageliststore = []; // 解析失败时，设置为空数组
260   - }
261   - }
262   - const ree = (item.productimageliststore = item?.productimageliststore.map(
263   - (productItem: ProductImage) => ({
264   - ...productItem,
265   - // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
266   - url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
267   - name: item.name,
268   - productUrl: `https://www.canrud.com/products/detail/${item.id}`,
269   - })
270   - ));
271   - return ree;
272   - });
273   - hotLoadingMobile.value = false;
274   -};
275   -watch(currentIndexMobile, (newIndex) => {
276   - loadHotProductsMobile(); // Call loadHotProducts when currentIndex changes
277   -});
278   -watchEffect(async () => {
279   - console.log("Current route:", route.fullPath, "Width:", width.value);
280   -
281   - if (firstIndex.value) {
282   - if (width.value > 600) {
283   - await loadHotProducts();
284   - } else {
285   - await loadHotProductsMobile();
286   - }
287   - }
288   -});
289   -// Initial load of hot products
290   -const hotLength = computed(() =>
291   - hotTotalMobile.value ? Math.ceil(hotTotalMobile.value / 4) : 0
292   -);
293   -</script>
294   -
295   -<style lang="scss" scoped>
296   -@media screen and (min-width: 1537px) {
297   - .tabs {
298   - border-bottom: 2px solid #1f88e5;
299   - margin: 10px auto 100px;
300   - width: 93%;
301   - }
302   -}
303   -@media screen and (max-width: 1536px) and (min-width: 1281px) {
304   - .tabs {
305   - border-bottom: 2px solid #1f88e5;
306   - margin: 10px auto 20px;
307   - width: 82%;
308   - }
309   -}
310   -@media screen and (max-width: 1280px) {
311   - .tabs {
312   - border-bottom: 2px solid #1f88e5;
313   - margin: 10px auto 0px;
314   - width: 88%;
315   - }
316   -}
317   -
318   -.active {
319   - background-color: #1086e8;
320   -}
321   -
322   -/* #image-container {
323   - display: flex;
324   - align-items: center;
325   - justify-content: center;
326   - height: 320px;
327   - margin: 10px auto 50px;
328   - width: 80%;
329   -} */
330   -
331   -@media screen and (min-width: 1537px) {
332   - #image-container {
333   - display: flex;
334   - align-items: center;
335   - justify-content: center;
336   - height: 320px;
337   - margin: 10px auto 50px;
338   - width: 96%;
339   - }
340   -}
341   -@media screen and (max-width: 1536px) and (min-width: 1281px) {
342   - #image-container {
343   - display: flex;
344   - align-items: center;
345   - justify-content: center;
346   - height: 240px;
347   - margin: 10px auto 0px;
348   - width: 80%;
349   - }
350   -}
351   -@media screen and (max-width: 1280px) {
352   - #image-container {
353   - display: flex;
354   - align-items: center;
355   - justify-content: center;
356   - height: 260px;
357   - margin: 10px auto 0px;
358   - width: 90%;
359   - }
360   -}
361   -.image-row {
362   - display: flex;
363   - height: 305px;
364   -}
365   -@media screen and (min-width: 1537px) {
366   - .image-row {
367   - display: flex;
368   - height: 305px;
369   - }
370   -}
371   -@media screen and (max-width: 1536px) and (min-width: 1281px) {
372   - .image-row {
373   - display: flex;
374   - height: 245px;
375   - }
376   -}
377   -@media screen and (max-width: 1280px) {
378   - .image-row {
379   - display: flex;
380   - height: 220px;
381   - }
382   -}
383   -@media screen and (min-width: 1537px) {
384   - .imageTotal {
385   - display: inline-block;
386   - margin: 0 5px;
387   - text-align: center;
388   - width: 315px;
389   - }
390   -}
391   -@media screen and (max-width: 1536px) and (min-width: 1281px) {
392   - .imageTotal {
393   - display: inline-block;
394   - margin: 0 5px;
395   - text-align: center;
396   - width: 210px;
397   - }
398   -}
399   -@media screen and (max-width: 1280px) {
400   - .imageTotal {
401   - display: inline-block;
402   - margin: 0 5px;
403   - text-align: center;
404   - width: 185px;
405   - }
406   -}
407   -@media screen and (min-width: 1537px) {
408   - .image-row img {
409   - width: 240px;
410   - height: 240px;
411   - }
412   -}
413   -@media screen and (max-width: 1536px) and (min-width: 1281px) {
414   - .image-row img {
415   - width: 180px;
416   - height: 180px;
417   - }
418   -}
419   -
420   -@media screen and (min-width: 1537px) {
421   - .image-row .image-substitute {
422   - width: 200px;
423   - height: 200px;
424   - }
425   -}
426   -@media screen and (max-width: 1536px) and (min-width: 1281px) {
427   - .image-row .image-substitute {
428   - width: 200px;
429   - height: 200px;
430   - }
431   -}
432   -
433   -@media screen and (max-width: 1280px) {
434   - .image-row .image-substitute {
435   - width: 185px;
436   - height: 185px;
437   - }
438   -}
439   -@media screen and (max-width: 1280px) {
440   - .image-row img {
441   - width: 160px;
442   - height: 160px;
443   - margin-left: 10px;
444   - }
445   -}
446   -@media screen and (min-width: 1537px) {
447   - .image-name {
448   - display: -webkit-box; /* Enables multi-line text handling */
449   - -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
450   - -webkit-line-clamp: 3; /* Limits the text to 3 lines */
451   - overflow: hidden; /* Hides the overflowed text */
452   - text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
453   - margin-top: 5px;
454   - font-size: 16px;
455   - width: 180px;
456   - color: #555;
457   - text-align: center; /* Centers the text horizontally */
458   - margin-left: 50px;
459   - }
460   -}
461   -@media screen and (max-width: 1536px) and (min-width: 1281px) {
462   - .image-name {
463   - display: -webkit-box; /* Enables multi-line text handling */
464   - -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
465   - -webkit-line-clamp: 3; /* Limits the text to 3 lines */
466   - overflow: hidden; /* Hides the overflowed text */
467   - text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
468   - margin-top: 5px;
469   - font-size: 16px;
470   - width: 180px;
471   - color: #555;
472   - text-align: center; /* Centers the text horizontally */
473   - margin-left: 10px;
474   - }
475   -}
476   -@media screen and (max-width: 1280px) {
477   - .image-name {
478   - display: -webkit-box; /* Enables multi-line text handling */
479   - -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
480   - -webkit-line-clamp: 3; /* Limits the text to 3 lines */
481   - overflow: hidden; /* Hides the overflowed text */
482   - text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
483   - margin-top: 5px;
484   - font-size: 16px;
485   - width: 180px;
486   - color: #555;
487   - text-align: center; /* Centers the text horizontally */
488   - margin-left: 5px;
489   - }
490   -}
491   -button .recommendButton {
492   - margin: 0 0px;
493   - cursor: pointer;
494   -}
495   -
496   -.recommend-left-box {
497   -}
498   -
499   -.recommend-img-left {
500   - width: 26px;
501   - height: 27px;
502   - margin-right: 40px;
503   -}
504   -
505   -.recommend-img-left:hover {
506   - cursor: pointer;
507   -}
508   -.recommend-right-box {
509   -}
510   -
511   -.recommend-img-right {
512   - width: 26px;
513   - height: 27px;
514   - margin-left: 40px;
515   -}
516   -
517   -.recommend-img-right:hover {
518   - cursor: pointer;
519   -}
520   -.image-grid {
521   - padding: 16px;
522   -}
523   -
524   -.v-card {
525   - transition: all 0.3s ease-in-out;
526   -}
527   -.clamp-text {
528   - display: -webkit-box; /* 使用弹性盒子 */
529   - -webkit-box-orient: vertical; /* 设置为垂直方向 */
530   - -webkit-line-clamp: 3; /* 限制最多显示3行 */
531   - overflow: hidden; /* 隐藏多余内容 */
532   - text-overflow: ellipsis; /* 添加省略号 */
533   - white-space: normal; /* 允许换行 */
534   - line-height: 1.5em; /* 设置每行的高度 */
535   - min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
536   -}
537   -</style>
deploy/prod2.sh
  View file @7ca465a
1 1 #!/bin/bash
2 2 # 变量定义
3   -LAST_TAG="1.0.57"
4   -TAG="1.0.58"
  3 +LAST_TAG="1.0.58"
  4 +TAG="1.0.59"
5 5 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
6 6 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
7 7 IMAGE_NAME="canrud-outside-front"
... ...
pages/about.vue
  View file @7ca465a
1 1 <template>
2   - <HotProducts />
3   -
4 2 <v-container class="pa-0 pa-sm-4">
5 3 <div
6 4 class="my-8 my-sm-16 text-blue-darken-1 text-h4 tw-text-center"
... ... @@ -465,7 +463,6 @@
465 463  
466 464 <script setup lang="ts">
467 465 import MainTitle from "../components/MainTitle.vue";
468   -import HotProducts from "../components/HotProducts.vue";
469 466 import { isMobile } from "../utils";
470 467  
471 468 useHead({
... ...
pages/contact.vue
  View file @7ca465a
... ... @@ -34,7 +34,7 @@
34 34 <div class="tw-w-[300px]">
35 35 <v-img src="/wechat.jpg" alt="canrud-wechat"></v-img>
36 36 </div>
37   - <div style="display: flex; gap: 16px; align-items: center">
  37 + <div :class="isMobile() ? 'mobileIcon' : 'icon'">
38 38 <span class="text-h5 tw-mb-5 tw-mt-5">Other Platforms</span>
39 39 <span class="tw-mt-2">
40 40 <a
... ... @@ -236,134 +236,7 @@
236 236 >
237 237 Failed to send!
238 238 </v-snackbar>
239   - <div style="margin-bottom: 10px">
240   - <v-tabs
241   - class="tabs2"
242   - ref="tabs2"
243   - v-model="tabRecom"
244   - style="margin-top: 25px; margin-bottom: 20px"
245   - color="white"
246   - bg-color="#eeeeee"
247   - slider-color="blue-lighten-1"
248   - selected-class="active"
249   - v-if="isMobile()"
250   - >
251   - <v-tab :value="1">Best Sellers</v-tab>
252   - <!-- <v-tab :value="3">商品百科</v-tab> -->
253   - </v-tabs>
254   - <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
255   - <v-progress-circular
256   - color="blue-lighten-2"
257   - indeterminate
258   - size="64"
259   - class="tw-m-auto"
260   - ></v-progress-circular>
261   - </div>
262   - <v-item-group multiple v-if="isMobile()">
263   - <v-row v-if="!hotLoadingMobile">
264   - <v-col
265   - v-for="(item, i) in recommendImagesMobile"
266   - :key="i"
267   - cols="6"
268   - lg="3"
269   - md="4"
270   - sm="6"
271   - >
272   - <div v-if="item !== null">
273   - <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
274   - <!-- 设置 eager 属性，确保图片直接加载 -->
275   - <v-img
276   - :src="item[0].url"
277   - :alt="item[0].name"
278   - eager
279   - class="d-block"
280   - />
281   - <v-card-text class="tw-text-left font-weight-medium title">
282   - <h4 class="clamp-text">{{ item[0].name }}</h4>
283   - </v-card-text>
284   - </v-card>
285   - </div>
286   - </v-col>
287   - </v-row>
288   - <!-- <div
289   - v-if="!hotTotal"
290   - class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
291   - >
292   - no data
293   - </div> -->
294   - </v-item-group>
295   - <v-row v-if="isMobile()">
296   - <v-col>
297   - <v-pagination
298   - :size="isMobile() ? 'small' : 'default'"
299   - v-if="hotTotalMobile"
300   - v-model="currentIndexMobile"
301   - @update:modelValue="toggleRowMobile"
302   - :length="hotLength"
303   - rounded="0"
304   - class="tw-float-right tw-mt-[32px]"
305   - total-visible="5"
306   - ></v-pagination></v-col
307   - ></v-row>
308   - </div>
309 239 </v-card>
310   - <v-tabs
311   - class="tabs"
312   - v-model="tabRecom"
313   - style="margin-top: 25px"
314   - color="white"
315   - bg-color="#eeeeee"
316   - slider-color="blue-lighten-1"
317   - selected-class="active"
318   - v-if="recommendImages[0] !== null && !isMobile()"
319   - >
320   - <v-tab :value="1">Best Sellers</v-tab>
321   - <!-- <v-tab :value="3">商品百科</v-tab> -->
322   - </v-tabs>
323   - <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
324   - <div class="recommend-left-box">
325   - <v-img
326   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
327   - alt="往左移"
328   - class="recommend-img-left"
329   - @click="toggleRowLeft"
330   - />
331   - </div>
332   - <div class="image-row" id="row1">
333   - <!-- <img
334   - v-for="(imageObj, index) in recommendImages.slice(0, 5)"
335   - :key="'row1-' + index"
336   - :src="imageObj[0]?.url"
337   - :alt="'Image ' + (index + 1)"
338   - style="margin: 0 5px; width: 200px; height: 200px"
339   - /> -->
340   - <div
341   - v-for="(imageObj, index) in recommendImages"
342   - :key="'row1-' + index"
343   - class="imageTotal"
344   - >
345   - <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
346   - <img
347   - :src="imageObj[0]?.url"
348   - :alt="'Image ' + (index + 1)"
349   - class="item-imgHot"
350   - />
351   - <span class="image-name">
352   - {{ imageObj[0]?.name }}
353   - </span>
354   - </a>
355   - <div v-else style="width: 200px; height: 200px"></div>
356   - </div>
357   - </div>
358   - <div class="recommend-right-box">
359   - <v-img
360   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
361   - alt="往右移"
362   - class="recommend-img-right"
363   - @click="toggleRowRight"
364   - />
365   - </div>
366   - </div>
367 240 </template>
368 241  
369 242 <script setup lang="ts">
... ... @@ -663,9 +536,6 @@ watchEffect(async () =&gt; {
663 536 useHead({
664 537 title: "Contact",
665 538 });
666   -const hotLength = computed(() =>
667   - hotTotalMobile.value ? Math.ceil(hotTotalMobile.value / 4) : 0
668   -);
669 539 </script>
670 540  
671 541 <style lang="scss" scoped>
... ... @@ -878,4 +748,10 @@ button .recommendButton {
878 748 span a {
879 749 color: black;
880 750 }
  751 +.icon{
  752 + display: flex; gap: 16px; align-items: center
  753 +}
  754 +.mobileIcon{
  755 + gap: 16px; align-items: center
  756 +}
881 757 </style>
... ...
pages/index.vue
  View file @7ca465a
... ... @@ -31,8 +31,6 @@
31 31 </v-carousel-item>
32 32 </v-carousel>
33 33 </v-rows>
34   - <HotProducts />
35   -
36 34 <!-- 能源材料 -->
37 35 <div class="tw-py-8 py-sm-16">
38 36 <v-container>
... ... @@ -95,7 +93,6 @@
95 93 <script setup lang="ts">
96 94 import MainTitleList from "../components/MainTitleList.vue";
97 95 import MainTitleListOdd from "../components/MainTitleListOdd.vue";
98   -import HotProducts from "../components/HotProducts.vue";
99 96 import { useCategoryStore } from "../stores/category";
100 97 import { computed, onMounted, reactive, ref } from "vue";
101 98 import { isMobile } from "../utils";
... ... @@ -231,9 +228,6 @@ const packs = [
231 228 href: "/pack",
232 229 },
233 230 ];
234   -// const hotLength = computed(() =>
235   -// hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
236   -// );
237 231 </script>
238 232 <style scoped>
239 233 @media screen and (min-width: 1537px) {
... ...
pages/products/index.vue
  View file @7ca465a
... ... @@ -73,74 +73,6 @@
73 73 total-visible="5"
74 74 ></v-pagination></v-col
75 75 ></v-row>
76   - <v-tabs
77   - class="tabs2"
78   - ref="tabs2"
79   - v-model="tabRecom"
80   - style="margin-top: 25px; margin-bottom: 20px"
81   - color="white"
82   - bg-color="#eeeeee"
83   - slider-color="blue-lighten-1"
84   - selected-class="active"
85   - v-if="isMobile()"
86   - >
87   - <v-tab :value="1">Best Sellers</v-tab>
88   - <!-- <v-tab :value="3">商品百科</v-tab> -->
89   - </v-tabs>
90   - <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
91   - <v-progress-circular
92   - color="blue-lighten-2"
93   - indeterminate
94   - size="64"
95   - class="tw-m-auto"
96   - ></v-progress-circular>
97   - </div>
98   - <v-item-group multiple v-if="isMobile()">
99   - <v-row v-if="!hotLoadingMobile">
100   - <v-col
101   - v-for="(item, i) in recommendImagesMobile"
102   - :key="i"
103   - cols="6"
104   - lg="3"
105   - md="4"
106   - sm="6"
107   - >
108   - <div v-if="item !== null">
109   - <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
110   - <!-- 设置 eager 属性，确保图片直接加载 -->
111   - <v-img
112   - :src="item[0].url"
113   - :alt="item[0].name"
114   - eager
115   - class="d-block"
116   - />
117   - <v-card-text class="tw-text-left font-weight-medium title">
118   - <h4 class="clamp-text">{{ item[0].name }}</h4>
119   - </v-card-text>
120   - </v-card>
121   - </div>
122   - </v-col>
123   - </v-row>
124   - <!-- <div
125   - v-if="!hotTotal"
126   - class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
127   - >
128   - no data
129   - </div> -->
130   - </v-item-group>
131   - <v-row v-if="isMobile()">
132   - <v-col>
133   - <v-pagination
134   - :size="isMobile() ? 'small' : 'default'"
135   - v-if="hotTotalMobile"
136   - v-model="currentIndexMobile"
137   - @update:modelValue="toggleRowMobile"
138   - :length="hotLength"
139   - rounded="0"
140   - class="tw-float-right tw-mt-[32px]"
141   - total-visible="5"
142   - ></v-pagination></v-col
143   - ></v-row>
144 76 </v-container>
145 77 </div>
146 78 </template>
... ...