zc

.env.development

@@ -28,13 +28,15 @@ VUE_APP_ENV = 'development'
 # VUE_APP_BASE_API = 'znyj.labcenter.suda.edu.cn/labSystem/'
 # VUE_APP_BASE_API = 'lab.sxitdlc.com/sudalabSystem/'
 # 矿大
- VUE_APP_BASE_API = 'lab.zjznai.com/labSystem/'
+# VUE_APP_BASE_API = 'lab.zjznai.com/labSystem/'
+# 鄂尔多斯
+VUE_APP_BASE_API = 'lab.zjznai.com/eedslabSystem'
 
 #VUE_APP_BASE_API = 'lab.zjznai.com/zhlabSystem/'
 
 # ####################内网接口配置####################
 
-VUE_APP_BASE_LOCAL_API = '192.168.1.39:8080'
+VUE_APP_BASE_LOCAL_API = 'lab.zjznai.com/eedslabSystem'
 
 
 

src/App.vue

@@ -7,8 +7,80 @@
   </div>
 </template>
 
+<script>
+    export default {
+        name: 'App',
+        data() {
+            return {
+                innerHeight: window.innerHeight,
+                innerWidth: window.innerWidth,
+            }
+        },
+        mounted() {
+            document.title = process.env.VUE_APP_TITLE;
+            this.banZoom();
+            //根据当前浏览器宽度与额定尺寸计算transform缩放值
+            document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
+            //根据当前浏览器宽度与额定尺寸计算当前浏览器可观看尺寸高度
+            document.getElementById('app').style.height = (window.innerHeight / (document.documentElement.clientWidth / 1920 * 100)) * 100 + 'px';
+            //当尺寸改变后从新计算
+            window.onresize = () => {
+                return (() => {
+                    document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
+                    document.getElementById('app').style.height = (window.innerHeight / (document.documentElement.clientWidth / 1920 * 100)) * 100 + 'px';
+
+                })();
+            };
+        },
+        methods: {
+            banZoom() {
+                // 禁止通过 ctrl + +/- 和  ctrl + 滚轮 对页面进行缩放
+                document.addEventListener('keydown', function (event) {
+                    if ((event.ctrlKey === true || event.metaKey === true) &&
+                        (event.which === 61 || event.which === 107 ||
+                            event.which === 173 || event.which === 109 ||
+                            event.which === 187 || event.which === 189)) {
+                        event.preventDefault()
+                    }
+                }, false)
+                // Chrome IE 360
+                window.addEventListener('mousewheel', function (event) {
+                    if (event.ctrlKey === true || event.metaKey) {
+                        event.preventDefault()
+                    }
+                }, {
+                    passive: false
+                })
+                // firefox
+                window.addEventListener('DOMMouseScroll', function (event) {
+                    if (event.ctrlKey === true || event.metaKey) {
+                        event.preventDefault()
+                    }
+                }, {
+                    passive: false
+                })
+            },
+        },
+    }
+</script>
 <style>
-#app {
-  overflow: hidden;
-}
+  html{
+    background-color: #062338;
+    overflow: hidden;
+  }
+  #app {
+    overflow: hidden;
+    height: 100%;
+    transform-origin: left top;
+    width: 1920px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  .el-loading-mask{
+    background-color: rgba(255, 255, 255, 0)!important;
+  }
+  .el-loading-spinner{
+    display: none;
+  }
 </style>

src/components/header.vue

@@ -27,52 +27,44 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.header {
-  width: 100%;
-  position: absolute;
-  left: rw(0);
-  top: rh(0);
-  z-index: 100;
-  display: flex;
-  justify-content: flex-start;
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    .header {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 100;
+        display: flex;
+        justify-content: flex-start;
 
-.header_l {
-  width: rw(182);
-  height: rh(44);
-  margin: rh(10) 0 0 rw(40);
-}
-.header_c {
-  width: rw(1180);
-  height: rh(152);
-  margin-left: rw(136);
-  background: url("~@/assets/image/index_icon2.png") no-repeat;
-  background-size: 100% 100%;
-  font-size: rh(30);
-  font-family: Microsoft YaHei;
-  font-weight: bold;
-  color: #FFFFFF;
-  line-height: rh(30);
-  text-align: center;
-  padding-top: rh(26);
-}
-.header_r {
-  margin-left: rw(264);
-  width: rw(82);
-  height: rh(32);
-  margin-top: rh(18);
-}
-}
+        .header_l {
+            width: 182px;
+            height: 44px;
+            margin: 10px 0 0 40px;
+        }
+        .header_c {
+            width: 1180px;
+            height: 152px;
+            margin-left: 136px;
+            background: url("~@/assets/image/index_icon2.png") no-repeat;
+            background-size: 100% 100%;
+            font-size: 30px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 30px;
+            text-align: center;
+            padding-top: 26px;
+        }
+        .header_r {
+            margin-left: 264px;
+            width: 82px;
+            height: 32px;
+            margin-top: 18px;
+        }
+    }
 </style>

src/views/admittanceDetail.vue

@@ -212,107 +212,97 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    .main {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
 
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
+        background: #062338;
 
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0px;
+            top: 0px;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
 
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
-    }
-  }
-  .main_t{
-    /*  background: rgba(9, 55, 81, 0.6);*/
-    width: rw(1852);
-    /*  height: rh(352);*/
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+            /*  background: rgba(9, 55, 81, 0.6px;*/
+            width: 1852px;
+            /*  height: 352px;*/
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
 
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
-    }
-    .main_t_b{
-      width: rw(1852);
-      height: rh(302);
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+            .main_t_b{
+                width: 1852px;
+                height: 302px;
+            }
+        }
+        .main_b{
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 863px;
+            position: absolute;
+            left: 34px;
+            top: 168px;
+            z-index: 200;
+        }
     }
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(863);
-    position: absolute;
-    left: rw(34);
-    top: rh(168);
-    z-index: 200;
-  }
-}
 </style>
 <style lang="scss">
 li{list-style:none}

