浅色版2

改浅色
2026-01-06 11:58:33 +08:00 · 2026-01-06 11:10:20 +08:00
21 changed files with 872 additions and 716 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
 -->
 <template>
  <div id="app">
-    <router-view/>
+    <router-view />
  </div>
 </template>

@@ -15,7 +15,7 @@
 #app {
  width: 100vw;
  height: 100vh;
-  background-color: #091a40;
+  background-color: #fafafa;
  // overflow: hidden;
 }
 </style>
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -96,17 +96,17 @@
 .yh-big-input {
  width: 253px;
  height: 14px;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, .53);
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
  border-radius: 4px;
-  color: #fff;
+  color: #000000;
  padding: 6px 10px;
  font-size: 14px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

  &:focus {
    outline: none;
-    border-color: #31abe3;
+    border-color: #1890ff;
  }
 }

@@ -116,17 +116,17 @@

  .el-input__inner {
    padding: 6px 10px;
-    border: 1px solid rgba(255, 255, 255, .53);
-    background-color: transparent;
+    border: 1px solid #d9d9d9;
+    background-color: #000000;
    font-size: 14px;
    line-height: 1;
-    color: #fff;
+    color: #000000;
    &:hover{
-      border-color: rgba(255, 255, 255, .8);
+      border-color: #40a9ff;
    }
    &:focus {
      outline: none;
-      border-color: #31abe3;
+      border-color: #1890ff;
    }

  }
@@ -136,19 +136,19 @@
 .yh-big-button {
  width: 53px;
  height: 26px;
-  background: #00b1d6;
+  background: #1890ff;
  border-radius: 4px;
-  // border-color: #00b1d6;
+  // border-color: #1890ff;
  border-width: 1px;
  border: none;
  cursor: pointer;
-  color: #fff;
+  color: #000000;
  font-size: 15px;

  &:hover,
  &:focus {
-    // border-color: #0597b4;
-    background: #0597b4;
+    // border-color: #40a9ff;
+    background: #40a9ff;
  }
 }

@@ -177,8 +177,8 @@

 //表格样式重置
 .ve-table {
-  $border-color: #525371;
-  // $border-color: rgba(255, 255, 255, .43);
+  $border-color: #e8e8e8;
+  // $border-color: rgba(0, 0, 0, .15);
  box-sizing: border-box;

  .ve-table-container {
@@ -229,8 +229,8 @@
    box-sizing: border-box;

    th.ve-table-header-th {
-      background: #04004E;
-      color: #FFF;
+      background: #fafafa;
+      color: #000000;
      border-color: $border-color;
      box-sizing: border-box;
      line-height: 1;
@@ -244,7 +244,7 @@
    tr.ve-table-body-tr td.ve-table-expand-td,
    tr.ve-table-expand-tr td.ve-table-expand-td {
      background: transparent;
-      color: #FFA500;
+      color: #000000;
      border-color: $border-color;
      box-sizing: border-box;
    }
@@ -256,7 +256,7 @@
    }

    &.ve-table-row-hover tr.ve-table-body-tr:hover td {
-      background-color: rgba(0, 0, 0, .22);
+      background-color: rgba(24, 144, 255, .1);
      box-sizing: border-box;
    }
  }
--- a/src/assets/css/modules/variables.scss
+++ b/src/assets/css/modules/variables.scss
@@ -1,17 +1,17 @@
-// 颜色
+// 颜色 - 浅色主题
 $colors: (
-  "primary": #1A5CD7,
-  "info-1": #4394e4,
-  "info": #4b67af,
+  "primary": #1890ff,
+  "info-1": #40a9ff,
+  "info": #1890ff,
  "white": #ffffff,
-  "light": #f9f9f9,
+  "light": #f5f7fa,
  "grey-1": #999999,
  "grey": #666666,
-  "dark-1": #5f5f5f,
+  "dark-1": #333333,
  "dark": #222222,
-  "black-1": #171823,
+  "black-1": #000000,
  "black": #000000,
-  "icon": #5cd9e8
+  "icon": #1890ff
 );

 // 字体大小
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -1,12 +1,12 @@
-// 颜色
+// 颜色 - 浅色主题
 $primary-color: #1890ff;
-$primary-color-hl: rgb(41, 52, 67);
-$default-color: #006569;
+$primary-color-hl: #40a9ff;
+$default-color: #1890ff;
 $link: #1890ff;
-$active-color: rgb(0, 101, 105);
-$del-color: #ff1839;
-$content-background: #f3f5fa;
-$table-header-background: #d8eaff;
+$active-color: #096dd9;
+$del-color: #ff4d4f;
+$content-background: #ffffff;
+$table-header-background: #f0f7ff;

 $primary-color-rgba: rgba($color: $primary-color,
  $alpha: 0.1,
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -53,9 +53,9 @@ $item_title_content-height: calc(100% - 38px);
    height: $item-title-height;
    line-height: $item-title-height;
    width: 100%;
-    color: #31abe3;
+    color: #1890ff;
    text-align: center;
-    // background: linear-gradient(to right, transparent, #0f0756, transparent);
+    // background: linear-gradient(to right, transparent, #f0f7ff, transparent);
    position: relative;
    display: flex;
    align-items: center;
@@ -76,9 +76,9 @@ $item_title_content-height: calc(100% - 38px);
      letter-spacing: 2px;
      background: linear-gradient(
        92deg,
-        #acb1b7 0%,
-        #00eaff 48.8525390625%,
-        #01aaff 100%
+        #666666 0%,
+        #1890ff 48.8525390625%,
+        #096dd9 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
--- a/src/views/dishboard.vue
+++ b/src/views/dishboard.vue
@@ -146,7 +146,7 @@
  <style scoped>
  .dashboard {
    background: #0a1931;
-    color: white;
+    color: #000000;
    padding: 20px;
  }
  .header {
--- a/src/views/home.scss
+++ b/src/views/home.scss
@@ -1,5 +1,5 @@
 .scale-wrap {
-    color: #d3d6dd;
+    color: #000000;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
@@ -15,7 +15,7 @@
        height: 100%;
        padding: 16px 16px 10px 16px;
        box-sizing: border-box;
-        background-image: url("../assets/img/u0.svg");
+        background-color: #f5f7fa;
        background-size: cover;
        background-position: center center;
    }
@@ -90,11 +90,13 @@
                right: 0;
                top: 30px;
                font-size: 18px;
+                color: #000000;
                display: flex;
                align-items: center;

                .blq-icon-shezhi02 {
                    cursor: pointer;
+                    color: #000000;
                }
            }
        }
@@ -156,7 +158,7 @@
                font-weight: 900;
                letter-spacing: 6px;
                width: 100%;
-                background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
+                background: linear-gradient(92deg, #1890ff 0%, #40a9ff 48.8525390625%, #096dd9 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
@@ -178,12 +180,12 @@
            width: 130px;
            height: 36px;
            border-radius: 18px 0px 0px 18px;
-            color: #00FBF8;
+            color: #1890ff;
            text-indent: 26px;
            line-height: 36px;
            font-size: 16px;
            margin-right: 20px;
-            background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
+            background: linear-gradient(to right, rgba(24, 144, 255, .1), rgba(24, 144, 255, 0));
        }
    }
 }
@@ -226,7 +228,7 @@

    .setting_inner {
        box-sizing: border-box;
-        background: #FFF;
+        background: #ffffff;
        width: 340px;
        height: 100%;
        position: absolute;
@@ -234,11 +236,11 @@
        top: 0;
        z-index: 1;
        color: #000000;
-        box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 16px rgba(0, 0, 0, .08);

        .setting_header {
            font-size: 20px;
-            color: rgb(0, 0, 0);
+            color: #000000;
            font-weight: 900;
            text-align: center;
            line-height: 40px;
@@ -256,11 +258,11 @@

            // display: flex;
            .setting_label {
-                color: #555454;
+                color: #000000;
            }
            .setting_label_tip{
                font-size: 12px;
-                color: #838282;
+                color: #666666;
            }
        }
    }
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -119,7 +119,7 @@ export default {
 }

 .title-name{
-  color: white;  
+  color: #000000;  
  font-size: 30px; 
  font-weight: 600; 
  margin-left: 20px;
--- a/src/views/indexs/center-bottom.vue
+++ b/src/views/indexs/center-bottom.vue
@@ -20,7 +20,7 @@ export default {
      // { name: '其它：10%', value: 260 }
    ]
  ],
-    colors: ["#00E5FF", "#FF5733"]
+    colors: ["#1890ff", "#ff9800"]
      //colors: ["#00E5FF", "#FF5733",  "#FFBF00", "#5CDB95"]
    };
  },
