更改颜色

src/assets/scss/common.scss

@@ -3,7 +3,7 @@ body,
 :root {
     --padding-left: 24px;
     --padding-right: 24px;
-    --main-color: rgb(38, 80, 179);
+    --main-color: rgb(2, 238, 255);
     --header-height: 66px;
     --s: 6; // 轮播的个数
     --h: 36; // 单个 li 容器的高度
@@ -25,10 +25,10 @@ body {
     padding-left: var(--padding-left);
 }
 @mixin mbg($o) {
-    background-color: rgba(38, 80, 179, $o);
+    background-color: rgba(0, 166, 208, $o);
 }
 .blur-wrap {
-    backdrop-filter: blur(6px);
+    // backdrop-filter: blur(6px);
     @include mbg(0.3);
 }
 
@@ -56,12 +56,24 @@ body {
         width: 20vw;
         border-radius: 8px;
         overflow: hidden;
+        .dv-scroll-board .header{
+            color: var(--main-color);
+        }
     }
 }
 .xiaoban{
     margin: 20px 0;
     width: 20vw;
     margin-left: auto;
+    color: var(--main-color);
+     .el-input .el-input__inner{
+        border-color: var(--main-color);
+        color: var(--main-color);
+        background: transparent;
+    }
+    .el-input__icon{
+        color: var(--main-color);
+    }
     .title{
         white-space: nowrap;
     }
@@ -72,6 +84,7 @@ body {
         top: calc(var(--header-height) + 24px);
     
     .nav-item {
+        color: var(--main-color);
         &:not(:first-of-type) {
             margin-top: 1vh;
         }
@@ -83,6 +96,7 @@ body {
         cursor: pointer;
         &.active {
             background-image: url(../img/nav-item-s.png);
+            color: #5ee574;
         }
     }
 }

src/components/numerical copy.vue

@@ -0,0 +1,73 @@
+<!--
+ * @LastEditors: gcz
+-->
+<!--
+ * @LastEditors: gcz
+-->
+<template>
+    <div class="numerical u-flex">
+        <div class="numerical-item u-flex u-flex-1" v-for="(item,index) in data" :key="item.name+index">
+            <div class="cell name">{{item.name}}</div>
+            <div class="cell number">{{item.number}}</div>
+            <div class="cell unit">{{item.unit}}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    //import { projectClassList } from '@/api/project/projectclass';
+    export default {
+        name: '',
+        props:{
+            data:{
+                type: Array,
+                default: null,
+            },
+        },
+        components: {},
+        data () {
+            return {
+                
+            };
+        },
+        created(){
+            // console.log('data',this.data);
+        },
+        methods: {},
+    }
+</script>
+
+<style lang='scss' scoped>
+.numerical{
+    height: 15vh;
+    margin-bottom: 2vh;
+    .numerical-item{
+        line-height: 1.5;
+        border: 1px solid var(--main-color);
+        height: 100%;
+        flex-flow: column;
+        .cell:not(.name){
+            padding: 5px 15px 5px 5px;
+            font-size: 0.5rem;
+            text-align: right;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        .name{
+           height: 100%; 
+           width: 100%;
+           justify-content: center;
+           display: flex;
+           align-items: center;
+           backdrop-filter: blur(6px);
+           text-shadow:0 0 3px #dbe8ff;
+        }
+        .number{
+            border-bottom: 1px solid var(--main-color);
+        }
+        & + .numerical-item{
+            border-left: 0;
+        }
+    }
+}
+</style>

src/components/numerical.vue

@@ -2,11 +2,11 @@
  * @LastEditors: gcz
 -->
 <template>
-    <div class="numerical u-flex">
-        <div class="numerical-item u-flex u-flex-1" v-for="(item,index) in data" :key="item.name+index">
-            <div class="cell name">{{item.name}}</div>
-            <div class="cell number">{{item.number}}</div>
-            <div class="cell unit">{{item.unit}}</div>
+    <div class="numerical">
+        <div class="numerical-item u-flex" v-for="(item,index) in data" :key="item.name+index">
+            <span class="cell name">{{item.name}}：</span>
+            <span class="cell number">{{item.number}}</span>
+            <span class="cell unit">{{item.unit}}</span>
         </div>
     </div>
 </template>
@@ -36,34 +36,19 @@
 
 <style lang='scss' scoped>
 .numerical{
-    height: 15vh;
+    box-sizing: border-box;
     margin-bottom: 2vh;
+    border-radius: 10px;
+    padding: 20px 24px;
+    border: 1px solid var(--main-color);
     .numerical-item{
-        line-height: 1.5;
-        border: 1px solid var(--main-color);
-        height: 100%;
-        flex-flow: column;
-        .cell:not(.name){
-            padding: 5px 15px 5px 5px;
-            font-size: 0.5rem;
-            text-align: right;
-            width: 100%;
-            box-sizing: border-box;
-        }
-        .name{
-           height: 100%; 
-           width: 100%;
-           justify-content: center;
-           display: flex;
-           align-items: center;
-           backdrop-filter: blur(6px);
-           text-shadow:0 0 3px #dbe8ff;
+        & +  .numerical-item{
+            margin-top: 15px;
         }
         .number{
-            border-bottom: 1px solid var(--main-color);
-        }
-        & + .numerical-item{
-            border-left: 0;
+            color: var(--main-color);
+            font-size: 1.5em;
+            margin-right: 5px;
         }
     }
 }

src/views/index.vue

@@ -15,7 +15,7 @@
     <Alarm v-if="page==6&&alarmData.length>1" :data="alarmData" />
 
     <section class="left-wrap " v-if="page==1">
-      <Numerical class="blur-wrap" :data="page1numerical" />
+      <Numerical class="" :data="page1numerical" />
       <MyEcharts class="blur-wrap u-p-t" mid="page1Char1" ref="page1Char1" :option="page1Char1" height="30vh" style="padding-left:20px" />
       <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page1Char2" ref="page1Char2" :option="page1Char2" height="30vh" style="padding-left:20px" />
     </section>
@@ -28,14 +28,14 @@
     <!-- 林业经济 -->
     <section class="left-wrap " v-if="page==5">
       <Typeslide :data="typeSlideData" />
-      <Numerical class="blur-wrap" :data="page5numerical" />
+      <Numerical class="" :data="page5numerical" />
       <MyEcharts class="blur-wrap u-p-t" mid="page5Char1" ref="page5Char1" :option="page5Char1" height="30vh" />
       <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page5Char2" ref="page5Char2" :option="page5Char2" height="30vh" />
     </section>
 
     <!-- 事件信息 -->
     <section class="left-wrap " v-if="page==6">
-      <Numerical class="blur-wrap" :data="page6numerical" />
+      <Numerical class="" :data="page6numerical" />
       <MyEcharts class="blur-wrap u-p-t" mid="page6Char1" ref="page6Char1" :option="page6Char1" height="30vh" />
     </section>
     
@@ -89,7 +89,7 @@
   } from "../service/index"
 
   // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
-  
+  let mainColor='#02EEFF';
   export default {
     name: '',
     components: {
@@ -117,8 +117,10 @@
         scrollBoardConfig:{
           header: ['小班号', '树种组成', '每亩蓄积','小班面积'],
           data: [],
-          headerBGC:'rgba(38,80,179,1)',//表头背景色
-          oddRowBGC:'rgba(38,80,179,.5)',//奇数行背景色
+          headerBGC:'transparent',//表头背景色
+          // headerBGC:'rgba(38,80,179,1)',//表头背景色
+          // oddRowBGC:'rgba(38,80,179,.5)',//奇数行背景色
+           oddRowBGC:'transparent',//奇数行背景色
           evenRowBGC:'transparent',//偶数行背景色	
           align:['center','center','center','center'],//列对齐方式
         },
@@ -167,7 +169,7 @@
           text: '树种占比',
           left: 'center',
           textStyle:{
-              color: '#fff',
+              color: mainColor,
           }
         },
         tooltip: {
@@ -208,6 +210,8 @@
         page6numerical:[],
         page6Char1:{},
         xiaobaninput:'',
+
+        
       };
     },
     created(){