src/views/classifyGradeDetail.vue

@@ -361,25 +361,15 @@
     }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-    @function rw($px) {
-        @return $px*100/1920 *1vw;
-    }
-
-    @function rh($px) {
-        @return $px*100/1080 *1vh;
-    }
-
     * {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
     }
-
     .main {
-        width: rw(1920);
-        height: rh(1080);
+        width: 1920px;
+        height: 1080px;
         /* background: url("../img/index_bg.png") no-repeat;
          background-size: 100% 100%;*/
         position: relative;
@@ -388,24 +378,24 @@
         z-index: 50;
         background: #062338;
         .main_t {
-            width: rw(1852);
-            height: rh(975);
+            width: 1852px;
+            height: 975px;
             background: #062338;
             position: absolute;
-            left: rw(34);
-            top: rh(86);
+            left: 34px;
+            top: 86px;
             z-index: 200;
             overflow: hidden;
             display: flex;
             flex-direction: column;
             .main_t_t {
-                margin: rh(20) 0 0 rw(18);
+                margin: 20px 0 0 18px;
                 > i {
-                    font-size: rh(16);
+                    font-size: 16px;
                     font-family: Microsoft YaHei;
                     font-weight: bold;
                     color: #FFFFFF;
-                    line-height: rh(16);
+                    line-height: 16px;
                 }
                 > i:nth-of-type(1) {
 
@@ -419,39 +409,39 @@
                 display: flex;
                 overflow: hidden;
                 .left-big-box {
-                    width: rw(290);
-                    height: rh(880);
+                    width: 290px;
+                    height: 880px;
                     overflow: hidden;
                     .max-building-box{
-                        margin-top:rh(80);
-                        margin-right:rw(40);
-                        height: rh(800);
+                        margin-top:80px;
+                        margin-right:40px;
+                        height: 800px;
                         .for-building-box:nth-child(1){
                             border:none;
                         }
                         .for-building-box{
-                            margin-bottom:rh(20);
-                            border-top:rh(1) dashed #fff;
+                            margin-bottom:20px;
+                            border-top:1px dashed #fff;
                             .item-name{
-                                margin-top:rh(20);
+                                margin-top:20px;
                                 flex:1;
                                 display:block;
                                 overflow:hidden;
                                 text-overflow:ellipsis;
                                 white-space:nowrap;
                                 color:#fff;
-                                font-size:rh(16);
-                                line-height:rh(20);
-                                margin-bottom:rh(20);
+                                font-size:16px;
+                                line-height:20px;
+                                margin-bottom:20px;
                             }
                             .min-for-box{
                                 cursor: pointer;
                                 display: flex;;
-                                margin-bottom:rh(10);
+                                margin-bottom:10px;
                                 p:nth-child(1){
-                                    width:rw(10);
-                                    height:rw(10);
-                                    margin:rh(5) rw(10) rh(5) rw(20);
+                                    width:10px;
+                                    height:10px;
+                                    margin:5px 10px 5px 20px;
                                     border-radius:50%;
                                 }
                                 p:nth-child(2){
@@ -461,8 +451,8 @@
                                     text-overflow:ellipsis;
                                     white-space:nowrap;
                                     color:#fff;
-                                    font-size:rh(14);
-                                    line-height:rh(20);
+                                    font-size:14px;
+                                    line-height:20px;
                                 }
                             }
                             .check-item-back{
@@ -481,8 +471,8 @@
                     flex: 1;
                     overflow: hidden;
                     .center-map-big-box {
-                        margin-top: rh(80);
-                        height: rh(600);
+                        margin-top: 80px;
+                        height: 600px;
                         /*background: #0E9EED;*/
                         position: relative;
                         .evacuation-shade-map-big-box {
@@ -552,20 +542,20 @@
                                     }
                                 }
                                 .for-map-box-one {
-                                    /*background: rgba(7, 36, 54, 1);*/
+                                    /*background: rgba(7, 36, 54, 1px;*/
                                     border: 1px solid #fff;
                                 }
                                 .for-map-box {
-                                    /*background: rgba(1,16,32,1);*/
-                                    /*background: rgba(6, 30, 48, 1);*/
+                                    /*background: rgba(1,16,32,1px;*/
+                                    /*background: rgba(6, 30, 48, 1px;*/
                                 }
                                 .for-map-box-two {
-                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1);*/
+                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1px;*/
                                     background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 0);
                                     background-size: 80px 80px;
                                 }
                                 .for-map-box-two-check {
-                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);*/
+                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1px;*/
                                     background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
                                     background-size: 80px 80px;
                                 }
@@ -585,29 +575,29 @@
                                 }
                                 .room-type-noe {
                                     /*border:1px solid #666;*/
-                                    /*background: rgba(102,102,102,0.6);*/
+                                    /*background: rgba(102,102,102,0.6px;*/
                                 }
                             }
                         }
                     }
                     .center-bottom-max-big-box{
-                        margin-top:rh(40);
-                        width:rw(1270);
-                        height:rh(220);
+                        margin-top:40px;
+                        width:1270px;
+                        height:220px;
                         white-space: nowrap;
                         .center-bottom-for-big-box:nth-child(1){
                             margin-left:0;
                         }
                         .center-bottom-for-big-box{
                             cursor: pointer;
-                            margin-left:rw(20);
+                            margin-left:20px;
                             display: inline-block;
-                            width:rw(300);
-                            height:rh(200);
+                            width:300px;
+                            height:200px;
                             .center-bottom-for-min-box{
-                                width:rw(302);
-                                height:rh(162);
-                                border:rh(1) solid #666;
+                                width:302px;
+                                height:162px;
+                                border:1px solid #666;
                                 position: relative;
                                 .evacuation-shade-map-big-box {
                                     position: absolute;
@@ -675,20 +665,20 @@
                                             }
                                         }
                                         .for-map-box-one {
-                                            /*background: rgba(7, 36, 54, 1);*/
+                                            /*background: rgba(7, 36, 54, 1px;*/
                                             border: 1px solid #fff;
                                         }
                                         .for-map-box {
-                                            /*background: rgba(1,16,32,1);*/
-                                            /*background: rgba(6, 30, 48, 1);*/
+                                            /*background: rgba(1,16,32,1px;*/
+                                            /*background: rgba(6, 30, 48, 1px;*/
                                         }
                                         .for-map-box-two {
-                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1);*/
+                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1px;*/
                                             background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(6,35,56,0)!important;
                                             background-size: 80px 80px;
                                         }
                                         .for-map-box-two-check {
-                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);*/
+                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1px;*/
                                             background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
                                             background-size: 80px 80px;
                                         }
@@ -708,14 +698,14 @@
                                         }
                                         .room-type-noe {
                                             /*border:1px solid #666;*/
-                                            /*background: rgba(102,102,102,0.6);*/
+                                            /*background: rgba(102,102,102,0.6px;*/
                                         }
                                     }
                                 }
                             }
                             .max-for-name-p{
-                                line-height:rh(40);
-                                font-size:rh(18);
+                                line-height:40px;
+                                font-size:18px;
                                 color:#fff;
                                 text-align: center;
                                 display:block;
@@ -726,7 +716,7 @@
                         }
                         .checkFloor{
                             .center-bottom-for-min-box{
-                                border:rh(1) solid #1ED0F8!important;
+                                border:1px solid #1ED0F8!important;
                             }
                             .max-for-name-p{
                                 color:#1ED0F8!important;
@@ -734,34 +724,34 @@
                         }
                         .center-bottom-for-big-box-position{
                             position: absolute;
-                            top:rh(9999);
-                            left:rw(9999);
+                            top:9999px;
+                            left:9999px;
                             z-index: -100;
                             display: inline-block;
-                            width:rw(300);
-                            height:rh(160);
+                            width:300px;
+                            height:160px;
                         }
                     }
                 }
                 .right-big-box {
-                    width: rw(290);
-                    height: rh(880);
+                    width: 290px;
+                    height: 880px;
                     overflow: hidden;
                     .lv-max-box {
-                        height: rh(800);
-                        margin-top: rh(80);
-                        margin-left: rw(100);
+                        height: 800px;
+                        margin-top: 80px;
+                        margin-left: 100px;
                         .lv-for-box {
                             display: flex;
-                            margin-bottom: rh(18);
+                            margin-bottom: 18px;
                             p:nth-child(1) {
-                                width: rw(18);
-                                height: rh(18);
+                                width: 18px;
+                                height: 18px;
                             }
                             p:nth-child(2) {
-                                margin-left: rw(20);
+                                margin-left: 20px;
                                 color: #fff;
-                                font-size: rh(16);
+                                font-size: 16px;
                             }
                         }
                     }
@@ -805,10 +795,10 @@
             }
             .main_t_b {
                 position: absolute;
-                width: rw(1490);
-                height: rh(794);
-                margin-left: rw(282);
-                margin-top: rh(80);
+                width: 1490px;
+                height: 794px;
+                margin-left: 282px;
+                margin-top: 80px;
             }
         }
 

