From 7f2ab71aeca55717c1f7a8d5b71cad105cd401a6 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Thu, 18 Jan 2024 21:18:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Home/components/InfoBoard/index.vue | 412 ++++++++++--------
 1 file changed, 239 insertions(+), 173 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
index a1f9358a..bc0db79c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mask">
     <transition>
       <div v-if="visible" class="dialog_info">
         <div class="dialog_info_left">
@@ -11,21 +11,21 @@
           <div class="dialogContent">
             <div v-if="selectedBdMsg.length > 0" class="dialogContent_box" style="height: 100%;">
               <vuescroll :ops="scrollOptions" class="templateBox">
-              <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
-                <!-- 模板内容 -->
-                <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
-                <!-- 操作按钮 -->
-                <div class="infoBtnBox">
-                  <el-tooltip content="编辑" placement="top">
-                    <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
-                  </el-tooltip>
-                  <el-tooltip content="删除" placement="top">
-                    <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
-                  </el-tooltip>
+                <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
+                  <!-- 模板内容 -->
+                  <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+                  <!-- 操作按钮 -->
+                  <div class="infoBtnBox">
+                    <el-tooltip content="编辑" placement="top">
+                      <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
+                    </el-tooltip>
+                    <el-tooltip content="删除" placement="top">
+                      <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
+                    </el-tooltip>
+                  </div>
                 </div>
-              </div>
-              
-            </vuescroll>
+
+              </vuescroll>
             </div>
             <div v-else class="dialogContent_box" style="height: 100%;">
               <div class="dialogContent_box_empty">暂无数据</div>
@@ -52,7 +52,7 @@
                 :style="{ 'transform': isShowTemplate ? 'rotate(0deg)' : 'rotate(180deg)' }">
               <div class="txt">信息模板</div>
             </div>
-            
+
             <!-- 原型图上没有“附近相机”，代码里暂时关闭
               <div class="sideSwitch" style="top:36%;" @click="showCameraInfoFn">
               <img class="img" src="@/assets/screen/xtb/leftd.png" alt=""
@@ -61,30 +61,30 @@
             </div> -->
           </div>
         </div>
-        
+
         <!-- 信息模板 -->
         <div v-if="isShowTemplate" class="dialog_info_right">
           <vuescroll :ops="scrollOptions" class="templateBox">
-              <div v-for="(item, index) in templateAvailable" :key="item.dictValue">
-                <!-- 原来是<el-collapse v-model="activeNames"> -->
-                <h3>{{ item.dictLabel }}</h3>
-                <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
-                  <!-- 模板内容 -->
-                  <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
-                  <!-- <div class="infoPreview">
+            <div v-for="(item, index) in templateAvailable" :key="item.dictValue">
+              <!-- 原来是<el-collapse v-model="activeNames"> -->
+              <h3>{{ item.dictLabel }}</h3>
+              <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
+                <!-- 模板内容 -->
+                <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
+                <!-- <div class="infoPreview">
                       <div class="infoBox" :style="____boardBgStyle">
                         <span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
                       </div>
                     </div> -->
-                  <!-- 操作按钮 -->
-                  <div class="infoBtnBox">
-                    <el-tooltip content="加入待下发信息" placement="top">
-                      <p @click="____onAddToDevice(itm)" class="btn btnApply"></p>
-                    </el-tooltip>
-                  </div>
+                <!-- 操作按钮 -->
+                <div class="infoBtnBox">
+                  <el-tooltip content="加入待下发信息" placement="top">
+                    <p @click="____onAddToDevice(itm)" class="btn btnApply"></p>
+                  </el-tooltip>
                 </div>
               </div>
-            </vuescroll>
+            </div>
+          </vuescroll>
         </div>
 
 
@@ -141,7 +141,7 @@
     </transition>
 
     <BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
-        :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
+      :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
 
     <!-- 情报板弹框中的弹框 -->
     <addBoard ref="addinfo" @addInfo="addInfo" />
