css样式优化

src/views/index.vue

@@ -1222,13 +1222,47 @@
   }
 </script>
 <style lang="scss" scoped>
+  // 公共阴影样式
+  @mixin box-shadow-style {
+    box-shadow: inset 0 0 30px #07417a, 0 0 10px #07417a;
+  }
+
+  // 公共边框角样式
+  @mixin border-corner-style($position: top, $side: left) {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    @if $position == top {
+      top: -2px;
+      @if $side == left {
+        border-top: 2px solid #26c6f0;
+        border-left: 2px solid #26c6f0;
+        left: -2px;
+      } @else {
+        border-top: 2px solid #26c6f0;
+        border-right: 2px solid #26c6f0;
+        right: -2px;
+      }
+    } @else {
+      bottom: -2px;
+      @if $side == left {
+        border-bottom: 2px solid #26c6f0;
+        border-left: 2px solid #26c6f0;
+        left: -2px;
+      } @else {
+        border-bottom: 2px solid #26c6f0;
+        border-right: 2px solid #26c6f0;
+        right: -2px;
+      }
+    }
+  }
+
   .data-box1 {
     border: 2px solid #032d60;
-  		-webkit-box-shadow: #07417a 0px 0px 10px;
-  		-moz-box-shadow: #07417a 0px 0px 10px;
-  		box-shadow: inset 0 0 30px #07417a;
+    @include box-shadow-style;
     /*position: relative;*/
   }
+
   .main_title {
     width: 100%;
     height: 35px;
@@ -1242,14 +1276,17 @@
     text-align: left;
     position: relative;
     border: 1px solid #03657c;
-  }
-  .main_title:before {
+
+    &:before {
       position: absolute;
       left: 2px;
       content: '';
       width: 4px;
       height: 35px;
-      background-color: #2EB976;}
+      background-color: #2EB976;
+    }
+  }
+
   .lbbt {
     height: 4vh;
     width: 100%;
@@ -1261,34 +1298,28 @@
   }
 
   #aqscts {
-    // color: # !important;
     color: #26c6de !important;
     box-sizing: border-box;
-    // cursor: url(../../images/dashboard/pointer.png) 8 3,auto;
     font-family: 微软雅黑;
     text-shadow: #00d8ff 0 0 20.9455px;
     width: 100%;
-
   }
 
   .grid-container {
     display: grid;
-    // grid-template-columns: repeat(3, 1fr);
-    // grid-template-rows: repeat(3, 32%);
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, 47%);
     gap: 10px;
     height: calc(100% - 66px);
     width: 100%;
-  }
 
-  .grid-container>div {
+    > div {
       border: 2px solid #26c6f0;
       border-radius: 7px;
     }
+  }
 
   .menu {
-    // float: left;
     width: 128px;
     height: 48px;
     margin: 5px 6px 0;
@@ -1302,7 +1333,6 @@
     height: calc(100vh - 84px);
     width: 100%;
     padding-top: 2px;
-    // background-image: url('./static/data08.png');
     background-color: #000e1d;
     background-size: 100% 100%;
     overflow: hidden;
@@ -1341,8 +1371,7 @@
     margin: -14px auto 0 auto;
     color: #83c7e3;
     font-size: 14px;
-    // letter-spacing: 2px;
-    font-weight: 600
+    font-weight: 600;
   }
 
   .data-title {
@@ -1352,12 +1381,12 @@
     color: #83c7e3;
     font-size: 20px;
     letter-spacing: 2px;
-    font-weight: 600
-  }
+    font-weight: 600;
 
-  .data-title span {
+    span {
       margin: 0 15px;
     }
+  }
 
   .data-title-left,
   .data-title-right {
@@ -1373,68 +1402,20 @@
     top: 8px;
   }
 
-  .data-box1 {
-    border: 2px solid #032d60;
-    -webkit-box-shadow: #07417a 0px 0px 10px;
-    -moz-box-shadow: #07417a 0px 0px 10px;
-    box-shadow: inset 0 0 30px #07417a;
-    /*position: relative;*/
-  }
-
   .topL {
-    width: 20px;
-    height: 20px;
-    border-top-width: 2px;
-    border-top-color: #26c6f0;
-    border-top-style: solid;
-    border-left-width: 2px;
-    border-left-color: #26c6f0;
-    border-left-style: solid;
-    position: absolute;
-    top: -2px;
-    left: -2px;
+    @include border-corner-style(top, left);
   }
 
   .topR {
-    width: 20px;
-    height: 20px;
-    border-top-width: 2px;
-    border-top-color: #26c6f0;
-    border-top-style: solid;
-    border-right-width: 2px;
-    border-right-color: #26c6f0;
-    border-right-style: solid;
-    position: absolute;
-    top: -2px;
-    right: -2px;
+    @include border-corner-style(top, right);
   }
 
   .bottomL {
-    width: 20px;
-    height: 20px;
-    border-bottom-width: 2px;
-    border-bottom-color: #26c6f0;
-    border-bottom-style: solid;
-    border-left-width: 2px;
-    border-left-color: #26c6f0;
-    border-left-style: solid;
-    position: absolute;
-    bottom: -2px;
-    left: -2px;
+    @include border-corner-style(bottom, left);
   }
 
   .bottomR {
-    width: 20px;
-    height: 20px;
-    border-bottom-width: 2px;
-    border-bottom-color: #26c6f0;
-    border-bottom-style: solid;
-    border-right-width: 2px;
-    border-right-color: #26c6f0;
-    border-right-style: solid;
-    position: absolute;
-    bottom: -2px;
-    right: -2px;
+    @include border-corner-style(bottom, right);
   }
 
   .mktitle {
@@ -1444,25 +1425,20 @@
     font-weight: 600;
     height: 35px;
     position: relative;
-    overflow: hidden
-  }
+    overflow: hidden;
 
-  .mktitle img {
+    img {
       height: 15px;
       width: 100%;
       position: absolute;
       left: 0;
       bottom: 0;
     }
+  }
 
   .mkbody {
     width: 100%;
     height: calc(100% - 35px);
-
-  }
-
-  .padding5 {
-    padding: 5px;
   }
 
   .main_body {
@@ -1470,7 +1446,6 @@
     width: 100%;
     display: flex;
 
-
     .main_body_left {
       width: 31%;
       height: 100%;
@@ -1478,19 +1453,16 @@
       .main_body_left_c1 {
         height: 30%;
         width: 100%;
-
       }
 
       .main_body_left_c2 {
         height: 30%;
         width: 100%;
-
       }
 
       .main_body_left_c3 {
         height: 40%;
         width: 100%;
-
       }
     }
 
@@ -1498,17 +1470,14 @@
       width: 38%;
       height: 100%;
 
-
       .main_body_center_c1 {
         height: 55%;
         width: 100%;
-
       }
 
       .main_body_center_c2 {
         height: 45%;
         width: 100%;
-
       }
     }
 
@@ -1519,25 +1488,21 @@
       .main_body_right_c1 {
         height: 15%;
         width: 100%;
-
       }
 
       .main_body_right_c2 {
         height: 28.333%;
         width: 100%;
-
       }
 
       .main_body_right_c3 {
         height: 28.333%;
         width: 100%;
-
       }
 
       .main_body_right_c4 {
         height: 28.333%;
         width: 100%;
-
       }
     }
   }