fix: prod2-38/39

boyang
1 parent d8d3935d
Showing 6 changed files with 336 additions and 210 deletions
components/MobileProductDetail.vue
components/ProductDetail.vue
deploy/prod2.sh
pages/index.vue
pages/products/detail/[id]/index.vue
pages/products/index.vue
@@ -271,13 +271,13 @@
         selected-class="active"
         style="margin-bottom: 20px"
       >
-        <v-tab :value="1">Related Products</v-tab>
-        <v-tab :value="2">Best Sellers</v-tab>
+        <v-tab :value="1">Best Sellers</v-tab>
+        <v-tab :value="2">Related Products</v-tab>
         <!-- <v-tab :value="3">商品百科</v-tab> -->
       </v-tabs>
       <v-window v-model="tabProduct">
         <v-window-item key="1" :value="1">
-          <div class="tw-text-center" v-if="loading && isMobile()">
+          <div class="tw-text-center" v-if="hotLoading && isMobile()">
             <v-progress-circular
               color="blue-lighten-2"
               indeterminate
@@ -286,9 +286,9 @@
             ></v-progress-circular>
           </div>
           <v-item-group multiple v-if="isMobile()">
-            <v-row v-if="!loading">
+            <v-row v-if="!hotLoading">
               <v-col
-                v-for="(item, i) in recommendImages"
+                v-for="(item, i) in recommendImagesHot"
                 :key="i"
                 cols="6"
                 lg="3"
@@ -326,10 +326,10 @@
             <v-col>
               <v-pagination
                 :size="isMobile() ? 'small' : 'default'"
-                v-if="total"
-                v-model="currentIndex"
-                @update:modelValue="toggleRowMobile"
-                :length="length"
+                v-if="hotTotal"
+                v-model="currentIndexHot"
+                @update:modelValue="toggleRowMobileHot"
+                :length="hotLength"
                 rounded="0"
                 class="tw-float-right tw-mt-[32px]"
                 total-visible="5"
@@ -338,7 +338,7 @@
         </v-window-item>
         <!-- best sellers -->
         <v-window-item key="2" :value="2">
-          <div class="tw-text-center" v-if="hotLoading && isMobile()">
+          <div class="tw-text-center" v-if="loading && isMobile()">
             <v-progress-circular
               color="blue-lighten-2"
               indeterminate
@@ -347,9 +347,9 @@
             ></v-progress-circular>
           </div>
           <v-item-group multiple v-if="isMobile()">
-            <v-row v-if="!hotLoading">
+            <v-row v-if="!loading">
               <v-col
-                v-for="(item, i) in recommendImagesHot"
+                v-for="(item, i) in recommendImages"
                 :key="i"
                 cols="6"
                 lg="3"
@@ -387,10 +387,10 @@
             <v-col>
               <v-pagination
                 :size="isMobile() ? 'small' : 'default'"
-                v-if="hotTotal"
-                v-model="currentIndexHot"
-                @update:modelValue="toggleRowMobileHot"
-                :length="hotLength"
+                v-if="total"
+                v-model="currentIndex"
+                @update:modelValue="toggleRowMobile"
+                :length="length"
                 rounded="0"
                 class="tw-float-right tw-mt-[32px]"
                 total-visible="5"
@@ -175,29 +175,29 @@
         </v-dialog> -->
       </v-col>
     </v-row>
-
     <v-tabs
       class="tabs"
-      v-model="tabRecom"
+      v-model="tabRecomHot"
+      style="margin-top: 25px"
       color="white"
       bg-color="#eeeeee"
       slider-color="blue-lighten-1"
       selected-class="active"
-      v-if="recommendImages[0] !== null"
+      v-if="recommendImagesHot[0] !== null"
     >
-      <v-tab :value="1">Product Recommendations</v-tab>
+      <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">
+    <div id="image-container" v-if="recommendImagesHot[0] !== null">
       <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="toggleRow"
+          @click="toggleRowLeft"
         />
       </div>
-      <div v-if="currentIndex === 0" class="image-row" id="row1">
+      <div class="image-row" id="row1">
         <!-- <img
           v-for="(imageObj, index) in recommendImages.slice(0, 5)"
           :key="'row1-' + index"
