1.产品详情页面添加关联产品展示2.优化首页产品轮播点击区域

pages/article-page/_id.vue

@@ -51,20 +51,22 @@
             <ul class="row justify-content-around pl-0">
               <li class="col-6 col-md-4 mb-4" v-for="son in item" :key="son.id">
                 <article class="product-card box_shadow">
-                  <b-img 
-                    :src="son.mainPic" 
-                    fluid 
-                    :alt="son.title"
-                  >
-                  </b-img>
-                  <div class="product-card-content">
-                    <h4>{{ son.title }}</h4>
-                    <div v-html="son.content"></div>
-                    <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
-                    <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
-                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
-                  </div>
-                </article>
+                    <nuxt-link :to="`/products/${son.id}?catgId=${son.catgId}&maxCatgId=${son.maxCatgId}`">
+                      <b-img 
+                        :src="son.mainPic" 
+                        fluid 
+                        :alt="son.title"
+                      >
+                      </b-img>
+                      <div class="product-card-content">
+                        <h4>{{ son.title }}</h4>
+                        <div v-html="son.content"></div>
+                        <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+                        <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
+                        <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
+                      </div>
+                    </nuxt-link>
+                  </article>
               </li>
             </ul>
           </template>

pages/index.vue

@@ -357,6 +357,12 @@ export default {
         background-color: #7f7f7f;
         background-size:  1.25rem;
       }
+      ::v-deep .carousel-control-prev {
+        left: -30px;
+      }
+      ::v-deep .carousel-control-next {
+        right: -30px;
+      }
       ::v-deep .carousel-control-prev-icon {
         @include controls;
       }
@@ -523,6 +529,12 @@ export default {
 
 // 特殊样式小屏幕处理
 @media screen and (max-width:780px) {
+  ::v-deep .carousel-control-prev {
+    left: 0px !important;
+  }
+  ::v-deep .carousel-control-next {
+    right: 0px !important;
+  }
   .popular-product {
     .product-card {
       .cover {

pages/products/_id.vue

@@ -197,6 +197,47 @@
         </b-form>
       </div>
     </div>
+
+    <div class="mt-5">
+      <div class="related-products" v-if="relatedProductList.length">
+        <div class="pretty-header">
+          <h2>{{ $t('news.relatedProducts') }}</h2>
+        </div>
+        <b-carousel
+          class="mt-3"
+          id="carousel-1"
+          :interval="4000"
+          controls
+          indicators
+        >
+          <b-carousel-slide v-for="(item,index) in relatedProductList" :key="index">
+            <template v-slot:img>
+              <ul class="row justify-content-around pl-0">
+                <li class="col-6 col-md-4 mb-4" v-for="(son,index1) in item" :key="index1">
+                  <article class="product-card box_shadow">
+                    <nuxt-link :to="`/products/${son.id}?catgId=${son.catgId}&maxCatgId=${son.maxCatgId}`">
+                      <b-img 
+                        :src="son.mainPic" 
+                        fluid 
+                        :alt="son.title"
+                      >
+                      </b-img>
+                      <div class="product-card-content">
+                        <h4>{{ son.title }}</h4>
+                        <div v-html="son.content"></div>
+                        <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+                        <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
+                        <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
+                      </div>
+                    </nuxt-link>
+                  </article>
+                </li>
+              </ul>
+            </template>
+          </b-carousel-slide>
+        </b-carousel>
+      </div>
+    </div>
     <!--    聊天记录弹出框-->
     <chat-form ref="chatFrom"></chat-form>
   </div>
@@ -254,11 +295,17 @@ export default {
         busiProdNew: prodDetail,
         next:nextNews,
         previous:prevNews,
+        randomList
       }
     } = await $axios.get(`/web/prodNewsInfo?id=${params.id}`);
     let picsArr = prodDetail.pics ? prodDetail.pics.split(',') : [];
     let productsImages = [prodDetail.mainPic, ...picsArr];
     let currentImgUrl = productsImages[0];
+    const chunkSize = 3;
+    const relatedProductList = [];
+    for (let i = 0; i < randomList.length; i += chunkSize) {
+      relatedProductList.push(randomList.slice(i, i + chunkSize));
+    }
     
     const { data: formConfig } = await $axios.get('/web/inquirySet')
 
@@ -268,6 +315,7 @@ export default {
       productsImages,
       nextNews,
       prevNews,
+      relatedProductList,
       formConfig
     }
   },
@@ -425,6 +473,42 @@ export default {
     background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
     border-radius: .5rem;
   }
+  .related-products {
+    #carousel-1 {
+      @mixin controls {
+        width: 2.875rem;
+        height: 2.875rem;
+        background-color: #7f7f7f;
+        background-size:  1.25rem;
+      }
+      ::v-deep .carousel-control-prev-icon {
+        @include controls;
+      }
+      ::v-deep .carousel-control-next-icon {
+        @include controls;
+      }
+    }
+    .product-card {
+      border: 1px solid #e6e8ec;
+      .product-card-content {
+        padding: 1.125rem 1rem;
+        border-top: .0625rem solid #e6e8ec;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: .8125rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p {
+          color: #878b90;
+        }
+        .view-details {
+          margin: 0 auto;
+          margin-top: 2rem;
+        }
+      }
+    }
+  }
 }
 
 // 特殊样式小屏幕处理