fix: 调整热销商品位置，prod2-39/40

boyang
1 parent 13cb0265
Showing 5 changed files with 255 additions and 156 deletions
components/MobileProductDetail.vue
components/ProductDetail.vue
deploy/prod2.sh
pages/index.vue
pages/products/index.vue
@@ -409,7 +409,7 @@
         slider-color="blue-lighten-1"
         selected-class="active"
       >
-        <v-tab :value="1">JOURNAL RECOMMENDATION</v-tab>
+        <v-tab :value="1">Product-related Journals</v-tab>
       </v-tabs>
       <v-window v-model="tabJournal">
         <v-window-item key="1" :value="1">
@@ -361,7 +361,7 @@
           selected-class="active"
           grow
         >
-          <v-tab value="one">Journal Recommendation</v-tab>
+          <v-tab value="one">Product-related Journals</v-tab>
         </v-tabs>
         <v-list>
           <v-list-item
@@ -795,9 +795,31 @@ const slide = ref(0);
   border-top: 3px solid #1f88e5 !important;
 }
  
-.tabs {
-  border-bottom: 2px solid #1f88e5;
+@media screen and (min-width: 1537px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 20px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 100%;
+  }
 }
+@media screen and (max-width: 1280px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 100%;
+  }
+}
+
+// .tabs {
+//   border-bottom: 2px solid #1f88e5;
+// }
  
 .active {
   background-color: #1086e8;
@@ -865,8 +887,8 @@ th {
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 130px;
-    width: 80%;
+    margin: 10px auto 80px;
+    width: 100%;
   }
 }
 @media screen and (max-width: 1536px) and (min-width: 1281px) {
@@ -875,7 +897,7 @@ th {
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 60px;
+    margin: 10px auto 0px;
     width: 80%;
     padding: 0;
   }
@@ -886,7 +908,7 @@ th {
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 60px;
+    margin: 10px auto 0px;
     width: 80%;
     padding: 0;
   }
@@ -900,7 +922,7 @@ th {
     display: inline-block;
     margin: 0 5px;
     text-align: center;
-    width: 315px;
+    width: 300px;
   }
 }
 @media screen and (max-width: 1536px) and (min-width: 1281px) {
@@ -921,8 +943,8 @@ th {
 }
 @media screen and (min-width: 1537px) {
   .image-row img {
-    width: 240px;
-    height: 240px;
+    width: 200px;
+    height: 200px;
   }
 }
 @media screen and (max-width: 1536px) and (min-width: 1281px) {
@@ -939,34 +961,46 @@ th {
 }
 @media screen and (min-width: 1537px) {
   .image-name {
-    display: block;
+    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: left;
-    margin-left: 60px;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 50px;
   }
 }
 @media screen and (max-width: 1536px) and (min-width: 1281px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 10px;
   }
 }
 @media screen and (max-width: 1280px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 20px;
   }
 }
@@ -983,6 +1017,7 @@ button .recommendButton {
   width: 26px;
   height: 27px;
   margin-right: 30px;
+  margin-bottom: 50px;
 }
  
 .recommend-img-left:hover {
@@ -995,6 +1030,7 @@ button .recommendButton {
   width: 26px;
   height: 27px;
   margin-left: 30px;
+  margin-bottom: 50px;
 }
  
 .recommend-img-right:hover {
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.38"
-TAG="1.0.39"
+LAST_TAG="1.0.39"
+TAG="1.0.40"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"
@@ -36,6 +36,7 @@
     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()"
@@ -87,7 +88,7 @@
       />
     </div>
   </div>
-  <div style="padding-left: 16px; padding-right: 16px; padding-bottom: 30px">
+  <div style="padding-left: 16px; padding-right: 16px">
     <v-tabs
       class="tabs2"
       ref="tabs2"
@@ -518,7 +519,7 @@ const hotLength = computed(() =&gt;
   .tabs {
     border-bottom: 2px solid #1f88e5;
     margin: 10px auto 0px;
-    width: 80%;
+    width: 85%;
   }
 }
  
@@ -541,7 +542,7 @@ const hotLength = computed(() =&gt;
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 100px;
+    margin: 10px auto 50px;
     width: 80%;
   }
 }
@@ -550,7 +551,7 @@ const hotLength = computed(() =&gt;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 320px;
+    height: 240px;
     margin: 10px auto 0px;
     width: 80%;
   }
@@ -561,7 +562,7 @@ const hotLength = computed(() =&gt;
     align-items: center;
     justify-content: center;
     height: 260px;
-    margin: 10px auto 30px;
+    margin: 10px auto 0px;
     width: 90%;
   }
 }