src/views/controlDetail.vue

@@ -318,110 +318,101 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
 
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
+        background: #062338;
 
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
 
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
-    }
-  }
-  .main_t{
-    background: rgba(9, 55, 81, 0.6);
-    width: rw(1852);
-    height: rh(352);
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+            background: rgba(9, 55, 81, 0.6);
+            width: 1852px;
+            height: 352px;
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
 
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
-    }
-    .main_t_b{
-      width: rw(1852);
-      height: rh(302);
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+            .main_t_b{
+                width: 1852px;
+                height: 302px;
+            }
+        }
+        .main_b{
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 602px;
+            position: absolute;
+            left: 34px;
+            top: 468px;
+            z-index: 200;
+        }
     }
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(602);
-    position: absolute;
-    left: rw(34);
-    top: rh(468);
-    z-index: 200;
-  }
-}
 </style>
+
 <style lang="scss">
 li{list-style:none}
 i,em,b{font-style:normal;font-weight:100;}

src/views/dangerDetail.vue

@@ -431,136 +431,126 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
-  .main_btn{
-    position: absolute;
-    top: rh(140);
-    right: rw(102);
-    z-index: 1000;
-    width: rw(260);
-    height: rh(40);
-    border: 1px solid #1ED0F8;
-    border-radius: 0px rw(4) rh(4) 0px;
-    display: flex;
-    overflow: hidden;
-    >i{
-      flex: 1;
-      font-size: rh(14);
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #999999;
-      background: none;
-      line-height:rh(40);
-      text-align: center;
-    }
-    .active{
-      color: #FFFFFF;
-      background: #1ED0F8;
-    }
-  }
-
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
-    }
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
   }
