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

boyang
1 parent 741479b9
Showing 7 changed files with 9 additions and 804 deletions
components/CategoryList.vue
components/HotProducts.vue
deploy/prod2.sh
pages/about.vue
pages/contact.vue
pages/index.vue
pages/products/index.vue
@@ -70,63 +70,6 @@
         </v-col>
       </v-row>
     </div>
-    <v-tabs
-      class="tabs"
-      v-model="tabRecom"
-      style="margin-top: 25px"
-      color="white"
-      bg-color="#eeeeee"
-      slider-color="blue-lighten-1"
-      selected-class="active"
-      v-if="recommendImages[0] !== null && !isMobile()"
-    >
-      <v-tab :value="1">Best Sellers</v-tab>
-      <!-- <v-tab :value="3">商品百科</v-tab> -->
-    </v-tabs>
-    <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
-      <div class="recommend-left-box">
-        <v-img
-          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
-          alt="往左移"
-          class="recommend-img-left"
-          @click="toggleRowLeft"
-        />
-      </div>
-      <div class="image-row" id="row1">
-        <!-- <img
-          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
-          :key="'row1-' + index"
-          :src="imageObj[0]?.url"
-          :alt="'Image ' + (index + 1)"
-          style="margin: 0 5px; width: 200px; height: 200px"
-        /> -->
-        <div
-          v-for="(imageObj, index) in recommendImages"
-          :key="'row1-' + index"
-          class="imageTotal"
-        >
-          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
-            <img
-              :src="imageObj[0]?.url"
-              :alt="'Image ' + (index + 1)"
-              class="item-imgHot"
-            />
-            <span class="image-name">
-              {{ imageObj[0]?.name }}
-            </span>
-          </a>
-          <div v-else style="width: 200px; height: 200px"></div>
-        </div>
-      </div>
-      <div class="recommend-right-box">
-        <v-img
-          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
-          alt="往右移"
-          class="recommend-img-right"
-          @click="toggleRowRight"
-        />
-      </div>
-    </div>
   </v-container>
 </template>