@@ -206,7 +206,7 @@
           style="margin: 0 5px; width: 200px; height: 200px"
         /> -->
         <div
-          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          v-for="(imageObj, index) in recommendImagesHot"
           :key="'row1-' + index"
           class="imageTotal"
         >
@@ -223,46 +223,28 @@
           <div v-else style="width: 200px; height: 200px"></div>
         </div>
       </div>
-      <div v-else class="image-row" id="row2">
-        <!-- <img
-          v-for="(imageObj, index) in recommendImages.slice(5, 10)"
-          :key="'row2-' + index"
-          :src="imageObj[0]?.url"
-          :alt="'Image ' + (index + 6)"
-          style="margin: 0 5px; width: 200px; height: 200px"
-        /> -->
-        <div
-          v-for="(imageObj, index) in recommendImages.slice(5, 10)"
-          :key="'row2-' + index"
-          class="imageTotal"
-        >
-          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
-            <img
-              :src="imageObj[0]?.url"
-              :alt="'Image ' + (index + 6)"
-              class="item-imgHot"
-            />
-            <span class="image-name">
-              {{ imageObj[0]?.name }}
-            </span>
-          </a>
-          <div
-            v-else
-            style="width: 200px; height: 200px; margin-right: 10px"
-          ></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="toggleRow"
+          @click="toggleRowRight"
         />
       </div>
     </div>
-    <div style="display: flex">
-      <div class="tw-pb-[64px]" style="width: 70%; margin-right: 10px">
+
+    <div style="display: flex; width: 100%; box-sizing: border-box">
+      <div
+        class="tw-pb-[64px]"
+        style="
+          width: 70%;
+          margin-right: 10px;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: wrap;
+          overflow: auto;
+        "
+      >
         <v-tabs
           class="tabs"
           v-model="tab"
@@ -270,6 +252,7 @@
           bg-color="#eeeeee"
           slider-color="blue-lighten-1"
           selected-class="active"
+          style="width: 100%"
         >
           <v-tab :value="1">Product Details</v-tab>
           <v-tab :value="2">Specification</v-tab>
@@ -278,18 +261,63 @@
         <v-window
           v-model="tab"
           class="tw-p-[24px]"
-          style="min-height: 500px; height: auto"
+          style="
+            min-height: 500px;
+            height: auto;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+          "
         >
           <v-window-item key="1" :value="1">
+            <!-- 修改位置 1: 使用 clearSpanStyle 方法清理 info.advantage -->
             <div v-if="info.advantage" class="tw-mb-[24px]">
               <div class="text-h6">Advantage</div>
               <v-divider class="tw-mb-[12px]"></v-divider>
-              <div v-html="info.advantage"></div>
+              <div v-html="clearSpanStyle(info.advantage)"></div>
             </div>
+            <!-- 修改位置 2: 使用 clearSpanStyle 方法清理 info.physicalproperty -->
             <div v-if="info.physicalproperty" class="tw-mb-[24px]">
               <div class="text-h6">Physical Property</div>
+              <v-divider class="tw-mb-[12px] html-content"></v-divider>
+              <div v-html="clearSpanStyle(info.physicalproperty)"></div>
+            </div>
+            <!-- 修改位置 3: 使用 clearSpanStyle 方法清理 info.storage -->
+            <div v-if="info.storage" class="tw-mb-[24px]">
+              <div class="text-h6">Storage</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="clearSpanStyle(info.storage)"></div>
+            </div>
+            <!-- 修改位置 4: 使用 clearSpanStyle 方法清理 info.introduction -->
+            <div v-if="info.introduction" class="tw-mb-[24px]">
+              <div class="text-h6">Introduction</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="clearSpanStyle(info.introduction)"></div>
+            </div>
+            <!-- 修改位置 5: 使用 clearSpanStyle 方法清理 info.description -->
+            <div v-if="info.description" class="tw-mb-[24px]">
+              <div class="text-h6">Description</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="clearSpanStyle(info.description)"></div>
+            </div>
+          </v-window-item>
+          <!-- <div v-if="info.advantage" class="tw-mb-[24px]">
+              <div class="text-h6">Advantage</div>
               <v-divider class="tw-mb-[12px]"></v-divider>
