零售轮播图兼容

src/views/News/Retail.vue

@@ -77,13 +77,35 @@
             />
           </div>
         </div>
-        <div class="col-lg-6 lunbo">
+        <div class="col-lg-6 lunbo retail_lunbo">
           <div class="lunbo-cnt">
             <p class="lunbo-title">
               <span>图片集</span>
               <span class="more" @click="lookMore('图片集')">更多>></span>
             </p>
-            <div
+            <div class="banner">
+              <VueSlickCarousel v-bind="bannerSettings" v-if="pictureList.length > 0">
+                <div v-for="(item, index) in pictureList" :key="'pictureList' + index">
+                  <div class="banner-item">
+                   
+                    <div class="banner-bg" @click="lookPictureDetail(item)">
+                      <img :src="item.picFile" alt="" />
+                      <div class="carousel-title">{{item.title}}</div>
+                    </div>
+                  </div>
+                </div>
+                <template #prevArrow>
+                  <div class="custom-arrow"></div>
+                </template>
+                <template #customPaging>
+                  <div class="custom-dot"></div>
+                </template>
+                <template #nextArrow>
+                  <div class="custom-arrow"></div>
+                </template>
+              </VueSlickCarousel>
+            </div>
+            <!-- <div
               id="carouselExampleCaptions"
               class="carousel slide"
               data-bs-ride="carousel"
@@ -147,7 +169,7 @@
                   aria-hidden="true"
                 ></span>
               </button>
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="div5">
@@ -181,10 +203,14 @@
   </div>
 </template>
 <script>
+import VueSlickCarousel from "vue-slick-carousel";
+import "vue-slick-carousel/dist/vue-slick-carousel.css";
+import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
 import breadcrumb from "../comps/breadcrumb.vue";
 import cate from "../comps/cate.vue";
 export default {
   components: {
+    VueSlickCarousel,
     breadcrumb,
   },
   data() {
@@ -253,6 +279,16 @@ export default {
       qrCodeList: [],
       qrCodeImg: '',
       pictureList: [],
+      bannerSettings: {
+        arrows: true,
+        autoplay: true,
+        autoplaySpeed: 4000,
+        dots: true,
+        centerMode: true,
+        centerPadding: "0% 0% 0%",
+        slidesToShow: 1,
+        slidesToScroll: 1,
+      },
     };
   },
   mounted() {
@@ -384,6 +420,38 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.retail_lunbo{
+  .slick-dots {
+    position: absolute;
+    bottom: 40px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    line-height: 20px;
+    li {
+      width: 10px;
+      height: 10px;
+      &.slick-active {
+        .custom-dot {
+          background: #ffffff;
+          opacity: 1;
+        }
+      }
+      .custom-dot {
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        line-height: 1;
+        padding: 0;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
 .composite {
   margin-bottom: 30px;
@@ -562,41 +630,81 @@ export default {
       font-size: 14px;
     }
   }
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    border-radius: 50%;
-    background-color: #000000;
-    background-size: 60% 60%;
+
+  .banner {
+    height: 420px;
+    .banner-item {
+      width: 100%;
+      height: 420px;
+      position: relative;
+      
+      .banner-bg {
+        cursor: pointer;
+        img {
+          width: 100%;
         }
-  /deep/.carousel-indicators {
-    display: block;
-    position: absolute;
-    text-align: right;
-    margin-right: 13px;
-    margin-bottom: 13px;
-    button {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
+        .carousel-title{
+          // position: absolute;
+          // bottom: 20px;
+          text-align: center;
+          margin-top: -30px;
+          color: #fff;
+          font-size: 12px;
         }
-    .active {
-      // width: 4px;
-      // height: 4px!important;
-      // background: #F05587;
-      border: 0;
-      background: #f05587;
       }
     }
     
-  /deep/.carousel-caption{
-    width: 636px;
-    margin: 0 auto;
-    text-align: center;
+    .slick-arrow {
+      // margin: 0 10px;
+      z-index: 10;
+      &.slick-prev {
+        top: 200px;
+        left: 25px;
       }
 
-  .carousel-item{
-    cursor: pointer;
+      &.slick-next {
+        top: 200px;
+        right: 25px;
+      }
     }
+
+    
+  }
+  // .carousel-control-prev-icon,
+  // .carousel-control-next-icon {
+  //   border-radius: 50%;
+  //   background-color: #000000;
+  //   background-size: 60% 60%;
+  // }
+  // /deep/.carousel-indicators {
+  //   display: block;
+  //   position: absolute;
+  //   text-align: right;
+  //   margin-right: 13px;
+  //   margin-bottom: 13px;
+  //   button {
+  //     width: 6px;
+  //     height: 6px;
+  //     border-radius: 50%;
+  //   }
+  //   .active {
+  //     // width: 4px;
+  //     // height: 4px!important;
+  //     // background: #F05587;
+  //     border: 0;
+  //     background: #f05587;
+  //   }
+  // }
+  
+  // /deep/.carousel-caption{
+  //   width: 636px;
+  //   margin: 0 auto;
+  //   text-align: center;
+  // }
+  
+  // .carousel-item{
+  //   cursor: pointer;
+  // }
   .lunbo-bottom {
     width: 100%;
     height: 10%;