-  .main_t{
-    width: rw(1852);
-    height: rh(352);
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    background: rgba(9, 55, 81, 0.6);
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
+  .main {
+    width: 1920px;
+    height: 1080px;
+    /* background: url("../img/index_bg.png") no-repeat;
+     background-size: 100% 100%;*/
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 50;
+
+    background: #062338;
+    .main_btn{
+      position: absolute;
+      top: 140px;
+      right: 102px;
+      z-index: 1000;
+      width: 260px;
+      height: 40px;
+      border: 1px solid #1ED0F8;
+      border-radius: 0 4px 4px 0;
+      display: flex;
+      overflow: hidden;
       >i{
-        font-size: rh(16);
+        flex: 1;
+        font-size: 14px;
         font-family: Microsoft YaHei;
-        font-weight: bold;
+        font-weight: 400;
+        color: #999999;
+        background: none;
+        line-height:40px;
+        text-align: center;
+      }
+      .active{
         color: #FFFFFF;
-        line-height: rh(16);
+        background: #1ED0F8;
       }
-      >i:nth-of-type(1){
+    }
 
+    .header {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 100;
+      display: flex;
+      justify-content: flex-start;
+
+      .header_l {
+        width: 182px;
+        height: 44px;
+        margin: 10px 0 0 40px;
+      }
+      .header_c {
+        width: 1180px;
+        height: 152px;
+        margin-left: 136px;
+        background: url("~@/assets/image/index_icon2.png") no-repeat;
+        background-size: 100% 100%;
+        font-size: 30px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 30px;
+        text-align: center;
+        padding-top: 26px;
       }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
+      .header_r {
+        margin-left: 264px;
+        width: 82px;
+        height: 32px;
+        margin-top: 18px;
       }
     }
-    .main_t_b{
-      width: rw(1852);
-      height: rh(302);
+    .main_t{
+      width: 1852px;
+      height: 352px;
+      position: absolute;
+      left: 34px;
+      top: 86px;
+      z-index: 200;
+      background: rgba(9, 55, 81, 0.6);
+      .main_t_t{
+        margin: 20px 0 0 18px;
+        >i{
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 16px;
+        }
+        >i:nth-of-type(1){
+
+        }
+        >i:nth-of-type(2){
+          color: #1ED0F8;
+        }
+      }
+      .main_t_b{
+        width: 1852px;
+        height: 302px;
+      }
     }
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(602);
-    position: absolute;
-    left: rw(34);
-    top: rh(468);
-    z-index: 200;
+    .main_b{
+      background: rgba(9, 55, 81, 0.6);
+      padding: 0 32px;
+      width: 1852px;
+      height: 602px;
+      position: absolute;
+      left: 34px;
+      top: 468px;
+      z-index: 200;
 
+    }
   }
-}
 </style>
 <style lang="scss">
 li{list-style:none}

src/views/illegalDetail.vue

@@ -385,110 +385,101 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
-
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
     }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
-    }
-  }
-  .main_t{
-    background: rgba(9, 55, 81, 0.6);
-    width: rw(1852);
-    height: rh(352);
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
-
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
-    }
-    .main_t_b{
-      width: rw(1852);
-      height: rh(302);
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+
+        background: #062338;
+
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
+
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+            background: rgba(9, 55, 81, 0.6);
+            width: 1852px;
+            height: 352px;
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
+
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+            .main_t_b{
+                width: 1852px;
+                height: 302px;
+            }
+        }
+        .main_b{
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 602px;
+            position: absolute;
+            left: 34px;
+            top: 468px;
+            z-index: 200;
+        }
     }
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(602);
-    position: absolute;
-    left: rw(34);
-    top: rh(468);
-    z-index: 200;
-  }
-}
 </style>
+
 <style lang="scss">
 li{list-style:none}
 i,em,b{font-style:normal;font-weight:100;}

src/views/inspectDetail.vue

@@ -246,122 +246,112 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-  background: #062338;
-  overflow: hidden;
-  .main_t{
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  .main {
+    width: 1920px;
+    height: 1080px;
+    /* background: url("../img/index_bg.png") no-repeat;
+     background-size: 100% 100%;*/
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 50;
     background: #062338;
-    width: rw(1852);
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
+    overflow: hidden;
+    .main_t{
+      background: #062338;
+      width: 1852px;
+      position: absolute;
+      left: 34px;
+      top: 86px;
+      z-index: 200;
+      .main_t_t{
+        margin: 20px 0 0 18px;
+        >i{
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 16px;
+        }
+        >i:nth-of-type(1){
+
+        }
+        >i:nth-of-type(2){
+          color: #1ED0F8;
+        }
+      }
+    }
+    .main_b{
+      background: rgba(9, 55, 81, 0.6);
+      padding: 0 32px;
+      width: 1852px;
+      height: 442px;
+      //position: absolute;
+      //left: 34px;
+      //top: 138px;
+      //z-index: 200;
+      margin-top: 138px;
+      margin-left:34px;
+      overflow: hidden;
+      .main_b_title{
+        font-size: 24px;
         font-family: Microsoft YaHei;
         font-weight: bold;
         color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
-
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
+        line-height: 24px;
+        text-align: center;
+        margin-top: 10px;
       }
     }
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(442);
-    //position: absolute;
-    //left: rw(34);
-    //top: rh(138);
-    //z-index: 200;
-    margin-top: rh(138);
-    margin-left:rw(34);
-    overflow: hidden;
-    .main_b_title{
-      font-size: rh(24);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(24);
-      text-align: center;
-      margin-top: rh(10);
-    }
-  }
-  .main_b_h{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(894);
-    margin-top: rh(138);
-    margin-left:rw(34);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    .main_b_title{
-      font-size: rh(24);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(24);
-      text-align: center;
-      margin-top: rh(10);
+    .main_b_h{
+      background: rgba(9, 55, 81, 0.6);
+      padding: 0 32px;
+      width: 1852px;
+      height: 894px;
+      margin-top: 138px;
+      margin-left:34px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      .main_b_title{
+        font-size: 24px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: center;
+        margin-top: 10px;
+      }
     }
-  }
-  .main_b2{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(442);
-    margin-left:rw(34);
-    margin-top:rw(10);
-    overflow: hidden;
-    //position: absolute;
-    //left: rw(34);
-    //top: rh(588);
-    //z-index: 200;
-    .main_b_title{
-      font-size: rh(24);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(24);
-      text-align: center;
-      margin-top: rh(10);
+    .main_b2{
+      background: rgba(9, 55, 81, 0.6);
+      padding: 0 32px;
+      width: 1852px;
+      height: 442px;
+      margin-left:34px;
+      margin-top:10px;
+      overflow: hidden;
+      //position: absolute;
+      //left: 34px;
+      //top: 588px;
+      //z-index: 200;
+      .main_b_title{
+        font-size: 24px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: center;
+        margin-top: 10px;
+      }
     }
   }
-}
 </style>
 <style lang="scss">
 li{list-style:none}

src/views/labPersonDetail.vue

@@ -235,104 +235,95 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
 
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
+        background: #062338;
 
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
 
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
-    }
-  }
-  .main_t{
-    width: rw(1852);
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+            width: 1852px;
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
 
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+        }
+        .main_b{
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 920px;
+            position: absolute;
+            left: 34px;
+            top: 138px;
+            z-index: 200;
+        }
     }
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(920);
-    position: absolute;
-    left: rw(34);
-    top: rh(138);
-    z-index: 200;
-  }
-}
 </style>
