UI

src/assets/styles/base.scss

@@ -4,52 +4,52 @@ $fontLED: led;
 
 //颜色
 $white: #fff;
-$inBlue: #2bacf7;
+$inBlue: #eb9e23;
 $subtitle: #638395;
-$inBlueHover: #07ffc1;
+$inBlueHover: #ffc411;
 $inYellow: #ffd014;
-$deepBlue: #0b293a;
-$listText: #1a7988;
+$deepBlue: #3a2c0b;
+$listText: #887019;
 $textGray: #ccc;
 $grayBlue: #5685a0;
-$tipHover: #2082ba;
-$eventBG: #0b284e;
+$tipHover: #ba9026;
+$eventBG: #4e430c;
 
 
 //渐变
-$GradualGreen: 180deg, rgba($color: #124799, $alpha: .8),
-rgba($color: #04151e, $alpha: .8);
+$GradualGreen: 180deg, rgba($color: #997e12, $alpha: .8),
+rgba($color: #1e1304, $alpha: .8);
 
-$conBg: 180deg, rgba($color: #0f162c, $alpha: 1),
-rgba($color: #040b1f, $alpha: 1);
+$conBg: 180deg, rgba($color: #130b06, $alpha: 1),
+rgba($color: #000000, $alpha: 1);
 
-$btmMemu: 180deg, rgba($color: #0d1620, $alpha: 1),
-rgba($color: #020f2a, $alpha: 1);
+$btmMemu: 180deg, rgba($color: #201b0c, $alpha: 1),
+rgba($color: #2a2102, $alpha: 1);
 
-$boxBG: 180deg, rgba($color: #0d2760, $alpha: 1),
-rgba($color: #081a41, $alpha: 1);
+$boxBG: 180deg, rgba($color: #60520c, $alpha: 1),
+rgba($color: #413308, $alpha: 1);
 
 //内阴影
-$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;
+$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;
 
 //可视化 数字林业
-$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;
+$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;
 //icon
 $iconBg: #f5ad1b, #58b35d, #0FA2FF, #da8ec5, #78bfc2, #a28e52, #ff6063, #96bd5b, #f5ad1b, #da8ec5, #5f89ce, #78bfc2, #bec278, #f07779;
 $iconColor: #32e583, #f5ad1b, #da8ec5, #5f89ce, #78bfc2, #bec278, #f07779;
@@ -527,10 +527,10 @@ div::-webkit-scrollbar {
   z-index: 1000;
 
   button {
-    color: #3cd7ef;
+    color: $inBlue;
     background: 180deg, rgba(9, 30, 54, 0.8), rgba(6, 27, 39, 0.8);
     margin: 5px;
-    color: #3cd7ef;
+    color: $inBlue;
     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;
@@ -695,7 +695,7 @@ div::-webkit-scrollbar {
           span {
             font-family: $fontLED;
             color: $white;
-            text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
+            text-shadow: 0 0 15px rgba($color: #ebd41f, $alpha: 1);
             display: flex;
             align-items: center;
 
@@ -1000,7 +1000,7 @@ div::-webkit-scrollbar {
           span {
             font-family: $fontLED;
             color: $white;
-            text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
+            text-shadow: 0 0 15px rgba($color: #ebcd1e, $alpha: 1);
             display: flex;
             align-items: center;
 
@@ -1344,7 +1344,7 @@ div::-webkit-scrollbar {
 
         h4 {
           display: flex;
-          color: #04080c !important;
+          color: #0c0904 !important;
         }
       }
     }
@@ -1665,7 +1665,7 @@ div::-webkit-scrollbar {
     span {
       font-family: $fontLED;
       color: $white;
-      text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
+      text-shadow: 0 0 15px rgba($color: #ebcc1b, $alpha: 1);
       display: flex;
       align-items: center;
 
@@ -1961,7 +1961,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(188, 229, 255, 1)), to(rgba(59, 77, 255, 1)));
+      background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 238, 185, 1.0)), to(rgba(255, 217, 62, 1.0)));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -2183,7 +2183,7 @@ div::-webkit-scrollbar {
       width: .5rem;
       height: .5rem;
       display: inline-block;
-      background: #2ee0fb;
+      background: $fBlue;
     }
 
     .icon-sxt {
@@ -2913,26 +2913,26 @@ div::-webkit-scrollbar {
 }
 
 .el-tabs__item {
-  color: #3cd7ef;
+  color: $inBlue;
   background: $GradualGreen;
   margin-right: 5px;
-  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);
+  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);
 }
 
 .el-tabs__item:hover {
   color: #fff;
-  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
-  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
+  background: linear-gradient(to left, #2b1904, #c8b100, #2b2204);
+  box-shadow: rgba($color: #c2a201, $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, #006ec8, #051d2b);
-  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
+  background: linear-gradient(to left, #2b1904, #c8b100, #2b2204);
+  box-shadow: rgba($color: #c2a201, $alpha: .8) 0px 0px 15px inset;
 }
 
 
@@ -2941,7 +2941,7 @@ div::-webkit-scrollbar {
 }
 
 .el-dialog {
-  background: #04080c;
+  background: $deepBG;
   box-shadow: $barShadow;
   border: 1px $barBorder;
 }
@@ -2955,7 +2955,7 @@ div::-webkit-scrollbar {
 
   .el-dialog__title {
     font-weight: bolder;
-    color: #3cd7ef;
+    color: $inBlue;
   }
 }
 
@@ -2996,7 +2996,7 @@ div::-webkit-scrollbar {
 
 //树
 .el-tree__empty-text {
-  color: #3cd7ef;
+  color: $inBlue;
 }
 
 .el-tree-node__label {

src/components/vBottomMenu.vue

@@ -1039,7 +1039,7 @@ export default {
       button {
         padding: 0 .3rem;
         height: 1.5rem;
-        background-color: #112543;
+        background-color: $deepBG;
         color: $inBlue;
         border: 1px $searchBorder;
       }

src/views/datacenter.vue

@@ -8,7 +8,7 @@
       <!-- 左侧 -->
       <div class="leftbar w-10" :class="indentleft" ref="left">
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" 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,11 +34,11 @@
       <!-- 右侧 -->
       <div class="rightbar" :class="indentright" ref="right">
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>数据分布</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
             </div>
             <div class="i-list-con h-73">
               <div class="overflow-y" style="height: 39vh">

src/views/date.vue

@@ -440,7 +440,7 @@ import {
 	}
 
 	.nolm {
-		color: #2b4376 !important;
+		color: #56471f !important;
 	}
 
 	.calendar-wrapper {
@@ -504,7 +504,7 @@ import {
 						overflow: hidden;
 						border-radius: 50%;
 						cursor: pointer;
-						color: #3d8bbc;
+						color: #bca03c;
 						font-size: 11px;
 
 						.date-state-pointer {

src/views/forest.vue

@@ -9,11 +9,11 @@
       <div class="leftbar" ref="left">
         <!-- 1 基本情况 -->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>基本情况</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+               <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
             </div>
             <div class="i-list-con h-14">
               <div class="d-l-con no_hover">
@@ -26,7 +26,7 @@
         </div>
         <!-- 2 事件统计-->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" 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">
@@ -38,13 +38,13 @@
                   <div class="count-number">{{ totalStr.charAt(4) }}</div>
                   <div class="count-number">{{ totalStr.charAt(5) }}</div>
                   <dv-decoration-5
-                    style="width:81%;height:15px;position: absolute; top:4.2rem;z-index: 0; "/>
+                    style="width:81%;height:15px;position: absolute; top:4.2rem;z-index: 0; " :color="['#935713', '#ebd033']"/>
                 </div>
               </div>
               <div class="d-l-con-icon">
                 <div class="icon-con w-33 flex-d t-a-center">
                   <dv-decoration-9
-                    style="width: 5.5rem;height: 5.5rem; color:#16e29e;font-size: 1rem;font-weight: bolder;">
+                    style="width: 5.5rem;height: 5.5rem; color:#16e29e;font-size: 1rem;font-weight: bolder;" :color="['#935713', '#ebd033']">
                     {{ newReport_pre }}%
                   </dv-decoration-9>
                   <div class="e-state"
@@ -54,7 +54,7 @@
                 </div>
                 <div class="icon-con w-33 flex-d t-a-center">
                   <dv-decoration-9
-                    style="width: 5.5rem;height: 5.5rem; color:#f18425;font-size: 1rem;font-weight: bolder;">
+                    style="width: 5.5rem;height: 5.5rem; color:#f18425;font-size: 1rem;font-weight: bolder;" :color="['#935713', '#ebd033']">
                     {{ readySure_pre }}%
                   </dv-decoration-9>
                   <div class="e-state"
@@ -64,7 +64,7 @@
                 </div>
                 <div class="icon-con w-33 flex-d t-a-center">
                   <dv-decoration-9
-                    style="width: 5.5rem;height: 5.5rem; color:#9179f1;font-size: 1rem;font-weight: bolder;">
+                    style="width: 5.5rem;height: 5.5rem; color:#9179f1;font-size: 1rem;font-weight: bolder;" :color="['#935713', '#ebd033']">
                     {{ readyFinish_pre }}%
                   </dv-decoration-9>
                   <div class="e-state"
@@ -81,7 +81,7 @@
         </div>
         <!-- 3 组织机构 -->
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" 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)">
+            <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']">
               <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">
@@ -236,11 +236,11 @@
           </div>
           <!-- 曝光台 -->
           <!--<div class="forthis">-->
-            <!--<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">-->
+            <!--<dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">-->
               <!--<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>-->
               <!--<div class="this-title">-->
                 <!--<span>曝光台</span>-->
-                <!--<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>-->
+                <!-- <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>-->
               <!--</div>-->
               <!--<div class="i-list-con small-bottom-margin h-18">-->
                 <!--<div class="d-l-con padding-box nowrap" v-for="(item,index) in exposureStageList">-->
@@ -263,11 +263,11 @@
           <!--</div>-->
           <!-- 事件列表 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="this-title">
                 <span>事件列表</span>
-                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+                 <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
               </div>
               <div class="i-list-con small-bottom-margin h-35" style="height: 57.5vh;">
                 <div class="event-list-search">
@@ -344,7 +344,7 @@
         <div class="right-item2">
           <!-- 日历 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" 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>
@@ -353,11 +353,11 @@
           </div>
           <!-- 事件分类 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="this-title">
                 <span>事件分类</span>
-                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
               </div>
               <div class="i-list-con small-bottom-margin h-19">
                 <dv-capsule-chart v-if="showEventKind" :config="eventKind"
@@ -367,11 +367,11 @@
           </div>
           <!-- 上报排行 -->
           <div class="forthis">
-            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+            <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
               <div class="this-title">
                 <span>上报排行</span>
-                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+                 <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
               </div>
               <div class="i-list-con small-bottom-margin h-19">
                 <dv-scroll-ranking-board :config="reportList" style="width: 100%;height: 20vh; padding:.5rem 1rem"/>

src/views/monitor.vue

@@ -8,11 +8,11 @@
       <!-- 左侧 -->
       <div class="leftbar" :class="indentleft" ref="left">
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>事态感知</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
             </div>
             <div class="i-list-con h-73">
               <div class="d-l-con-icon">
@@ -59,11 +59,11 @@
       <!-- 右侧 -->
       <div class="rightbar" :class="indentright" ref="right">
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;"><!--height: 750px;-->
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;"><!--height: 750px;-->
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>列表</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
             </div>
             <div class="i-list-con h-43">
               <div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOList"
@@ -78,11 +78,11 @@
           </dv-border-box-13>
         </div>
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(19, 13, 5, 0.9)" :color="['#d5811d', '#ebd033']" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>重点区域</span>
-              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" :color="['#935713', '#ebd033']"/>
             </div>
             <div class="i-list-con h-25">
               <div class="d-l-con" v-for="(item,index) in keyAreaList" @click="">