update

src/App.vue

@@ -42,6 +42,9 @@ export default {
   .el-menu {
     border-right: 0;
   }
+  .anchorBL {
+    display: none !important;
+  }
 }
 
 @font-face {

src/views/factor/index.vue

@@ -419,41 +419,48 @@ export default {
   },
 };
 </script>
+<style lang="less">
+  .anchorBL {
+    display: none !important;
+  }
+</style>
 <style lang="less" scoped>
 .content {
   width: 100%;
-  height: calc(100% - 80px);
+  height: calc(100% - 12px);
   //   border: 0.1px solid #28847e;
   display: flex;
   justify-content: center;
   align-items: center;
+
   .factor_body {
     width: 100%;
-    height: 90vh;
+    height: 100%;
     background: url("~@/assets/factor/factorback.png") no-repeat;
     background-size: 100% 100%;
+    padding-top: 16px;
+    box-sizing: border-box;
     .factor_title {
-      margin-top: 2vh;
       width: 7vw;
-      height: 3.5vh;
+      height: 34px;
       color: #fff;
       font-size: 19px;
       text-align: center;
-      line-height: 3.5vh;
       font-weight: 600;
       letter-spacing: 2px;
       text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     }
     .factor_map {
-      width: 100%;
-      height: 84vh;
+      margin: 0 12px;
+      width: calc(100% - 24px);
+      height: calc(100% - 36px);
       display: flex;
       justify-content: center;
       align-items: center;
       .map_body {
-        width: 98%;
-        height: 82vh;
-        border: 0.1px solid #28847e;
+        width: 100%;
+        height: 100%;
+        //border: 0.1px solid #28847e;
         position: relative;
         .right_search {
           top: 20px;
@@ -727,4 +734,4 @@ export default {
     }
   }
 }
-</style>
+</styleless>

src/views/realtimeWarning/components/allWarn.vue

@@ -180,7 +180,6 @@ export default {
 .main_box {
   .list_body {
     width: 100%;
-    height: 57vh;
     box-sizing: border-box;
     overflow-y: scroll;
     // border: 0.1px solid #54a972;

src/views/realtimeWarning/components/blueWarn.vue

@@ -157,7 +157,6 @@ export default {
 .main_box {
   .list_body {
     width: 100%;
-    height: 57vh;
     box-sizing: border-box;
     overflow-y: scroll;
     // border: 0.1px solid #54a972;

src/views/realtimeWarning/components/greenWarn.vue

@@ -153,7 +153,6 @@ export default {
 .main_box {
   .list_body {
     width: 100%;
-    height: 57vh;
     box-sizing: border-box;
     overflow-y: scroll;
     // border: 0.1px solid #54a972;

src/views/realtimeWarning/components/redWarn.vue

@@ -157,7 +157,6 @@ export default {
 .main_box {
   .list_body {
     width: 100%;
-    height: 57vh;
     box-sizing: border-box;
     overflow-y: scroll;
     // border: 0.1px solid #54a972;

src/views/realtimeWarning/components/warnCompany.vue

@@ -128,8 +128,8 @@ export default {
         this.warn_comapny_list = res.data;
         console.log("this.warn_comapny_list", this.warn_comapny_list);
         // 预警企业合计数量
-        this.deal_list = this.dealWithData(this.warn_comapny_list)
-        console.log('this.deal_list',this.deal_list);
+        this.deal_list = this.dealWithData(this.warn_comapny_list);
+        console.log("this.deal_list", this.deal_list);
         this.warn_num = res.total;
         // this.label = `全部(${this.warn_num})`
       });
@@ -244,50 +244,59 @@ export default {
   },
 };
 </script>
+<style lang="less">
+.warn_company {
+  .el-tabs {
+    height: 100%;
+    .el-tabs__content {
+      height: calc(100% - 52px);
+      .el-tab-pane {
+        height: 100%;
+        .main_box {
+          height: 100%;
+          .list_body{
+            height: calc(100% - 40px);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
 <style lang="less" scoped>
 .warn_company {
-  width: 30vw;
   height: 100%;
   background: url("~@/assets/realtimeWarning/warnback01.png") no-repeat;
   background-size: 100% 100%;
   .warn_search {
-    width: 30vw;
-    height: 9%;
+    padding: 12px;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
+    align-items: center;
     .title_box {
-      width: 14vw;
       display: flex;
+      align-items: center;
       .warn_title {
-        width: 5vw;
         height: 100%;
-        line-height: 6vh;
         color: #ebfff4;
         text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
         font-size: 16px;
         text-align: right;
       }
       .icon_left {
-        width: 1vw;
-        height: 6vh;
-        line-height: 6vh;
         color: #ebfff4;
         text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
         font-size: 16px;
         text-align: center;
       }
       .warn_num {
-        height: 6vh;
-        line-height: 6vh;
         color: #ff9191;
         font-size: 16px;
         font-weight: 400;
         letter-spacing: 2px;
       }
       .icon_right {
-        width: 1vw;
-        height: 6vh;
-        line-height: 6vh;
         color: #ebfff4;
         text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
         font-size: 16px;
@@ -296,8 +305,6 @@ export default {
     }
     /* 查询框样式 */
     .search_box {
-      width: 16vw;
-      height: 6vh;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -352,14 +359,11 @@ export default {
     }
   }
   .warn_company_list {
-    width: 30vw;
-    height: 91%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    height: calc(100% - 70px);
+    padding: 0 12px;
+    box-sizing: border-box;
     .warn_company_list_item {
-      width: 29vw;
-      height: 97%;
+      height: 100%;
       // border: 0.1px solid #495e70;
     }
   }

src/views/realtimeWarning/index.vue

@@ -2,6 +2,7 @@
   <div class="main">
     <div class="box">
       <div class="title">实时预警</div>
+      <div class="contentWrap">
         <div class="leftBox">
           <div class="shuoming">
             <img src="../../assets/realtimeWarning/消息.png" alt="" />
@@ -12,13 +13,20 @@
           <el-button icon="el-icon-refresh" @click="refresh_list()"
             >重置点位</el-button
           >
-        <WarnMap ref="warnMap" class="map" :company_list="company_list" @open_change="open_change">
+          <WarnMap
+            ref="warnMap"
+            class="map"
+            :company_list="company_list"
+            @open_change="open_change"
+          >
           </WarnMap>
         </div>
         <!-- 右边预警公司区域 -->
         <div class="warning_box">
           <WarnCompany ref="warnCompany"></WarnCompany>
         </div>
+      </div>
+
       <!-- <div class="rightBox">
         <div class="totalTitle">
           <div class="titleText">预警列表</div>
@@ -150,7 +158,7 @@ export default {
   components: {
     WarnMap,
     WarnCompany,
-    ChangeDialog
+    ChangeDialog,
   },
   data() {
     return {
@@ -213,12 +221,12 @@ export default {
     },
     // 地图通过父级打开转处置弹窗
     open_change(item) {
-      this.$refs.changeDialog.open(item)
+      this.$refs.changeDialog.open(item);
     },
     // 地图转处置弹窗处置刷新后做两件事，1.地图重置 2.右方tab展示数据重置
     reset() {
-      this.refresh_list()
-      this.$refs.warnCompany.reset_search()
+      this.refresh_list();
+      this.$refs.warnCompany.reset_search();
     },
     chuzhi(val) {
       //console.log(val)
@@ -253,41 +261,39 @@ export default {
 
 <style lang="less" scoped>
 .main {
-  width: 100%;
-  height: calc(100% - 80px);
-
+  height: 100%;
   box-sizing: border-box;
-
-  padding: 20px;
-
+  padding: 8px 4px;
   .box {
-    width: 100%;
+    padding: 10px 20px;
     height: 100%;
-    position: relative;
-    padding: 70px 25px 20px;
     background: url("~@/assets/realtimeWarning/231.png") no-repeat;
     background-size: 100% 100%;
     box-sizing: border-box;
-    display: flex;
 
     .title {
-      position: absolute;
-      top: 25px;
-      left: 25px;
+      display: flex;
+      align-items: center;
+      height: 40px;
       font-size: 18px;
       color: #ffffff;
       letter-spacing: 1px;
       font-weight: 500;
     }
 
+    .contentWrap {
+      display: flex;
+      height: calc(100% - 40px);
+    }
+
     .leftBox {
-      width: calc(100% - 590px);
+      flex: 2;
       height: 100%;
-      margin-right: 20px;
+      margin-right: 14px;
       box-sizing: border-box;
       background: url("~@/assets/realtimeWarning/back002.png") no-repeat;
       background-size: 100% 100%;
-      padding: 20px;
+      padding: 14px;
       position: relative;
       .el-button {
         position: absolute;
@@ -335,7 +341,7 @@ export default {
       }
     }
     .warning_box {
-      width: 30vw;
+      flex: 1;
       height: 100%;
     }
     // .rightBox {