修改提交

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">
@@ -872,8 +872,6 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-
-
 .templateBox {
   width: 100%;
   height: 100%;
@@ -959,6 +957,11 @@ export default {
   }
 }
 
+.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;