修改首页要闻左侧焦点图样式

src/views/Home/index.vue

@@ -44,85 +44,39 @@
     <div class="bgWhite padding40">
       <div class="container">
         <div class="row">
-          <div class="col-lg-6 newsBanner">
+          <div class="col-lg-6">
+            <div class="newsBanner">
               <VueSlickCarousel
-              v-bind="newsBannerSettings"
+              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"
               >
-                <img :src="el.picFile" alt="..." />
-                <div class="newsBanner-caption">
-                  <div class="newsBanner-title">
-                    {{ el.title }}
+                <img :src="el.picFile" alt="..."  class="newsBanner-tp"/>
               </div>
-                </div>
-              </div>
-              <template #customPaging>
-                <div class="custom-dot"></div>
-              </template>
             </VueSlickCarousel>
-            <div
-              id="jiaodiantu"
-              class="jiaodiantu carousel carousel-dark slide"
-              data-bs-ride="carousel"
-              v-if="false"
+            <VueSlickCarousel
+              v-bind="newsBannerSettingsB"
+              v-if="newsBanner.length > 0"
+              ref="newsBannerB"
+              class="newsBannerB"
+              :asNavFor="$refs.newsBannerA"
             >
-              <div class="carousel-indicators">
-                <button
-                  v-for="(el, i) in newsBanner"
-                  :key="el.id"
-                  type="button"
-                  data-bs-target="#jiaodiantu"
-                  :data-bs-slide-to="i"
-                  :class="{ active: i === 0 }"
-                  aria-current="true"
-                  :aria-label="`Slide ${i}`"
-                ></button>
-              </div>
-              <div class="carousel-inner">
               <div
-                  :class="['carousel-item', { active: i === 0 }]"
-                  v-for="(el, i) in newsBanner"
+                class="newsBanner-item"
+                v-for="el in newsBanner"
                 :key="el.id"
               >
-                  <img :src="el.picFile" class="d-block" alt="..." />
-                  <div class="carousel-caption">
-                    <div class="carousel-title">
+                <div class="newsBanner-title">
                   {{ el.title }}   
                 </div>
               </div>
-                </div>
-              </div>
-              <div class="inverted">
-                <button
-                  class="carousel-control-prev"
-                  type="button"
-                  data-bs-target="#jiaodiantu"
-                  data-bs-slide="prev"
-                >
-                  <img
-                    src="../../assets/image/home/prev.png"
-                    class="d-block w-100"
-                    alt="..."
-                  />
-                </button>
-                <button
-                  class="carousel-control-next"
-                  type="button"
-                  data-bs-target="#jiaodiantu"
-                  data-bs-slide="next"
-                >
-                  <img
-                    src="../../assets/image/home/next.png"
-                    class="d-block w-100"
-                    alt="..."
-                  />
-                </button>
-              </div>
+            </VueSlickCarousel>
             </div>
           </div>
           <div class="col-lg-6">
@@ -593,10 +547,17 @@ export default {
         slidesToScroll: 1,
       },
       newsBanner: [], // 要闻左侧图片
-      newsBannerSettings: {
+      newsBannerSettingsA: {
+        arrows: false,
+        autoplay: false,
+        dots: false,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+      },
+      newsBannerSettingsB: {
         arrows: true,
         autoplay: false,
-        dots: true,
+        dots: false,
         slidesToShow: 1,
         slidesToScroll: 1,
       },
@@ -1187,40 +1148,22 @@ export default {
     .slick-arrow {
       z-index: 9;
       width: 40px;
+      height: 40px;
       &.slick-prev {
         left: 0;
+        position: relative;
         &::before {
           font-size: 40px;
         }
       }
       &.slick-next {
         right: 0;
+        position: relative;
         &::before {
           font-size: 40px;
         }
       }
     }
-    .slick-dots {
-      width: auto !important;
-      bottom: 5px !important;
-      right: 0 !important;
-      li {
-        width: 7px;
-        height: 7px;
-        &.slick-active {
-          .custom-dot {
-            background: #f26335;
-          }
-        }
-        .custom-dot {
-          width: 100%;
-          height: 100%;
-          background: #fff;
-          line-height: 1;
-          padding: 0;
-        }
-      }
-    }
   }
 }
 @media screen and (min-width: 992px) {
@@ -1329,24 +1272,33 @@ export default {
     background: $bg-color;
   }
   .newsBanner {
+    position: relative;
     .newsBanner-item {
       height: 100%;
       width: 100%;
       position: relative;
-      img {
+      .newsBanner-tp {
         width: 100%;
         height: 100%;
       }
     }
-    .newsBanner-caption {
+    .newsBannerB{
       position: absolute;
+      width: 100%;
       left: 0;
       bottom: 0;
       text-align: left;
       padding: 0;
+      height: 50px;
+      display: flex;
+      align-items: center;
       .newsBanner-title {
         font-size: 18px;
+        height: 100%;
         color: rgba(255, 255, 255, 1);
+        display: flex;
+        align-items: center;
+        flex: 1;
       }
     }
   }