@@ -624,34 +625,46 @@ const hotLength = computed(() =&gt;
 }
 @media screen and (min-width: 1537px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 50px;
   }
 }
 @media screen and (max-width: 1536px) and (min-width: 1281px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 10px;
   }
 }
 @media screen and (max-width: 1280px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 5px;
   }
 }
@@ -2,67 +2,131 @@
   <div class="tw-m-auto tw-pb-[64px]" style="padding-bottom: 0px">
     <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
     <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
-    <v-container class="">
-      <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-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
+          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 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
+                :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="tabs2"
         ref="tabs2"
@@ -131,61 +195,6 @@
             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>
@@ -221,7 +230,6 @@ const loadHotProducts = async () =&gt; {
     pageSize.value = 4;
   }
   hotLoading.value = true;
-
   let { data: hotProducts } = await useAsyncData(
     "hotProducts",
     () =>
@@ -492,9 +500,30 @@ const hotLength = computed(() =&gt;
   -webkit-box-orient: vertical;
 }
  
-.tabs {
-  border-bottom: 2px solid #1f88e5;
+@media screen and (min-width: 1537px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 20px;
+    width: 96%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 85%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 90%;
+  }
 }
+/* .tabs {
+  border-bottom: 2px solid #1f88e5;
+} */
  
 .active {
   background-color: #1086e8;
@@ -506,7 +535,7 @@ const hotLength = computed(() =&gt;
     align-items: center;
     justify-content: center;
     height: 320px;
-    margin: 10px auto 130px;
+    margin: 10px auto 50px;
     width: 80%;
   }
 }
@@ -515,8 +544,8 @@ const hotLength = computed(() =&gt;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 320px;
-    margin: 10px auto 80px;
+    height: 260px;
+    margin: 10px auto 0px;
     width: 80%;
     padding: 0;
   }
@@ -526,8 +555,8 @@ const hotLength = computed(() =&gt;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 320px;
-    margin: 10px auto 80px;
+    height: 260px;
+    margin: 10px auto 0px;
     width: 80%;
     padding: 0;
   }
@@ -557,7 +586,7 @@ const hotLength = computed(() =&gt;
     display: inline-block;
     margin: 0 5px;
     text-align: center;
-    width: 260px;
+    width: 180px;
   }
 }
 @media screen and (min-width: 1537px) {
@@ -574,40 +603,52 @@ const hotLength = computed(() =&gt;
 }
 @media screen and (max-width: 1280px) {
   .image-row img {
-    width: 160px;
-    height: 160px;
+    width: 120px;
+    height: 120px;
   }
 }
 @media screen and (min-width: 1537px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 50px;
   }
 }
 @media screen and (max-width: 1536px) and (min-width: 1281px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 10px;
   }
 }
 @media screen and (max-width: 1280px) {
   .image-name {
-    display: block;
+    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: left;
+    text-align: center; /* Centers the text horizontally */
     margin-left: 10px;
   }
 }
@@ -620,10 +661,18 @@ button .recommendButton {
 .recommend-left-box {
 }
  
+@media screen and (max-width: 1280px) {
+  .recommend-img-left {
+    width: 26px;
+    height: 27px;
+    margin-bottom: 60px;
+  }
+}
 .recommend-img-left {
   width: 26px;
   height: 27px;
   margin-right: 30px;
+  margin-bottom: 60px;
 }
  
 .recommend-img-left:hover {
@@ -636,6 +685,7 @@ button .recommendButton {
   width: 26px;
   height: 27px;
   margin-left: 30px;
+  margin-bottom: 60px;
 }
  
 .recommend-img-right:hover {