-<template>
-  <v-tabs
-    class="tabs"
-    v-model="tabRecom"
-    color="white"
-    bg-color="#eeeeee"
-    style="margin-top: 40px"
-    slider-color="blue-lighten-1"
-    selected-class="active"
-    v-if="recommendImages[0] !== null && !isMobile()"
-  >
-    <v-tab :value="1">Best Sellers</v-tab>
-    <!-- <v-tab :value="3">商品百科</v-tab> -->
-  </v-tabs>
-  <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
-    <div class="recommend-left-box">
-      <v-img
-        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
-        alt="往左移"
-        class="recommend-img-left"
-        @click="toggleRowLeft"
-      />
-    </div>
-    <div class="image-row" id="row1">
-      <!-- <img
-          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
-          :key="'row1-' + index"
-          :src="imageObj[0]?.url"
-          :alt="'Image ' + (index + 1)"
-          style="margin: 0 5px; width: 200px; height: 200px"
-        /> -->
-      <div
-        v-for="(imageObj, index) in recommendImages"
-        :key="'row1-' + index"
-        class="imageTotal"
-      >
-        <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
-          <img
-            :src="imageObj[0]?.url"
-            :alt="'Image ' + (index + 1)"
-            class="item-imgHot"
-          />
-          <span class="image-name">
-            {{ imageObj[0]?.name }}
-          </span>
-        </a>
-        <div v-else class="image-substitute"></div>
-      </div>
-    </div>
-    <div class="recommend-right-box">
-      <v-img
-        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
-        alt="往右移"
-        class="recommend-img-right"
-        @click="toggleRowRight"
-      />
-    </div>
-  </div>
-  <div style="padding-left: 16px; padding-right: 16px">
-    <v-tabs
-      class="tabs2"
-      ref="tabs2"
-      v-model="tabRecom"
-      style="margin-top: 25px; margin-bottom: 20px; width: 100%"
-      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>
-    <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
-      <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()">
-      <v-row v-if="!hotLoadingMobile">
-        <v-col
-          v-for="(item, i) in recommendImagesMobile"
-          :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">
-              <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">
-                <h4 class="clamp-text">{{ item[0].name }}</h4>
-              </v-card-text>
-            </v-card>
-          </div>
-        </v-col>
-      </v-row>
-    </v-item-group>
-    <v-row v-if="isMobile()">
-      <v-col>
-        <v-pagination
-          :size="isMobile() ? 'small' : 'default'"
-          v-if="hotTotalMobile"
-          v-model="currentIndexMobile"
-          @update:modelValue="toggleRowMobile"
-          :length="hotLength"
-          rounded="0"
-          class="tw-float-right tw-mt-[32px]"
-          total-visible="5"
-        ></v-pagination></v-col
-    ></v-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
-import { isMobile } from "../utils";
-import { useRoute } from "vue-router";
-
-const route = useRoute(); // 获取路由信息
-const maxPage = ref(1);
-const maxPageMobile = ref(1);
-const tabRecom = ref();
-const recommendList = ref({});
-const recommendImages = ref({});
-const currentIndex = ref(1);
-const hotLoading = ref(false);
-const hotTotal = ref(10);
-const isOrNotMobile = isMobile();
-const recommendListMobile = ref({});
-const recommendImagesMobile = ref({});
-const currentIndexMobile = ref(1);
-const hotLoadingMobile = ref(false);
-const hotTotalMobile = ref(10);
-const loadHotProducts = async () => {
-  hotLoading.value = true;
-  let { data: hotProducts } = await useAsyncData(
-    "hotProducts",
-    () =>
-      $fetch("/shop/product/hotProducts", {
-        method: "GET",
-        params: {
-          pageNo: currentIndex.value,
-          pageSize: 5,
-        },
-      }),
-    {
-      server: true, // 仅在服务器端获取数据
-    }
-  );
-  hotTotal.value = hotProducts.value.data.total;
-  recommendList.value = hotProducts.value.data.records;
-  maxPage.value = hotProducts.value.data.pages;
-  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
-  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 = []; // 解析失败时，设置为空数组
-      }
-    }
-    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;
-  });
-  hotLoading.value = false;
-};
-
-const toggleRowLeft = () => {
-  if (currentIndex.value !== 1) {
-    currentIndex.value--;
-  } else if (currentIndex.value == 1) {
-    currentIndex.value = maxPage.value;
-  }
-  startTimer();
-};
-let intervalId: any;
-const toggleRowRight = () => {
-  if (currentIndex.value < maxPage.value) {
-    currentIndex.value++;
-  } else if (currentIndex.value == maxPage.value) {
-    currentIndex.value = 1;
-  }
-  startTimer();
-};
-const startTimer = () => {
-  // 清除已有计时器，防止重复
-  clearInterval(intervalId);
-  intervalId = setInterval(() => {
-    toggleRowRight();
-  }, 5000); // 每6秒调用一次
-};
-
-onMounted(() => {
-  startTimer();
-});
-
-const toggleRowMobile = (value: number) => {
-  currentIndexMobile.value = value;
-};
-const { width } = useDisplay();
-const firstIndex = ref(true);
-watch(currentIndex, (newIndex) => {
-  loadHotProducts(); // Call loadHotProducts when currentIndex changes
-});
-
-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 (firstIndex.value) {
-    if (width.value > 600) {
-      await loadHotProducts();
-    } else {
-      await loadHotProductsMobile();
-    }
-  }
-});
-// Initial load of hot products
-const hotLength = computed(() =>
-  hotTotalMobile.value ? Math.ceil(hotTotalMobile.value / 4) : 0
-);
-</script>
-
-<style lang="scss" scoped>
-@media screen and (min-width: 1537px) {
-  .tabs {
-    border-bottom: 2px solid #1f88e5;
-    margin: 10px auto 100px;
-    width: 93%;
-  }
-}
-@media screen and (max-width: 1536px) and (min-width: 1281px) {
-  .tabs {
-    border-bottom: 2px solid #1f88e5;
-    margin: 10px auto 20px;
-    width: 82%;
-  }
-}
-@media screen and (max-width: 1280px) {
-  .tabs {
-    border-bottom: 2px solid #1f88e5;
-    margin: 10px auto 0px;
-    width: 88%;
-  }
-}
-
-.active {
-  background-color: #1086e8;
-}
-
-/* #image-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 320px;
-  margin: 10px auto 50px;
-  width: 80%;
-} */
-
-@media screen and (min-width: 1537px) {
-  #image-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 320px;
-    margin: 10px auto 50px;
-    width: 96%;
-  }
-}
-@media screen and (max-width: 1536px) and (min-width: 1281px) {
-  #image-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 240px;
-    margin: 10px auto 0px;
-    width: 80%;
-  }
-}
-@media screen and (max-width: 1280px) {
-  #image-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 260px;
-    margin: 10px auto 0px;
-    width: 90%;
-  }
-}
-.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;
-  }
-}
-@media screen and (max-width: 1280px) {
-  .image-row {
-    display: flex;
-    height: 220px;
-  }
-}
-@media screen and (min-width: 1537px) {
-  .imageTotal {
-    display: inline-block;
-    margin: 0 5px;
-    text-align: center;
-    width: 315px;
-  }
-}
-@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 (max-width: 1280px) {
-  .imageTotal {
-    display: inline-block;
-    margin: 0 5px;
-    text-align: center;
-    width: 185px;
-  }
-}
-@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: 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;
-  }
-}
-@media screen and (max-width: 1280px) {
-  .image-row img {
-    width: 160px;
-    height: 160px;
-    margin-left: 10px;
-  }
-}
-@media screen and (min-width: 1537px) {
-  .image-name {
-    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 */
-    margin-top: 5px;
-    font-size: 16px;
-    width: 180px;
-    color: #555;
-    text-align: center; /* Centers the text horizontally */
-    margin-left: 50px;
-  }
-}
-@media screen and (max-width: 1536px) and (min-width: 1281px) {
-  .image-name {
-    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 */
-    margin-top: 5px;
-    font-size: 16px;
-    width: 180px;
-    color: #555;
-    text-align: center; /* Centers the text horizontally */
-    margin-left: 10px;
-  }
-}
-@media screen and (max-width: 1280px) {
-  .image-name {
-    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 */
-    margin-top: 5px;
-    font-size: 16px;
-    width: 180px;
-    color: #555;
-    text-align: center; /* Centers the text horizontally */
-    margin-left: 5px;
-  }
-}
-button .recommendButton {
-  margin: 0 0px;
-  cursor: pointer;
-}
-
-.recommend-left-box {
-}
-
-.recommend-img-left {
-  width: 26px;
-  height: 27px;
-  margin-right: 40px;
-}
-
-.recommend-img-left:hover {
-  cursor: pointer;
-}
-.recommend-right-box {
-}
-
-.recommend-img-right {
-  width: 26px;
-  height: 27px;
-  margin-left: 40px;
-}
-
-.recommend-img-right:hover {
-  cursor: pointer;
-}
-.image-grid {
-  padding: 16px;
-}
-
-.v-card {
-  transition: all 0.3s ease-in-out;
-}
-.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行 */
-}
-</style>
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.57"
-TAG="1.0.58"
+LAST_TAG="1.0.58"
+TAG="1.0.59"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"
 <template>
