UI-改色

src/assets/styles/base.scss

@@ -4,7 +4,7 @@ $fontLED: led;
 
 //颜色
 $white: #fff;
-$inBlue: #26cbc6;
+$inBlue: #2bacf7;
 $subtitle: #638395;
 $inBlueHover: #07ffc1;
 $inYellow: #ffd014;
@@ -12,43 +12,46 @@ $deepBlue: #0b293a;
 $listText: #1a7988;
 $textGray: #ccc;
 $grayBlue: #5685a0;
-$tipHover: #23b8ba;
+$tipHover: #2082ba;
 $eventBG: #0b284e;
 
 
 //渐变
-$GradualGreen: 180deg, rgba($color: #1a996f, $alpha: .8),
+$GradualGreen: 180deg, rgba($color: #124799, $alpha: .8),
 rgba($color: #04151e, $alpha: .8);
 
-$conBg: 180deg, rgba($color: #0f282c, $alpha: 1),
-rgba($color: #051216, $alpha: 1);
+$conBg: 180deg, rgba($color: #0f162c, $alpha: 1),
+rgba($color: #040b1f, $alpha: 1);
 
-$btmMemu: 180deg, rgba($color: #0a2011, $alpha: 1),
-rgba($color: #012a08, $alpha: 1);
+$btmMemu: 180deg, rgba($color: #0d1620, $alpha: 1),
+rgba($color: #020f2a, $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: #0b2523, $alpha: .8);
-$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #15dbb4, $alpha: .09) inset;
-$shadowListHover: rgba($color: #21b387, $alpha: .7) 0px 0px 50px 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: #34c7e7, $alpha: .8) inset;
+$shadowTip: 0 0 1rem 0 rgba($color: #387ee7, $alpha: .8) inset;
 $shadowCount: 0 0 .5rem 0 rgba($color: #00c8ff, $alpha: 1) inset;
 
 //可视化 数字林业
-$fBlue: #38cb9a;
+$fBlue: #03c6e2;
 $fBlueHover: #07ffc1;
 $fBlueG: #0bf3f7;
-$fListTitle: #20cbb2;
-$barBgc: rgba($color: #102127, $alpha: .9);
-$barShadow: rgba($color: #17d1bc, $alpha: .8) 0px 0px 18px inset;
+$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: #327f61, $alpha: 1);
-$searchBG: #102127;
+$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;
@@ -79,7 +82,6 @@ $date-state1: #2abc65;
 $date-state2: #e68d3f;
 $date-state3: #d6333b;
 
-
 //视频摄像头预览弹层样式
 .videoCustomWidth {
   width: 1070px !important;
@@ -87,11 +89,10 @@ $date-state3: #d6333b;
 }
 //电视墙视频摄像头预览弹层样式
 .TVWallCustomWidth {
-  width: 1150px !important;
-  height: 700px !important;
+  width: 1200px !important;
+  height: 750px !important;
 }
 
-
 //公共
 body {
   height: 100%;
@@ -230,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;
 }
@@ -580,6 +615,7 @@ div::-webkit-scrollbar {
     height: 780px !important;
     position: absolute;
     z-index: 999;
+
     button {
       padding: 0 .3rem;
       height: 1.5rem;
@@ -823,8 +859,8 @@ div::-webkit-scrollbar {
 
           .el-collapse-item__arrow {
             color: $inBlue;
-            position: relative;
-            left: -20.5rem;
+            position: absolute;
+            left: 1rem;
             margin: 0;
           }
 
@@ -1128,8 +1164,8 @@ div::-webkit-scrollbar {
 
           .el-collapse-item__arrow {
             color: $inBlue;
-            position: relative;
-            left: -20.5rem;
+            position: absolute;
+            left: 1rem;
             margin: 0;
           }
 
@@ -1353,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: #04080c;
-        }
-      }
-    }
-  }
+ 
 
   //收起展开
   .mascot {
@@ -1793,8 +1814,8 @@ div::-webkit-scrollbar {
 
     .el-collapse-item__arrow {
       color: $inBlue;
-      position: relative;
-      left: -20.5rem;
+      position: absolute;
+      left: 1rem;
       margin: 0;
     }
 
@@ -1944,6 +1965,7 @@ div::-webkit-scrollbar {
 
 }
 
+
 .d-evnet-list-con {
   padding: .5rem .5rem !important;
   align-items: flex-start !important;
@@ -2160,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;
@@ -2299,7 +2324,8 @@ div::-webkit-scrollbar {
 
   //曝光台
   .bgt-state {
-    width: 35%;
+    // width: 35%;
+	width:38%;
     padding: 0.3rem 0.5rem;
     border: 2px solid rgba(0, 174, 255, 0.9);
     -webkit-box-shadow: 0 0 0.5rem 0 #00c8ff inset;
@@ -2314,9 +2340,9 @@ div::-webkit-scrollbar {
     color: $white;
 
     .bgt-state-frequency {
-      width: 1.2rem;
-      height: 1.2rem;
-      font-size: 1rem;
+      width: 1.1rem;
+      height: 1.1rem;
+      font-size: 0.8rem;
       background-color: #1294a0;
       text-align: center;
       line-height: 1.2rem;
@@ -2349,7 +2375,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-sb;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2371,7 +2398,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-cb;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2393,7 +2421,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-qs;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2415,7 +2444,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-wb;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2437,7 +2467,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-cf;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2459,7 +2490,8 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-bj;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
@@ -2481,13 +2513,13 @@ div::-webkit-scrollbar {
         width: fit-content;
         background-color: $eventStateColor-gd;
         color: $white;
-        padding: .4rem;
+        // padding: .4rem;
+		padding:0.25rem 0.4rem;
         margin-left: -.5rem;
         margin-bottom: .2rem;
         border-radius: .2rem;
       }
     }
-
     //确认
     .event-state-qr {
       display: flex;
@@ -2503,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;
@@ -2878,7 +2910,9 @@ div::-webkit-scrollbar {
 }
 
 .el-dialog:not(.is-fullscreen) {
-  margin-top: 10vh !important;
+  // margin-top: 10vh !important;
+  margin-top: 2vh !important;
+  z-index: 9999;
 }
 
 
@@ -2948,22 +2982,22 @@ div::-webkit-scrollbar {
   background: $GradualGreen;
   margin-right: 5px;
   color: #3cd7ef;
-  background: -webkit-gradient(linear, right top, left top, from(#052b24), color-stop(#00335c), to(#052b1d));
-  background: linear-gradient(to left, #052b28, #00575c, #042b27);
+  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, #051d2b, #0ba9c8, #051d2b);
-  box-shadow: rgba($color: #0ca1c2, $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, #051d2b, #0ba9c8, #051d2b);
-  box-shadow: rgba($color: #13c231, $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;
 }
 
 
@@ -3149,3 +3183,38 @@ div::-webkit-scrollbar {
 }
 
 
+
+
+// 20220927 林业修改
+.no_hover:hover{
+	background: none!important;
+	box-shadow: initial;
+}
+.no_hover:hover h4{
+	color:#2bacf7!important;
+}
+.no_hover:hover .event-count .count-number{
+	border: 2px solid rgb(59 193 255 / 90%);
+	-webkit-box-shadow: 0 0 0.5rem 0 #2700ff inset;
+	box-shadow: 0 0 0.5rem 0 #2700ff inset;
+	background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#55b8f7), to(#8f3bff));
+}
+
+.tree_scroll::-webkit-scrollbar{
+	width: 1px;
+	height: 4px;
+	background: #00335c;
+}
+.tz_tk .el-dialog{
+	width: 20% !important;
+}
+.tz_tk .el-form-item__label{
+	color: #d2d2d2;
+}
+
+// .d-l-l-text h4{
+// 	color:#fff!important;
+// }
+.no_hover .no-weight h4{
+	color:#2bacf7!important;
+}

src/views/datacenter.vue

@@ -8,7 +8,7 @@
       <!-- 左侧 -->
       <div class="leftbar w-10" ref="left">
         <div class="forthis">
-          <dv-border-box-13 :color="['#0e7957', '#0da24c']" backgroundColor="#09140e" style="padding-bottom: 1rem;">
+          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="i-list-con h-78">
               <div class="d-l-con-icon">
@@ -34,7 +34,7 @@
       <!-- 右侧 -->
       <div class="rightbar" ref="right">
         <div class="forthis">
-          <dv-border-box-13 :color="['#0e7957', '#0da24c']" backgroundColor="#09140e" style="padding-bottom: 1rem;">
+          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>数据分布</span>

src/views/forest.vue

@@ -9,7 +9,7 @@
       <div class="leftbar" ref="left">
         <!-- 1 基本情况 -->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>基本情况</span>
@@ -26,7 +26,7 @@
         </div>
         <!-- 2 事件统计-->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="i-list-con h-29-5">
               <div class="d-l-con no_hover">
@@ -81,7 +81,7 @@
         </div>
         <!-- 3 组织机构 -->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="i-list-con h-27" style="padding-left: 1rem;">
               <el-collapse accordion>
@@ -112,7 +112,7 @@
         <div class="right-item1">
           <!-- 天气 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']">
+            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"  >
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="i-list-con small-bottom-margin h-18">
                 <el-row :gutter="20" v-if="todatWeather">
@@ -250,7 +250,7 @@
           </div>
           <!-- 曝光台 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="this-title">
                 <span>超期事件</span>
@@ -277,7 +277,7 @@
           </div>
           <!-- 事件列表 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="this-title">
                 <span>事件列表</span>
@@ -377,7 +377,7 @@
         <div class="right-item2">
           <!-- 日历 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="i-list-con small-bottom-margin h-30">
                 <dateChoose @selectDay="selectDay"></dateChoose>
@@ -386,7 +386,7 @@
           </div>
           <!-- 事件分类 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="this-title" style="cursor: pointer" @click="setEventTypeId({eventTypeIdDl: [], eventTypeId: []})">
                 <span>事件分类</span>
@@ -400,7 +400,7 @@
           </div>
           <!-- 上报排行 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" :color="['#0e7957', '#0da24c']" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)"   style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="this-title">
                 <span>上报排行</span>

vue.config.js

@@ -51,8 +51,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-         // target: `http://121.36.228.66:3031`,
-        target: `http://127.0.0.1:3031`,
+         target: `http://121.36.228.66:3031`,
+        // target: `http://127.0.0.1:3031`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''