@@ -48,7 +48,7 @@ export default {
          text: '',
          left: 'center',
          textStyle: {
-            color: '#DDDDDD', // 将原来的 #999 改为更亮的灰色
+            color: '#000000', // 浅色主题使用黑色
            fontWeight: 'normal',
            fontSize: 14
          }
@@ -63,7 +63,7 @@ export default {
            left: 'center',
            width: '600px',
            itemStyle: {
-              borderColor: 'orange',
+              borderColor: '#ff9800', // 使用较暗的橙色边框
              borderWidth: 1
            },
            label: {
@@ -76,17 +76,17 @@ export default {
              rich: {
                name: {  // 新增 name 样式
                  fontSize: 14,
-                  color: 'yellow', // 使用亮白色
+                  color: '#666666', // 使用深灰色降低亮度
                  padding: [0, 0, 5, 0]
                },
                value: {
                  fontSize: 12,
-                  color: 'orange',
+                  color: '#ff9800', // 使用较暗的橙色
                  padding: [0, 5, 0, 0]
                },
                percent: {
                  fontSize: 12,
-                  color: '#FF5733' // 保留原有橙色
+                  color: '#f57c00' // 使用更深的橙色
                }
              }
            },
--- a/src/views/indexs/center-map.vue
+++ b/src/views/indexs/center-map.vue
@@ -9,12 +9,18 @@
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
-      <span class="titletextBefore">今年碳减排总量<span class="titletext">{{ totalCarbon/1000 }}</span>吨</span>
+      <span class="titletextBefore"
+        >今年碳减排总量<span class="titletext">{{ totalCarbon / 1000 }}</span
+        >吨</span
+      >
      <div class="you"></div>
    </div>
    <div class="mileagetitle">
      <div class="zuo"></div>
-      <span class="titletextBefore">总里程数<span class="titletext">{{ totalMileage }}</span>万km</span>
+      <span class="titletextBefore"
+        >总里程数<span class="titletext">{{ totalMileage }}</span
+        >万km</span
+      >
      <div class="you"></div>
    </div>
    <div class="mapwrap">
@@ -25,14 +31,22 @@
        <div class="quanguo1" @click="goToPage()" v-if="showType === 1">
          车辆实况
        </div>
-        <div class="quanguo2" @click="changeShow1()" :style="{ backgroundColor: currentBgColor2 }">
-          <div >车辆信息</div>
+        <div
+          class="quanguo2"
+          @click="changeShow1()"
+          :style="{ backgroundColor: currentBgColor2 }"
+        >
+          <div>车辆信息</div>
        </div>
-        <div class="quanguo3" @click="changeShow2()" :style="{ backgroundColor: currentBgColor3 }">
-          <div >加氢站</div>
+        <div
+          class="quanguo3"
+          @click="changeShow2()"
+          :style="{ backgroundColor: currentBgColor3 }"
+        >
+          <div>加氢站</div>
        </div>
-          <div class="quanguo4" v-if="code === 'china'">
-          <div >全国车辆范围</div>
+        <div class="quanguo4" v-if="code === 'china'">
+          <div>全国车辆范围</div>
        </div>
        <Echart id="CenterMap" :options="options" ref="CenterMap" />
        <!-- <dv-flyline-chart :config="config" style="width:100%;height:100%;" /> -->
@@ -56,10 +70,10 @@ export default {
      //code:"440000",
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
-      currentMap : 'china',    // 当前显示的地图层级
-      showType: 1,             //显示内容类型： 1车辆信息，2加氢站信息
-      currentBgColor2:'',
-      currentBgColor3:'',
+      currentMap: "china", // 当前显示的地图层级
+      showType: 1, //显示内容类型： 1车辆信息，2加氢站信息
+      currentBgColor2: "",
+      currentBgColor3: "",
    };
  },
  created() {},
@@ -69,20 +83,20 @@ export default {
    this.getYearData();

    this.showType = 1;
-    this.currentBgColor2 = '#158e8e';
+    this.currentBgColor2 = "#158e8e";
    //this.getData("china");
    this.getData(this.code);
  },
  methods: {
-    changeShow1(){
+    changeShow1() {
      this.showType = 1;
-      this.currentBgColor2 = '#158e8e';
-      this.currentBgColor3 = '';
+      this.currentBgColor2 = "#158e8e";
+      this.currentBgColor3 = "";
      this.getData(this.code);
    },
-    changeShow2(){
-      this.currentBgColor2 = '';  
-      this.currentBgColor3 = '#158e8e';          
+    changeShow2() {
+      this.currentBgColor2 = "";
+      this.currentBgColor3 = "#158e8e";
      this.showType = 2;
      this.getData(this.code);
    },
@@ -90,29 +104,35 @@ export default {
      //window.open("http://localhost:9528/vehicle-management/vehicle-state?"+this.code, "_blank");

      //window.open("http://47.100.49.118:8090/vehicle-situation?"+this.code, "_blank");
-      window.open("http://127.0.0.1:9528/vehicle-situation?"+this.code, "_blank");
+      window.open(
+        "http://127.0.0.1:9528/vehicle-situation?" + this.code,
+        "_blank"
+      );
      //window.open("http://192.168.0.219:9528/vehicle-situation?"+this.code, "_blank");
    },
    parseAdcodeLevel(adcode) {
      const codeStr = String(adcode);
-      if (codeStr.endsWith('0000')) return 'province'; // 省级（如 440000）
-      if (codeStr.endsWith('00')) return 'city';       // 市级（如 440300）
-      return 'district';                               // 区县级（如 440305）
+      if (codeStr.endsWith("0000")) return "province"; // 省级（如 440000）
+      if (codeStr.endsWith("00")) return "city"; // 市级（如 440300）
+      return "district"; // 区县级（如 440305）
    },
    getYearData() {
      currentGET("big3").then((res) => {
-          console.log('年度碳排量');
-          console.log(res);
-          this.totalCarbon = res.data.yearCarbon || "0";
-          this.totalMileage = res.data.yearMileage || "0";
-        });
+        console.log("年度碳排量");
+        console.log(res);
+        this.totalCarbon = res.data.yearCarbon || "0";
+        this.totalMileage = res.data.yearMileage || "0";
+      });
    },
    getData(code) {
      console.log("code", code);
      this.currentMap = this.parseAdcodeLevel(code);
-            //2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息
-      if(this.showType  === 1){
-        currentGET("big9", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => {
+      //2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息
+      if (this.showType === 1) {
+        currentGET("big9", {
+          regionCode: code,
+          adcodeLevel: this.currentMap,
+        }).then((res) => {
          console.log("map车辆分布", res);
          //if (res.success)
          if (res.status) {
@@ -122,9 +142,12 @@ export default {
            this.$Message.warning(res.msg);
          }
        });
-      }else if(this.showType  === 2){
+      } else if (this.showType === 2) {
        //改为显示全国所有加氢站信息  停止使用big14  使用big15  2025.10.16  szy
-        currentGET("big15", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => {
+        currentGET("big15", {
+          regionCode: code,
+          adcodeLevel: this.currentMap,
+        }).then((res) => {
          console.log("加氢站_map分布", res);
          //if (res.success)
          if (res.status) {
@@ -145,33 +168,32 @@ export default {
    async getGeojson(name, mydata) {
      this.code = name;
      this.currentMap = name;
-      console.log('当前地图层级');
+      console.log("当前地图层级");
      console.log(this.currentMap);
      //如果要展示南海群岛并且展示的是中国的话
-      let geoname=name
+      let geoname = name;
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }
      //如果有注册地图的话就不用再注册 了
      let mapjson = echarts.getMap(name);
-      console.log('已经是否已存在的地图数据');
+      console.log("已经是否已存在的地图数据");
      if (mapjson) {
        mapjson = mapjson.geoJson;
-      } 
-      else 
-      {
+      } else {
        //console.log('当前未注册地图');
-        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
-          return res;
-        });
+        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
+          (res) => {
+            return res;
+          }
+        );
        echarts.registerMap(name, mapjson);
-   
      }
      console.log(mapjson);
      let cityCenter = {};
      let arr = mapjson.features;

-        //根据geojson获取省份中心点
+      //根据geojson获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] =
          item.properties.centroid || item.properties.center;
@@ -179,62 +201,65 @@ export default {
      let newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
-          if(item.vehicleTotal===undefined || item.vehicleTotal===null ){
+          if (item.vehicleTotal === undefined || item.vehicleTotal === null) {
            item.vehicleTotal = 0;
-
          }
-          if(item.onLineCount===undefined || item.onLineCount===null){
+          if (item.onLineCount === undefined || item.onLineCount === null) {
            item.onLineCount = 0;
          }
-          if(item.dayMileage===undefined || item.dayMileage===null){
+          if (item.dayMileage === undefined || item.dayMileage === null) {
            item.dayMileage = 0;
          }
-          if(item.dayHydrogen===undefined || item.dayHydrogen===null){
+          if (item.dayHydrogen === undefined || item.dayHydrogen === null) {
            item.dayHydrogen = 0;
          }
-          if(item.dayCarbon===undefined || item.dayCarbon===null){
+          if (item.dayCarbon === undefined || item.dayCarbon === null) {
            item.dayCarbon = 0;
          }
          newData.push({
            name: item.name,
-            value: cityCenter[item.name].concat(item.vehicleTotal).concat(item.onLineCount).concat(item.dayMileage).concat(item.dayHydrogen).concat(item.dayCarbon),
+            value: cityCenter[item.name]
+              .concat(item.vehicleTotal)
+              .concat(item.onLineCount)
+              .concat(item.dayMileage)
+              .concat(item.dayHydrogen)
+              .concat(item.dayCarbon),
          });
        }
      });
-      console.log('开始初始化地图');
+      console.log("开始初始化地图");
      console.log(newData);
      this.init(name, mydata, newData);
    },
    async getGeojson2(name, mydata) {
      this.code = name;
      this.currentMap = name;
-      console.log('加氢站_当前地图层级');
+      console.log("加氢站_当前地图层级");
      console.log(this.currentMap);
      //如果要展示南海群岛并且展示的是中国的话
-      let geoname=name
+      let geoname = name;
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }
      //如果有注册地图的话就不用再注册 了
      let mapjson = echarts.getMap(name);
-      console.log('加氢站_已经是否已存在的地图数据');
+      console.log("加氢站_已经是否已存在的地图数据");
      if (mapjson) {
        mapjson = mapjson.geoJson;
-      } 
-      else 
-      {
+      } else {
        //console.log('当前未注册地图');
-        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
-          return res;
-        });
+        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
+          (res) => {
+            return res;
+          }
+        );
        echarts.registerMap(name, mapjson);
-   
      }
      console.log(mapjson);
      let cityCenter = {};
      let arr = mapjson.features;

-        //根据geojson获取省份中心点
+      //根据geojson获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] =
          item.properties.centroid || item.properties.center;
@@ -242,27 +267,31 @@ export default {
      let newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
-          if(item.siteTotalCount===undefined || item.siteTotalCount===null ){
+          if (
+            item.siteTotalCount === undefined ||
+            item.siteTotalCount === null
+          ) {
            item.siteTotalCount = 0;
-
          }
-          if(item.siteCount===undefined || item.siteCount===null){
+          if (item.siteCount === undefined || item.siteCount === null) {
            item.siteCount = 0;
          }
          newData.push({
            name: item.name,
-            value: cityCenter[item.name].concat(item.siteTotalCount).concat(item.siteCount),
+            value: cityCenter[item.name]
+              .concat(item.siteTotalCount)
+              .concat(item.siteCount),
          });
        }
      });
-      console.log('加氢站_开始初始化地图');
+      console.log("加氢站_开始初始化地图");
      console.log(newData);
      this.init2(name, mydata, newData);
    },
    init(name, data, data2) {
-      console.log('init_data');     
+      console.log("init_data");
      console.log(data);
-      console.log('init_data2');
+      console.log("init_data2");
      console.log(data2);
      let top = 45;
      let zoom = 1.05;
@@ -288,7 +317,7 @@ export default {
            { gte: 500, label: "500辆以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
            { gte: 100, lte: 500, label: "100-500辆" },
            { gte: 50, lte: 100, label: "50-100辆" },
-            {  lte: 50, label: "1-50辆" },// 不指定 min，表示 min 为无限大（-Infinity）。
+            { lte: 50, label: "1-50辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          inRange: {
            // 渐变颜色，从小到大
@@ -306,7 +335,7 @@ export default {
            ],
          },
          textStyle: {
-            color: "#fff",
+            color: "#000000",
          },
        },
        geo: {
@@ -347,7 +376,7 @@ export default {
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
-                color: "#FFF",
+                color: "#fff",
              },
            },
            label: {
@@ -364,7 +393,8 @@ export default {
              },
              rich: {},
            },
-            emphasis: { //高亮时显示
+            emphasis: {
+              //高亮时显示
              label: {
                show: false,
              },
@@ -402,10 +432,12 @@ export default {
          {
            //data: data2,
            //type: "effectScatter",
-            data: data2.filter(item => item.value && item.value.length > 2 && item.value[2] > 0),
+            data: data2.filter(
+              (item) => item.value && item.value.length > 2 && item.value[2] > 0
+            ),
            type: "scatter",
            coordinateSystem: "geo",
-            symbol: 'image://' + require('../../assets/img/cars.png'),
+            symbol: "image://" + require("../../assets/img/cars.png"),
            symbolSize: function (val) {
              return 20;
              //return 4;
@@ -427,34 +459,54 @@ export default {
                if (params.data) {
                  console.log("params.data");
                  console.log(params.data);
-                  console.log(params.data.name + "\n 车辆总数: "+params.data["value"][2] + "\n  GPS在线数: " + params.data["value"][3]);
-                  return params.data.name + "<br> 车辆总数: "+params.data["value"][2] + "<br>  GPS在线数: " + params.data["value"][3] + "<br>当日里程: " + params.data["value"][4] + "km<br>当日用氢量: " + params.data["value"][5] + "kg<br>当日减碳: " + params.data["value"][6] + "kg";
+                  console.log(
+                    params.data.name +
+                      "\n 车辆总数: " +
+                      params.data["value"][2] +
+                      "\n  GPS在线数: " +
+                      params.data["value"][3]
+                  );
+                  return (
+                    params.data.name +
+                    "<br> 车辆总数: " +
+                    params.data["value"][2] +
+                    "<br>  GPS在线数: " +
+                    params.data["value"][3] +
+                    "<br>当日里程: " +
+                    params.data["value"][4] +
+                    "km<br>当日用氢量: " +
+                    params.data["value"][5] +
+                    "kg<br>当日减碳: " +
+                    params.data["value"][6] +
+                    "kg"
+                  );
                  //return '${params.name} <br />车辆总数：${params.data[value][2]} <br />  GPS在线总数：${ params.data.[value][3]}';
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
-                color: "#FFF",
+                color: "#fff",
              },
            },
            label: {
              formatter: (param) => {
                //return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3];   //2025.03.28
                //return param.name.slice(0, 2) ;
-                if (param.data && param.data.value && param.data.value.length > 2 && param.data.value[2] > 0) {
+                if (
+                  param.data &&
+                  param.data.value &&
+                  param.data.value.length > 2 &&
+                  param.data.value[2] > 0
+                ) {
                  return param.data.value[2]; // 显示车辆总数
                }
-                return '';
+                return "";
              },
-              fontSize: 11,
+              fontSize: 16,
              offset: [0, 2],
              position: "bottom",
-              textBorderColor: "#fff",
-              textShadowColor: "#000",
-              textShadowBlur: 10,
-              textBorderWidth: 0,
-              color: "#FFF",
+              color: "#000",
              show: true,
            },
            // colorBy: "data",
@@ -467,18 +519,18 @@ export default {
            },
          },
        ],
-         //动画效果
-            // animationDuration: 1000,
-            // animationEasing: 'linear',
-            // animationDurationUpdate: 1000
+        //动画效果
+        // animationDuration: 1000,
+        // animationEasing: 'linear',
+        // animationDurationUpdate: 1000
      };
      this.options = option;
    },
    //2025.9.11 szy add  begin
    init2(name, data, data2) {
-      console.log('init_data');     
+      console.log("init_data");
      console.log(data);
-      console.log('init_data2');
+      console.log("init_data2");
      console.log(data2);
      let top = 45;
      let zoom = 1.05;
@@ -497,12 +549,11 @@ export default {
            { gte: 100, label: "100 座以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
            { gte: 30, lte: 100, label: "30-100 座" },
            { gte: 10, lte: 30, label: "10-30 座" },
-            { lte: 10, label: "1-10 座" },// 不指定 min，表示 min 为无限大（-Infinity）。
+            { lte: 10, label: "1-10 座" }, // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          inRange: {
            // 渐变颜色，从小到大
            color: [
-
              // "#66a9c9",
              // "#2f90b9",
              // "#1781b5",
@@ -513,7 +564,7 @@ export default {
            ],
          },
          textStyle: {
-            color: "#fff",
+            color: "#000000",
          },
        },
        geo: {
@@ -553,7 +604,7 @@ export default {
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
-                color: "#FFF",
+                color: "#000000",
              },
            },
            label: {
@@ -570,7 +621,8 @@ export default {
              },
              rich: {},
            },
-            emphasis: { //高亮时显示
+            emphasis: {
+              //高亮时显示
              label: {
                show: false,
              },
@@ -630,30 +682,42 @@ export default {
                if (params.data) {
                  console.log("params.data");
                  console.log(params.data);
-                  console.log(params.data.name + "\n 加氢站总数:"+params.data["value"][2] + "\n  当前运营总数:" + params.data["value"][3]);
-                  return params.data.name + "<br> 加氢站总数："+params.data["value"][2] + "<br>  当前运营总数: " + params.data["value"][3];
+                  console.log(
+                    params.data.name +
+                      "\n 加氢站总数:" +
+                      params.data["value"][2] +
+                      "\n  当前运营总数:" +
+                      params.data["value"][3]
+                  );
+                  return (
+                    params.data.name +
+                    "<br> 加氢站总数：" +
+                    params.data["value"][2] +
+                    "<br>  当前运营总数: " +
+                    params.data["value"][3]
+                  );
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
-                color: "#FFF",
+                color: "#000000",
              },
            },
            label: {
              formatter: (param) => {
                //return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3];   //2025.03.28
                //return param.name.slice(0, 2) + "\n "+param.data["value"][2];       //2025.03.31
-                return param.name.slice(0, 2) ;
+                return param.name.slice(0, 2);
              },
              fontSize: 11,
              offset: [0, 2],
              position: "bottom",
-              textBorderColor: "#fff",
+              textBorderColor: "#000000",
              textShadowColor: "#000",
              textShadowBlur: 10,
              textBorderWidth: 0,
-              color: "#FFF",
+              color: "#000000",
              show: true,
            },
            // colorBy: "data",
@@ -666,10 +730,10 @@ export default {
            },
          },
        ],
-         //动画效果
-            // animationDuration: 1000,
-            // animationEasing: 'linear',
-            // animationDurationUpdate: 1000
+        //动画效果
+        // animationDuration: 1000,
+        // animationEasing: 'linear',
+        // animationDurationUpdate: 1000
      };
      this.options = option;
    },
@@ -685,7 +749,7 @@ export default {
      if (this.echartBindClick) return;
      //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
      this.$refs.CenterMap.chart.on("click", (params) => {
-         console.log(params);
+        console.log(params);
        let xzqData = xzqCode[params.name];
        if (xzqData) {
          this.getData(xzqData.adcode);
@@ -694,7 +758,7 @@ export default {
        }
      });
      this.echartBindClick = true;
-    }
+    },
  },
  destroyed() {
    // 销毁事件监听
@@ -706,7 +770,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-
 .mileagetitle {
  height: 40px;
  display: flex;
@@ -719,10 +782,10 @@ export default {
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(
-        92deg,
-        #0072ff 0%,
-        #00eaff 48.8525390625%,
-        #01aaff 100%
+      92deg,
+      #0072ff 0%,
+      #00eaff 48.8525390625%,
+      #01aaff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
@@ -732,7 +795,7 @@ export default {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 4px;
-    color: white;
+    color: #000000;
    margin: 0 8px;
  }
  .zuo,
@@ -781,7 +844,7 @@ export default {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
-      color: white;
+      color: #000000;
      margin: 0 10px;
    }
    .zuo,
@@ -828,20 +891,21 @@ export default {

    .quanguo1 {
      position: absolute;
-    right: 20px;
-    top: 24px;
-    width: 100px;
-    height: 28px;
-    border: 1px solid #00eded;
-    border-radius: 10px;
-    color: white;
-    text-align: center;
-    line-height: 26px;
-    letter-spacing: 6px;
-    cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
-    font-family: "微软雅黑", sans-serif;
-    z-index: 9999;
+      right: 20px;
+      top: 24px;
+      width: 100px;
+      height: 28px;
+      border: 1px solid #00eded;
+      border-radius: 10px;
+      color: #000000;
+      text-align: center;
+      line-height: 26px;
+      letter-spacing: 6px;
+      cursor: pointer;
+      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
+        0 0 6px rgba(0, 237, 237, 0.4);
+      font-family: "微软雅黑", sans-serif;
+      z-index: 9999;
    }

    .quanguo2 {
@@ -852,12 +916,13 @@ export default {
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
-      color: white;
+      color: #000000;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
-      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
+      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
+        0 0 6px rgba(0, 237, 237, 0.4);
      font-family: "微软雅黑", sans-serif;
      z-index: 9999;
    }
@@ -870,23 +935,24 @@ export default {
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
-      color: white;
+      color: #000000;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
-      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
+      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
+        0 0 6px rgba(0, 237, 237, 0.4);
      font-family: "微软雅黑", sans-serif;
      z-index: 9999;
    }

-    .quanguo4{
+    .quanguo4 {
      position: absolute; /* 绝对定位 */
      bottom: 0; /* 底部对齐 */
      left: 50%; /* 左边缘对齐 */
      transform: translateX(-50%); /* 向左移动自身宽度的50%以实现水平居中 */
-      bottom:10px;
-      color: white;
+      bottom: 10px;
+      color: #000000;
    }
  }
 }
--- a/src/views/indexs/chart/baseChart.vue
+++ b/src/views/indexs/chart/baseChart.vue
@@ -39,7 +39,7 @@ export default {
         },
        legend: {
          data: ['碳减排量(kg)', '行驶里程(km)'],
-          textStyle: { color: '#fff' }
+          textStyle: { color: '#000000' }
        },
        grid: {
          left: '18%',
@@ -50,16 +50,19 @@ export default {
        xAxis: {
          type: 'category',
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-          axisLine: { lineStyle: { color: '#fff' } },
-          axisLabel: { color: '#fff' }
+          axisLine: { lineStyle: { color: '#000000' } },
+          axisLabel: { color: '#000000' }
        },
        yAxis: [
          {
            type: 'value',
            // name: '碳减排量',
-            axisLine: { lineStyle: { color: '#fff' } },
-            axisLabel: { color: '#fff' },
-            splitLine: { show: false },
+            axisLine: { lineStyle: { color: '#000000' } },
+            axisLabel: { color: '#000000' },
+            splitLine: { 
+              show: true,
+              lineStyle: { color: '#e8e8e8', type: 'dashed' }
+            },
            axisLabel: {
              formatter: '{value}kg'
            }
@@ -67,9 +70,12 @@ export default {
          {
            type: 'value',
            // name: '行驶里程',
-            axisLine: { lineStyle: { color: '#fff' } },
-            axisLabel: { color: '#fff' },
-            splitLine: { show: false },
+            axisLine: { lineStyle: { color: '#000000' } },
+            axisLabel: { color: '#000000' },
+            splitLine: { 
+              show: true,
+              lineStyle: { color: '#e8e8e8', type: 'dashed' }
+            },
            axisLabel: {
              formatter: '{value}km'
            }
@@ -80,7 +86,7 @@ export default {
            name: '碳减排量(kg)',
            type: 'bar',
            data: [1000, 1500, 1800, 1200, 2000, 2500, 1800, 2200, 3000, 3500,2600, 3600],
-            itemStyle: { color: '#00BAFF' },
+            itemStyle: { color: '#1890ff' },
            barWidth: 14
          },
          {
@@ -89,7 +95,7 @@ export default {
            yAxisIndex: 1,

            data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900, 5200, 4700, 5500],
-            itemStyle: { color: '#FFC600' },
+            itemStyle: { color: '#52c41a' },
            smooth: true,
            lineStyle: { width: 2 },
            symbol: 'circle',
@@ -107,8 +113,8 @@ export default {
          //subtext: '年度碳减排量',
          left: 'center',
          top: '40%',
-          textStyle: { color: '#fff', fontSize: 18 },
-          subtextStyle: { color: '#fff', fontSize: 18}
+          textStyle: { color: '#000000', fontSize: 18 },
+          subtextStyle: { color: '#000000', fontSize: 18}
        },
        graphic: [
          {
@@ -117,7 +123,7 @@ export default {
            top: 'center',  // 垂直居中
            style: {
              text: '年\n度\n碳\n减\n排\n量',  // 每个字符换行显示
-              fill: '#fff',
+              fill: '#000000',
              font: '16px sans-serif',
            }
          }
@@ -131,8 +137,8 @@ export default {
            label: { show: false },
            labelLine: { show: false },
            data: [
-              { value: 5, name: '碳排放量', itemStyle: { color: '#7d70f9' } },
-              { value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
+              { value: 5, name: '碳排放量', itemStyle: { color: '#1890ff' } },
+              { value: 95, name: 'other', itemStyle: { color: '#f0f0f0' } }
            ]
          }
        ]
@@ -147,8 +153,8 @@ export default {
          //subtext: '年度行驶里程',
          left: 'center',
          top: '40%',
-          textStyle: { color: '#fff', fontSize: 18 },
-          subtextStyle: { color: '#fff', fontSize: 12 }
+          textStyle: { color: '#000000', fontSize: 18 },
+          subtextStyle: { color: '#000000', fontSize: 12 }
        },
        graphic: [
          {
@@ -157,7 +163,7 @@ export default {
            top: 'center',  // 垂直居中
            style: {
              text: '年\n度\n行\n驶\n里\n程',  // 每个字符换行显示
-              fill: '#fff',
+              fill: '#000000',
              font: '16px sans-serif',
            }
          }
@@ -171,8 +177,8 @@ export default {
            label: { show: false },
            labelLine: { show: false },
            data: [
-              { value: 85, name: '行驶里程', itemStyle: { color: '#00BAFF' } },
-              { value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
+              { value: 85, name: '行驶里程', itemStyle: { color: '#52c41a' } },
+              { value: 15, name: 'other', itemStyle: { color: '#f0f0f0' } }
            ]
          }
        ]
--- a/src/views/indexs/index.vue
+++ b/src/views/indexs/index.vue
@@ -189,11 +189,11 @@ export default {

    .tech-text {
        font-size: 14px;
-        color: #8c8c8c;
+        color: #666666;
        font-weight: 500;
        letter-spacing: 0.8px;
        white-space: nowrap;
-        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        position: relative;

        // 添加一个简洁的下划线装饰
@@ -204,7 +204,7 @@ export default {
            left: 0;
            width: 100%;
            height: 1px;
-            background: linear-gradient(90deg, #8c8c8c 0%, transparent 100%);
+            background: linear-gradient(90deg, #666666 0%, transparent 100%);
            opacity: 0.4;
            transition: opacity 0.3s ease;
        }
--- a/src/views/indexs/left-bottom.vue
+++ b/src/views/indexs/left-bottom.vue
@@ -56,17 +56,17 @@ export default {
        legend: {
          //data: ['用氢量', '用电量', '行驶里程'],
          data: ['碳减排(kg)','行驶里程(km)'],
-          textStyle: { color: '#fff' }
+          textStyle: { color: '#000000' }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.seriesData,
-          axisLine: { lineStyle: { color: '#fff' } }
+          axisLine: { lineStyle: { color: '#000000' } }
        },
        yAxis: {
          type: 'value',
-          axisLine: { lineStyle: { color: '#fff' } },
+          axisLine: { lineStyle: { color: '#000000' } },
          splitLine: { lineStyle: { color: '#091a40' } },
          axisLabel: {
            formatter: '{value}kg'
--- a/src/views/indexs/left-center.vue
+++ b/src/views/indexs/left-center.vue
@@ -142,13 +142,13 @@ export default {
          textStyle: {
            rich: {
              value: {
-                color: "#ffffff",
+                color: "#000000",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
-                color: "#ffffff",
+                color: "#000000",
                lineHeight: 20,
              },
            },
@@ -159,7 +159,7 @@ export default {
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
-            color: "#FFF",
+            color: "#000000",
          },
        },
        legend: {
@@ -177,7 +177,7 @@ export default {
              //   position: "outside",
              rich: {
                b: {
-                  color: "#fff",
+                  color: "#000000",
                  fontSize: 12,
                  lineHeight: 26,
                },
--- a/src/views/indexs/left-top.vue
+++ b/src/views/indexs/left-top.vue
@@ -1,331 +1,324 @@
 <template>
-    <div class="cards-container">
-      <!-- 四个卡片 -->
-      <div class="card">
-        <!-- 数值与文字 -->
-        <div class="card-info">
-          <!-- 主数值（高亮） -->
-          <div class="value-line">
-            <span class="number">{{ cards[0].value }}</span>
-            <span class="unit">{{ cards[0].unit }}</span>
-          </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[0].label }}</div>
-        </div>
-  
-        <!-- 图标及其闪动背景 -->
-        <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-0"></div>
-          <!-- 圆形平台 -->
-          <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
-          <div class="icon">
-            <img src="@/assets/img/left/1.svg" class="images"/>
-          </div>
+  <div class="cards-container">
+    <!-- 四个卡片 -->
+    <div class="card">
+      <!-- 数值与文字 -->
+      <div class="card-info">
+        <!-- 主数值（高亮） -->
+        <div class="value-line">
+          <span class="number">{{ cards[0].value }}</span>
+          <span class="unit">{{ cards[0].unit }}</span>
        </div>
+        <!-- 标签说明 -->
+        <div class="label">{{ cards[0].label }}</div>
      </div>
-      <div class="card">
-        <!-- 数值与文字 -->
-        <div class="card-info">
-          <!-- 主数值（高亮） -->
-          <div class="value-line">
-            <span class="number">{{ cards[1].value }}</span>
-            <span class="unit">{{ cards[1].unit }}</span>
-          </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[1].label }}</div>
-        </div>

-        <!-- 图标及其闪动背景 -->
-        <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-1"></div>
-          <!-- 圆形平台 -->
-          <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
-          <div class="icon">
-            <img src="@/assets/img/left/2.svg" class="images"/>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <!-- 数值与文字 -->
-        <div class="card-info">
-          <!-- 主数值（高亮） -->
-          <div class="value-line">
-            <span class="number">{{ cards[2].value }}</span>
-            <span class="unit">{{ cards[2].unit }}</span>
-          </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[2].label }}</div>
-        </div>
-  
-        <!-- 图标及其闪动背景 -->
-        <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-2"></div>
-          <!-- 圆形平台 -->
-          <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
-          <div class="icon">
-            <img src="@/assets/img/left/3.svg" class="images"/>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <!-- 数值与文字 -->
-        <div class="card-info">
-          <!-- 主数值（高亮） -->
-          <div class="value-line">
-            <span class="number">{{ cards[3].value }}</span>
-            <span class="unit">{{ cards[3].unit }}</span>
-          </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[3].label }}</div>
-        </div>
-  
-        <!-- 图标及其闪动背景 -->
-        <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-3"></div>
-          <!-- 圆形平台 -->
-          <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
-          <div class="icon">
-            <img src="@/assets/img/left/4.svg" class="images"/>
-          </div>
+      <!-- 图标及其闪动背景 -->
+      <div class="icon-wrapper">
+        <!-- 背后闪动的竖直矩形 -->
+        <div class="icon-bg icon-bg-0"></div>
+        <!-- 圆形平台 -->
+        <div class="platform-circle"></div>
+        <!-- 图标本身（此处用Unicode或自定义图标） -->
+        <div class="icon">
+          <img src="@/assets/img/left/1.svg" class="images" />
        </div>
      </div>
    </div>
-  </template>
+    <div class="card">
+      <!-- 数值与文字 -->
+      <div class="card-info">
+        <!-- 主数值（高亮） -->
+        <div class="value-line">
+          <span class="number">{{ cards[1].value }}</span>
+          <span class="unit">{{ cards[1].unit }}</span>
+        </div>
+        <!-- 标签说明 -->
+        <div class="label">{{ cards[1].label }}</div>
+      </div>

-  <script>
-  import { currentGET } from 'api/modules'
+      <!-- 图标及其闪动背景 -->
+      <div class="icon-wrapper">
+        <!-- 背后闪动的竖直矩形 -->
+        <div class="icon-bg icon-bg-1"></div>
+        <!-- 圆形平台 -->
+        <div class="platform-circle"></div>
+        <!-- 图标本身（此处用Unicode或自定义图标） -->
+        <div class="icon">
+          <img src="@/assets/img/left/2.svg" class="images" />
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <!-- 数值与文字 -->
+      <div class="card-info">
+        <!-- 主数值（高亮） -->
+        <div class="value-line">
+          <span class="number">{{ cards[2].value }}</span>
+          <span class="unit">{{ cards[2].unit }}</span>
+        </div>
+        <!-- 标签说明 -->
+        <div class="label">{{ cards[2].label }}</div>
+      </div>

-  export default {
-    name: "BlinkingIcons",
-    data() {
-      return {
-        cards: [
-          {
-            id: 1,
-            value: "452/807",
-            unit: "辆",
-            label: "在线车数",
-            srcValue: "@/assets/img/left_top_lv.png",
-          },
-          {
-            id: 2,
-            value: "561",
-            unit: "kg",
-            label: "当日减碳",
-            srcValue: "@/assets/img/left/1.svg",
-          },
-          {
-            id: 3,
-            value: "534",
-            unit: "kg",
-            label: "当日用氢量",
-            srcValue: "@/assets/img/left/1.svg",
-          },
-          {
-            id:4,
-            value: "3300",
-            unit: "km",
-            label: "当日里程",
-            srcValue: "@/assets/img/left/1.svg",
-          },
-        ],
-      };
+      <!-- 图标及其闪动背景 -->
+      <div class="icon-wrapper">
+        <!-- 背后闪动的竖直矩形 -->
+        <div class="icon-bg icon-bg-2"></div>
+        <!-- 圆形平台 -->
+        <div class="platform-circle"></div>
+        <!-- 图标本身（此处用Unicode或自定义图标） -->
+        <div class="icon">
+          <img src="@/assets/img/left/3.svg" class="images" />
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <!-- 数值与文字 -->
+      <div class="card-info">
+        <!-- 主数值（高亮） -->
+        <div class="value-line">
+          <span class="number">{{ cards[3].value }}</span>
+          <span class="unit">{{ cards[3].unit }}</span>
+        </div>
+        <!-- 标签说明 -->
+        <div class="label">{{ cards[3].label }}</div>
+      </div>
+
+      <!-- 图标及其闪动背景 -->
+      <div class="icon-wrapper">
+        <!-- 背后闪动的竖直矩形 -->
+        <div class="icon-bg icon-bg-3"></div>
+        <!-- 圆形平台 -->
+        <div class="platform-circle"></div>
+        <!-- 图标本身（此处用Unicode或自定义图标） -->
+        <div class="icon">
+          <img src="@/assets/img/left/4.svg" class="images" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { currentGET } from "api/modules";
+
+export default {
+  name: "BlinkingIcons",
+  data() {
+    return {
+      cards: [
+        {
+          id: 1,
+          value: "452/807",
+          unit: "辆",
+          label: "在线车数",
+          srcValue: "@/assets/img/left_top_lv.png",
+        },
+        {
+          id: 2,
+          value: "561",
+          unit: "kg",
+          label: "当日减碳",
+          srcValue: "@/assets/img/left/1.svg",
+        },
+        {
+          id: 3,
+          value: "534",
+          unit: "kg",
+          label: "当日用氢量",
+          srcValue: "@/assets/img/left/1.svg",
+        },
+        {
+          id: 4,
+          value: "3300",
+          unit: "km",
+          label: "当日里程",
+          srcValue: "@/assets/img/left/1.svg",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      currentGET("big1").then((res) => {
+        console.log("当日实况");
+        console.log(res);
+
+        let onLineCount = 0;
+        let vehicleCount = 0;
+        let dayCarbon = 0;
+        let dayHydrogen = 0;
+        let dayMileage = 0;
+
+        if (res !== null && res.data !== null) {
+          if (res.data.onLineCount !== null) onLineCount = res.data.onLineCount;
+          if (res.data.vehicleCount !== null)
+            vehicleCount = res.data.vehicleCount;
+          if (res.data.dayCarbon !== null) dayCarbon = res.data.dayCarbon;
+          if (res.data.dayHydrogen !== null) dayHydrogen = res.data.dayHydrogen;
+          if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
+        }
+
+        let change = this.cards[0];
+        change.value = onLineCount + "/" + vehicleCount;
+        this.$set(this.cards, 0, change);
+
+        change = this.cards[1];
+        change.value = dayCarbon;
+        this.$set(this.cards, 1, change);
+        change = this.cards[2];
+        change.value = dayHydrogen;
+        this.$set(this.cards, 2, change);
+        change = this.cards[3];
+        change.value = dayMileage;
+        this.$set(this.cards, 3, change);
+      });
    },
-    mounted() {
-      this.getData();
-    },
-    methods: {
-      getData() {
-        currentGET("big1").then((res) => {
-          console.log('当日实况');
-          console.log(res);
+  },
+};
+</script>

-          let onLineCount = 0;
-          let vehicleCount = 0;
-          let dayCarbon = 0;
-          let dayHydrogen = 0;
-          let dayMileage = 0;
-
-          if(res !==null && res.data !==null )
-          {
-            if(res.data.onLineCount !== null)
-              onLineCount = res.data.onLineCount;
-            if(res.data.vehicleCount !== null)
-              vehicleCount = res.data.vehicleCount;
-            if(res.data.dayCarbon !== null)
-              dayCarbon = res.data.dayCarbon;
-            if(res.data.dayHydrogen !== null)
-              dayHydrogen = res.data.dayHydrogen;
-            if(res.data.dayMileage !== null)
-              dayMileage = res.data.dayMileage;
-          } 
-
-          let change = this.cards[0];
-          change.value = onLineCount + "/" + vehicleCount;
-          this.$set(this.cards, 0, change);
-
-          change = this.cards[1];
-          change.value = dayCarbon;
-          this.$set(this.cards, 1, change);
-          change = this.cards[2];
-          change.value = dayHydrogen;
-          this.$set(this.cards, 2, change);
-          change = this.cards[3];
-          change.value = dayMileage;
-          this.$set(this.cards, 3, change);
-        });
-      },
-    }
-  };
-  </script>
-  
-  <style scoped>
-  /* 整体背景 */
-  .cards-container {
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-end;
-    padding-left: 0px;
-    padding-top: 30px;
-    padding-bottom: 30px;
-    background-image: url("../../assets/img/left/u665.svg");
-    background-repeat: no-repeat;
-    background-position: 0% 100%;
+<style scoped>
+/* 整体背景 */
+.cards-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  padding-left: 0px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  background-image: url("../../assets/img/left/u665.svg");
+  background-repeat: no-repeat;
+  background-position: 0% 100%;
+}
+.images {
+  width: 65px;
+  height: 70px;
+  margin-left: 10px;
+  margin-top: -5px;
+}
+/* 单个卡片 */
+.card {
+  position: relative;
+  width: 180px;
+  text-align: center;
+  color: #000000;
 }
-  .images{
-    width: 65px;
-    height: 70px;
-    margin-left: 10px;
-    margin-top: -5px;
-  }
-  /* 单个卡片 */
-  .card {
-    position: relative;
-    width: 180px;
-    text-align: center;
-    color: #fff;
-  }

-  /* 卡片信息区域 */
-  .card-info {
-    margin-bottom: 120px; /* 给下方图标区域留出空间 */
-    margin-left:10px;
-  }
+/* 卡片信息区域 */
+.card-info {
+  margin-bottom: 120px; /* 给下方图标区域留出空间 */
+  margin-left: 10px;
+}

-  .value-line {
-    font-size: 20px;
-    margin-bottom: 8px;
-    width:120px;
-  }
+.value-line {
+  font-size: 20px;
+  margin-bottom: 8px;
+  width: 120px;
+}

-  .number {
-    color: #45f3ff; /* 高亮数字颜色 */
-    margin-right: 6px;
+.number {
+  color: #1890ff;
+  font-weight: 700;
+  margin-right: 6px;
+}

-  }
+.unit {
+  font-size: 14px;
+  opacity: 0.8;
+}

-  .unit {
-    font-size: 14px;
-    opacity: 0.8;
-  }
+.label {
+  font-size: 16px;
+  color: #262626;
+}

-  .label {
-    font-size: 16px;
-    color: #b9e4ff;
-  }
+/* 图标容器 */
+.icon-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 54%;
+  transform: translateX(-50%);
+  width: 100%;
+  height: 100px;
+  overflow: visible;
+}

-  /* 图标容器 */
-  .icon-wrapper {
-    position: absolute;
-    bottom: 0;
-    left: 54%;
-    transform: translateX(-50%);
-    width: 100%;
-    height: 100px;
-    overflow: visible;
-  }
+/* 背后闪动的竖直矩形 */
+.icon-bg {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90px;
+  height: 100%;
+  border-radius: 6px;
+  background-image: url("../../assets/img/left/u676.svg");
+  background-repeat: no-repeat;
+  animation: blink 1s infinite alternate;
+  top: -15%;
+}
+.icon-bg-0 {
+  animation-delay: 0s;
+}
+.icon-bg-1 {
+  animation-delay: 0.2s;
+}
+.icon-bg-2 {
+  animation-delay: 0.4s;
+}
+.icon-bg-3 {
+  animation-delay: 0.6s;
+}

-  /* 背后闪动的竖直矩形 */
-  .icon-bg {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 90px;
-    height: 100%;
-    border-radius: 6px;
-    background-image: url("../../assets/img/left/u676.svg");
-    background-repeat: no-repeat;
-    animation: blink 1s infinite alternate;
-    top: -15%;
-  }
-  .icon-bg-0 {
-    animation-delay: 0s;
-  }
-  .icon-bg-1 {
-    animation-delay: 0.2s;
-  }
-  .icon-bg-2 {
-    animation-delay: 0.4s;
-  }
-  .icon-bg-3 {
-    animation-delay: 0.6s;
-  }
+/* 圆形平台 */
+.platform-circle {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100px;
+  height: 20px;
+  background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
+  border-radius: 50%;
+  box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
+}

+/* 图标 */
+.icon {
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 28px;
+  color: #00e4ff;
+}

-  /* 圆形平台 */
-  .platform-circle {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100px;
-    height: 20px;
-    background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
-    border-radius: 50%;
-    box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
+/* 关键帧动画：闪动 */
+@keyframes blink {
+  0% {
+    opacity: 0.5;
  }
+  100% {
+    opacity: 1;
+  }
+}

-  /* 图标 */
-  .icon {
-    position: absolute;
-    bottom: -5px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 28px;
-    color: #00e4ff;
-  }
-  
-  /* 关键帧动画：闪动 */
-  @keyframes blink {
-    0% {
-      opacity: 0.5;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  
-  /* 图标模拟，可用 Font Awesome 等替换 */
-  .icon-phone::before {
-    content: "☎";
-  }
-  .icon-shield::before {
-    content: "⛨";
-  }
-  .icon-star::before {
-    content: "★";
-  }
-  .icon-protect::before {
-    content: "🛡";
-  }
-  </style>
-  
+/* 图标模拟，可用 Font Awesome 等替换 */
+.icon-phone::before {
+  content: "☎";
+}
+.icon-shield::before {
+  content: "⛨";
+}
+.icon-star::before {
+  content: "★";
+}
+.icon-protect::before {
+  content: "🛡";
+}
+</style>
--- a/src/views/indexs/right-bottom.vue
+++ b/src/views/indexs/right-bottom.vue
@@ -11,7 +11,11 @@
      </thead>
    </table>
    <div class="scroll-wrapper">
-      <vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
+      <vue-seamless-scroll
+        :data="tableData"
+        :class-option="scrollOptions"
+        class="scroll-container"
+      >
        <table>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
@@ -29,7 +33,7 @@

 <script>
 import vueSeamlessScroll from "vue-seamless-scroll";
-import { currentGET } from 'api/modules'
+import { currentGET } from "api/modules";
 export default {
  components: { vueSeamlessScroll },
  data() {
@@ -54,7 +58,6 @@ export default {
        // { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
        // { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
      ],
-            
    };
  },
  mounted() {
@@ -62,36 +65,29 @@ export default {
  },
  methods: {
    getExchangeData() {
-      currentGET("big4").then(res => {
-
+      currentGET("big4").then((res) => {
        console.log("交易所数据：");
        //console.log(this.tableData1);
        console.log(res.data);
        this.tableData = res.data;
        this.tableData.forEach((item, index) => {
-
-          if(index % 2 !== 0)
-          {   
-                   
-            item.exchangeColor = "#00ffcc";
-            item.priceColor = "#ffffff";
-            item.regionColor = "#ffffff";
+          if (index % 2 !== 0) {
+            item.exchangeColor = "rgb(0, 186, 255)";
+            item.priceColor = "rgb(26, 26, 26)";
+            item.regionColor = "rgb(26, 26, 26)";
            this.$set(this.tableData, index, item);
-          }
-          else         
-          {
+          } else {
            //console.log("偶数index: " + index);
-            item.exchangeColor = "#ffcc00";
-            item.priceColor = "#ffcc00";
-            item.regionColor = "#ffcc00";
+            item.exchangeColor = "rgb(221, 160, 221)";
+            item.priceColor = "rgb(221, 160, 221)";
+            item.regionColor = "rgb(221, 160, 221)";
            this.$set(this.tableData, index, item);
            //this.$set(this.tableData, index, modifiedItem);
          }
        });
-
      });
-//      console.log("转换后交易所数据：");
-//      console.log(this.tableData);
+      //      console.log("转换后交易所数据：");
+      //      console.log(this.tableData);
    },
  },
 };
@@ -112,16 +108,20 @@ table {
  text-align: left;
 }

-th, td {
+th,
+td {
  padding: 12px;
-  color: #fff;
+  color: #000000;
  font-size: 14px;
  width: 25%;
 }

 thead {
-  background: #013f6a;
+  background: linear-gradient(135deg, #f8faff, #e6f3ff);
  padding: 10%;
+  color: #2c3e50;
+  border-bottom: 2px solid #3498db;
+  font-weight: 600;
 }

 .scroll-wrapper {
@@ -134,10 +134,14 @@ thead {
 }

 tr {
-  border-bottom: 1px solid #0a2a4a;
+  border-bottom: 1px solid #e8f4fd;
+  transition: background-color 0.3s ease;
 }

-tr:nth-child(even) {
-  background: rgba(255, 255, 255, 0.05);
+tr:nth-child(2n) {
+  background: rgba(52, 152, 219, 0.03);
+}
+tr:nth-child(odd) {
+  background: hsla(0, 0%, 100%, 0.8);
 }
 </style>
--- a/src/views/indexs/right-center-new.vue
+++ b/src/views/indexs/right-center-new.vue
@@ -106,14 +106,14 @@ export default {
          type: 'category',
          data: xData,
          axisLabel: { 
-            color: 'white',
+            color: '#000000',
            interval: 0,
            rotate: 45,  // 保持倾斜以防文字重叠
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
-              color: 'white'
+              color: '#000000'
            }
          }
        },
@@ -121,17 +121,17 @@ export default {
          type: 'value',
          name: '用氢量',
          axisLabel: {
-            color: 'white',
+            color: '#000000',
            formatter: '{value}kg'
          },
          splitLine: {
            lineStyle: {
-              color: 'rgba(51, 153, 255, 0.3)'
+              color: 'rgba(0, 0, 0, 0.1)'
            } 
          },
          axisLine: {
            lineStyle: {
-              color: 'white'
+              color: '#000000'
            }
          }
        },
@@ -144,16 +144,16 @@ export default {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
-              color: '#6a99f8'
+              color: '#40a9ff'
            }, {
              offset: 1,
-              color: '#0b2149'
+              color: '#1890ff'
            }])
          },
          label: {
            show: true,
            position: 'top',
-            color: '#fff',
+            color: '#000000',
            formatter: (params) => {
              return params.value === 0 ? '' : params.value+'kg';
            }
@@ -185,9 +185,9 @@ export default {
 }

 button {
-  background: rgba(25, 61, 112, 0.8);
-  border: 1px solid #2f6ed4;
-  color: #fff;
+  background: #f0f0f0;
+  border: 1px solid #d9d9d9;
+  color: #000000;
  padding: 5px 15px;
  margin-right: 10px;
  cursor: pointer;
@@ -195,7 +195,8 @@ button {
 }

 button.active {
-  background: #2f6ed4;
-  border-color: #4a8df8;
+  background: #1890ff;
+  border-color: #1890ff;
+  color: #000000;
 }
 </style>
--- a/src/views/indexs/right-center.vue
+++ b/src/views/indexs/right-center.vue
@@ -105,12 +105,12 @@ export default {
        xAxis: {
          type: 'category',
          data: xData,
-          axisLabel: { color: 'white' }
+          axisLabel: { color: '#000000' }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
-            color: 'white'
+            color: '#000000'
          },
          splitLine: {
            lineStyle: {
@@ -153,7 +153,7 @@ export default {
 button {
  background: rgba(25, 61, 112, 0.8);
  border: 1px solid #2f6ed4;
-  color: #fff;
+  color: #000000;
  padding: 5px 15px;
  margin-right: 10px;
  cursor: pointer;
--- a/src/views/indexs/right-top-day.vue
+++ b/src/views/indexs/right-top-day.vue
@@ -1,57 +1,111 @@
 <template>
-      <!-- <transition name="yh-setting-fade"> -->
+  <!-- <transition name="yh-setting-fade"> -->
  <div class="table-container">
    <table @click="tableClick">
      <thead>
        <tr>
-          <th style="width:24%">车牌号</th>
-          <th style="width:19%">当前总里程</th>          
-          <th style="width:19%">当日里程</th>
-          <th style="width:19%">当日用氢量</th>
-          <th style="width:19%">当日碳减排</th>
+          <th style="width: 24%">车牌号</th>
+          <th style="width: 19%">当前总里程</th>
+          <th style="width: 19%">当日里程</th>
+          <th style="width: 19%">当日用氢量</th>
+          <th style="width: 19%">当日碳减排</th>
        </tr>
      </thead>
    </table>
    <div class="scroll-wrapper">
-      <vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
+      <vue-seamless-scroll
+        :data="tableData"
+        :class-option="scrollOptions"
+        class="scroll-container"
+      >
        <table @click="tableClick">
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
-              <td style="width:24%">{{ item.plateNumber }}</td>
-              <td style="width:19%">{{ item.totalMileage }}km</td>
-              <td style="width:19%">{{ item.dayMileage }}km</td>
-              <td style="width:19%">{{ item.dayHydrogen }}kg</td>
-              <td style="width:19%">{{ item.dayCarbon }}kg</td>
+              <td style="width: 24%">{{ item.plateNumber }}</td>
+              <td style="width: 19%">{{ item.totalMileage }}km</td>
+              <td style="width: 19%">{{ item.dayMileage }}km</td>
+              <td style="width: 19%">{{ item.dayHydrogen }}kg</td>
+              <td style="width: 19%">{{ item.dayCarbon }}kg</td>
            </tr>
          </tbody>
        </table>
      </vue-seamless-scroll>
-
    </div>
-    <div class="dialog-container" >
+    <div class="dialog-container">
      <!--         :body-style="{ maxHeight: 'calc(100vh - 510px)', overflow: 'auto' }" -->
-      <el-dialog title="车辆当日信息" :visible.sync="setVehicleDialog" class="dialog_el"  height="400px" width="803px" center  
-            :lock-scroll="false"
-            :append-to-body="true"
-            :modal-append-to-body="true"
-            
+      <el-dialog
+        title="车辆当日信息"
+        :visible.sync="setVehicleDialog"
+        class="dialog_el"
+        height="400px"
+        width="803px"
+        center
+        :lock-scroll="false"
+        :append-to-body="true"
+        :modal-append-to-body="true"
+      >
+        <!-- width="100%" class="dialog-table" -->
+        <div class="dialog-body-wrapper">
+          <el-table
+            :data="tableData"
+            border
+            class="vehicleTable"
+            height="600px"
+            width="800px"
+            :default-sort="{ prop: 'totalMileage', order: 'descending' }"
          >
-          <!-- width="100%" class="dialog-table" -->
-         <div class="dialog-body-wrapper">
-          <el-table :data="tableData"  border class="vehicleTable" height="600px" width="800px"  :default-sort="{prop: 'totalMileage', order: 'descending'}">
-            <el-table-column type="index" prop="tableIndex" label="序号" width="80px"></el-table-column>
-            <el-table-column prop="plateNumber" label="车牌号" width="120px" sortable></el-table-column>
-            <el-table-column prop="totalMileage" label="当前总里程" width="140px" :formatter="formatMileageKm" sortable></el-table-column>
-            <el-table-column prop="dayMileage" label="当日里程" width="130px" :formatter="formatMileageKm" sortable></el-table-column>
-            <el-table-column prop="dayHydrogen" label="当日用氢量" width="140px" :formatter="formatHydrogenKg" sortable></el-table-column>
-            <el-table-column prop="dayCarbon" label="当日碳减排" width="140px" :formatter="formatHydrogenKg" sortable></el-table-column>
+            <el-table-column
+              type="index"
+              prop="tableIndex"
+              label="序号"
+              width="80px"
+            ></el-table-column>
+            <el-table-column
+              prop="plateNumber"
+              label="车牌号"
+              width="120px"
+              sortable
+            ></el-table-column>
+            <el-table-column
+              prop="totalMileage"
+              label="当前总里程"
+              width="140px"
+              :formatter="formatMileageKm"
+              sortable
+            ></el-table-column>
+            <el-table-column
+              prop="dayMileage"
+              label="当日里程"
+              width="130px"
+              :formatter="formatMileageKm"
+              sortable
+            ></el-table-column>
+            <el-table-column
+              prop="dayHydrogen"
+              label="当日用氢量"
+              width="140px"
+              :formatter="formatHydrogenKg"
+              sortable
+            ></el-table-column>
+            <el-table-column
+              prop="dayCarbon"
+              label="当日碳减排"
+              width="140px"
+              :formatter="formatHydrogenKg"
+              sortable
+            ></el-table-column>
          </el-table>
        </div>

        <span slot="footer" class="dialog-footer">
-          <el-button class="closeButton" type="primary" size="small"  @click="closeDialog">关闭</el-button>
+          <el-button
+            class="closeButton"
+            type="primary"
+            size="small"
+            @click="closeDialog"
+            >关闭</el-button
+          >
        </span>
-
      </el-dialog>
    </div>
  </div>
@@ -60,16 +114,15 @@
 </template>

 <script>
-
-import Vue from 'vue'
+import Vue from "vue";
 import vueSeamlessScroll from "vue-seamless-scroll";
-import { currentGET } from 'api/modules'
-import { Dialog,Table, TableColumn } from 'element-ui'
-import 'element-ui/lib/theme-chalk/table.css'
-import 'element-ui/lib/theme-chalk/table-column.css'
-Vue.component('el-dialog', Dialog)
-Vue.use(Table)
-Vue.use(TableColumn)
+import { currentGET } from "api/modules";
+import { Dialog, Table, TableColumn } from "element-ui";
+import "element-ui/lib/theme-chalk/table.css";
+import "element-ui/lib/theme-chalk/table-column.css";
+Vue.component("el-dialog", Dialog);
+Vue.use(Table);
+Vue.use(TableColumn);
 export default {
  components: { vueSeamlessScroll },
  data() {
@@ -83,23 +136,22 @@ export default {
        waitTime: 2000, // 等待时间，滚动间隔
      },
      tableData: [],
-      setVehicleDialog:false,
-            
+      setVehicleDialog: false,
    };
  },
  mounted() {
    this.getExchangeData();
  },
  methods: {
-    tableClick(){
-      console.log('tableClick')
+    tableClick() {
+      console.log("tableClick");
      this.setVehicleDialog = true;
    },
-    closeDialog(){
+    closeDialog() {
      this.setVehicleDialog = false;
    },
    getExchangeData() {
-      currentGET("big13").then(res => {
+      currentGET("big13").then((res) => {
        console.log("当日汇总数据：");
        console.log(res.data);
        this.tableData = res.data;
@@ -107,17 +159,13 @@ export default {
        //this.tableData = res.data.slice(0, 20);
      });
    },
-    formatMileageKm(row, column, cellValue, index){
-      if(row.nodeName === null)
-        return '0km';
-      else
-        return cellValue + 'km';
+    formatMileageKm(row, column, cellValue, index) {
+      if (row.nodeName === null) return "0km";
+      else return cellValue + "km";
    },
    formatHydrogenKg(row, column, cellValue, index) {
-      if(row.nodeName === null)
-        return '0kg';
-      else
-        return cellValue + 'kg';
+      if (row.nodeName === null) return "0kg";
+      else return cellValue + "kg";
    },
  },
 };
@@ -137,38 +185,43 @@ table {
  text-align: center; /* 修改为居中对齐 */
 }

-th {
-  padding: 10px 12px;
-  color:white;
+th,
+td {
+  padding: 12px;
+  color: #2d3748;
  font-size: 14px;
-  width: 20%;
-  text-align: center; /* 确保单元格内容居中 */
-  height: 50px; /* 固定行高，与数据行保持一致 */
-  box-sizing: border-box;
+  width: 24%;
+  border-right: 1px solid rgba(79, 209, 197, 0.2);
+}
+
+th {
+  color: #000;
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 td {
  padding: 10px 12px;
-  color:rgb(0, 255, 204);
+  color: #000;
  font-size: 14px;
  width: 20%;
  text-align: center; /* 确保单元格内容居中 */
 }

 thead {
-  background: #013f6a;
-  padding: 10%;
+  color: #ffffff;
+  font-weight: 600;
 }

 .dialog_el >>> .el-dialog__body {
  /* //border-top: 1px solid #dcdfe6;
-  //border-bottom: 1px solid #dcdfe6; */
+    //border-bottom: 1px solid #dcdfe6; */
  max-height: 60vh !important;
  min-height: 100px;
  overflow-y: hidden;

  /* background: #013f6a; */
 }
-.vehicleTable{
+.vehicleTable {
  /* width: 100%; */
  text-align: center; /* 确保单元格内容居中 */
 }
@@ -178,13 +231,12 @@ thead {
  /* width: 20%; */
  text-align: center; /* 确保单元格内容居中 */
 }
-.vehicleTable >>> td{
+.vehicleTable >>> td {
  text-align: center; /* 确保单元格内容居中 */
 }
-.closeButton{
-  color: gray;
+.closeButton {
+  color: #fff;
  background-color: #013f6a;
-
 }
 /* 内容容器滚动设置 */
 .dialog-body-wrapper {
@@ -198,34 +250,60 @@ thead {
  width: 300px;
  height: 0px; /* 适配大屏，数据较多可增加高度 */
  overflow: hidden;
-  background-color: #031a47;
-  border-radius: 8px;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(240, 249, 255, 0.95) 100%
+  );
+  border-radius: 12px;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 32px rgba(79, 209, 197, 0.15);
 }

 .dialog_el .el-table {
  background-color: transparent !important;
-  /* width: 100%; */
-  /* back */
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.dialog_el .el-table th {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
+  color: #ffffff !important;
+  font-weight: 600 !important;
+}
+
+.dialog_el .el-table td {
+  background-color: rgba(255, 255, 255, 0.7) !important;
+  color: #2d3748 !important;
+  border-bottom: 1px solid rgba(79, 209, 197, 0.1) !important;
+}
+
+.dialog_el .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: rgba(79, 209, 197, 0.1) !important;
 }
 /* .dialog-table{
-  background-color: #031a47;
-} */
+    background-color: #ffffff;
+  } */

 /* .dialog-table {
-  // background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%); 
-  background-color: #013f6a;
- // text-align: center; 
-} */
+    // background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%); 
+    background-color: #f5f7fa;
+   // text-align: center; 
+  } */
 /* .dialog-table th {
-  background-color: #011946 !important;
-  color: white;
-}
-.dialog-table td {
-  background-color: rgba(255,255,255,0.8);
-} */
+    background-color: #e3f2fd !important;
+    color: white;
+  }
+  .dialog-table td {
+    background-color: rgba(255,255,255,0.8);
+  } */
 .scroll-wrapper {
  height: 550px; /*适配大屏，数据较多可增加高度 */
  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
 }

 .scroll-container table {
@@ -233,10 +311,16 @@ thead {
 }

 tr {
-  border-bottom: 1px solid #0a2a4a;
+  border-bottom: 1px solid rgba(79, 209, 197, 0.1);
+  transition: all 0.2s ease;
 }

 tr:nth-child(even) {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(79, 209, 197, 0.05);
+}
+
+tr:hover {
+  background: rgba(79, 209, 197, 0.1);
+  transform: translateX(2px);
 }
 </style>
--- a/src/views/indexs/right-top-new.vue
+++ b/src/views/indexs/right-top-new.vue
@@ -77,7 +77,7 @@ table {

 th {
  padding: 12px;
-  color:white;
+  color: #000000;
  font-size: 14px;
  width: 20%;
  text-align: center; /* 确保单元格内容居中 */
--- a/src/views/indexs/right-top.vue
+++ b/src/views/indexs/right-top.vue
@@ -133,7 +133,7 @@ export default {
          itemHeight: .0,
          itemGap: 10,
          textStyle: {
-            color: 'white',
+            color: '#000000',
            fontSize: 16,
            fontWeight: 'normal',
            fontFamily: 'Arial, sans-serif'
@@ -153,7 +153,7 @@ export default {
            data: this.XAxisData,
            axisLine: {
              lineStyle: {
-                color: 'white',
+                color: '#000000',
                width: 1
              }
            },
@@ -165,7 +165,7 @@ export default {
              }
            },
            axisLabel: {
-              color: 'white',
+              color: '#000000',
              fontSize: 12,
              interval: 1,
              rotate: 45
@@ -220,7 +220,7 @@ export default {
            label: {
              show: true,
              position: 'top',
-              color: '#fff',
+              color: '#000000',
              fontSize: 12,
              formatter: (params) => {
                return params.value === 0 ? '' : params.value;
Author	SHA1	Message	Date
lnljyang	64e9a61472	浅色版2	2026-01-06 11:58:33 +08:00
lnljyang	36c6f01eb1	改浅色	2026-01-06 11:10:20 +08:00