-  <HotProducts />
-
   <v-container class="pa-0 pa-sm-4">
     <div
       class="my-8 my-sm-16 text-blue-darken-1 text-h4 tw-text-center"
@@ -465,7 +463,6 @@
 <script setup lang="ts">
 import MainTitle from "../components/MainTitle.vue";
-import HotProducts from "../components/HotProducts.vue";
 import { isMobile } from "../utils";
 useHead({
@@ -34,7 +34,7 @@
     <div class="tw-w-[300px]">
       <v-img src="/wechat.jpg" alt="canrud-wechat"></v-img>
     </div>
-    <div style="display: flex; gap: 16px; align-items: center">
+    <div :class="isMobile() ? 'mobileIcon' : 'icon'">
       <span class="text-h5 tw-mb-5 tw-mt-5">Other Platforms</span>
       <span class="tw-mt-2">
         <a
@@ -236,134 +236,7 @@
     >
       Failed to send!
     </v-snackbar>
-    <div style="margin-bottom: 10px">
-      <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>
-      <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
-        <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()">
-        <v-row v-if="!hotLoadingMobile">
-          <v-col
-            v-for="(item, i) in recommendImagesMobile"
-            :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">
-                  <h4 class="clamp-text">{{ item[0].name }}</h4>
-                </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'"
-            v-if="hotTotalMobile"
-            v-model="currentIndexMobile"
-            @update:modelValue="toggleRowMobile"
-            :length="hotLength"
-            rounded="0"
-            class="tw-float-right tw-mt-[32px]"
-            total-visible="5"
-          ></v-pagination></v-col
-      ></v-row>
-    </div>
   </v-card>
-  <v-tabs
-    class="tabs"
-    v-model="tabRecom"
-    style="margin-top: 25px"
-    color="white"
-    bg-color="#eeeeee"
-    slider-color="blue-lighten-1"
-    selected-class="active"
-    v-if="recommendImages[0] !== null && !isMobile()"
-  >
-    <v-tab :value="1">Best Sellers</v-tab>
-    <!-- <v-tab :value="3">商品百科</v-tab> -->
-  </v-tabs>
-  <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
-    <div class="recommend-left-box">
-      <v-img
-        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
-        alt="往左移"
-        class="recommend-img-left"
-        @click="toggleRowLeft"
-      />
-    </div>
-    <div class="image-row" id="row1">
-      <!-- <img
-          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
-          :key="'row1-' + index"
-          :src="imageObj[0]?.url"
-          :alt="'Image ' + (index + 1)"
-          style="margin: 0 5px; width: 200px; height: 200px"
-        /> -->
-      <div
-        v-for="(imageObj, index) in recommendImages"
-        :key="'row1-' + index"
-        class="imageTotal"
-      >
-        <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
-          <img
-            :src="imageObj[0]?.url"
-            :alt="'Image ' + (index + 1)"
-            class="item-imgHot"
-          />
-          <span class="image-name">
-            {{ imageObj[0]?.name }}
-          </span>
-        </a>
-        <div v-else style="width: 200px; height: 200px"></div>
-      </div>
-    </div>
-    <div class="recommend-right-box">
-      <v-img
-        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
-        alt="往右移"
-        class="recommend-img-right"
-        @click="toggleRowRight"
-      />
-    </div>
-  </div>
 </template>
 <script setup lang="ts">
@@ -663,9 +536,6 @@ watchEffect(async () =&gt; {
 useHead({
   title: "Contact",
 });
-const hotLength = computed(() =>
-  hotTotalMobile.value ? Math.ceil(hotTotalMobile.value / 4) : 0
-);
 </script>
 <style lang="scss" scoped>
@@ -878,4 +748,10 @@ button .recommendButton {
 span a {
   color: black;
 }
+.icon{
+  display: flex; gap: 16px; align-items: center
+}
+.mobileIcon{
+  gap: 16px; align-items: center
+}
 </style>
@@ -31,8 +31,6 @@
       </v-carousel-item>
     </v-carousel>
   </v-rows>
-  <HotProducts />
-
   <!-- 能源材料 -->
   <div class="tw-py-8 py-sm-16">
     <v-container>
@@ -95,7 +93,6 @@
 <script setup lang="ts">
 import MainTitleList from "../components/MainTitleList.vue";
 import MainTitleListOdd from "../components/MainTitleListOdd.vue";
-import HotProducts from "../components/HotProducts.vue";
 import { useCategoryStore } from "../stores/category";
 import { computed, onMounted, reactive, ref } from "vue";
 import { isMobile } from "../utils";
@@ -231,9 +228,6 @@ const packs = [
     href: "/pack",
   },
 ];
-// const hotLength = computed(() =>
-//   hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
-// );
 </script>
 <style scoped>
 @media screen and (min-width: 1537px) {
@@ -73,74 +73,6 @@
             total-visible="5"
           ></v-pagination></v-col
       ></v-row>
-      <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>
-      <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
-        <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()">
-        <v-row v-if="!hotLoadingMobile">
-          <v-col
-            v-for="(item, i) in recommendImagesMobile"
-            :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">
-                  <h4 class="clamp-text">{{ item[0].name }}</h4>
-                </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'"
-            v-if="hotTotalMobile"
-            v-model="currentIndexMobile"
-            @update:modelValue="toggleRowMobile"
-            :length="hotLength"
-            rounded="0"
-            class="tw-float-right tw-mt-[32px]"
-            total-visible="5"
-          ></v-pagination></v-col
-      ></v-row>
     </v-container>
   </div>
 </template>