+
 <style lang="scss">
 li{list-style:none}
 i,em,b{font-style:normal;font-weight:100;}

src/views/planDetail.vue

@@ -388,151 +388,141 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.lab_border{
-  display: flex;
-  align-items: center;
-}
-.lab_span{
-  display: inline-block;
-  border: 1px solid #0183FA;
-  border-radius: rh(6);
-  padding: rh(6) rw(16);
-  margin-right: rw(8);
-  >i{
-    font-size: rh(12);
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #0183FA;
-    line-height: rh(16);
-    display: block;
-  }
-  >i:nth-of-type(1){}
-  >i:nth-of-type(2){}
-}
-.lab_span2{
-  display: inline-block;
-  font-size: rh(14);
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #FFFFFF;
-}
-.risk_span{
-  font-size: rh(14);
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #FFFFFF;
-  margin-right: rw(28);
-  >img{
-    width: rw(14);
-    height:rh(14);
-    margin-right: rw(8);
-    position: relative;
-    top: rh(2);
-  }
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
-
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
     }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
+    .lab_border{
+        display: flex;
+        align-items: center;
     }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
+    .lab_span{
+        display: inline-block;
+        border: 1px solid #0183FA;
+        border-radius: 6px;
+        padding: 6px 16px;
+        margin-right: 8px;
+        >i{
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #0183FA;
+            line-height: 16px;
+            display: block;
+        }
+        >i:nth-of-type(1){}
+        >i:nth-of-type(2){}
     }
-  }
-  .main_t{
-    /*background: rgba(9, 55, 81, 0.6);*/
-    width: rw(1852);
-    /* height: rh(352);*/
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
+    .lab_span2{
+        display: inline-block;
+        font-size: 14px;
         font-family: Microsoft YaHei;
-        font-weight: bold;
+        font-weight: 400;
         color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
-
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
     }
-    /* .main_t_b{
-       width: rw(1852);
-       height: rh(302);
-     }*/
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(862);
-    position: absolute;
-    left: rw(34);
-    top: rh(168);
-    z-index: 200;
-  }
-}
+    .risk_span{
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        margin-right: 28px;
+        >img{
+            width: 14px;
+            height:14px;
+            margin-right: 8px;
+            position: relative;
+            top: 2px;
+        }
+    }
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+
+        background: #062338;
+
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
+
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+            /*background: rgba(9, 55, 81, 0.6px;*/
+            width: 1852px;
+            /* height: 352px;*/
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
+
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+            /* .main_t_b{
+               width: 1852px;
+               height: 302px;
+             }*/
+        }
+        .main_b{
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 862px;
+            position: absolute;
+            left: 34px;
+            top: 168px;
+            z-index: 200;
+        }
+    }
 </style>
 <style lang="scss">
 li{list-style:none}

src/views/riskDetail.vue

@@ -346,109 +346,99 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
-
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
     }
-  }
-  .main_t{
-    background: rgba(9, 55, 81, 0.6);
-    width: rw(1852);
-    height: rh(352);
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+
+        background: #062338;
+
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
+
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+            background: rgba(9, 55, 81, 0.6);
+            width: 1852px;
+            height: 352px;
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
 
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
-    }
-    .main_t_b{
-      width: rw(1852);
-      height: rh(302);
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+            .main_t_b{
+                width: 1852px;
+                height: 302px;
+            }
+        }
+        .main_b{
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 602px;
+            position: absolute;
+            left: 34px;
+            top: 468px;
+            z-index: 200;
+        }
     }
-  }
-  .main_b{
-    background: rgba(9, 55, 81, 0.6);
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(602);
-    position: absolute;
-    left: rw(34);
-    top: rh(468);
-    z-index: 200;
-  }
-}
 </style>
 <style lang="scss">
 li{list-style:none}

src/views/warningDetail.vue

