From 171163f98688a1fd0d4c67acb0e8f1c7977a8422 Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Tue, 19 Mar 2024 11:19:29 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E4=BF=AE=E5=A4=8DVueSlickCarousel=20?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E6=9C=AA=E5=8D=A0=E6=BB=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EventDetailDialog/Carousel/index.vue      | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue
index 575b3c50..d99ae97e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue
@@ -2,11 +2,12 @@
   <div class="Carousel">
     <img src="./images/arrow.svg" @click="prevSlide" class="arrow" />
 
-    <VueSlickCarousel v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef" class="vueSlickCarousel">
+    <VueSlickCarousel style="width: 100%" v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef"
+      class="vueSlickCarousel">
       <div v-for="(item, index) in pictures" :key="index" class="item">
         <!-- <img :src="require(`@screen/images/${item}`)" style="height: 100%"> -->
         <!-- <img :src="item" style="height: 100%"> -->
-        <el-image style="height: 100%" :src="item" :preview-src-list="pictures">
+        <el-image style="height: 100%;width:100%" :src="item" :preview-src-list="pictures">
         </el-image>
       </div>
     </VueSlickCarousel>
@@ -76,20 +77,37 @@ export default {
   .vueSlickCarousel {
     flex: 1;
     overflow: hidden;
+    width: 100%;
 
     ::v-deep {
       .slick-list {
         height: 100%;
+        width: 100%;
+
+        .slick-track {
+          width: 100% !important;
+          height: 100% !important;
+
+          .slick-slide {
+            width: 100% !important;
+
+            div {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
 
-        div {
-          height: 100%;
         }
+
+
       }
     }
 
     .item {
       img {
         height: 100%;
+        width: 100%;
       }
     }
   }