数据大屏

src/views/data-screen/components/AnnualUseChart.vue

@@ -112,10 +112,10 @@ const option = computed(() => {
                     // barBorderRadius: 30,
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                         offset: 0,
-                        color: 'rgb(57,89,255,1)'
+                        color: '#0f56ec'
                     }, {
                         offset: 1,
-                        color: 'rgb(46,200,207,1)'
+                        color: '#e3edfd'
                     }]),
                 },
             },
@@ -125,25 +125,25 @@ const option = computed(() => {
                 show: true,
                 position: [0, '-24px'],
                 textStyle: {
-                  fontSize: 16
+                  fontSize: 20
                 },
                 formatter: function (a, b) {
                   return a.name
                 }
               }
             },
-            barWidth: 50,
+            barWidth: 40,
             data: salvProValue.value
         },
         {
             name: '背景',
             type: 'bar',
-            barWidth: 50,
+            barWidth: 40,
             barGap: '-100%',
             data: salvProValue.value.map(v => (salvProValue.value.length > 0? salvProValue.value[0] : 100)),
             itemStyle: {
                 normal: {
-                    color: '#142166',
+                    color: '#6591f7',
                     // barBorderRadius: 30,
                 }
             },
@@ -193,7 +193,7 @@ setInterval(() => {
 <style lang="scss" scoped>
 .echarts {
   width: 100%;
-  height: calc(100% - 56px);
+  height: calc(100%);
 }
 .echarts-header {
   box-sizing: border-box;

src/views/data-screen/components/HotPlateChart.vue

@@ -100,10 +100,10 @@ const option = computed(() => {
                     // barBorderRadius: 30,
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                         offset: 0,
-                        color: 'rgb(57,89,255,1)'
+                        color: '#0f56ec'
                     }, {
                         offset: 1,
-                        color: 'rgb(46,200,207,1)'
+                        color: '#e3edfd'
                     }]),
                 },
             },
@@ -113,25 +113,25 @@ const option = computed(() => {
                 show: true,
                 position: [0, '-24px'],
                 textStyle: {
-                  fontSize: 16
+                  fontSize: 20
                 },
                 formatter: function (a, b) {
                   return a.name
                 }
               }
             },
-            barWidth: 50,
+            barWidth: 40,
             data: salvProValue.value
         },
         {
             name: '背景',
             type: 'bar',
-            barWidth: 50,
+            barWidth: 40,
             barGap: '-100%',
             data: salvProValue.value.map(v => 100),
             itemStyle: {
                 normal: {
-                    color: '#142166',
+                    color: '#6591f7',
                     // barBorderRadius: 30,
                 }
             },

src/views/data-screen/index.scss

 .dataScreen-container {
   width: 100%;
   height: 100%;
-  background: #2353a8;
+  background: #134ca9;
   .dataScreen-content {
     position: fixed;
     top: 50%;
@@ -37,7 +37,7 @@
           font-family: YouSheBiaoTiHei;
           font-size: 32px;
           line-height: 78px;
-          color: #05e8fe;
+          color: #fff;
           text-align: center;
           letter-spacing: 4px;
           background: url("./images/dataScreen-header-center-bg.png") no-repeat;
@@ -71,7 +71,7 @@
         font-size: 18px;
         font-weight: 400;
         line-height: 42px;
-        color: #29fcff;
+        color: #fff;
         text-align: center;
         cursor: pointer;
         background-size: 100% 100%;
@@ -95,7 +95,7 @@
         font-size: 17px;
         font-weight: 400;
         line-height: 38px;
-        color: #05e8fe;
+        color: #fff;
         white-space: nowrap;
       }
     }
@@ -138,8 +138,9 @@
         line-height: 4px;
       }
       .number-value {
-        font-size: 44px;
+        font-size: 58px;
         font-weight: 600;
+        // font-family:YouSheBiaoTiHei;
       }
     }
     .dataScreen-cb {
@@ -147,12 +148,12 @@
       box-sizing: border-box;
       width: 100%;
       height: 252px;
-      background: #0574e83d;
+      background: #0250ea;
       padding-top: 54px;
       .tabs {
         border-radius: 5px;
         position: absolute;
-        border: 1px solid #40daff;
+        border: 1px solid #6591f7;
         right: 3px;
         top: 3px;
         color: #fff;
@@ -160,9 +161,9 @@
         overflow: hidden;
         .tab-item {
           padding: 2px 20px;
-          border: 1px solid #40daff;
+          border: 1px solid #6591f7;
           &.active{
-            background: #40daff;
+            background: #6591f7;
           }
         }
       }
@@ -171,9 +172,9 @@
       color: #fff;
       width: 250px;
       .el-select {
-        --el-border-color: #40daff;
-        --el-color-primary: #40daff;
-        --el-border-color-hover: #40daff;
+        --el-border-color: #6591f7;
+        --el-color-primary: #6591f7;
+        --el-border-color-hover: #6591f7;
         --el-fill-color-blank: transparent;
         --el-text-color-regular: #fff;
         .el-select__wrapper {
@@ -233,7 +234,7 @@
         flex-direction: column;
         justify-content: space-between;
         width: 500px;
-        background: #0574e83d;
+        background: #0250ea;
         height: 100%;
         margin-right: 40px;
         .dataScreen-top,
@@ -276,7 +277,7 @@
         justify-content: space-between;
         width: 500px;
         height: 100%;
-        background: #0574e83d;
+        background: #0250ea;
         .dataScreen-top,
         .dataScreen-center,
         .dataScreen-bottom {