feat max-width修复宽度巨长问题

ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/ElCheckboxGroup.vue

@@ -1,25 +1,12 @@
 <template>
-  <ElCheckboxGroup
+  <ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class="ElCheckboxGroup" :style="{ gap }">
-    v-bind="$attrs"
+    <ElCheckbox v-for="item in options" :disabled="item.disabled" :label="item[id] || item[label]"
-    v-on="$listeners"
+      :key="item[id] || item[label]">
-    class="ElCheckboxGroup"
+      <slot :name="item[id] || item[label]" :data="item">{{ item[label] }}
-    :style="{ gap }"
-  >
-    <ElCheckbox
-      v-for="item in options"
-      :disabled="item.disabled"
-      :label="item[id] || item[label]"
-      :key="item[id] || item[label]"
-    >
-      <slot :name="item[id] || item[label]" :data="item"
-        >{{ item[label] }}
       </slot>
       <div v-if="showIcon">
-        <img
+        <img v-if="item.deviceState == '0' || item.deviceState == null" src="@/assets/jihe/images/offline.svg"
-          v-if="item.deviceState == '0' || item.deviceState == null"
+          class="state" />
-          src="@/assets/jihe/images/offline.svg"
-          class="state"
-        />
         <img v-else src="@/assets/jihe/images/online.svg" class="state" />
       </div>
     </ElCheckbox>
@@ -70,7 +57,6 @@ export default {
       display: flex;
       align-items: center;
       gap: 6px;
-      width: 87px;
 
       .el-checkbox__input {
         line-height: 0;

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue

@@ -5,7 +5,7 @@
       <div class="video-pic">
         <Video style="height: 100%; flex: 1" :showHeader="false" :url="dialogData.formData.videoList[0]"
           videoType="mp4" />
-        <Carousel style="flex: 1; height: 100%" :pictures="dialogData.formData.pictures" />
+        <Carousel style="flex: 1; height: 100%;max-width: 300px;" :pictures="dialogData.formData.pictures" />
       </div>
       <LineChart class="chart" />
       <Form class="form" v-loading="loading" v-model="data" ref="FormConfigRef" :formList="formList" column="1" />

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue

@@ -2,12 +2,11 @@
   <div class="Carousel">
     <img src="./images/arrow.svg" @click="prevSlide" class="arrow" />
 
-    <VueSlickCarousel style="width: 100%" v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef"
+    <VueSlickCarousel v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef" class="vueSlickCarousel">
-      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%;width:100%" :src="item" :preview-src-list="pictures">
+        <el-image style="height: 100%" :src="item" :preview-src-list="pictures">
         </el-image>
       </div>
     </VueSlickCarousel>
@@ -48,7 +47,7 @@ export default {
         infinite: true,
         arrows: false,
         speed: 600,
-        slidesToShow: 3,
+        slidesToShow: 1,
         slidesToScroll: 1,
         autoplay: true,
         autoplaySpeed: 1800,
@@ -77,37 +76,20 @@ 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%;
         }
       }
-
-
-        }
-
-
-      }
     }
 
     .item {
       img {
         height: 100%;
-        width: 100%;
       }
     }
   }