样式调整,hover改click

src/assets/scss/common.scss

@@ -106,7 +106,7 @@ body {
     left: calc(1vw + 1em + 48px + 20px);
     height: calc(100vh - var(--header-height) - 24px);
     top: calc(var(--header-height) + 24px);
-    width: 23vw;
+    width: 20vw;
     min-width: 390px;
     // padding: 15px;
     box-sizing: border-box;
@@ -246,7 +246,7 @@ body {
         cursor: pointer;
         &.active {
             background-image: url(../img/nav-item-s.png);
-            color: #5ee574;
+            color: #FFAA00;
         }
     }
 }

src/components/numerical.vue

@@ -13,11 +13,12 @@
     <!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
     <div class="item-wrap">
       <div class="inner u-flex u-flex-wrap">
+        <!-- @mouseenter="showDetails(item)"
+        @mouseleave="unShowDetails" -->
         <div
           class="numerical-item"
           v-for="(item,index) in data"
-          @mouseenter="showDetails(item)"
-          @mouseleave="unShowDetails"
+          @click="showDetails(item)"
           :key="item.name+index"
         >
           <div class="cell name">{{item.name}}</div>
@@ -238,12 +239,12 @@ export default {
       }
       .number {
         color: var(--main-color);
-        font-size: 35px;
+        font-size: 32px;
         margin-right: 5px;
         font-family: 'Rubik', sans-serif;
       }
       .unit {
-        font-size: 17px;
+        font-size: 14px;
         color: var(--main-color);
       }
     }

src/dataSchema/color.js

@@ -2,7 +2,10 @@
  * @LastEditors: gcz
  */
 let themeColor = {
-    mainColor: '#58c96b'
+    mainColor: '#58c96b',
+    fillerColor: '#FFAA00',
+    //柱状图颜色
+    colorArr: ['#00FAFD', '#FF4E46', '#FFAA00']
 };
 
 export default themeColor;

src/dataSchema/page1Char1Schema.js

@@ -33,7 +33,7 @@ let page1Char1Schema = {
             left: '30%',
             bottom: '10px',
             borderColor: 'transparent',
-            fillerColor: '#14c6d3',
+            fillerColor: themeColor.fillerColor,
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
             backgroundColor: 'rgba(255,255,255,.2)',

src/dataSchema/page1Char2Schema.js

@@ -23,7 +23,7 @@ let page1Char2Schema = {
             left: '30%',
             bottom: '10px',
             borderColor: 'transparent',
-            fillerColor: '#14c6d3',
+            fillerColor: themeColor.fillerColor,
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
             backgroundColor: 'rgba(255,255,255,.2)',

src/dataSchema/page2Char2Schema.js

@@ -60,7 +60,7 @@ let page2Char2Schema = {
             left: '30%',
             bottom: '10px',
             borderColor: 'transparent',
-            fillerColor: '#14c6d3',
+            fillerColor: themeColor.fillerColor,
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
             backgroundColor: 'rgba(255,255,255,.2)',
@@ -94,7 +94,7 @@ let page2Char2Schema = {
             },
             data: [1, 1, 1, 2, 2, 1, 0],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(2, 238, 255)" },
+                normal: { color: themeColor.colorArr[0] },
             }
         },
         {
@@ -109,7 +109,7 @@ let page2Char2Schema = {
             },
             data: [1, 8, 8, 2, 6, 9, 9],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(94, 229, 116)" },
+                normal: { color: themeColor.colorArr[1] },
             }
         },
         {
@@ -124,7 +124,7 @@ let page2Char2Schema = {
             },
             data: [8, 1, 1, 6, 2, 0, 1],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(255, 255, 0)" },
+                normal: { color: themeColor.colorArr[2] },
             }
         }
     ]

src/dataSchema/page2Char3Schema.js

@@ -61,7 +61,7 @@ let page6Char1Schema = {
             left: '30%',
             bottom: '10px',
             borderColor: 'transparent',
-            fillerColor: '#14c6d3',
+            fillerColor: themeColor.fillerColor,
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
             backgroundColor: 'rgba(255,255,255,.2)',
@@ -95,7 +95,7 @@ let page6Char1Schema = {
             },
             data: [1, 1, 1, 2, 2, 1, 0],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(2, 238, 255)" },
+                normal: { color: themeColor.colorArr[0] },
             }
         },
         {
@@ -110,7 +110,7 @@ let page6Char1Schema = {
             },
             data: [1, 8, 8, 2, 6, 9, 9],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(94, 229, 116)" },
+                normal: { color: themeColor.colorArr[1] },
             }
         },
         {
@@ -125,7 +125,7 @@ let page6Char1Schema = {
             },
             data: [8, 1, 1, 6, 2, 0, 1],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(255, 255, 0)" },
+                normal: { color: themeColor.colorArr[2] },
             }
         }
     ]

src/dataSchema/page5Char1Schema.js

@@ -33,7 +33,7 @@ let page5Char1Schema = {
             left: '30%',
             bottom: '10px',
             borderColor: 'transparent',
-            fillerColor: '#14c6d3',
+            fillerColor: themeColor.fillerColor,
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
             backgroundColor: 'rgba(255,255,255,.2)',

src/dataSchema/page5Char2Schema.js

@@ -36,7 +36,7 @@ let page5Char2Schema = {
             left: '30%',
             bottom: '10px',
             borderColor: 'transparent',
-            fillerColor: '#14c6d3',
+            fillerColor: themeColor.fillerColor,
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
             backgroundColor: 'rgba(255,255,255,.2)',

src/dataSchema/page6Char1Schema.js

@@ -60,7 +60,7 @@ let page6Char1Schema = {
             left: '30%',
             bottom: '10px',
             borderColor: 'transparent',
-            fillerColor: '#14c6d3',
+            fillerColor: themeColor.fillerColor,
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
             backgroundColor: 'rgba(255,255,255,.2)',
@@ -94,7 +94,7 @@ let page6Char1Schema = {
             },
             data: [1, 1, 1, 2, 2, 1, 0],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(2, 238, 255)" },
+                normal: { color: themeColor.colorArr[0] },
             }
         },
         {
@@ -109,7 +109,7 @@ let page6Char1Schema = {
             },
             data: [8, 1, 1, 6, 2, 0, 1],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(94, 229, 116)" },
+                normal: { color: themeColor.colorArr[1] },
             }
         },
         {
@@ -124,7 +124,7 @@ let page6Char1Schema = {
             },
             data: [1, 8, 8, 2, 6, 9, 9],
             itemStyle: {//自定义颜色
-                normal: { color: "rgb(255, 255, 0)" },
+                normal: { color: themeColor.colorArr[2] },
             }
         },
         {

src/views/index.vue

@@ -2,9 +2,9 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: wangcc
- * @LastEditTime: 2022-08-11 11:33:09
- * @FilePath: \castgroup_bigscreen\src\views\index.vue
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-10-20 09:11:21
+ * @FilePath: \ntbigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <template>
@@ -230,7 +230,7 @@ import page6Char2Schema from '../dataSchema/page6Char2Schema';
 import scrollEventSchema from '../dataSchema/scrollEventSchema';
 
 //柱状图颜色
-let colorArr = ['rgb(2, 238, 255)', 'rgb(94, 229, 116)', 'rgb(255, 255, 0)'];
+let colorArr = ['#00FAFD', '#FF4E46', '#FFAA00'];
 
 // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
 export default {