@@ -371,394 +371,384 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /*  background: url("../img/index_icon17.png") no-repeat;
-    background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
-
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
     }
-  }
-  .main_t{
-    width: rw(1852);
-    height: rh(352);
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /*  background: url("../img/index_icon17.png") no-repeat;
+          background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+
+        background: #062338;
+
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
 
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
-    }
-  }
-  .main_m{
-    width: rw(1852);
-    position: absolute;
-    left: rw(34);
-    top: rh(152);
-    z-index: 200;
-    .main_m_t{
-      width: 100%;
-      height: rh(80);
-      background: rgba(9, 55, 81, 0.6);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      overflow: hidden;
-      .main_m_t_l{
-        width: rw(386);
-        font-size: rh(18);
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #E01622;
-        line-height: rh(18);
-        margin-left: rw(24);
-      }
-      .sensor_list{
-        height: rh(70);
-        background: 0;
-        overflow-y: auto;
-        .main_m_t_c_n{
-          position: relative;
-          height:rh(70);
-          white-space: nowrap;
-          display: inline-flex;
-          >li{
-            width: rw(202);
-            height: rh(70);
-            float: left;
-            position: relative;
-            cursor: pointer;
-            margin-left: rw(8);
-            >img{
-              width:26px;
-              height:26px;
-              position: relative;
-              top: rh(5);
-            }
-            >i{
-              font-size: rh(16);
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #FFFFFF;
-              line-height: rh(70);
-              display: inline-block;
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
             }
-            >i:nth-of-type(1){
-              margin:0 rw(16);
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
             }
-            >i:nth-of-type(2){
-              color: #01E7E9;
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
             }
-          }
         }
-      }
-      .main_m_t_r{
-        display: flex;
-        justify-content: space-between;
-        /* width: rw(360);*/
-        >li{
-          width: rw(120);
-          >i{
-            display: block;
-            font-size:rh(14);
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #FFFFFF;
-            line-height: rh(14);
-            margin-bottom: rh(8);
-          }
-          .main_m_t_r_li_r{
-            width: rw(60);
-            height: rh(26);
-            margin-left: rw(12);
-          }
-        }
-      }
-      .close_btn{
-        width: rw(18);
-        height: rh(18);
-        margin-right: rw(20);
-
-      }
-    }
-    /*时间轴*/
-    .main_m_b{
-      height: rh(278);
-      margin-top: rh(10);
-      .time-box{
-
-        width: 100%;
-        overflow-y: auto;
-        >ul{
-
-
-          position: relative;
-          height:255px;
-          white-space: nowrap;
-          display: inline-flex;
-          >li{
-            width:rw(242);
-            height: rh(98);
-            float: left;
-            position: relative;
-            cursor: pointer;
-            background: rgba(9, 55, 81, 0.6);
-            border-radius: rw(10);
-            >p{
-              font-size: rh(14);
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #FFFFFF;
-              line-height: rh(14);
-              text-align: center;
-              >i{
-                color: #FF6060;
-              }
+        .main_t{
+            width: 1852px;
+            height: 352px;
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
+
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
             }
-            >p:nth-of-type(1){
-              margin: rh(12) 0 rh(14) 0;
+        }
+        .main_m{
+            width: 1852px;
+            position: absolute;
+            left: 34px;
+            top: 152px;
+            z-index: 200;
+            .main_m_t{
+                width: 100%;
+                height: 80px;
+                background: rgba(9, 55, 81, 0.6);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                overflow: hidden;
+                .main_m_t_l{
+                    width: 386px;
+                    font-size: 18px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #E01622;
+                    line-height: 18px;
+                    margin-left: 24px;
+                }
+                .sensor_list{
+                    height: 70px;
+                    background: 0;
+                    overflow-y: auto;
+                    .main_m_t_c_n{
+                        position: relative;
+                        height:70px;
+                        white-space: nowrap;
+                        display: inline-flex;
+                        >li{
+                            width: 202px;
+                            height: 70px;
+                            float: left;
+                            position: relative;
+                            cursor: pointer;
+                            margin-left: 8px;
+                            >img{
+                                width:26px;
+                                height:26px;
+                                position: relative;
+                                top: 5px;
+                            }
+                            >i{
+                                font-size: 16px;
+                                font-family: Microsoft YaHei;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 70px;
+                                display: inline-block;
+                            }
+                            >i:nth-of-type(1){
+                                margin:0 16px;
+                            }
+                            >i:nth-of-type(2){
+                                color: #01E7E9;
+                            }
+                        }
+                    }
+                }
+                .main_m_t_r{
+                    display: flex;
+                    justify-content: space-between;
+                    /* width: 360px;*/
+                    >li{
+                        width: 120px;
+                        >i{
+                            display: block;
+                            font-size:14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            line-height: 14px;
+                            margin-bottom: 8px;
+                        }
+                        .main_m_t_r_li_r{
+                            width: 60px;
+                            height: 26px;
+                            margin-left: 12px;
+                        }
+                    }
+                }
+                .close_btn{
+                    width: 18px;
+                    height: 18px;
+                    margin-right: 20px;
+
+                }
             }
-            >p:nth-of-type(2){
-              margin-bottom: rh(14);
+            /*时间轴*/
+            .main_m_b{
+                height: 278px;
+                margin-top: 10px;
+                .time-box{
+
+                    width: 100%;
+                    overflow-y: auto;
+                    >ul{
+
+
+                        position: relative;
+                        height:255px;
+                        white-space: nowrap;
+                        display: inline-flex;
+                        >li{
+                            width:242px;
+                            height: 98px;
+                            float: left;
+                            position: relative;
+                            cursor: pointer;
+                            background: rgba(9, 55, 81, 0.6);
+                            border-radius: 10px;
+                            >p{
+                                font-size: 14px;
+                                font-family: Microsoft YaHei;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 14px;
+                                text-align: center;
+                                >i{
+                                    color: #FF6060;
+                                }
+                            }
+                            >p:nth-of-type(1){
+                                margin: 12px 0 14px 0;
+                            }
+                            >p:nth-of-type(2){
+                                margin-bottom: 14px;
+                            }
+                            >p:nth-of-type(3){}
+                        }
+                        >li:after{
+                            content: "";
+                            width: 32px;
+                            height: 32px;
+                            background: url("~@/assets/image/img/index_icon16.png") no-repeat;
+                            position: absolute;
+                            left:50%;margin-left:-7px;
+                            bottom: -48px;
+                            z-index: 1;}
+                        >li:nth-child(2n):after{
+                            bottom: auto;top:-46px;
+                        }
+                        >li:nth-child(2n){
+                            margin-top:160px;
+                        }
+                    }
+                    >ul:after{content: "";background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;top:50%;}
+
+
+                }
             }
-            >p:nth-of-type(3){}
-          }
-          >li:after{
-            content: "";
-            width: rw(32);
-            height: rh(32);
-            background: url("~@/assets/image/img/index_icon16.png") no-repeat;
-            position: absolute;
-            left:50%;margin-left:rw(-7);
-            bottom: 0;
-            bottom: rh(-48);
-            z-index: 1;}
-          >li:nth-child(2n):after{
-            bottom: auto;top:rh(-46);
-          }
-          >li:nth-child(2n){
-            margin-top:rh(160);
-          }
-        }
-        >ul:after{content: "";background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;top:50%;}
-
-
-      }
-    }
-  }
-  .main_b{
-    width: rw(1852);
-    height: rh(550);
-    position: absolute;
-    left: rw(34);
-    top: rh(508);
-    z-index: 200;
-    background: rgba(9, 55, 81, 0.6);
-    display: flex;
-    justify-content: flex-start;
-    .main_b_l{
-      width: rw(370);
-      margin-left: rw(24);
-      // border: 1px solid #486CC2;
-
-      .main_b_l_t{
-
-
-        >li{
-          font-size: rh(18);
-          font-family: Microsoft YaHei;
-          font-weight: bold;
-          color: #486CC2;
-          line-height: rh(18);
-        }
-        >i{
-          display: block;
-          font-size: rh(14);
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #FFFFFF;
-          line-height:rh(14);
-          margin-top: rh(20);
-          margin-left: rw(32);
-        }
-        >i:nth-of-type(4){
-          margin-left: 0;
-          border: 1px solid #486CC2;
-        }
-        >li:nth-of-type(1){
-          margin-top: rh(42);
-        }
-        >li:nth-of-type(2){
-          margin-top: rh(22);
-        }
-      }
-      .main_b_l_b{
-        margin-top: rh(14);
-        height: rh(268);
-        overflow-y: hidden;
-        .main_b_l_b_t{
-          height: rh(40);
-          background: rgba(72, 108, 194, 0.2);
-          display: flex;
-          justify-content: flex-start;
-          >i{
-            display: inline-block;
-            font-size: rh(16);
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #FFFFFF;
-            line-height: rh(40);
-            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
-
-          }
-          >i:nth-of-type(1){
-            width: rw(166);
-            margin-left: rw(32);
-          }
-          >i:nth-of-type(2){
-            width: rw(174);
-          }
         }
-        .main_b_l_b_b{
-          >li{
-            height: rh(30);
+        .main_b{
+            width: 1852px;
+            height: 550px;
+            position: absolute;
+            left: 34px;
+            top: 508px;
+            z-index: 200;
+            background: rgba(9, 55, 81, 0.6);
             display: flex;
             justify-content: flex-start;
-            >i{
-              display: inline-block;
-              font-size: rh(14);
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #FFFFFF;
-              line-height: rh(30);
-              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
-            }
-            >i:nth-of-type(1){
-              width: rw(166);
-              margin-left: rw(32);
+            .main_b_l{
+                width: 370px;
+                margin-left: 24px;
+                // border: 1px solid #486CC2;
+
+                .main_b_l_t{
+
+
+                    >li{
+                        font-size: 18px;
+                        font-family: Microsoft YaHei;
+                        font-weight: bold;
+                        color: #486CC2;
+                        line-height: 18px;
+                    }
+                    >i{
+                        display: block;
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #FFFFFF;
+                        line-height:14px;
+                        margin-top: 20px;
+                        margin-left: 32px;
+                    }
+                    >i:nth-of-type(4){
+                        margin-left: 0;
+                        border: 1px solid #486CC2;
+                    }
+                    >li:nth-of-type(1){
+                        margin-top: 42px;
+                    }
+                    >li:nth-of-type(2){
+                        margin-top: 22px;
+                    }
+                }
+                .main_b_l_b{
+                    margin-top: 14px;
+                    height: 268px;
+                    overflow-y: hidden;
+                    .main_b_l_b_t{
+                        height: 40px;
+                        background: rgba(72, 108, 194, 0.2);
+                        display: flex;
+                        justify-content: flex-start;
+                        >i{
+                            display: inline-block;
+                            font-size: 16px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            line-height: 40px;
+                            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+
+                        }
+                        >i:nth-of-type(1){
+                            width: 166px;
+                            margin-left: 32px;
+                        }
+                        >i:nth-of-type(2){
+                            width: 174px;
+                        }
+                    }
+                    .main_b_l_b_b{
+                        >li{
+                            height: 30px;
+                            display: flex;
+                            justify-content: flex-start;
+                            >i{
+                                display: inline-block;
+                                font-size: 14px;
+                                font-family: Microsoft YaHei;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 30px;
+                                white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                            >i:nth-of-type(1){
+                                width: 166px;
+                                margin-left: 32px;
+                            }
+                            >i:nth-of-type(2){
+                                width: 174px;
+                            }
+                        }
+                        >li:nth-of-type(even){
+                            background: rgba(72, 108, 194, 0.2);
+                        }
+                    }
+                }
             }
-            >i:nth-of-type(2){
-              width: rw(174);
+            .main_b_r{
+                width: 1338px;
+                display: flex;
+                justify-content: space-between;
+                margin-top: 40px;
+                margin-left: 54px;
+                overflow: hidden;
+                >li{
+                    width: 650px;
+                    height: 488px;
+                    padding: 0 24px;
+                    box-sizing: border-box;
+                    border: 1px solid #486CC2;
+                    .main_b_r_li_t{
+                        height: 52px;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        >i{
+                            display: inline-block;
+                            font-size:16px;
+                            font-family: Microsoft YaHei;
+                            font-weight: bold;
+                            color: #FFFFFF;
+                            line-height: 16px;
+                        }
+                        >img{
+                            width: 24px;
+                            height: 24px;
+                        }
+                    }
+                    .main_b_r_li_b{
+                        width: 600px;
+                        height: 410px;
+                        >video{
+                            width: 600px;
+                            height: 410px;
+                        }
+                    }
+                }
             }
-          }
-          >li:nth-of-type(even){
-            background: rgba(72, 108, 194, 0.2);
-          }
         }
-      }
     }
-    .main_b_r{
-      width: rw(1338);
-      display: flex;
-      justify-content: space-between;
-      margin-top: rh(40);
-      margin-left: rw(54);
-      overflow: hidden;
-      >li{
-        width: rw(650);
-        height: rh(488);
-        padding: 0 rw(24);
-        box-sizing: border-box;
-        border: 1px solid #486CC2;
-        .main_b_r_li_t{
-          height: rh(52);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          >i{
-            display: inline-block;
-            font-size:rh(16);
-            font-family: Microsoft YaHei;
-            font-weight: bold;
-            color: #FFFFFF;
-            line-height: rh(16);
-          }
-          >img{
-            width: rw(24);
-            height: rh(24);
-          }
-        }
-        .main_b_r_li_b{
-          width: rw(600);
-          height: rh(410);
-          >video{
-            width: rw(600);
-            height: rh(410);
-          }
-        }
-      }
-    }
-  }
-}
 </style>
+
 <style lang="scss">
 li{list-style:none}
 i,em,b{font-style:normal;font-weight:100;}

src/views/workInfoDetail.vue

@@ -72,139 +72,129 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-  background: #062338;
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
-    }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
     }
-  }
-  .main_t{
-
-    width: rw(1852);
-    height: rh(975);
-    background: #062338;
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
-
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
-    }
-    .title{
-      width: 100%;
-      font-size: rh(18);
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(18);
-      margin-top: rh(44);
-      text-align: center;
-    }
-    .main_t_b{
-      width: rw(1852);
-      height: rh(800);
-      margin-top: rh(40);
-      padding:0 rw(390);
-      box-sizing: border-box;
-      overflow-y: auto;
-      >p{
-        font-size: rh(16);
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #FFFFFF;
-        line-height:rh(30);
-        text-indent:2em;
-      }
-      .unit{
-        font-size: rh(16);
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #FFFFFF;
-        line-height: rh(16);
-        margin-top: rh(38);
-        text-align: right;
-      }
-      .time{
-        font-size: rh(16);
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #FFFFFF;
-        line-height: rh(16);
-        margin-top: rh(22);
-        text-align: right;
-      }
-    }
-  }
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+        background: #062338;
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
+
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+
+            width: 1852px;
+            height: 975px;
+            background: #062338;
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
+
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+            .title{
+                width: 100%;
+                font-size: 18px;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 18px;
+                margin-top: 44px;
+                text-align: center;
+            }
+            .main_t_b{
+                width: 1852px;
+                height: 800px;
+                margin-top: 40px;
+                padding:0 390px;
+                box-sizing: border-box;
+                overflow-y: auto;
+                >p{
+                    font-size: 16px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    line-height:30px;
+                    text-indent:2em;
+                }
+                .unit{
+                    font-size: 16px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                    margin-top: 38px;
+                    text-align: right;
+                }
+                .time{
+                    font-size: 16px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                    margin-top: 22px;
+                    text-align: right;
+                }
+            }
+        }
 
