zc

src/views/courtyardManage/classifyGradeDetail.vue

@@ -363,14 +363,6 @@
 
 <!-- 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;
@@ -378,8 +370,8 @@
     }
 
     .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 +380,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 +411,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 +453,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 +473,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 +544,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 +577,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 +667,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 +700,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 +718,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 +726,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 +797,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/courtyardManage/controlDetail.vue

@@ -320,107 +320,98 @@ export default {
 
 <!-- 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}

src/views/courtyardManage/dangerDetail.vue

@@ -430,138 +430,128 @@ 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: 0px;
+      top: 0px;
+      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}
 i,em,b{font-style:normal;font-weight:100;}

src/views/demo.vue

@@ -0,0 +1,123 @@
+
+<!-- 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;
+
+        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{
+                flex: 1;
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #999999;
+                background: none;
+                line-height:40px;
+                text-align: center;
+            }
+            .active{
+                color: #FFFFFF;
+                background: #1ED0F8;
+            }
+        }
+
+        .header {
+            width: 100%;
+            position: absolute;
+            left: 0px;
+            top: 0px;
+            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: 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 32px;
+            width: 1852px;
+            height: 602px;
+            position: absolute;
+            left: 34px;
+            top: 468px;
+            z-index: 200;
+
+        }
+    }
+</style>