UI-黄改蓝

src/assets/styles/base.scss

@@ -4,52 +4,55 @@ $fontLED: led;
 
 //颜色
 $white: #fff;
-$inBlue: #eb9e23;
+$inBlue: #2bacf7;
 $subtitle: #638395;
-$inBlueHover: #ffc411;
+$inBlueHover: #07ffc1;
 $inYellow: #ffd014;
-$deepBlue: #3a2c0b;
-$listText: #887019;
+$deepBlue: #0b293a;
+$listText: #1a7988;
 $textGray: #ccc;
 $grayBlue: #5685a0;
-$tipHover: #ba9026;
-$eventBG: #4e430c;
+$tipHover: #2082ba;
+$eventBG: #0b284e;
 
 
 //渐变
-$GradualGreen: 180deg, rgba($color: #997e12, $alpha: .8),
-rgba($color: #1e1304, $alpha: .8);
+$GradualGreen: 180deg, rgba($color: #124799, $alpha: .8),
+rgba($color: #04151e, $alpha: .8);
 
-$conBg: 180deg, rgba($color: #130b06, $alpha: 1),
-rgba($color: #000000, $alpha: 1);
+$conBg: 180deg, rgba($color: #0f162c, $alpha: 1),
+rgba($color: #040b1f, $alpha: 1);
 
-$btmMemu: 180deg, rgba($color: #201b0c, $alpha: 1),
-rgba($color: #2a2102, $alpha: 1);
+$btmMemu: 180deg, rgba($color: #0d1620, $alpha: 1),
+rgba($color: #020f2a, $alpha: 1);
 
-$boxBG: 180deg, rgba($color: #60520c, $alpha: 1),
-rgba($color: #413308, $alpha: 1);
+$boxBG: 180deg, rgba($color: #0d2760, $alpha: 1),
+rgba($color: #081a41, $alpha: 1);
+
+$popupBG:180deg, rgba($color: #1541a0, $alpha: 1),
+rgba($color: #3566d0, $alpha: 1);
 
 //内阴影
-$shadowList: 0 0 1rem 0 rgba($color: #25200a, $alpha: .8);
-$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #dbb20d, $alpha: .09) inset;
-$shadowListHover: rgba($color: #c29c05, $alpha: .7) 0px 0px 50px inset;
-$shadowListHoverI: 0 0 3px rgba($color: #ffba42, $alpha: .5), -0 -0 10px rgba($color: #ffd042, $alpha: .9);
-$shadowTip: 0 0 1rem 0 rgba($color: #e7c437, $alpha: .8) inset;
-$shadowCount: 0 0 .5rem 0 rgba($color: #ffb301, $alpha: 1) inset;
+$shadowList: 0 0 1rem 0 rgba($color: #0b1b25, $alpha: .8);
+$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #0dc0db, $alpha: .09) inset;
+$shadowListHover: rgba($color: #0567c2, $alpha: .7) 0px 0px 50px inset;
+$shadowListHoverI: 0 0 3px rgba($color: #41ff84, $alpha: .5), -0 -0 10px rgba($color: #41fff8, $alpha: .9);
+$shadowTip: 0 0 1rem 0 rgba($color: #387ee7, $alpha: .8) inset;
+$shadowCount: 0 0 .5rem 0 rgba($color: #00c8ff, $alpha: 1) inset;
 
 //可视化 数字林业
-$fBlue: #eb9e23;
-$fBlueHover: #ffc411;
-$fBlueG: #ffc411;
-$fListTitle: #ba8a2a;
-$barBgc: rgba($color: #201905, $alpha: .9);
-$barShadow: rgba($color: #d19808, $alpha: .8) 0px 0px 18px inset;
-$barBorder: solid rgba($color: #7f5c31, $alpha: .7);
-$tableBorder: solid rgba($color: #7f6233, $alpha: .7);
-$countBorder: solid rgba($color: #ffb300, $alpha: .9);
-$searchBorder: solid rgba($color: #7f6833, $alpha: 1);
-$searchBG: #27200f;
-$deepBG: #070500;
+$fBlue: #03c6e2;
+$fBlueHover: #07ffc1;
+$fBlueG: #0bf3f7;
+$fListTitle: #2bacf7;
+$barBgc: rgba($color: #051520, $alpha: .9);
+$barShadow: rgba($color: #078ad1, $alpha: .8) 0px 0px 18px inset;
+$barBorder: solid rgba($color: #33467f, $alpha: .7);
+$tableBorder: solid rgba($color: #33467f, $alpha: .7);
+$countBorder: solid rgba($color: #00aeff, $alpha: .9);
+$searchBorder: solid rgba($color: #33467f, $alpha: 1);
+$searchBG: #101527;
+$deepBG: #09192f;
 //icon
 $iconBg: #f5ad1b, #58b35d, #0FA2FF, #da8ec5, #78bfc2, #a28e52, #ff6063, #96bd5b, #f5ad1b, #da8ec5, #5f89ce, #78bfc2, #bec278, #f07779;
 $iconColor: #32e583, #f5ad1b, #da8ec5, #5f89ce, #78bfc2, #bec278, #f07779;
@@ -79,6 +82,16 @@ $date-state1: #2abc65;
 $date-state2: #e68d3f;
 $date-state3: #d6333b;
 
+//视频摄像头预览弹层样式
+.videoCustomWidth {
+  width: 1070px !important;
+  height: 700px !important;
+}
+//电视墙视频摄像头预览弹层样式
+.TVWallCustomWidth {
+  width: 1200px !important;
+  height: 750px !important;
+}
 
 //公共
 body {
@@ -218,6 +231,40 @@ ul {
   height: 100vh;
 }
 
+ //超图气泡
+ .leaflet-popup-content-wrapper {
+  // padding: 15px 20px !important;
+  background-image: -moz-linear-gradient($popupBG)!important;
+  background-image: -webkit-linear-gradient($popupBG) !important;
+  background-image: linear-gradient($popupBG)!important;
+  box-shadow: $shadowTitle !important;
+  color: #3cd7ef !important;
+
+
+}
+.leaflet-popup-tip{
+  background: #3061c9 !important;
+  color: #333;
+  box-shadow:none !important;
+}
+ //超图气泡内插槽
+  .map-tip {
+    .d-l-con {
+      width: 100%;
+      box-shadow: none;
+
+      .d-l-l-text {
+        width: 100%;
+        //white-space: nowrap;
+
+        h4 {
+          // display: flex;
+          color:$white;
+        }
+      }
+    }
+  }
+
 div::-webkit-scrollbar {
   display: none;
 }
@@ -528,10 +575,10 @@ div::-webkit-scrollbar {
   z-index: 1000;
 
   button {
-    color: $inBlue;
+    color: #3cd7ef;
     background: 180deg, rgba(9, 30, 54, 0.8), rgba(6, 27, 39, 0.8);
     margin: 5px;
-    color: $inBlue;
+    color: #3cd7ef;
     background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#00335c), to(#051d2b));
     background: linear-gradient(to left, #051d2b, #00335c, #051d2b);
     margin: 5px;
@@ -559,17 +606,6 @@ div::-webkit-scrollbar {
   height: 866px !important;
 }
 
-//视频摄像头预览弹层样式
-.videoCustomWidth {
-  width: 1070px !important;
-  height: 700px !important;
-}
-//电视墙视频摄像头预览弹层样式
-.TVWallCustomWidth {
-  width: 1200px !important;
-  height: 750px !important;
-}
-
 .dia-event-info {
   .el-row {
     height: 780px;
@@ -579,6 +615,25 @@ div::-webkit-scrollbar {
     height: 780px !important;
     position: absolute;
     z-index: 999;
+
+    button {
+      padding: 0 .3rem;
+      height: 1.5rem;
+      background-color: #112543;
+      color: $inBlue;
+      border: 1px $searchBorder;
+    }
+
+    button:hover {
+      text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
+    }
+    .fire-m{
+      position: absolute;
+      right: 1rem;
+      bottom: 1rem;
+      z-index:100000;
+
+    }
     //超图绘制截屏
     .leaflet-pane .leaflet-overlay-pane {
       height: 780px !important;
@@ -696,7 +751,7 @@ div::-webkit-scrollbar {
           span {
             font-family: $fontLED;
             color: $white;
-            text-shadow: 0 0 15px rgba($color: #ebd41f, $alpha: 1);
+            text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
             display: flex;
             align-items: center;
 
@@ -804,8 +859,8 @@ div::-webkit-scrollbar {
 
           .el-collapse-item__arrow {
             color: $inBlue;
-            position: relative;
-            left: -20.5rem;
+            position: absolute;
+            left: 1rem;
             margin: 0;
           }
 
@@ -1001,7 +1056,7 @@ div::-webkit-scrollbar {
           span {
             font-family: $fontLED;
             color: $white;
-            text-shadow: 0 0 15px rgba($color: #ebcd1e, $alpha: 1);
+            text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
             display: flex;
             align-items: center;
 
@@ -1109,8 +1164,8 @@ div::-webkit-scrollbar {
 
           .el-collapse-item__arrow {
             color: $inBlue;
-            position: relative;
-            left: -20.5rem;
+            position: absolute;
+            left: 1rem;
             margin: 0;
           }
 
@@ -1334,22 +1389,7 @@ div::-webkit-scrollbar {
     color: $inBlue;
   }
 
-  .map-tip {
-    .d-l-con {
-      width: 100%;
-      box-shadow: none;
-
-      .d-l-l-text {
-        width: 100%;
-        //white-space: nowrap;
-
-        h4 {
-          display: flex;
-          color: #0c0904 !important;
-        }
-      }
-    }
-  }
+ 
 
   //收起展开
   .mascot {
@@ -1666,7 +1706,7 @@ div::-webkit-scrollbar {
     span {
       font-family: $fontLED;
       color: $white;
-      text-shadow: 0 0 15px rgba($color: #ebcc1b, $alpha: 1);
+      text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
       display: flex;
       align-items: center;
 
@@ -1774,8 +1814,8 @@ div::-webkit-scrollbar {
 
     .el-collapse-item__arrow {
       color: $inBlue;
-      position: relative;
-      left: -20.5rem;
+      position: absolute;
+      left: 1rem;
       margin: 0;
     }
 
@@ -1962,7 +2002,7 @@ div::-webkit-scrollbar {
       font-weight: bolder;
       font-size: 1.5rem;
       z-index: 1000;
-      background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 238, 185, 1.0)), to(rgba(255, 217, 62, 1.0)));
+      background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(188, 229, 255, 1)), to(rgba(59, 77, 255, 1)));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -2142,13 +2182,16 @@ div::-webkit-scrollbar {
     max-width: 90%;
   }
 
+
   .d-l-l-text {
     display: flex;
     align-items: center;
     flex: 1;
     color: $fListTitle;
     padding: .2rem;
-
+    .el-tooltip__popper{
+		width: 100px;
+	}
     h4 {
       font-size: .7rem;
       margin: 0;
@@ -2184,7 +2227,7 @@ div::-webkit-scrollbar {
       width: .5rem;
       height: .5rem;
       display: inline-block;
-      background: $fBlue;
+      background: #2ee0fb;
     }
 
     .icon-sxt {
@@ -2477,7 +2520,6 @@ div::-webkit-scrollbar {
         border-radius: .2rem;
       }
     }
-
     //确认
     .event-state-qr {
       display: flex;
@@ -2493,7 +2535,7 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-qr;
         color: $white;
-        padding:0.25rem 0.4rem;
+		    padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2936,26 +2978,26 @@ div::-webkit-scrollbar {
 }
 
 .el-tabs__item {
-  color: $inBlue;
+  color: #3cd7ef;
   background: $GradualGreen;
   margin-right: 5px;
-  color: $inBlue;
-  background: -webkit-gradient(linear, right top, left top, from(#2b1d04), color-stop(#5c3d00), to(#2b2504));
-  background: linear-gradient(to left, #2b1d04, #5c3d00, #2b2504);
+  color: #3cd7ef;
+  background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#00335c), to(#051d2b));
+  background: linear-gradient(to left, #051d2b, #00335c, #051d2b);
 }
 
 .el-tabs__item:hover {
   color: #fff;
-  background: linear-gradient(to left, #2b1904, #c8b100, #2b2204);
-  box-shadow: rgba($color: #c2a201, $alpha: .8) 0px 0px 15px inset;
+  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
+  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
 }
 
 .el-tabs__item.is-active {
   color: #fff;
   font-size: 15px;
   font-weight: bolder;
-  background: linear-gradient(to left, #2b1904, #c8b100, #2b2204);
-  box-shadow: rgba($color: #c2a201, $alpha: .8) 0px 0px 15px inset;
+  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
+  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
 }
 
 
@@ -2964,7 +3006,7 @@ div::-webkit-scrollbar {
 }
 
 .el-dialog {
-  background: $deepBG;
+  background: #04080c;
   box-shadow: $barShadow;
   border: 1px $barBorder;
 }
@@ -2978,7 +3020,7 @@ div::-webkit-scrollbar {
 
   .el-dialog__title {
     font-weight: bolder;
-    color: $inBlue;
+    color: #3cd7ef;
   }
 }
 
@@ -3019,7 +3061,7 @@ div::-webkit-scrollbar {
 
 //树
 .el-tree__empty-text {
-  color: $inBlue;
+  color: #3cd7ef;
 }
 
 .el-tree-node__label {
@@ -3149,7 +3191,7 @@ div::-webkit-scrollbar {
 	box-shadow: initial;
 }
 .no_hover:hover h4{
-	color:#2bacf7;
+	color:#2bacf7!important;
 }
 .no_hover:hover .event-count .count-number{
 	border: 2px solid rgb(59 193 255 / 90%);
@@ -3173,3 +3215,6 @@ div::-webkit-scrollbar {
 // .d-l-l-text h4{
 // 	color:#fff!important;
 // }
+.no_hover .no-weight h4{
+	color:#2bacf7!important;
+}