-}
+    }
 </style>
 <style lang="scss">
 li{list-style:none}

src/views/workPlanDetail.vue

@@ -98,105 +98,96 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
-@function rw($px){
-
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
-
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* background: url("../img/index_bg.png") no-repeat;
-   background-size: 100% 100%;*/
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 50;
-
-  background: #062338;
-  .header {
-    width: 100%;
-    position: absolute;
-    left: rw(0);
-    top: rh(0);
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-
-    .header_l {
-      width: rw(182);
-      height: rh(44);
-      margin: rh(10) 0 0 rw(40);
-    }
-    .header_c {
-      width: rw(1180);
-      height: rh(152);
-      margin-left: rw(136);
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      font-size: rh(30);
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: rh(30);
-      text-align: center;
-      padding-top: rh(26);
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
     }
-    .header_r {
-      margin-left: rw(264);
-      width: rw(82);
-      height: rh(32);
-      margin-top: rh(18);
-    }
-  }
-  .main_t{
-
-    width: rw(1852);
-
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >i:nth-of-type(1){
-
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+
+        background: #062338;
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: flex-start;
+
+            .header_l {
+                width: 182px;
+                height: 44px;
+                margin: 10px 0 0 40px;
+            }
+            .header_c {
+                width: 1180px;
+                height: 152px;
+                margin-left: 136px;
+                background: url("~@/assets/image/index_icon2.png") no-repeat;
+                background-size: 100% 100%;
+                font-size: 30px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 30px;
+                text-align: center;
+                padding-top: 26px;
+            }
+            .header_r {
+                margin-left: 264px;
+                width: 82px;
+                height: 32px;
+                margin-top: 18px;
+            }
+        }
+        .main_t{
+
+            width: 1852px;
+
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t{
+                margin: 20px 0 0 18px;
+                >i{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                >i:nth-of-type(1){
+
+                }
+                >i:nth-of-type(2){
+                    color: #1ED0F8;
+                }
+            }
+        }
+        .main_b{
+            background: #062338;
+            padding: 0 32px;
+            width: 1852px;
+            height: 850px;
+            position: absolute;
+            left: 34px;
+            top: 144px;
+            z-index: 200;
+        }
     }
-  }
-  .main_b{
-    background: #062338;
-    padding: 0 rw(32);
-    width: rw(1852);
-    height: rh(850);
-    position: absolute;
-    left: rw(34);
-    top: rh(144);
-    z-index: 200;
-  }
-}
 </style>
+
 <style lang="scss">
 li{list-style:none}
 i,em,b{font-style:normal;font-weight:100;}