-              <div v-html="info.physicalproperty"></div>
+              <div v-html="info.advantage"></div>
+            </div>
+            <div v-if="info.physicalproperty" class="tw-mb-[24px]">
+              <div class="text-h6">Physical Property</div>
+              <v-divider class="tw-mb-[12px] html-content"></v-divider>
+              <div
+                v-html="info.physicalproperty"
+                style="
+                  overflow-wrap: break-word;
+                  word-wrap: break-word;
+                  white-space: pre-wrap;
+                  line-height: 1.5;
+                "
+              ></div>
             </div>
             <div v-if="info.storage" class="tw-mb-[24px]">
               <div class="text-h6">Storage</div>
@@ -306,7 +334,7 @@
               <v-divider class="tw-mb-[12px]"></v-divider>
               <div v-html="info.description"></div>
             </div>
-          </v-window-item>
+          </v-window-item> -->
           <v-window-item key="2" :value="2">
             <v-table density="compact" class="table2">
               <tbody>
@@ -356,27 +384,26 @@
     </div>
     <v-tabs
       class="tabs"
-      v-model="tabRecomHot"
-      style="margin-top: 25px"
+      v-model="tabRecom"
       color="white"
       bg-color="#eeeeee"
       slider-color="blue-lighten-1"
       selected-class="active"
-      v-if="recommendImagesHot[0] !== null"
+      v-if="recommendImages[0] !== null"
     >
-      <v-tab :value="1">Best Sellers</v-tab>
+      <v-tab :value="1">Related Products</v-tab>
       <!-- <v-tab :value="3">商品百科</v-tab> -->
     </v-tabs>
-    <div id="image-container" v-if="recommendImagesHot[0] !== null">
+    <div id="image-container" v-if="recommendImages[0] !== null">
       <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"
+          @click="toggleRow"
         />
       </div>
-      <div class="image-row" id="row1">
+      <div v-if="currentIndex === 0" class="image-row" id="row1">
         <!-- <img
           v-for="(imageObj, index) in recommendImages.slice(0, 5)"
           :key="'row1-' + index"
@@ -385,7 +412,7 @@
           style="margin: 0 5px; width: 200px; height: 200px"
         /> -->
         <div
-          v-for="(imageObj, index) in recommendImagesHot"
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
           :key="'row1-' + index"
           class="imageTotal"
         >
@@ -402,15 +429,45 @@
           <div v-else style="width: 200px; height: 200px"></div>
         </div>
       </div>
+      <div v-else class="image-row" id="row2">
+        <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(5, 10)"
+          :key="'row2-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 6)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+        <div
+          v-for="(imageObj, index) in recommendImages.slice(5, 10)"
+          :key="'row2-' + index"
+          class="imageTotal"
+        >
+          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+            <img
+              :src="imageObj[0]?.url"
+              :alt="'Image ' + (index + 6)"
+              class="item-imgHot"
+            />
+            <span class="image-name">
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div
+            v-else
+            style="width: 200px; height: 200px; margin-right: 10px"
+          ></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"
+          @click="toggleRow"
         />
       </div>
     </div>
+
     <div class="social-share-container">
       <SocialShare
         network="facebook"
@@ -562,6 +619,30 @@ const loadHotProducts = async () =&gt; {
     return ree;
   });
 };
