修改首页最下面广告滚动样式

src/views/Home/index.vue

@@ -47,36 +47,42 @@
           <div class="col-lg-6">
             <div class="newsBanner">
               <VueSlickCarousel
-              v-bind="newsBannerSettingsA"
-              v-if="newsBanner.length > 0"
-              ref="newsBannerA"
-              :asNavFor="$refs.newsBannerB"
-            >
-              <div
-                class="newsBanner-item"
-                v-for="el in newsBanner"
-                :key="el.id"
+                v-bind="newsBannerSettingsA"
+                v-if="newsBanner.length > 0"
+                ref="newsBannerA"
+                :asNavFor="$refs.newsBannerB"
               >
-                <img :src="el.picFile" alt="..."  class="newsBanner-tp"/>
-              </div>
-            </VueSlickCarousel>
-            <VueSlickCarousel
-              v-bind="newsBannerSettingsB"
-              v-if="newsBanner.length > 0"
-              ref="newsBannerB"
-              class="newsBannerB"
-              :asNavFor="$refs.newsBannerA"
-            >
-              <div
-                class="newsBanner-item"
-                v-for="el in newsBanner"
-                :key="el.id"
+                <div
+                  class="newsBanner-item"
+                  v-for="el in newsBanner"
+                  :key="el.id"
+                >
+                  <img :src="el.picFile" alt="..." class="newsBanner-tp" />
+                </div>
+              </VueSlickCarousel>
+              <VueSlickCarousel
+                v-bind="newsBannerSettingsB"
+                v-if="newsBanner.length > 0"
+                ref="newsBannerB"
+                class="newsBannerB"
+                :asNavFor="$refs.newsBannerA"
               >
-                <div class="newsBanner-title">
-                  {{ el.title }}   
+                <div
+                  class="newsBanner-item"
+                  v-for="el in newsBanner"
+                  :key="el.id"
+                >
+                  <div class="newsBanner-title">
+                    {{ el.title }}
+                  </div>
                 </div>
-              </div>
-            </VueSlickCarousel>
+                <template #prevArrow>
+                  <div class="custom-arrow"></div>
+                </template>
+                <template #nextArrow>
+                  <div class="custom-arrow"></div>
+                </template>
+              </VueSlickCarousel>
             </div>
           </div>
           <div class="col-lg-6">
@@ -427,12 +433,41 @@
             </div>
           </div>
         </div>
-        <div class="advert">
+        <div class="smallImages">
+          <VueSlickCarousel
+            v-bind="smallImagesSettings"
+            v-if="smallImages.length > 0"
+            ref="smallImages"
+          >
+            <div
+              class="smallImages-item"
+              v-for="(tmpA, i) in smallImages"
+              :key="i"
+            >
+              <div class="row">
+                  <div
+                    class="col-lg-4"
+                    v-for="(tmpB, ii) in tmpA"
+                    :key="ii"
+                    @click="handelSmallImagesClick(tmpB)"
+                  >
+                    <img :src="tmpB.picIndexPath" />
+                  </div>
+                </div>
+            </div>
+            <template #prevArrow>
+              <div class="custom-arrow"></div>
+            </template>
+            <template #nextArrow>
+              <div class="custom-arrow"></div>
+            </template>
+          </VueSlickCarousel>
           <div
             id="advert"
             class="carousel slide"
             data-bs-ride="carousel"
             data-bs-interval="false"
+            v-if="false"
           >
             <div class="carousel-inner">
               <div
@@ -894,6 +929,13 @@ export default {
         ],
       },
       smallImages: [],
+      smallImagesSettings: {
+        arrows: true,
+        autoplay: false,
+        dots: false,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+      },
     };
   },
   created() {
@@ -1113,6 +1155,7 @@ export default {
     height: 100%;
   }
   .slick-slide {
+    height: 100%;
     > div {
       height: 100%;
       > div {
@@ -1120,6 +1163,48 @@ export default {
       }
     }
   }
+  .slick-arrow {
+    z-index: 9;
+    display: flex;
+    align-items: center;
+    &.slick-prev {
+      left: 0;
+      &::before {
+        background: url("../../assets/image/home/prevArrow-default.png")
+          no-repeat;
+        background-size: 100% 100%;
+        content: "";
+      }
+      &:hover {
+        &::before {
+          background: url("../../assets/image/home/prevArrow-hover.png")
+            no-repeat;
+            background-size: 100% 100%;
+        }
+      }
+    }
+    &.slick-next {
+      right: 0;
+      display: flex;
+      justify-content: flex-end;
+      &::before {
+        background: url("../../assets/image/home/nextArrow-default.png")
+          no-repeat;
+        background-size: 100% 100%;
+        content: "";
+      }
+      &:hover {
+        &::before {
+          background: url("../../assets/image/home/nextArrow-hover.png")
+            no-repeat;
+            background-size: 100% 100%;
+        }
+      }
+    }
+    img {
+      vertical-align: middle;
+    }
+  }
   .banner {
     .slick-dots {
       bottom: 25px !important;
@@ -1146,28 +1231,48 @@ export default {
   }
   .newsBanner {
     .slick-arrow {
-      z-index: 9;
       width: 40px;
-      height: 40px;
+      height: 50px;
+      margin: 0 10px;
       &.slick-prev {
-        left: 0;
         position: relative;
         &::before {
-          font-size: 40px;
+          width: 9px;
+          height: 14px;
         }
       }
       &.slick-next {
-        right: 0;
         position: relative;
         &::before {
-          font-size: 40px;
+          width: 9px;
+          height: 14px;
         }
       }
+      img {
+        vertical-align: middle;
+      }
     }
-    .newsBannerB{
+    .newsBannerB {
       background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, #000000 100%);
     }
   }
+  .smallImages {
+    .slick-arrow {
+      margin: 0 10px;
+      &.slick-prev {
+        &::before {
+          width: 10px;
+          height: 18px;
+        }
+      }
+      &.slick-next {
+        &::before {
+          width: 10px;
+          height: 18px;
+        }
+      }
+    }
+  }
 }
 @media screen and (min-width: 992px) {
   .dzfwDialog-width {
@@ -1285,7 +1390,7 @@ export default {
         height: 100%;
       }
     }
-    .newsBannerB{
+    .newsBannerB {
       position: absolute;
       width: 100%;
       left: 0;
@@ -1305,6 +1410,7 @@ export default {
       }
     }
   }
+
   .tabs1 {
     display: flex;
     justify-content: space-between;
@@ -1632,28 +1738,24 @@ export default {
         width: 100%;
       }
     }
-    .advert {
+    .smallImages {
       margin: 40px 0;
-      .carousel-item {
+      .smallImages-item {
         img {
           width: 100%;
           cursor: pointer;
         }
       }
-      .carousel-control-prev,
-      .carousel-control-next {
-        opacity: 1;
-        width: 24px;
-        height: 50px;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        margin: 0;
+    }
+    .advert {
+      margin: 40px 0;
+      .carousel-item {
         img {
           width: 100%;
-          height: 100%;
+          cursor: pointer;
         }
       }
+      
     }
   }