@@ -167,7 +167,7 @@ import { getTemplateList } from '@/api/board/template'
 
 export default {
   name: 'InfoBoard',
-  data(){
+  data() {
     return {
       dialogTit: '门架式可变信息标志YK16+270',
       isShowTemplate: false,
@@ -192,26 +192,26 @@ export default {
         { id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
         { id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }
       ],
-      activeNames:[1001 , 1002],
-      activeTab:"first",
+      activeNames: [1001, 1002],
+      activeTab: "first",
       moBanDataList: [{
         dictCode: 1001,
         dictLabel: "日常通用",
         mbList: [
           {
-          id: 3001,
-          screenSize: "200*80",
-          tcontents: [
-            {
-              content: "谨慎驾驶 注意安全",
-              formatStyle: 0,
-              fontSize:"24",
-              fontType:"微软雅黑",
-              fontColor:"0000FF"
-            }
-          ]
-        }
-      ]
+            id: 3001,
+            screenSize: "200*80",
+            tcontents: [
+              {
+                content: "谨慎驾驶 注意安全",
+                formatStyle: 0,
+                fontSize: "24",
+                fontType: "微软雅黑",
+                fontColor: "0000FF"
+              }
+            ]
+          }
+        ]
       }, {
         dictCode: 1002,
         dictLabel: "施工管理",
@@ -261,10 +261,10 @@ export default {
         { id: 5002, txt: '光圈', numL: 16, numR: 15 },
         { id: 5003, txt: '聚焦', numL: 14, numR: 13 }
       ],
-      showEmit:false,
+      showEmit: false,
 
-      selectedBdMsg:[],
-      selectedSize:"",
+      selectedBdMsg: [],
+      selectedSize: "",
       editDialog: {
         mode: "",
         type: "",
@@ -272,22 +272,22 @@ export default {
         tpl: {}
       },
       scrollOptions,
-      templateAvailable:null,
+      templateAvailable: null,
       tplCategory: [], //模板
-      templateAll:[]
+      templateAll: []
     }
   },
-  props:{
-    visible:{
-      type:Boolean,
-      default:false
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
     },
     device: {
-      type:Object,
-      default:null
+      type: Object,
+      default: null
     }
   },
-  watch:{
+  watch: {
     device: {
       handler(newV) {
         this.____getDeviceInfo();
@@ -295,13 +295,13 @@ export default {
       immediate: false
     }
   },
-  components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll},
-   created() {
-      this.____getTemplateCategory();
-      this.____getAllTemplate();
+  components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll },
+  created() {
+    this.____getTemplateCategory();
+    this.____getAllTemplate();
     // this.getTemplateSeries();
   },
-  computed:{
+  computed: {
   },
   mounted() {
     //测试数据
@@ -318,7 +318,7 @@ export default {
     ]
   },
   methods: {
-     // 获取信息模板分类
+    // 获取信息模板分类
     ____getTemplateCategory() {
       return this.getDicts('iot_template_category').then(res => {
         this.tplCategory = res.data;
@@ -331,7 +331,7 @@ export default {
       });
     },
 
-    ____getDeviceInfo(){
+    ____getDeviceInfo() {
       this.selectedSize = JSON.parse(this.device.otherConfig).screenSize;
       this.____setAvailableTemplate();
 
@@ -399,7 +399,7 @@ export default {
       }
     },
 
-    ____refreshPageData(para){},
+    ____refreshPageData(para) { },
 
 
     // 新增待下发
@@ -424,8 +424,8 @@ export default {
       let arr = node.screenSize.split("*");
       let scale = this.getScrollSz(+arr[0]);
       let obj = {
-        'width':`${+arr[0] / scale}px`,
-        'height':`${+arr[1] / scale}px`, 
+        'width': `${+arr[0] / scale}px`,
+        'height': `${+arr[1] / scale}px`,
         'justify-content': this.getTextAlign(node.tcontents[0].formatStyle)
       }
       return obj;
@@ -433,35 +433,35 @@ export default {
     boardConStyle(node) {
       let fSize = +node.tcontents[0].fontSize;
       let scale = this.getScrollSz(fSize);
-      let obj = { 
-        'font-size': `${fSize/scale}px`,
+      let obj = {
+        'font-size': `${fSize / scale}px`,
         'color': '#' + node.tcontents[0].fontColor,
         'font-family': node.tcontents[0].fontType
       }
       return obj;
     },
     //情报板原始数据转化成目标格式
-    boardDataConvert(origin){
+    boardDataConvert(origin) {
       let rst = origin.map(item => {
-          return {
-            ...item,
-            STAY: item.playbackDuration,
-            inScreenMode: item.screenEntryMethod,
-            screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
-            tcontents: [
-              {
-                ...item,
-                fontSpacing: item.fontSpacing,
-                fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
-                fontType: item.font,
-                fontColor: item.foregroundColor.toUpperCase(),
-                formatStyle: item.horizontalAlignment,
-                STAY: item.playbackDuration / 10,
-                content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
-              }
-            ]
-          }
-        });
+        return {
+          ...item,
+          STAY: item.playbackDuration,
+          inScreenMode: item.screenEntryMethod,
+          screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
+          tcontents: [
+            {
+              ...item,
+              fontSpacing: item.fontSpacing,
+              fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
+              fontType: item.font,
+              fontColor: item.foregroundColor.toUpperCase(),
+              formatStyle: item.horizontalAlignment,
+              STAY: item.playbackDuration / 10,
+              content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
+            }
+          ]
+        }
+      });
       return rst;
     },
     // 地图点位
@@ -872,93 +872,96 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-
-
 .templateBox {
-        width: 100%;
-        height: 100%;
-
-        .tplItem {
-          margin-right: 14px;
-          display: flex;
-          align-items: stretch;
-          padding-bottom: 10px;
-
-          .boardPreview {
-            border: 2px solid #004c64;
-            // width: 560px;
-            // height:80px;
-            flex: 1;
-          }
-
-          .infoBtnBox {
-            width: 160px;
-            height: 80px;
-            display: flex;
-            margin-left: 10px;
-            /* // border: solid 1px #05afe3; */
-            border: 2px solid #004c64;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-
-            .btn {
-              background-repeat: no-repeat;
-              background-size: 100% 100%;
-              width: 40px;
-              height: 40px;
-
-              &.btnApply {
-                background-image: url(~@/assets/jihe/images/button/toLeft.png);
-              }
-
-              &.btnEdit {
-                background-image: url(~@/assets/jihe/images/button/edit.png);
-              }
+  width: 100%;
+  height: 100%;
 
-              &.btnDelete {
-                background-image: url(~@/assets/jihe/images/button/delete.png);
-              }
-            }
+  .tplItem {
+    margin-right: 14px;
+    display: flex;
+    align-items: stretch;
+    padding-bottom: 10px;
 
-            i {
-              font-size: 24px;
-              color: #666;
-              padding-left: 4px;
-              cursor: pointer;
-              caret-color: rgba(0, 0, 0, 0);
-              user-select: none;
-            }
+    .boardPreview {
+      border: 2px solid #004c64;
+      // width: 560px;
+      // height:80px;
+      flex: 1;
+    }
 
-            i:hover {
-              color: #05afe3;
-            }
+    .infoBtnBox {
+      width: 160px;
+      height: 80px;
+      display: flex;
+      margin-left: 10px;
+      /* // border: solid 1px #05afe3; */
+      border: 2px solid #004c64;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
 
-            .disabledClass {
-              pointer-events: none;
-              cursor: auto !important;
-              color: #ccc;
-            }
-          }
+      .btn {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        width: 40px;
+        height: 40px;
 
+        &.btnApply {
+          background-image: url(~@/assets/jihe/images/button/toLeft.png);
         }
 
-        .controlBox {
-          margin-top: 10px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: center;
+        &.btnEdit {
+          background-image: url(~@/assets/jihe/images/button/edit.png);
         }
 
-        .el-collapse {
-          max-height: 100% !important;
-          overflow: auto;
-          border-bottom: none;
-          border-top: none;
-          padding: 0 0.5vw;
+        &.btnDelete {
+          background-image: url(~@/assets/jihe/images/button/delete.png);
         }
       }
-      
+
+      i {
+        font-size: 24px;
+        color: #666;
+        padding-left: 4px;
+        cursor: pointer;
+        caret-color: rgba(0, 0, 0, 0);
+        user-select: none;
+      }
+
+      i:hover {
+        color: #05afe3;
+      }
+
+      .disabledClass {
+        pointer-events: none;
+        cursor: auto !important;
+        color: #ccc;
+      }
+    }
+
+  }
+
+  .controlBox {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .el-collapse {
+    max-height: 100% !important;
+    overflow: auto;
+    border-bottom: none;
+    border-top: none;
+    padding: 0 0.5vw;
+  }
+}
+
+.mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+}
 
 .map_dialog {
   width: 510px;
@@ -969,6 +972,7 @@ export default {
   top: 0px;
   transform: translate(-110%, -110%);
 }
+
 .dialog_info {
   width: 950px;
   height: 600px;
@@ -980,11 +984,13 @@ export default {
   justify-content: space-around;
   align-items: flex-end;
 }
+
 .dialog_info_left {
   width: 510px;
   height: 100%;
   background-color: #114c66;
 }
+
 .dialog_info_right {
   width: 430px;
   height: 556px;
@@ -994,6 +1000,7 @@ export default {
   overflow-y: scroll;
   position: relative;
 }
+
 .dialog_head {
   width: 100%;
   height: 48px;
@@ -1006,15 +1013,18 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .tit {
     color: #3de8ff;
     font-size: 18px;
   }
+
   .btnCls {
     width: 13px;
     height: 13px;
     cursor: pointer;
   }
+
   .deco {
     width: 55%;
     height: 5px;
@@ -1023,17 +1033,20 @@ export default {
     top: 0;
   }
 }
+
 .dialogContent {
   width: 100%;
   height: 300px;
   padding: 10px 40px 10px 10px;
   position: relative;
 }
+
 .dialogContent_box {
   width: 100%;
   // height: 100%;
   overflow-y: scroll;
 }
+
 .dialogContent_l {
   width: 355px;
   // height: 4.91vh;
@@ -1043,6 +1056,7 @@ export default {
   justify-content: center;
   align-items: center;
 }
+
 .dialogContent_r {
   width: 96px;
   // height: 4.91vh;
@@ -1051,6 +1065,7 @@ export default {
   justify-content: space-around;
   align-items: center;
 }
+
 .dialogContent_l_xsq {
   width: 256px;
   height: 100%;
@@ -1069,33 +1084,39 @@ export default {
   height: 2.96vh;
   cursor: pointer;
 }
+
 .dialogContent_r_btn1 {
   background-image: url('~@/assets/screen/xtb/gg.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
 }
+
 .dialogContent_r_btn2 {
   background-image: url('~@/assets/screen/xtb/xx.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
 }
+
 .dialogContent_r_btn3 {
   background-image: url('~@/assets/screen/xtb/zz.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
 }
+
 .dialogContent_box_item {
   margin-bottom: 0.5vh;
   display: flex;
   justify-content: space-between;
 }
+
 .dialogContent_bottom {
   width: 105%;
   height: 16.52vh;
 }
+
 .show_bottom_tab_item {
   width: 50%;
   padding: 0.5vh 0;
@@ -1103,21 +1124,25 @@ export default {
   // flex-wrap: wrap;
   // align-items: center;
 }
+
 .show_bottom_tab_box {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
+
 .show_bottom_tab_item_l {
   color: #3de8ff;
   font-size: 14px;
 }
+
 .show_bottom_tab_item_r {
   color: #fff;
   font-size: 14px;
   margin-left: 0.5vw;
 }
+
 .sideSwitch {
   position: absolute;
   right: 0%;
@@ -1130,31 +1155,38 @@ export default {
   opacity: 1;
   text-align: center;
   cursor: pointer;
+
   .img {
     width: 15px;
     height: 10px;
     border: none;
-    transition: transform 0.3s ease; /* 过渡效果 */
+    transition: transform 0.3s ease;
+    /* 过渡效果 */
   }
+
   .txt {
     color: #fff;
     font-size: 13px;
   }
 }
+
 .dialogContent_box_empty {
   font-size: 14px;
   text-align: center;
   color: #fff;
 }
+
 .dialog_info_right_tit {
   color: #fff;
   font-size: 14px;
   margin-bottom: 0.5vh;
 }
+
 .dialog_info_right_show {
   width: 100%;
   // height: 28vh;
 }
+
 .dialogContent_bottom_btn {
   width: 100%;
   height: 5vh;
@@ -1163,6 +1195,7 @@ export default {
   align-items: center;
   text-align: center;
 }
+
 .show_bottom_btn_add {
   width: 90px;
   height: 23px;
@@ -1175,6 +1208,7 @@ export default {
   margin-right: 0.5vw;
   cursor: pointer;
 }
+
 .show_bottom_btn_del {
   width: 90px;
   height: 23px;
@@ -1186,31 +1220,37 @@ export default {
   opacity: 1;
   cursor: pointer;
 }
+
 .info_right_camera {
   width: 100%;
   height: calc(100% - 4vh);
   padding: 1vh 0.5vw;
 }
+
 .info_right_camera_top {
   width: 100%;
   height: 20vh;
 }
+
 .info_right_camera_bom {
   width: 100%;
   padding: 1vh 0;
   height: calc(100% - 20vh);
   display: flex;
 }
+
 .camera_bom_left {
   width: 50%;
   height: 100%;
   padding: 2vh 0;
   border-right: 1px dashed #285a71;
 }
+
 .camera_bom_right {
   width: 50%;
   height: 100%;
 }
+
 .camera_bom_left_item {
   width: 100%;
   color: #fff;
@@ -1218,24 +1258,29 @@ export default {
   font-size: 14px;
   padding-bottom: 1.5vh;
 }
+
 .camera_bom_left_item_txt {
   width: 31%;
   color: #3de8ff;
 }
+
 .camera_bom_left_item_val {
   color: #fff;
   font-size: 13px;
 }
+
 .camera_bom_right_t {
   width: 100%;
   height: 60%;
   position: relative;
 }
+
 .camera_bom_right_b {
   width: 100%;
   height: 40%;
   // background-color: deeppink;
 }
+
 .camera_bom_right_t_box {
   width: 2vw;
   height: 4vh;
@@ -1247,6 +1292,7 @@ export default {
   border-radius: 50%;
   border: 1px solid #2191b1;
 }
+
 .camera_bom_right_t_h_po {
   width: 1vw;
   height: 5vh;
@@ -1259,12 +1305,14 @@ export default {
   background-repeat: no-repeat;
   background-position: center;
 }
+
 .camera_bom_right_b_btn {
   width: 100%;
   padding: 0vh 2vw 1vh 2vw;
   display: flex;
   justify-content: space-between;
 }
+
 .camera_bom_right_b_btn_l {
   width: 1.2vw;
   height: 2.4vh;
@@ -1275,9 +1323,11 @@ export default {
   background-position: center;
   cursor: pointer;
 }
+
 .camera_bom_right_b_btn_c {
   color: #fff;
 }
+
 .camera_bom_right_b_btn_r {
   width: 1.2vw;
   height: 2.4vh;
@@ -1288,6 +1338,7 @@ export default {
   background-position: center;
   cursor: pointer;
 }
+
 //   background-color: #104b65;
 //   background-image: url('~@/assets/screen/xtb/qbbtit.png');
 //   background-size: 100% 100%;
@@ -1296,18 +1347,24 @@ export default {
 
 /* 通用滚动条样式 */
 ::-webkit-scrollbar {
-  width: 3px; /* 设置滚动条宽度 */
-  height: 3px; /* 设置滚动条高度 */
+  width: 3px;
+  /* 设置滚动条宽度 */
+  height: 3px;
+  /* 设置滚动条高度 */
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #114c66; /* 设置滚动条轨道颜色 */
+  background-color: #114c66;
+  /* 设置滚动条轨道颜色 */
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #9abce0; /* 设置滚动条滑块颜色 */
-  border-radius: 4px; /* 设置滚动条滑块圆角 */
+  background-color: #9abce0;
+  /* 设置滚动条滑块颜色 */
+  border-radius: 4px;
+  /* 设置滚动条滑块圆角 */
 }
+
 ::v-deep .el-tabs__nav-wrap::after {
   background-color: #316076;
 }
@@ -1315,12 +1372,15 @@ export default {
 ::v-deep .el-tabs__item.is-active {
   color: #3de8ff !important;
 }
+
 ::v-deep .el-tabs__item {
   color: #fff !important;
 }
+
 ::v-deep .el-tabs__active-bar {
   background-color: #3de8ff !important;
 }
+
 ::v-deep .el-collapse-item__header {
   color: #fff;
   height: 28px;
@@ -1328,10 +1388,12 @@ export default {
   border: none;
   padding-left: 0.5vw;
 }
+
 ::v-deep .el-collapse {
   color: #fff;
   border: none;
 }
+
 ::v-deep .el-collapse-item__wrap {
   color: #fff;
   will-change: height;
@@ -1342,17 +1404,21 @@ export default {
   margin-top: 0.5vh;
   border: none;
 }
+
 ::v-deep .el-collapse-item__content {
   margin-bottom: 0;
   padding: 0.5vh 0.5vw;
 }
+
 ::v-deep .el-collapse-item {
   margin-bottom: 1vh;
 }
+
 ::v-deep .el-input--mini .el-input__icon {
   line-height: 20px;
   color: #fff;
 }
+
 ::v-deep .el-input--mini .el-input__inner {
   height: 20px;
   line-height: 20px;