+const clearSpanStyle = (htmlContent) => {
+  if (!htmlContent) return ""; // 检查是否为空
+  // 创建一个 DOM 解析器
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlContent, "text/html");
+
+  // 清理 span 的 style 属性
+  const spans = doc.querySelectorAll("span");
+  spans.forEach((span) => {
+    span.removeAttribute("style"); // 清空 style 属性
+  });
+
+  // 修改 img 的 style 属性，追加 width: 100%
+  const imgs = doc.querySelectorAll("img");
+  imgs.forEach((img) => {
+    const style = img.getAttribute("style") || ""; // 获取现有 style
+    if (!style.includes("width: 100%")) {
+      img.setAttribute("style", `${style} width: 100%;`.trim()); // 添加 width: 100%
+    }
+  });
+
+  // 返回处理后的 HTML
+  return doc.body.innerHTML;
+};
 const toggleRowLeft = () => {
   if (currentIndexHot.value !== 1) {
     currentIndexHot.value--;
@@ -584,6 +665,7 @@ watch(currentIndexHot, (newIndex) =&gt; {
 await loadHotProducts(); // Load hot products the first time
 watchEffect(() => {
+  console.log(info, "5656info");
   currentUrl.value = "https://www.canrud.com/products/detail/" + info.id;
   if (info?.productCrumbsVO?.category1 && productStore.keyword) {
     items.value[1].title = info.productCrumbsVO.category1;
@@ -783,7 +865,7 @@ th {
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 100px;
+    margin: 10px auto 130px;
     width: 80%;
   }
 }
@@ -793,7 +875,7 @@ th {
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 0px;
+    margin: 10px auto 60px;
     width: 80%;
     padding: 0;
   }
@@ -804,7 +886,7 @@ th {
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 0px;
+    margin: 10px auto 60px;
     width: 80%;
     padding: 0;
   }
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.37"
-TAG="1.0.38"
+LAST_TAG="1.0.38"
+TAG="1.0.39"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"
@@ -31,63 +31,6 @@
       </v-carousel-item>
     </v-carousel>
   </v-rows>
-  <!-- 能源材料 -->
-  <div class="tw-py-8 py-sm-16">
-    <v-container>
-      <MainTitleListOdd
-        title="Material Reagents"
-        :list="materials"
-        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
-      />
-    </v-container>
-  </div>
-
-  <!-- 设备 -->
-  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
-    <v-container>
-      <MainTitleList
-        title="Lab Device"
-        listType="equipment"
-        :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
-        desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
-        href="/equipment"
-      />
-    </v-container>
-  </div>
-
-  <!-- Customized Battery -->
-  <div class="tw-py-8 py-sm-16">
-    <v-container>
-      <MainTitleList
-        :title="'Customized Battery'"
-        :list="batteries"
-        href="/customize"
-        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
-      />
-    </v-container>
-  </div>
-  <!-- Testing -->
-  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
-    <v-container>
-      <MainTitleList
-        title="Testing"
-        :list="tests"
-        href="/test"
-        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
-      />
-    </v-container>
-  </div>
-  <!-- Pack -->
-  <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
-    <v-container>
-      <MainTitleList
-        title="Pack"
-        href="/pack"
-        :list="packs"
-        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
-      />
-    </v-container>
-  </div>
   <v-tabs
     class="tabs"
     v-model="tabRecom"
@@ -179,7 +122,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"
@@ -193,12 +135,126 @@
           </div>
         </v-col>
       </v-row>
-      <!-- <div
-          v-if="!hotTotal"
-          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+    </v-item-group>
+    <v-row v-if="isMobile()">
+      <v-col>
+        <v-pagination
+          :size="isMobile() ? 'small' : 'default'"
+          v-if="hotTotal"
+          v-model="currentIndex"
+          @update:modelValue="toggleRowMobile"
+          :length="hotLength"
+          rounded="0"
+          class="tw-float-right tw-mt-[32px]"
+          total-visible="5"
+        ></v-pagination></v-col
+    ></v-row>
+  </div>
+  <!-- 能源材料 -->
+  <div class="tw-py-8 py-sm-16">
+    <v-container>
+      <MainTitleListOdd
+        title="Material Reagents"
+        :list="materials"
+        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
+      />
+    </v-container>
+  </div>
+
+  <!-- 设备 -->
+  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
+    <v-container>
+      <MainTitleList
+        title="Lab Device"
+        listType="equipment"
+        :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
+        desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
+        href="/equipment"
+      />
+    </v-container>
+  </div>
+
+  <!-- Customized Battery -->
+  <div class="tw-py-8 py-sm-16">
+    <v-container>
+      <MainTitleList
+        :title="'Customized Battery'"
+        :list="batteries"
+        href="/customize"
+        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
+      />
+    </v-container>
+  </div>
+  <!-- Testing -->
+  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
+    <v-container>
+      <MainTitleList
+        title="Testing"
+        :list="tests"
+        href="/test"
+        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
+      />
+    </v-container>
+  </div>
+  <!-- Pack -->
+  <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
+    <v-container>
+      <MainTitleList
+        title="Pack"
+        href="/pack"
+        :list="packs"
+        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
+      />
+    </v-container>
+  </div>
+  <div style="padding-left: 16px; padding-right: 16px; padding-bottom: 30px">
+    <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="hotLoading && 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="!hotLoading">
+        <v-col
+          v-for="(item, i) in recommendImages"
+          :key="i"
+          cols="6"
+          lg="3"
+          md="4"
+          sm="6"
         >
-          no data
-        </div> -->
+          <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>{{ item[0].name }}</h4>
+              </v-card-text>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
     </v-item-group>
     <v-row v-if="isMobile()">
       <v-col>
@@ -237,7 +293,6 @@ const loadHotProducts = async () =&gt; {
     pageSize.value = 4;
   }
   hotLoading.value = true;
-
   let { data: hotProducts } = await useAsyncData(
     "hotProducts",
     () =>
@@ -463,7 +518,7 @@ const hotLength = computed(() =&gt;
   .tabs {
     border-bottom: 2px solid #1f88e5;
     margin: 10px auto 0px;
-    width: 95%;
+    width: 80%;
   }
 }
@@ -67,5 +67,6 @@ newData.productimageliststore = newData?.productimageliststore?.map(
     url: `/api/show/image?fileKey=${item.fileKey}&psize=p512`,
   })
 );
+
 info.value = { ...newData };
 </script>
@@ -3,73 +3,6 @@
     <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
     <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
     <v-container class="">
-      <div class="tw-text-center" 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
-                :elevation="isHovering ? 16 : 2"
-                :class="{ 'on-hover': isHovering }"
-                class="mx-auto"
-                v-bind="props"
-                :to="`/products/detail/${item.id}`"
-              >
-                <v-img :src="item.imgList[0].url" :alt="item.name">
-                  <!-- <v-expand-transition>
-                    <div
-                      v-if="isHovering"
-                      class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
-                      style="height: 100%"
-                    >
-                      产品描述描述描述描述描述描述描述描述
-                    </div>
-                  </v-expand-transition> -->
-                </v-img>
-                <v-card-text class="tw-text-left font-weight-medium title">
-                  <h3 style="color: red" v-if="item.price">
-                    ${{ item.price }}
-                  </h3>
-                  <h4>{{ item.name }}</h4>
-                </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
-            :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"
-          ></v-pagination></v-col
-      ></v-row>
       <v-tabs
         class="tabs"
         v-model="tabRecom"
@@ -198,6 +131,61 @@
             total-visible="5"
           ></v-pagination></v-col
       ></v-row>
+      <div style="width: 50px"></div>
+      <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
+                :elevation="isHovering ? 16 : 2"
+                :class="{ 'on-hover': isHovering }"
+                class="mx-auto"
+                v-bind="props"
+                :to="`/products/detail/${item.id}`"
+              >
+                <v-img :src="item.imgList[0].url" :alt="item.name">
+                  <!-- <v-expand-transition>
+                    <div
+                      v-if="isHovering"
+                      class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
+                      style="height: 100%"
+                    >
+                      产品描述描述描述描述描述描述描述描述
+                    </div>
+                  </v-expand-transition> -->
+                </v-img>
+                <v-card-text class="tw-text-left font-weight-medium title">
+                  <h3 style="color: red" v-if="item.price">
+                    ${{ item.price }}
+                  </h3>
+                  <h4>{{ item.name }}</h4>
+                </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-container>
   </div>
 </template>
@@ -518,7 +506,7 @@ const hotLength = computed(() =&gt;
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 100px;
+    margin: 10px auto 130px;
     width: 80%;
   }
 }
@@ -528,7 +516,7 @@ const hotLength = computed(() =&gt;
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 0px;
+    margin: 10px auto 80px;
     width: 80%;
     padding: 0;
   }
@@ -539,7 +527,7 @@ const hotLength = computed(() =&gt;
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 0px;
+    margin: 10px auto 80px;
     width: 80%;
     padding: 0;
   }
@@ -569,7 +557,7 @@ const hotLength = computed(() =&gt;
     display: inline-block;
     margin: 0 5px;
     text-align: center;
-    width: 200px;
+    width: 260px;
   }
 }
 @media screen and (min-width: 1537px) {