2026新UI

src/assets/css/index.scss

@@ -47,7 +47,7 @@
 
   &::-webkit-scrollbar-thumb {
     //滚动条的设置
-    background-color: rgba(25, 118, 210, 0);
+    background-color: rgba(0, 212, 170, 0);
     background-clip: padding-box;
     border-radius: 4px;
   }
@@ -55,7 +55,7 @@
   &:hover {
     &::-webkit-scrollbar-thumb {
       //滚动条的设置
-      background-color: rgba(25, 118, 210, 0.3);
+      background-color: rgba(0, 212, 170, 0.3);
       background-clip: padding-box;
       border-radius: 4px;
     }
@@ -75,7 +75,7 @@
 
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(25, 118, 210, .5);
+    background-color: rgba(0, 212, 170, .5);
   }
 }
 
@@ -106,7 +106,7 @@
 
   &:focus {
     outline: none;
-    border-color: #1976d2;
+    border-color: #00D4AA;
   }
 }
 
@@ -126,7 +126,7 @@
     }
     &:focus {
       outline: none;
-      border-color: #1976d2;
+      border-color: #00D4AA;
     }
 
   }
@@ -136,9 +136,9 @@
 .yh-big-button {
   width: 53px;
   height: 26px;
-  background: #1976d2;
+  background: #00D4AA;
   border-radius: 4px;
-  // border-color: #1976d2;
+  // border-color: #00D4AA;
   border-width: 1px;
   border: none;
   cursor: pointer;
@@ -147,8 +147,8 @@
 
   &:hover,
   &:focus {
-    // border-color: #1565c0;
+    // border-color: #00bfa5;
-    background: #1565c0;
+    background: #00bfa5;
   }
 }
 
@@ -195,13 +195,13 @@
 
     &::-webkit-scrollbar-thumb {
       //滚动条的设置
-      background-color: rgba(25, 118, 210, 0.3);
+      background-color: rgba(0, 212, 170, 0.3);
       background-clip: padding-box;
       border-radius: 4px;
     }
 
     &::-webkit-scrollbar-thumb:hover {
-      background-color: rgba(25, 118, 210, .5);
+      background-color: rgba(0, 212, 170, .5);
     }
 
     .ve-table-content {
@@ -256,7 +256,7 @@
     }
 
     &.ve-table-row-hover tr.ve-table-body-tr:hover td {
-      background-color: rgba(25, 118, 210, 0.08);
+      background-color: rgba(0, 212, 170, 0.08);
       box-sizing: border-box;
     }
   }

src/assets/css/modules/variables.scss

@@ -1,8 +1,8 @@
-// 颜色
+// 颜色 - 亮绿色主题
 $colors: (
-  "primary": #1976d2,
+    "primary": #00D4AA,
-  "info-1": #2196f3,
+    "info-1": #1de9b6,
-  "info": #1e88e5,
+    "info": #00bfa5,
     "white": #ffffff,
     "light": #f5f7fa,
     "grey-1": #999999,
@@ -11,9 +11,9 @@ $colors: (
     "dark": #222222,
     "black-1": #333333,
     "black": #000000,
-  "icon": #1976d2,
+    "icon": #00D4AA,
     // 新增浅色主题专用颜色
-  "bg-light": #fafbfc,
+    "bg-light": #f7f9fb,
     "bg-lighter": #ffffff,
     "border-light": #e4e7ed,
     "text-secondary": #606266,
@@ -44,6 +44,7 @@ $font-sizes: (
 .w-100 {
     width: 100%;
 }
+
 .h-100 {
     height: 100%;
 }
@@ -52,15 +53,19 @@ $font-sizes: (
 .flex {
     display: flex;
 }
+
 .flex-column {
     flex-direction: column;
 }
+
 .flex-wrap {
     flex-wrap: wrap;
 }
+
 .flex-nowrap {
     flex-wrap: nowrap;
 }
+
 $flex-jc: (
     start: flex-start,
     end: flex-end,

src/assets/css/variable.scss

@@ -1,12 +1,12 @@
-// 颜色
+// 颜色 - 亮绿色主题
-$primary-color: #1890ff;
+$primary-color: #00D4AA;
-$primary-color-hl: rgb(41, 52, 67);
+$primary-color-hl: rgb(0, 212, 170);
-$default-color: #006569;
+$default-color: #00bfa5;
-$link: #1890ff;
+$link: #00D4AA;
-$active-color: rgb(0, 101, 105);
+$active-color: rgb(0, 191, 165);
 $del-color: #ff1839;
-$content-background: #f3f5fa;
+$content-background: #f8fafb;
-$table-header-background: #d8eaff;
+$table-header-background: #d0f4ea;
 
 $primary-color-rgba: rgba($color: $primary-color,
   $alpha: 0.1,

src/components/item-wrap/item-wrap.vue

@@ -6,18 +6,17 @@
  * @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
 -->
 <template>
-  <dv-border-box-13  class="lr_titles">
+  <div class="lr_titles">
     <div class="item_title" v-if="title !== ''">
-      <div class="zuo"></div>
+      <span class="title-inner">{{ title }}</span>
-      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
+      <span class="unit">单位: kg</span>
-      <div class="you"></div>
     </div>
     <div
       :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
     >
       <slot></slot>
     </div>
-  </dv-border-box-13>
+  </div>
 </template>
 
 <script>
@@ -37,56 +36,62 @@ export default {
   methods: {},
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
-$item-title-height: 38px;
+$item-title-height: 20px;
-$item_title_content-height: calc(100% - 38px);
+$item_title_content-height: calc(100% - 20px);
 
 .lr_titles {
+  height: 100%;
   box-sizing: border-box;
-
+  background: #ffffff;
-:deep(.border-box-content)  {
+  border-radius: 8px;
-    box-sizing: border-box;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    padding: 6px 16px 0px;
+  padding: 16px;
-  }
+  display: flex;
+  flex-direction: column;
 
   .item_title {
     height: $item-title-height;
     line-height: $item-title-height;
     width: 100%;
-    color: #1976d2;
+    padding-bottom: 12px;
-    text-align: center;
-    // background: linear-gradient(to right, transparent, #f5f7fa, transparent);
-    position: relative;
     display: flex;
-    align-items: center;
+    justify-content: space-between;
-    justify-content: center;
-
-    .zuo,
-    .you {
-      width: 58px;
-      height: 14px;
-      background-image: url("../../assets/img/titles/zuo.png");
-    }
-
-    .you {
-      transform: rotate(180deg);
-    }
     .title-inner {
-      font-weight: 900;
+      font-size: 16px;
-      letter-spacing: 2px;
+      font-weight: 600;
-      background: linear-gradient(
+      color: #333333;
-        92deg,
+      letter-spacing: 1px;
-        #666666 0%,
+      position: relative;
-        #1976d2 48.8525390625%,
+
-        #1565c0 100%
+      //   &::before {
-      );
+      //     content: '';
-      -webkit-background-clip: text;
+      //     position: absolute;
-      -webkit-text-fill-color: transparent;
+      //     left: 0;
+      //     top: 50%;
+      //     transform: translateY(-50%);
+      //     width: 4px;
+      //     height: 16px;
+      //     background: linear-gradient(180deg, #00D4AA 0%, #00bfa5 100%);
+      //     border-radius: 2px;
+      //   }
+    }
+    .unit {
+      width: 53px;
+      line-height: 19px;
+      border-radius: 4px;
+      background: #ecfdf5;
+      color: #059669;
+      font-family: "PingFang SC";
+      font-weight: 400;
+      font-size: 10px;
+      text-align: center;
     }
   }
 
   .item_title_content {
-    height: $item_title_content-height;
+    flex: 1;
+    overflow: hidden;
   }
 
   .item_title_content_def {

src/views/home.scss

@@ -14,9 +14,9 @@
     .bg {
         width: 100%;
         height: 100%;
-        padding: 16px 16px 10px 16px;
+        padding: 16px;
         box-sizing: border-box;
-        background-color: #fafbfc;
+        background-color: #f7f9fb;
         background-image: none;
         background-size: cover;
         background-position: center center;
@@ -25,86 +25,75 @@
     .host-body {
         height: 100%;
 
+        .d-flex {
+            display: flex;
+            justify-content: space-between;
+        }
+
         .title_wrap {
-            height: 60px;
+            height: 66px;
-            background-image: url("../assets/img/top.png");
-            background-size: cover;
-            background-position: center center;
             position: relative;
-            margin-bottom: 4px;
+            margin-bottom: 16px;
-
-            .guang {
-                position: absolute;
-                bottom: -26px;
-                background-image: url("../assets/img/guang.png");
-                background-position: 80px center;
-                width: 100%;
-                height: 56px;
-
-                .imgs {
-                    width: 320px;
-                    height: 35px;
-                    margin-top: -0.6%;
-                }
-
-                .imgs2 {
-                    width: 236px;
-                    /* height: 60px; */
-                    margin-left: 150px;
-                    margin-top: -9px;
-                }
-            }
-
-            .zuojuxing,
-            .youjuxing {
-                position: absolute;
-                top: -2px;
-                width: 140px;
-                height: 6px;
-                background-image: url("../assets/img/headers/juxing1.png");
-            }
-
-            .zuojuxing {
-
-                left: 11%;
-            }
-
-            .youjuxing {
-                right: 11%;
-                transform: rotate(180deg);
-            }
-
-            .timers {
-                position: absolute;
-                right: 0;
-                top: 30px;
-                font-size: 18px;
             display: flex;
             align-items: center;
+            background-color: #fff;
+            padding: 0 24px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 
-                .blq-icon-shezhi02 {
+            .logo {
-                    cursor: pointer;
+                flex: 1;
-                }
+                display: flex;
+                justify-content: flex-start;
+
+                img {
+                    height: 40px;
+                    width: auto;
                 }
             }
 
             .title {
-            position: relative;
+                flex: 0 0 auto;
-            // width: 500px;
                 text-align: center;
-            background-size: cover;
-            color: transparent;
-            height: 60px;
-            line-height: 46px;
 
                 .title-text {
-                font-size: 38px;
+                    color: #00D4AA;
-                font-weight: 900;
+                    font-family: Audiowide, sans-serif;
-                letter-spacing: 6px;
+                    font-weight: 400;
-                width: 100%;
+                    font-size: 32px;
-                background: linear-gradient(92deg, #1976d2 0%, #2196f3 48.8525390625%, #42a5f5 100%);
+                    letter-spacing: 2px;
-                -webkit-background-clip: text;
+                }
-                -webkit-text-fill-color: transparent;
+            }
+
+            .timers {
+                display: flex;
+                justify-content: flex-end;
+                border: 1px solid #d1fae5;
+                box-sizing: border-box;
+                background: #ecfdf5;
+                padding: 8px 20px;
+                border-radius: 36px;
+                align-items: center;
+                width: fit-content;
+                margin-left: auto;
+                display: flex;
+                align-items: center;
+                color: #065f46;
+                font-family: "PingFang TC";
+                font-weight: 600;
+                font-size: 14px;
+                line-height: 17px;
+
+                .blq-icon-shezhi02 {
+                    cursor: pointer;
+                    font-size: 18px;
+                    color: #00D4AA;
+                    transition: all 0.3s ease;
+
+                    &:hover {
+                        color: #00bfa5;
+                        transform: rotate(90deg);
+                    }
+                }
             }
         }
     }
@@ -122,12 +111,12 @@
             width: 130px;
             height: 36px;
             border-radius: 18px 0px 0px 18px;
-            color: #1976d2;
+            color: #00D4AA;
             text-indent: 26px;
             line-height: 36px;
             font-size: 16px;
             margin-right: 20px;
-            background: linear-gradient(to right, rgba(25, 118, 210, 0.15), rgba(25, 118, 210, 0));
+            background: linear-gradient(to right, rgba(0, 212, 170, 0.15), rgba(0, 212, 170, 0));
         }
     }
 }

src/views/home.vue

@@ -18,29 +18,23 @@
       <div v-else class="host-body">
         <!-- 头部 s -->
         <div class="d-flex jc-center title_wrap">
-          <div class="zuojuxing"></div>
+          <div class="logo">
-          <div class="youjuxing"></div>
+            <img src="../assets/img/new/logo.png" alt="" />
-          <div class="guang">
-            <!-- <p class="title-name">广州开发区交投氢能</p> -->
-            <!-- <img src="@/assets/img/logo.png" alt="" class="imgs"/> -->
-            <img src="@/assets/img/ln_logo.png" alt="" class="imgs2" />
           </div>
-          <div class="d-flex jc-center">
           <div class="title">
-              <!--箱箱碳林可视化平台-->
-              <!--嘉兴海港碳服务平台-->
-              <!--2025.4.1  szy -->
             <span class="title-text">Lingniu ESG Link</span>
           </div>
-          </div>
+          <div style="display: flex; flex: 1">
             <div class="timers">
               {{ dateYear }} {{ dateWeek }} {{ dateDay }}
               <!-- <button class="selectTime">选择日期</button> -->
-            <i
+            </div>
-              class="blq-icon-shezhi02"
+            <img
+              src="../assets/img/new/chilun.png"
               style="margin-left: 10px"
               @click="showSetting"
-            ></i>
+              alt=""
+            />
           </div>
         </div>
         <!-- 头部 e-->

src/views/indexs/center-bottom.vue

@@ -7,6 +7,7 @@
 <script>
 import echarts from "echarts";
 import { currentGET } from "api/modules";
+import { color } from "echarts/lib/export";
 export default {
   data() {
     return {
@@ -20,12 +21,26 @@ export default {
           // { name: '其它：10%', value: 260 }
         ],
       ],
-      colors: ["#1976d2", "#ff9800"],
+      colors: [
+        "#46AEF4",
+        "#10B981",
+        "#04724F",
+        "#C2F1E1",
+        "#EAFAF5",
+        "#F6F8FA",
+      ],
       //colors: ["#00E5FF", "#FF5733",  "#FFBF00", "#5CDB95"]
     };
   },
   mounted() {
     this.getData();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+    }
   },
   methods: {
     getData() {
@@ -52,79 +67,173 @@ export default {
       });
     },
 
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
     initChart() {
-      const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
+      this.$nextTick(() => {
+        if (!this.$refs.chart) return;
+
+        const myChart = echarts.init(this.$refs.chart);
+
+        // 计算总数和每项的百分比
+        const chartData = this.chartData[0];
+        console.log("图表数据:", chartData);
+
+        if (!chartData || chartData.length === 0) {
+          console.warn("图表数据为空");
+          return;
+        }
+
+        const total = chartData.reduce(
+          (sum, item) => sum + Number(item.value),
+          0
+        );
+        console.log("总数:", total);
+
+        // 创建name到数据的映射
+        const dataMap = {};
+        chartData.forEach((item) => {
+          const numValue = Number(item.value);
+          const percent =
+            total > 0 ? ((numValue / total) * 100).toFixed(1) : "0.0";
+          dataMap[item.name] = {
+            value: numValue,
+            percent: percent,
+          };
+          console.log(`${item.name}: ${numValue}辆, ${percent}%`);
+        });
+
         let option = {
           title: {
-          text: "",
+            text: `总计`,
-          left: "center",
+            subtext: `${total}`,
+            left: "24%",
+            top: "39%",
+            textAlign: "center",
             textStyle: {
-            color: "#666666", // 将原来的 #999 改为更亮的灰色
+              fontSize: 13,
-            fontWeight: "normal",
+              color: "#64748B",
-            fontSize: 12,
+            },
+            subtextStyle: {
+              fontSize: 20,
+              fontWeight: "bold",
+              color: "#1E293B",
             },
           },
-        series: this.chartData.map(function (data, idx) {
+          tooltip: {
-          var top = idx * 33.3;
+            trigger: "item",
-          return {
+            formatter: "{b}: {c}辆 ",
+          },
+          legend: {
+            orient: "vertical",
+            right: "5%",
+            top: "middle",
+            formatter: (name) => {
+              const data = dataMap[name];
+              if (data) {
+                return `${name}  ${data.percent}%`;
+              }
+              return name;
+            },
+            textStyle: {
+              color: "#333333",
+              fontSize: 13,
+            },
+            itemGap: 15,
+            itemWidth: 14,
+            itemHeight: 14,
+          },
+          series: [
+            {
+              name: "车型分布",
               type: "pie",
-            radius: [40, 70],
+              radius: ["45%", "65%"],
-            top: top + "%",
+              center: ["25%", "50%"],
-            height: "33.33%",
+              avoidLabelOverlap: false,
-            left: "center",
-            width: "600px",
               itemStyle: {
-              borderColor: "orange",
+                borderRadius: 4,
-              borderWidth: 1,
+                borderColor: "#fff",
+                borderWidth: 2,
               },
               label: {
-              alignTo: "edge",
+                show: false,
-              formatter: ({ name, value, percent }) =>
+                position: "center",
-                `{name|${name}}\n {value|${value}辆}  {percent|${percent}%}`,
-              minMargin: 5,
-              edgeDistance: 10,
-              lineHeight: 20,
-              rich: {
-                name: {
-                  // 新增 name 样式
-                  fontSize: 12,
-                  color: "#333333", // 使用深色
-                  padding: [0, 0, 5, 0],
-                },
-                value: {
-                  fontSize: 12,
-                  color: "#1976d2",
-                  padding: [0, 5, 0, 0],
-                },
-                percent: {
-                  fontSize: 12,
-                  color: "#ff9800", // 保留橙色
               },
+              emphasis: {
+                label: {
+                  show: true,
+                  color: "#1E293B",
+                  fontSize: 14,
+                  fontWeight: "bold",
+                  formatter: "{b}\n{c}辆",
                 },
               },
               labelLine: {
-              length: 40,
+                show: false,
-              length2: 15,
-              maxSurfaceAngle: 80,
               },
-            labelLayout: function (params) {
+              data: chartData.map((item, index) => ({
-              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
+                name: item.name,
-              const points = params.labelLinePoints;
+                value: Number(item.value),
-              // Update the end point.
+                itemStyle: {
-              points[2][0] = isLeft
+                  color: this.colors[index % this.colors.length],
-                ? params.labelRect.x
-                : params.labelRect.x + params.labelRect.width;
-              return {
-                labelLinePoints: points,
-              };
                 },
-            data: data,
+              })),
-          };
+            },
-        }),
+          ],
         };
 
         option && myChart.setOption(option);
         this.chart = myChart;
+        this.chart.resize();
+
+        let isHoveringChart = false;
+
+        // 鼠标悬停在扇区时
+        myChart.on("mouseover", "series", () => {
+          isHoveringChart = true;
+          myChart.setOption({
+            title: {
+              show: false,
+            },
+          });
+        });
+
+        // 鼠标离开扇区时
+        myChart.on("mouseout", "series", () => {
+          isHoveringChart = false;
+          myChart.setOption({
+            title: {
+              show: true,
+            },
+          });
+        });
+
+        // 监听高亮事件（包括legend悬停触发的）
+        myChart.on("highlight", () => {
+          // 如果不是在扇区上悬停，说明是legend触发的
+          if (!isHoveringChart) {
+            myChart.setOption({
+              title: {
+                show: false,
+              },
+            });
+          }
+        });
+
+        // 监听取消高亮事件
+        myChart.on("downplay", () => {
+          if (!isHoveringChart) {
+            myChart.setOption({
+              title: {
+                show: true,
+              },
+            });
+          }
+        });
+      });
     },
     toggleMode() {
       this.showPercentage = !this.showPercentage;
@@ -137,6 +246,7 @@ export default {
 <style scoped>
 .chart-container {
   width: 100%;
-  height: 800px;
+  height: 100%;
+  min-height: 200px;
 }
 </style>

src/views/indexs/center-map.vue

@@ -7,41 +7,40 @@
 -->
 <template>
   <div class="centermap">
-    <div class="maptitle">
+    <!-- <div class="maptitle">
-      <div class="zuo"></div>
       <span class="titletextBefore"
         >今年累计碳减排<span class="titletext">{{ maptitle }}</span
         >{{ maptitle2 }}</span
       >
-      <div class="you"></div>
+    </div> -->
-    </div>
     <div class="mapwrap">
-      <dv-border-box-13>
+      <div class="map-card">
-        <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
+        <div class="quanguo1" @click="goToPage()">实时监控</div>
+        <div
+          class="quanguo1 quanguo"
+          @click="getData('china')"
+          v-if="code !== 'china'"
+        >
           中国
         </div>
-        <div class="quanguo1" @click="goToPage()" v-if="showType === 1">
+        <div class="quanguo2">
-          车辆实况
+          羚牛全国车辆信息
+          <div class="btn" @click="changeShow1()" v-if="showType === 2">
+            车辆
           </div>
-
+          <div class="btn" @click="changeShow2()" v-else>加氢站</div>
-        <div
-          class="quanguo2"
-          @click="changeShow1()"
-          :style="{ backgroundColor: currentBgColor2 }"
-        >
-          <div>车辆信息</div>
         </div>
-        <div
+        <!-- <div
           class="quanguo3"
-          @click="changeShow2()"
+         
           :style="{ backgroundColor: currentBgColor3 }"
         >
           <div>加氢站</div>
-        </div>
+        </div> -->
 
         <Echart id="CenterMap" :options="options" ref="CenterMap" />
         <!-- <dv-flyline-chart :config="config" style="width:100%;height:100%;" /> -->
-      </dv-border-box-13>
+      </div>
     </div>
   </div>
 </template>
@@ -75,20 +74,20 @@ export default {
     this.getYearData();
 
     this.showType = 1;
-    this.currentBgColor2 = "#1976d2";
+    this.currentBgColor2 = "#00D4AA";
     this.getData("china");
     //this.getData("440000");
   },
   methods: {
     changeShow1() {
       this.showType = 1;
-      this.currentBgColor2 = "#1976d2";
+      this.currentBgColor2 = "#00D4AA";
       this.currentBgColor3 = "";
       this.getData(this.code);
     },
     changeShow2() {
       this.currentBgColor2 = "";
-      this.currentBgColor3 = "#1976d2";
+      this.currentBgColor3 = "#00D4AA";
       this.showType = 2;
       this.getData(this.code);
     },
@@ -322,18 +321,14 @@ export default {
             { lte: 50, label: "1-50 辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。
           ],
           inRange: {
-            // 渐变颜色，从小到大
+            // 渐变颜色，从小到大（绿色系）
             color: [
-              // "#c3d7df",
+              "#a7f3d0",
-              // "#5cb3cc",
+              "#6ee7b7",
-              // "#8abcd1",
+              "#34d399",
-              // "#66a9c9",
+              "#10b981",
-              // "#2f90b9",
+              "#059669",
-              // "#1781b5",
+              "#047857",
-              "#6EC3F7",
-              "#2196F3",
-              "#1565C0",
-              "#0D47A1",
             ],
           },
           textStyle: {
@@ -437,12 +432,12 @@ export default {
 
             type: "scatter",
             coordinateSystem: "geo",
-            symbol:
+            // symbol:
-              "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
+            //   "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
-            symbolSize: function (val) {
+            // symbolSize: function (val) {
-              return 20;
+            //   return 20;
-              // return val[2] / 50;
+            //   // return val[2] / 50;
-            },
+            // },
             legendHoverLink: true,
             showEffectOn: "render",
             rippleEffect: {
@@ -504,7 +499,7 @@ export default {
               textShadowBlur: 10,
               textBorderWidth: 0,
               color: "#333333",
-              show: true,
+              show: false,
             },
             // colorBy: "data",
           },
@@ -542,18 +537,14 @@ export default {
             { lte: 10, label: "1-10 座" }, // 不指定 min，表示 min 为无限大（-Infinity）。
           ],
           inRange: {
-            // 渐变颜色，从小到大
+            // 渐变颜色，从小到大（绿色系）
             color: [
-              // "#c3d7df",
+              "#a7f3d0",
-              // "#5cb3cc",
+              "#6ee7b7",
-              // "#8abcd1",
+              "#34d399",
-              // "#66a9c9",
+              "#10b981",
-              // "#2f90b9",
+              "#059669",
-              // "#1781b5",
+              "#047857",
-              "#6EC3F7",
-              "#2196F3",
-              "#1565C0",
-              "#0D47A1",
             ],
           },
           textStyle: {
@@ -772,132 +763,131 @@ export default {
 </script>
 <style lang="scss" scoped>
 .centermap {
-  margin-bottom: 30px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .maptitle {
-    height: 60px;
+    height: 50px;
     display: flex;
     justify-content: center;
-    padding-top: 10px;
+    align-items: center;
-    box-sizing: border-box;
+    margin-bottom: 8px;
+    padding: 0 20px;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
     .titletext {
-      font-size: 32px;
+      font-size: 28px;
-      font-weight: 900;
+      font-weight: 700;
-      letter-spacing: 6px;
+      letter-spacing: 2px;
       background: linear-gradient(
         92deg,
-        #0072ff 0%,
+        #00d4aa 0%,
-        #00eaff 48.8525390625%,
+        #1de9b6 48.8525390625%,
-        #01aaff 100%
+        #00bfa5 100%
       );
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      margin: 0 10px;
+      margin: 0 8px;
     }
     .titletextBefore {
-      font-size: 28px;
+      font-size: 16px;
-      font-weight: 900;
+      font-weight: 600;
-      letter-spacing: 6px;
+      letter-spacing: 1px;
-      color: #333333;
+      color: #666666;
-      margin: 0 10px;
-    }
-    .zuo,
-    .you {
-      background-size: 100% 100%;
-      width: 29px;
-      height: 20px;
-      margin-top: 8px;
-    }
-
-    .zuo {
-      background: url("../../assets/img/xiezuo.png") no-repeat;
-    }
-
-    .you {
-      background: url("../../assets/img/xieyou.png") no-repeat;
     }
   }
 
   .mapwrap {
-    height: 548px;
+    flex: 1;
     width: 100%;
-    // padding: 0 0 10px 0;
     box-sizing: border-box;
     position: relative;
 
-    .quanguo {
+    .map-card {
-      position: absolute;
+      width: 100%;
-      right: 20px;
+      height: 100%;
-      top: -46px;
+      background: #ffffff;
-      width: 80px;
+      border-radius: 8px;
-      height: 28px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-      border: 1px solid #1976d2;
+      padding: 16px;
-      border-radius: 10px;
+      box-sizing: border-box;
-      color: #1976d2;
+      position: relative;
-      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);
     }
 
     .quanguo1 {
       position: absolute;
       right: 20px;
-      top: 24px;
+      top: 16px;
-      width: 100px;
+      padding: 6px 16px;
-      height: 28px;
+      border-radius: 8px;
-      border: 1px solid #1976d2;
+      border: 1px solid #a7f3d0;
-      border-radius: 10px;
+      box-sizing: border-box;
-      color: #333333;
+      background: #d1fae5;
-      text-align: center;
-      line-height: 26px;
-      letter-spacing: 6px;
       cursor: pointer;
-      box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
+      z-index: 999;
-        0 0 6px rgba(25, 118, 210, 0.2);
+      text-align: center;
-      font-family: "微软雅黑", sans-serif;
+      color: #047857;
-      z-index: 9999;
+      font-family: "PingFang SC";
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 15px;
+    }
+    .quanguo {
+      position: absolute;
+      right: 20px;
+      top: 56px;
     }
-
     .quanguo2 {
       position: absolute;
       left: 20px;
-      top: 24px;
+      top: 16px;
-      width: 100px;
+      border-radius: 6px;
-      height: 28px;
+      color: #1e293b;
-      border: 1px solid #1976d2;
+      display: flex;
-      border-radius: 10px;
+      align-items: center;
-      color: #333333;
+      font-family: "PingFang SC";
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 24px;
       text-align: center;
-      line-height: 26px;
-      letter-spacing: 6px;
       cursor: pointer;
-      box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
+      z-index: 999;
-        0 0 6px rgba(25, 118, 210, 0.2);
+      .btn {
-      font-family: "微软雅黑", sans-serif;
+        width: 102px;
-      z-index: 9999;
+        height: 32px;
+        color: #ffffff;
+        font-family: "PingFang SC";
+        font-weight: 400;
+        font-size: 14px;
+        padding-left: 10px;
+        line-height: 32px;
+        background-repeat: no-repeat;
+        background-image: url("../../assets/img/new/btn.png");
+      }
     }
 
     .quanguo3 {
       position: absolute;
       left: 20px;
-      top: 60px;
+      top: 52px;
-      width: 100px;
+      padding: 6px 16px;
-      height: 28px;
+      background: #ffffff;
-      border: 1px solid #1976d2;
+      border: 1px solid #00d4aa;
-      border-radius: 10px;
+      border-radius: 6px;
       color: #333333;
+      font-size: 13px;
+      font-weight: 500;
       text-align: center;
-      line-height: 26px;
-      letter-spacing: 6px;
       cursor: pointer;
-      box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
+      transition: all 0.3s ease;
-        0 0 6px rgba(25, 118, 210, 0.2);
+      z-index: 999;
-      font-family: "微软雅黑", sans-serif;
+
-      z-index: 9999;
+      &:hover {
+        background: rgba(0, 212, 170, 0.1);
+      }
     }
   }
 }

src/views/indexs/chart/baseChart.vue

@@ -2,188 +2,213 @@
   <div class="chart-block">
     <!-- 左侧 柱状+折线图 -->
     <div class="chart-container">
-      <v-chart class="bar-line-chart" :options="barLineOption"  style="width: 390px;height: 250px;"/>
+      <v-chart
+        class="bar-line-chart"
+        :options="barLineOption"
+        style="width: 390px; height: 250px"
+      />
     </div>
 
     <!-- 右侧 两个环形图 -->
     <div class="chart-container-right">
-      <v-chart class="pie-chart" :options="pieOptionOne" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
+      <v-chart
-      <v-chart class="pie-chart" :options="pieOptionTwo" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
+        class="pie-chart"
+        :options="pieOptionOne"
+        style="width: 140px; height: 100px; margin-left: -11%; margin-top: 5%"
+      />
+      <v-chart
+        class="pie-chart"
+        :options="pieOptionTwo"
+        style="width: 140px; height: 100px; margin-left: -11%; margin-top: 5%"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import VChart from 'vue-echarts'
+import VChart from "vue-echarts";
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
-import 'echarts/lib/chart/bar'
+import "echarts/lib/chart/bar";
-import 'echarts/lib/chart/line'
+import "echarts/lib/chart/line";
-import 'echarts/lib/chart/pie'
+import "echarts/lib/chart/pie";
-import 'echarts/lib/component/legend'
+import "echarts/lib/component/legend";
-import 'echarts/lib/component/tooltip'
+import "echarts/lib/component/tooltip";
-import { currentGET } from 'api/modules'
+import { currentGET } from "api/modules";
 
 export default {
-  name: 'ChartBlock',
+  name: "ChartBlock",
   components: { VChart },
   data() {
     return {
       /* 柱状图 + 折线图 */
       barLineOption: {
-        backgroundColor: 'transparent', // 让背景透明，方便在大屏布局中适配
+        backgroundColor: "transparent", // 让背景透明，方便在大屏布局中适配
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
-          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          backgroundColor: "rgba(0, 0, 0, 0.8)",
-          borderColor: '#333333',
+          borderColor: "#333333",
-          textStyle: { color: '#ffffff' },
+          textStyle: { color: "#ffffff" },
           formatter: (params) => {
-            console.log(params)
+            console.log(params);
             return `碳减排量：${params[0].value}吨<br/>行驶里程：${params[1].value}万km`;
-          }
+          },
         },
         legend: {
-          data: ['碳减排量(吨)', '行驶里程(万km)'],
+          data: ["碳减排量(吨)", "行驶里程(万km)"],
-          textStyle: { color: '#333333' }
+          textStyle: { color: "#333333" },
         },
         grid: {
-          left: '15%',
+          left: "15%",
-          right: '15%',
+          right: "15%",
-          top: '10%',
+          top: "10%",
-          bottom: '10%'
+          bottom: "10%",
         },
         xAxis: {
-          type: 'category',
+          type: "category",
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          data: [
-          axisLine: { lineStyle: { color: '#666666' } },
+            "1月",
-          axisLabel: { color: '#333333' }
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+          axisLine: { lineStyle: { color: "#666666" } },
+          axisLabel: { color: "#333333" },
         },
         yAxis: [
           {
-            type: 'value',
+            type: "value",
             // name: '碳减排量',
-            axisLine: { lineStyle: { color: '#666666' } },
+            axisLine: { lineStyle: { color: "#666666" } },
-            axisLabel: { color: '#333333' },
+            axisLabel: { color: "#333333" },
             splitLine: { show: false },
             axisLabel: {
-              formatter: '{value}吨'
+              formatter: "{value}吨",
-            }
+            },
           },
           {
-            type: 'value',
+            type: "value",
             // name: '行驶里程',
-            axisLine: { lineStyle: { color: '#666666' } },
+            axisLine: { lineStyle: { color: "#666666" } },
-            axisLabel: { color: '#333333' },
+            axisLabel: { color: "#333333" },
             splitLine: { show: false },
             axisLabel: {
-              formatter: '{value}万km'
+              formatter: "{value}万km",
-            }
+            },
-          }
+          },
         ],
         series: [
           {
-            name: '碳减排量(吨)',
+            name: "碳减排量(吨)",
-            type: 'bar',
+            type: "bar",
             data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900],
-            itemStyle: { color: '#1976d2' },
+            itemStyle: { color: "#00D4AA" },
-            barWidth: 14
+            barWidth: 14,
           },
           {
-            name: '行驶里程(万km)',
+            name: "行驶里程(万km)",
-            type: 'line',
+            type: "line",
             yAxisIndex: 1,
             data: [10, 15, 18, 12, 20, 25, 18, 22, 30],
-            itemStyle: { color: '#ff9800' },
+            itemStyle: { color: "#ff9800" },
             smooth: true,
             lineStyle: { width: 2 },
-            symbol: 'circle',
+            symbol: "circle",
-            symbolSize: 8
+            symbolSize: 8,
-          }
+          },
-        ]
+        ],
       },
 
       /* 环形图1 - 年度碳减排量 */
       pieOptionOne: {
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         tooltip: { show: false },
         title: {
-          text: '0吨',
+          text: "0吨",
           //subtext: '年度碳减排量',
-          left: 'center',
+          left: "center",
-          top: '40%',
+          top: "40%",
-          textStyle: { color: '#333333', fontSize: 18 },
+          textStyle: { color: "#333333", fontSize: 18 },
-          subtextStyle: { color: '#666666', fontSize: 14}
+          subtextStyle: { color: "#666666", fontSize: 14 },
         },
         graphic: [
           {
-            type: 'text',
+            type: "text",
-            left: '0px',     // 根据需要调整文字与图表的间距
+            left: "0px", // 根据需要调整文字与图表的间距
-            top: 'center',  // 垂直居中
+            top: "center", // 垂直居中
             style: {
-              text: '年\n度\n碳\n减\n排\n量',  // 每个字符换行显示
+              text: "年\n度\n碳\n减\n排\n量", // 每个字符换行显示
-              fill: '#333333',
+              fill: "#333333",
-              font: '16px sans-serif',
+              font: "16px sans-serif",
-            }
+            },
-          }
+          },
         ],
         series: [
           {
-            name: '年度碳减排量',
+            name: "年度碳减排量",
-            type: 'pie',
+            type: "pie",
-            radius: ['70%', '90%'],
+            radius: ["70%", "90%"],
             hoverAnimation: false,
             label: { show: false },
             labelLine: { show: false },
             data: [
-              { value: 5, name: '碳排放量', itemStyle: { color: '#1976d2' } },
+              { value: 5, name: "碳排放量", itemStyle: { color: "#00D4AA" } },
-              { value: 95, name: 'other', itemStyle: { color: '#e3f2fd' } }
+              { value: 95, name: "other", itemStyle: { color: "#d0f4ea" } },
-            ]
+            ],
-          }
+          },
-        ]
+        ],
       },
 
       /* 环形图2 - 年度行驶里程 */
       pieOptionTwo: {
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         tooltip: { show: false },
         title: {
-          text: '0万',
+          text: "0万",
           //subtext: '年度行驶里程',
-          left: 'center',
+          left: "center",
-          top: '40%',
+          top: "40%",
-          textStyle: { color: '#333333', fontSize: 18 },
+          textStyle: { color: "#333333", fontSize: 18 },
-          subtextStyle: { color: '#666666', fontSize: 14}
+          subtextStyle: { color: "#666666", fontSize: 14 },
         },
         graphic: [
           {
-            type: 'text',
+            type: "text",
-            left: '0px',     // 根据需要调整文字与图表的间距
+            left: "0px", // 根据需要调整文字与图表的间距
-            top: 'center',  // 垂直居中
+            top: "center", // 垂直居中
             style: {
-              text: '年\n度\n行\n驶\n里\n程',  // 每个字符换行显示
+              text: "年\n度\n行\n驶\n里\n程", // 每个字符换行显示
-              fill: '#333333',
+              fill: "#333333",
-              font: '16px sans-serif',
+              font: "16px sans-serif",
-            }
+            },
-          }
+          },
         ],
         series: [
           {
-            name: '年度行驶里程',
+            name: "年度行驶里程",
-            type: 'pie',
+            type: "pie",
-            radius: ['70%', '90%'],
+            radius: ["70%", "90%"],
             hoverAnimation: false,
             label: { show: false },
             labelLine: { show: false },
             data: [
-              { value: 85, name: '行驶里程', itemStyle: { color: '#ff9800' } },
+              { value: 85, name: "行驶里程", itemStyle: { color: "#ff9800" } },
-              { value: 15, name: 'other', itemStyle: { color: '#e3f2fd' } }
+              { value: 15, name: "other", itemStyle: { color: "#e3f2fd" } },
-            ]
+            ],
-          }
-        ]
           },
-      monthItems:[],
+        ],
-      monthCarbon:[],
+      },
-      monthMileage:[]
+      monthItems: [],
-    }
+      monthCarbon: [],
+      monthMileage: [],
+    };
   },
   mounted() {
     this.getMonthData();
@@ -192,31 +217,31 @@ export default {
   methods: {
     getMonthData() {
       currentGET("big2").then((res) => {
-          console.log('月度碳足迹');          
+        console.log("月度碳足迹");
         this.monthItems = res.data;
         console.log(this.monthItems);
         this.monthItems.forEach((item) => {
           console.log(item.monthCarbon);
           console.log(item.monthMileage);
           this.monthCarbon.push(item.monthCarbon);
-            this.monthMileage.push((item.monthMileage/10000).toFixed(2));
+          this.monthMileage.push((item.monthMileage / 10000).toFixed(2));
         });
-          console.log('碳减排：'+ this.monthCarbon);
+        console.log("碳减排：" + this.monthCarbon);
-          console.log('里程数：'+ this.monthMileage);
+        console.log("里程数：" + this.monthMileage);
         this.barLineOption.series[0].data = this.monthCarbon;
         this.barLineOption.series[1].data = this.monthMileage;
       });
     },
     getYearData() {
       currentGET("big3").then((res) => {
-          console.log('年度碳减排量');
+        console.log("年度碳减排量");
         console.log(res);
-          this.pieOptionOne.title.text = res.data.yearCarbonTon + '吨';
+        this.pieOptionOne.title.text = res.data.yearCarbonTon + "吨";
-          this.pieOptionTwo.title.text = res.data.yearMileage + '万km';
+        this.pieOptionTwo.title.text = res.data.yearMileage + "万km";
       });
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
@@ -224,17 +249,17 @@ export default {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  /* 自行控制宽高，若嵌入大屏可由外层决定大小 */
+  width: 100%;
-  width: 800px;
+  height: 100%;
-  height: 300px;
-  /* 背景可保持透明，方便嵌入大屏的背景 */
   background: transparent;
 }
 
 .chart-container {
-  margin-left: -30px;
+  flex: 1;
-  width: 50%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .bar-line-chart {
@@ -244,13 +269,16 @@ export default {
 
 /* 右侧两个环形图的布局 */
 .chart-container-right {
-  width: 45%;
+  flex: 1;
   height: 100%;
-  margin-right: -20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
 }
 
 .pie-chart {
-  width: 160px;
+  width: 100%;
-  height: 160px;
+  height: 50%;
 }
 </style>

src/views/indexs/index.vue

@@ -6,65 +6,122 @@
  * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
 -->
 <template>
+  <div class="page-container">
+    <!-- 三列内容区域 -->
     <div class="contents">
+      <!-- 左侧列 -->
       <div class="contetn_left">
-      <div class="pagetab">
+        <div style="display: flex; justify-content: space-between; gap: 20px">
-        <!-- <div class="item">实时监测</div> -->
+          <!-- 左侧数据卡片1 -->
-        
+          <div class="data-card">
+            <div class="card-icon">
+              <img src="@/assets/img/new/yezi.png" alt="" />
+            </div>
+            <div class="card-content">
+              <div class="card-label">{{ leftCards[0].label }}</div>
+              <div class="card-value">
+                <span class="number">{{ leftCards[0].value }}</span>
+                <span class="unit">{{ leftCards[0].unit }}</span>
+              </div>
+            </div>
           </div>
-      <ItemWrap class="contetn_left-top contetn_lr-item" title="当日实况">
-        <LeftTop/>
 
+          <!-- 左侧数据卡片2 -->
+          <div class="data-card">
+            <div class="card-icon">
+              <img src="@/assets/img/new/dot.png" alt="" />
+            </div>
+            <div class="card-content">
+              <div class="card-label">{{ leftCards[1].label }}</div>
+              <div class="card-value">
+                <span class="number">{{ leftCards[1].value }}</span>
+                <span class="unit">{{ leftCards[1].unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 今年累计碳排 - 大数字卡片 -->
+        <div class="big-number-card">
+          <div class="card-title">今年累计碳排</div>
+          <div class="card-value">
+            <span class="number">{{ yearCarbonTon }}</span>
+            <span class="unit">吨</span>
+          </div>
+          <div class="card-desc">
+            <span class="line"></span>
+            相当于种植了约XX棵树
+          </div>
+        </div>
+        <!-- 月度碳足迹 -->
+        <ItemWrap class="contetn_lr-item" title="月度行驶里程&用氢量">
+          <base-chart />
         </ItemWrap>
-      <ItemWrap class="contetn_left-center contetn_lr-item" title="月度碳足迹">
+        <!-- 月度碳减排 -->
-        <!-- <LeftCenter /> -->
+        <ItemWrap class="contetn_lr-item" title="月度碳减排">
-        <base-chart/>
-      </ItemWrap>
-      <ItemWrap
-        class="contetn_left-bottom contetn_lr-item"
-        title="月度碳减排"
-        style="padding: 0 10px 16px 10px"
-      >
           <LeftBottom />
         </ItemWrap>
       </div>
+
+      <!-- 中间列 -->
       <div class="contetn_center">
         <CenterMap class="contetn_center_top" />
         <ItemWrap class="contetn_center-bottom" title="">
-        <!-- <CenterBottom /> -->
           <RightBottom />
         </ItemWrap>
       </div>
+
+      <!-- 右侧列 -->
       <div class="contetn_right">
-      <!-- <ItemWrap
+        <div style="display: flex; justify-content: space-between; gap: 20px">
-        class="contetn_left-bottom contetn_lr-item"
+          <!-- 右侧数据卡片1 -->
-        title="月度特殊标箱情况"
+          <div class="data-card">
-      >
+            <div class="card-icon">
-        <RightTop />
+              <img src="@/assets/img/new/car.png" alt="" />
-      </ItemWrap>
+            </div>
-      <ItemWrap
+            <div class="card-content">
-        class="contetn_left-bottom contetn_lr-item"
+              <div class="card-label">{{ rightCards[0].label }}</div>
-        title="月度标箱数"
+              <div class="card-value">
-        style="padding: 0 10px 16px 10px"
+                <span class="number">{{ rightCards[0].value }}</span>
-      >
+                <span class="unit">{{ rightCards[0].unit }}</span>
-        <RightCenter />
+              </div>
-      </ItemWrap> -->
+            </div>
-            <!-- 2025.8.13 szy 使用当天数据 -->
+          </div>
-      <ItemWrap class="contetn_right_day_top" title="">
+
+          <!-- 右侧数据卡片2 -->
+          <div class="data-card">
+            <div class="card-icon">
+              <img src="@/assets/img/new/chat.png" alt="" />
+            </div>
+            <div class="card-content">
+              <div class="card-label">{{ rightCards[1].label }}</div>
+              <div class="card-value">
+                <span class="number">{{ rightCards[1].value }}</span>
+                <span class="unit">{{ rightCards[1].unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 车辆实时监控 -->
+        <ItemWrap class="contetn_right_day_top" title="车辆实时监控">
           <RightTopDay />
         </ItemWrap>
+
+        <!-- 车型结构分析 -->
         <ItemWrap
-        class="contetn_left-bottom contetn_lr-item"
+          class="contetn_lr-item"
-        title="车型分类 "
+          title="车型结构分析"
+          style="flex: 0; min-height: 260px"
         >
           <CenterBottom />
         </ItemWrap>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
-import LeftTop from './left-top.vue'
 import LeftCenter from "./left-center.vue";
 import LeftBottom from "./left-bottom.vue";
 import CenterMap from "./center-map.vue";
@@ -72,12 +129,12 @@ import CenterBottom from "./center-bottom.vue";
 import RightTop from "./right-top.vue";
 import RightCenter from "./right-center.vue";
 import RightBottom from "./right-bottom.vue";
-import BaseChart from "./chart/baseChart.vue"
+import BaseChart from "./chart/baseChart.vue";
-import RightTopDay from './right-top-day.vue';  //2025.10.15  szy add
+import RightTopDay from "./right-top-day.vue";
+import { currentGET } from "api/modules";
 
 export default {
   components: {
-    LeftTop,
     LeftCenter,
     LeftBottom,
     CenterMap,
@@ -90,7 +147,37 @@ export default {
   },
   data() {
     return {
-      
+      yearCarbonTon: 0,
+      // 左侧卡片数据
+      leftCards: [
+        {
+          id: 1,
+          value: "8463.91",
+          unit: "kg",
+          label: "当日减碳量",
+        },
+        {
+          id: 2,
+          value: "1027.98",
+          unit: "kg",
+          label: "当日用氢量",
+        },
+      ],
+      // 右侧卡片数据
+      rightCards: [
+        {
+          id: 3,
+          value: "403 / 977",
+          unit: "辆",
+          label: "在线数量",
+        },
+        {
+          id: 4,
+          value: "18012.87",
+          unit: "km",
+          label: "当日行驶里程",
+        },
+      ],
     };
   },
   filters: {
@@ -98,65 +185,259 @@ export default {
       return msg || 0;
     },
   },
-  created() {
+  created() {},
+
+  mounted() {
+    this.getYearData();
+    this.getDayData();
   },
-
-  mounted() {},
   methods: {
+    getYearData() {
+      currentGET("big3").then((res) => {
+        console.log("年度碳减排量");
+        console.log(res);
+        if (res && res.data) {
+          this.yearCarbonTon = res.data.yearCarbonTon || 0;
+        }
+      });
+    },
+    getDayData() {
+      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;
+        }
+
+        // 更新左侧卡片 - 当日减碳量
+        this.$set(this.leftCards[0], "value", dayCarbon);
+
+        // 更新左侧卡片 - 当日用氢量
+        this.$set(this.leftCards[1], "value", dayHydrogen);
+
+        // 更新右侧卡片 - 在线数量
+        this.$set(
+          this.rightCards[0],
+          "value",
+          onLineCount + " / " + vehicleCount
+        );
+
+        // 更新右侧卡片 - 当日行驶里程
+        this.$set(this.rightCards[1], "value", dayMileage);
+      });
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
-// 内容
+// 页面容器
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 80px);
+  overflow: hidden;
+}
+
+// 三列内容区域 - 1:2:1 布局
 .contents {
-  .contetn_left,
+  flex: 1;
-  .contetn_right {
+  display: flex;
-    width: 540px;
+  gap: 12px;
+  min-height: 0;
+
+  .contetn_left {
+    flex: 1;
+    min-width: 0;
     box-sizing: border-box;
-    // padding: 16px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 
   .contetn_center {
-    width: 720px;
+    flex: 2;
+    min-width: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 
-  //左右两侧 三个块
+  .contetn_right {
+    flex: 1;
+    min-width: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  // 左右两侧卡片高度
   .contetn_lr-item {
-    height: 310px;
+    flex: 1;
+    min-height: 230px;
   }
 
   .contetn_center_top {
-    width: 100%;
+    flex: 1;
-  }
+    min-height: 0;
-
-  // 中间
-  .contetn_center {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
   }
 
   .contetn_center-bottom {
-    height: 315px;
+    height: 260px;
+    flex-shrink: 0;
   }
 
-  //左边 右边 结构一样
+  // 右侧车辆监控表格
-  .contetn_left,
-  .contetn_right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    position: relative;  
-  }
-
-    //右上角，车辆信息
   .contetn_right_day_top {
-    margin-top: 0px;
+    flex: 1;
-    height: 640px;
+    min-height: 200px;
   }
 }
 
+// 数据卡片样式
+.data-card {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+  height: 82px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+
+  //   &:hover {
+  //     transform: translateY(-2px);
+  //     box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
+  //   }
+
+  .card-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // background: linear-gradient(
+    //   135deg,
+    //   rgba(0, 212, 170, 0.1),
+    //   rgba(0, 212, 170, 0.05)
+    // );
+    // border-radius: 8px;
+
+    img {
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  .card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .card-label {
+      display: flex;
+      align-items: center;
+      color: #64748b;
+      font-family: "PingFang TC";
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 17px;
+    }
+
+    .card-value {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+
+      .number {
+        display: flex;
+        align-items: center;
+        color: #1e293b;
+        font-family: "PingFang SC";
+        font-weight: 600;
+        font-size: 19px;
+        line-height: 26px;
+      }
+
+      .unit {
+        font-size: 13px;
+        color: #999999;
+      }
+    }
+  }
+}
+
+// 大数字卡片样式
+.big-number-card {
+  background-image: url("../../assets/img/new/banner.png");
+  background-size: cover;
+  border-radius: 20px;
+  padding: 15px 20px;
+  color: #ffffff;
+  height: 90px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+
+  .card-title {
+    color: #d1fae5;
+    font-family: "PingFang TC";
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 15px;
+  }
+
+  .card-value {
+    display: flex;
+    align-items: baseline;
+
+    .number {
+      font-size: 34px;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .unit {
+      font-size: 15px;
+      margin-left: 6px;
+      opacity: 0.9;
+    }
+  }
+
+  .card-desc {
+    font-size: 12px;
+    opacity: 0.85;
+    padding-top: 4px;
+    display: flex;
+
+    align-items: center;
+    .line {
+      margin-right: 8px;
+      width: 30px;
+      height: 3px;
+      border-radius: 9999px;
+      background: #34d399;
+    }
+  }
+}
 
 @keyframes rotating {
   0% {

src/views/indexs/left-bottom.vue

@@ -32,8 +32,20 @@ export default {
   },
   mounted() {
     this.getMonthData();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+    }
   },
   methods: {
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
     getMonthData() {
       currentGET("big2").then((res) => {
         console.log("月度碳减排");
@@ -55,10 +67,13 @@ export default {
       });
     },
     initChart() {
-      let chart = echarts.init(this.$refs.chart);
+      this.$nextTick(() => {
+        if (!this.$refs.chart) return;
+
+        const chart = echarts.init(this.$refs.chart);
         let option = {
-        grid:{
+          grid: {
-          left:'13%'
+            left: "13%",
           },
           tooltip: {
             trigger: "axis",
@@ -140,6 +155,9 @@ export default {
           ],
         };
         chart.setOption(option);
+        this.chart = chart;
+        this.chart.resize();
+      });
     },
   },
 };

src/views/indexs/left-center.vue

@@ -6,14 +6,20 @@
  * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
 -->
 <template>
-  <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
+  <Echart
-  <Reacquire v-else @onclick="getData" style="line-height:200px">
+    id="leftCenter"
+    :options="options"
+    class="left_center_inner"
+    v-if="pageflag"
+    ref="charts"
+  />
+  <Reacquire v-else @onclick="getData" style="line-height: 200px">
     重新获取
   </Reacquire>
 </template>
 
 <script>
-import { currentGET } from 'api/modules'
+import { currentGET } from "api/modules";
 export default {
   data() {
     return {
@@ -22,67 +28,70 @@ export default {
         lockNum: 0,
         onlineNum: 0,
         offlineNum: 0,
-        totalNum: 0
+        totalNum: 0,
       },
       pageflag: true,
-      timer: null
+      timer: null,
     };
   },
   created() {
-    this.getData()
+    this.getData();
-  },
-  mounted() {
   },
+  mounted() {},
   beforeDestroy() {
-    this.clearData()
+    this.clearData();
-
   },
   methods: {
     clearData() {
       if (this.timer) {
-        clearInterval(this.timer)
+        clearInterval(this.timer);
-        this.timer = null
+        this.timer = null;
       }
     },
     getData() {
-      this.pageflag = true
+      this.pageflag = true;
       // this.pageflag =false
 
-      currentGET('big1').then(res => {
+      currentGET("big1").then((res) => {
         //只打印一次
         if (!this.timer) {
           console.log("设备总览", res);
         }
         if (res.success) {
-          this.countUserNumData = res.data
+          this.countUserNumData = res.data;
           this.$nextTick(() => {
-            this.init()
+            this.init();
-          })
+          });
-
         } else {
-          this.pageflag = false
+          this.pageflag = false;
           this.$Message({
             text: res.msg,
-            type: 'warning'
+            type: "warning",
-          })
+          });
         }
-      })
+      });
     },
     //轮询
     switper() {
       if (this.timer) {
-        return
+        return;
       }
       let looper = (a) => {
-        this.getData()
+        this.getData();
       };
-      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
+      this.timer = setInterval(
-      let myChart = this.$refs.charts.chart
+        looper,
-      myChart.on('mouseover', params => {
+        this.$store.state.setting.echartsAutoTime
-        this.clearData()
+      );
+      let myChart = this.$refs.charts.chart;
+      myChart.on("mouseover", (params) => {
+        this.clearData();
       });
-      myChart.on('mouseout', params => {
+      myChart.on("mouseout", (params) => {
-        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
+        this.timer = setInterval(
+          looper,
+          this.$store.state.setting.echartsAutoTime
+        );
       });
     },
     init() {
@@ -129,8 +138,6 @@ export default {
               shadowColor: colors[1],
             },
           },
-
-
         ],
       };
       this.options = {
@@ -195,7 +202,6 @@ export default {
               length: 20, // 第一段线 长度
               length2: 36, // 第二段线 长度
               show: true,
-            
             },
             emphasis: {
               show: true,
@@ -227,5 +233,4 @@ export default {
   },
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped></style>
-</style>

src/views/indexs/left-top.vue

@@ -1,100 +1,64 @@
 <template>
-  <div class="cards-container">
+  <div class="top-cards-wrapper">
-    <!-- 四个卡片 -->
+    <!-- 左侧卡片1 -->
-    <div class="card">
+    <div class="top-card">
-      <!-- 数值与文字 -->
+      <div class="card-icon">
-      <div class="card-info">
+        <img src="@/assets/img/left/1.svg" alt="" />
-        <!-- 主数值（高亮） -->
+      </div>
-        <div class="value-line">
+      <div class="card-content">
+        <div class="card-label">{{ cards[0].label }}</div>
+        <div class="card-value">
           <span class="number">{{ cards[0].value }}</span>
           <span class="unit">{{ cards[0].unit }}</span>
         </div>
-        <!-- 标签说明 -->
+      </div>
-        <div class="label">{{ cards[0].label }}</div>
     </div>
 
-      <!-- 图标及其闪动背景 -->
+    <!-- 左侧卡片2 -->
-      <div class="icon-wrapper">
+    <div class="top-card">
-        <!-- 背后闪动的竖直矩形 -->
+      <div class="card-icon">
-        <div class="icon-bg icon-bg-0"></div>
+        <img src="@/assets/img/left/2.svg" alt="" />
-        <!-- 圆形平台 -->
-        <div class="platform-circle"></div>
-        <!-- 图标本身（此处用Unicode或自定义图标） -->
-        <div class="icon">
-          <img src="@/assets/img/left/1.svg" class="images" />
       </div>
-      </div>
+      <div class="card-content">
-    </div>
+        <div class="card-label">{{ cards[1].label }}</div>
-    <div class="card">
+        <div class="card-value">
-      <!-- 数值与文字 -->
-      <div class="card-info">
-        <!-- 主数值（高亮） -->
-        <div class="value-line">
           <span class="number">{{ cards[1].value }}</span>
           <span class="unit">{{ cards[1].unit }}</span>
         </div>
-        <!-- 标签说明 -->
+      </div>
-        <div class="label">{{ cards[1].label }}</div>
     </div>
 
-      <!-- 图标及其闪动背景 -->
+    <!-- 中间标题区域 -->
-      <div class="icon-wrapper">
+    <div class="center-title">
-        <!-- 背后闪动的竖直矩形 -->
+      <div class="title-text">羚牛全国车辆信息</div>
-        <div class="icon-bg icon-bg-1"></div>
+      <div class="status-badge">922 功能中</div>
-        <!-- 圆形平台 -->
-        <div class="platform-circle"></div>
-        <!-- 图标本身（此处用Unicode或自定义图标） -->
-        <div class="icon">
-          <img src="@/assets/img/left/2.svg" class="images" />
     </div>
+
+    <!-- 右侧卡片1 -->
+    <div class="top-card">
+      <div class="card-icon">
+        <img src="@/assets/img/left/3.svg" alt="" />
       </div>
-    </div>
+      <div class="card-content">
-    <div class="card">
+        <div class="card-label">{{ cards[2].label }}</div>
-      <!-- 数值与文字 -->
+        <div class="card-value">
-      <div class="card-info">
-        <!-- 主数值（高亮） -->
-        <div class="value-line">
           <span class="number">{{ cards[2].value }}</span>
           <span class="unit">{{ cards[2].unit }}</span>
         </div>
-        <!-- 标签说明 -->
+      </div>
-        <div class="label">{{ cards[2].label }}</div>
     </div>
 
-      <!-- 图标及其闪动背景 -->
+    <!-- 右侧卡片2 -->
-      <div class="icon-wrapper">
+    <div class="top-card">
-        <!-- 背后闪动的竖直矩形 -->
+      <div class="card-icon">
-        <div class="icon-bg icon-bg-2"></div>
+        <img src="@/assets/img/left/4.svg" alt="" />
-        <!-- 圆形平台 -->
-        <div class="platform-circle"></div>
-        <!-- 图标本身（此处用Unicode或自定义图标） -->
-        <div class="icon">
-          <img src="@/assets/img/left/3.svg" class="images" />
       </div>
-      </div>
+      <div class="card-content">
-    </div>
+        <div class="card-label">{{ cards[3].label }}</div>
-    <div class="card">
+        <div class="card-value">
-      <!-- 数值与文字 -->
-      <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>
@@ -110,31 +74,31 @@ export default {
       cards: [
         {
           id: 1,
-          value: "452/807",
+          value: "8463.91",
-          unit: "辆",
+          unit: "kg",
-          label: "在线车数",
+          label: "当日减碳量",
-          srcValue: "@/assets/img/left_top_lv.png",
+          srcValue: "@/assets/img/left/1.svg",
         },
         {
           id: 2,
-          value: "561",
+          value: "1027.98",
           unit: "kg",
-          label: "当日减碳",
+          label: "当日用氢量",
-          srcValue: "@/assets/img/left/1.svg",
+          srcValue: "@/assets/img/left/2.svg",
         },
         {
           id: 3,
-          value: "534",
+          value: "403 / 977",
-          unit: "kg",
+          unit: "辆",
-          label: "当日用氢量",
+          label: "在线数量",
-          srcValue: "@/assets/img/left/1.svg",
+          srcValue: "@/assets/img/left/3.svg",
         },
         {
           id: 4,
-          value: "3300",
+          value: "18012.87",
           unit: "km",
-          label: "当日里程",
+          label: "当日行驶里程",
-          srcValue: "@/assets/img/left/1.svg",
+          srcValue: "@/assets/img/left/4.svg",
         },
       ],
     };
@@ -162,16 +126,22 @@ export default {
           if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
         }
 
+        // 当日减碳量
         let change = this.cards[0];
-        change.value = res.data.onLineCount + "/" + res.data.vehicleCount;
+        change.value = dayCarbon;
         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, 1, change);
+
+        // 在线数量
+        change = this.cards[2];
+        change.value = res.data.onLineCount + " / " + res.data.vehicleCount;
         this.$set(this.cards, 2, change);
+
+        // 当日行驶里程
         change = this.cards[3];
         change.value = dayMileage;
         this.$set(this.cards, 3, change);
@@ -182,144 +152,110 @@ export default {
 </script>
 
 <style scoped>
-/* 整体背景 */
+.top-cards-wrapper {
-.cards-container {
   display: flex;
-  justify-content: space-around;
+  align-items: center;
-  align-items: flex-end;
+  justify-content: space-between;
-  padding-left: 0px;
+  gap: 16px;
-  padding-top: 30px;
+  padding: 12px 0;
-  padding-bottom: 30px;
-  background-image: none;
   background-color: transparent;
-  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: #333333;
 }
 
-/* 卡片信息区域 */
+/* 数据卡片 */
-.card-info {
+.top-card {
-  margin-bottom: 120px; /* 给下方图标区域留出空间 */
+  flex: 1;
-  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
 }
 
-.value-line {
+.top-card:hover {
-  font-size: 20px;
+  transform: translateY(-2px);
-  margin-bottom: 8px;
+  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
-  width: 120px;
 }
 
-.number {
+.card-icon {
-  font-weight: 700;
+  flex-shrink: 0;
-  color: #1976d2; /* 高亮数字颜色 */
+  width: 48px;
-  margin-right: 6px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(0, 212, 170, 0.05));
+  border-radius: 8px;
 }
 
-.unit {
+.card-icon img {
-  font-size: 14px;
+  width: 32px;
-  opacity: 0.8;
+  height: 32px;
 }
 
-.label {
+.card-content {
-  font-size: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card-label {
+  font-size: 13px;
   color: #666666;
+  line-height: 1.2;
 }
 
-/* 图标容器 */
+.card-value {
-.icon-wrapper {
+  display: flex;
-  position: absolute;
+  align-items: baseline;
-  bottom: 0;
+  gap: 4px;
-  left: 54%;
-  transform: translateX(-50%);
-  width: 100%;
-  height: 100px;
-  overflow: visible;
 }
 
-/* 背后闪动的竖直矩形 */
+.card-value .number {
-.icon-bg {
+  font-size: 22px;
-  position: absolute;
+  font-weight: 700;
-  bottom: 0;
+  color: #00D4AA;
-  left: 50%;
+  line-height: 1;
-  transform: translateX(-50%);
-  width: 90px;
-  height: 100%;
-  border-radius: 6px;
-  background-image: none;
-  background-color: rgba(25, 118, 210, 0.1);
-  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;
 }
 
-/* 圆形平台 */
+.card-value .unit {
-.platform-circle {
+  font-size: 13px;
-  position: absolute;
+  color: #999999;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100px;
-  height: 20px;
-  background: radial-gradient(rgba(25, 118, 210, 0.3), transparent 70%);
-  border-radius: 50%;
-  box-shadow: 0 0 8px rgba(25, 118, 210, 0.4), 0 0 12px rgba(25, 118, 210, 0.3);
 }
 
-/* 图标 */
+/* 中间标题区域 */
-.icon {
+.center-title {
-  position: absolute;
+  flex: 1.2;
-  bottom: -5px;
+  display: flex;
-  left: 50%;
+  flex-direction: column;
-  transform: translateX(-50%);
+  align-items: center;
-  font-size: 28px;
+  justify-content: center;
-  color: #1976d2;
+  gap: 8px;
+  padding: 16px 24px;
+  background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02));
+  border-radius: 8px;
+  border: 1px solid rgba(0, 212, 170, 0.2);
 }
 
-/* 关键帧动画：闪动 */
+.title-text {
-@keyframes blink {
+  font-size: 18px;
-  0% {
+  font-weight: 600;
-    opacity: 0.5;
+  color: #333333;
-  }
+  letter-spacing: 1px;
-  100% {
-    opacity: 1;
-  }
 }
 
-/* 图标模拟，可用 Font Awesome 等替换 */
+.status-badge {
-.icon-phone::before {
+  display: inline-flex;
-  content: "☎";
+  align-items: center;
-}
+  padding: 4px 12px;
-.icon-shield::before {
+  background: #00D4AA;
-  content: "⛨";
+  color: #ffffff;
-}
+  font-size: 12px;
-.icon-star::before {
+  font-weight: 500;
-  content: "★";
+  border-radius: 12px;
-}
+  box-shadow: 0 2px 6px rgba(0, 212, 170, 0.3);
-.icon-protect::before {
-  content: "🛡";
 }
 </style>

src/views/indexs/right-bottom.vue

@@ -3,7 +3,7 @@
     <table>
       <thead>
         <tr>
-          <th>交易所</th>
+          <th style="width: 36%">交易所</th>
           <th>项目</th>
           <th>价格 (RMB)</th>
           <th>地区</th>
@@ -11,14 +11,20 @@
       </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">
-              <td :style="{ color: item.exchangeColor }">{{ item.name }}</td>
+              <td>
+                {{ item.name }}
+              </td>
               <td>{{ item.project }}</td>
-              <td :style="{ color: item.priceColor }">{{ item.price }}</td>
+              <td>{{ item.price }}</td>
-              <td :style="{ color: item.regionColor }">{{ item.area }}</td>
+              <td>{{ item.area }}</td>
             </tr>
           </tbody>
         </table>
@@ -29,7 +35,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 +60,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 +67,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) {
-          if(index % 2 !== 0)
+            item.exchangeColor = "#00D4AA";
-          {   
-                   
-            item.exchangeColor = "#1976d2";
             item.priceColor = "#333333";
             item.regionColor = "#333333";
             this.$set(this.tableData, index, item);
-          }
+          } else {
-          else         
-          {
             //console.log("偶数index: " + index);
-            item.exchangeColor = "#ff9800";
+            item.exchangeColor = "#10b981";
-            item.priceColor = "#ff9800";
+            item.priceColor = "#10b981";
-            item.regionColor = "#ff9800";
+            item.regionColor = "#10b981";
             this.$set(this.tableData, index, item);
             //this.$set(this.tableData, index, modifiedItem);
           }
         });
-
       });
-//      console.log("转换后交易所数据：");
+      //      console.log("转换后交易所数据：");
-//      console.log(this.tableData);
+      //      console.log(this.tableData);
     },
   },
 };
@@ -100,9 +98,11 @@ export default {
 <style scoped>
 .table-container {
   width: 100%;
+  height: 100%;
   border-radius: 5px;
   overflow: hidden;
-  padding-top: 10px; /* 添加顶部内边距 */
+  display: flex;
+  flex-direction: column;
 }
 
 table {
@@ -111,20 +111,31 @@ table {
   text-align: left;
 }
 
-th, td {
+th,
-  padding: 12px;
+td {
-  color: #333333;
+  padding: 10px 12px;
+  color: #334155;
+  font-family: "PingFang SC";
+  font-weight: 400;
   font-size: 14px;
+  line-height: 17px;
   width: 25%;
 }
 
-thead {
+td:first-child {
-  background: #f5f7fa;
+  width: 36%;
-  padding: 10%;
+}
+
+thead th {
+  color: #059669;
+  font-family: "PingFang SC";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 17px;
 }
 
 .scroll-wrapper {
-  height: 250px; /* 适配大屏，数据较多可增加高度 */
+  flex: 1;
   overflow: hidden;
 }
 
@@ -133,10 +144,5 @@ thead {
 }
 
 tr {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-tr:nth-child(even) {
-  background: rgba(25, 118, 210, 0.05);
 }
 </style>

src/views/indexs/right-top-day.vue

@@ -5,10 +5,10 @@
       <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: 19%">当日用氢量</th>
+          <th style="width: 19%">日用氢量</th>
-          <th style="width: 19%">当日碳减排</th>
+          <th style="width: 19%">日碳减排</th>
         </tr>
       </thead>
     </table>
@@ -174,15 +174,18 @@ export default {
 <style scoped>
 .table-container {
   width: 100%;
+  height: 100%;
   border-radius: 5px;
   overflow: hidden;
-  padding-top: 10px; /* 添加顶部内边距 */
+  display: flex;
+  flex-direction: column;
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
-  text-align: center; /* 修改为居中对齐 */
+  text-align: center;
+  table-layout: fixed; /* 固定表格布局，确保列宽一致 */
 }
 
 th,
@@ -190,21 +193,41 @@ td {
   padding: 12px;
   color: #2d3748;
   font-size: 14px;
+  border-right: 1px solid rgba(0, 212, 170, 0.2);
+  border: none;
+  text-align: center;
+}
+
+/* 统一列宽 */
+th:nth-child(1),
+td:nth-child(1) {
   width: 24%;
-  border-right: 1px solid rgba(79, 209, 197, 0.2);
+}
+
+th:nth-child(2),
+td:nth-child(2),
+th:nth-child(3),
+td:nth-child(3),
+th:nth-child(4),
+td:nth-child(4),
+th:nth-child(5),
+td:nth-child(5) {
+  width: 19%;
 }
 
 th {
-  color: #000;
+  color: #94a3b8;
-  font-weight: 600;
+  font-family: "PingFang SC";
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-weight: 500;
-}
-td {
-  padding: 10px 12px;
-  color: #000;
   font-size: 14px;
-  width: 20%;
+  padding: 12px;
-  text-align: center; /* 确保单元格内容居中 */
+}
+
+td {
+  color: #1e293b;
+  font-family: "PingFang TC";
+  font-weight: 500;
+  font-size: 12px;
 }
 
 thead {
@@ -235,8 +258,8 @@ thead {
   text-align: center; /* 确保单元格内容居中 */
 }
 .closeButton {
-  color: #4fd1c5;
+  color: #ffffff;
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  background: linear-gradient(135deg, #00d4aa 0%, #1de9b6 100%);
   border: none;
   border-radius: 6px;
   font-weight: 600;
@@ -244,9 +267,9 @@ thead {
 }
 
 .closeButton:hover {
-  background: linear-gradient(135deg, #3bb2ff 0%, #00d4ff 100%);
+  background: linear-gradient(135deg, #00bfa5 0%, #00d4aa 100%);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(79, 209, 197, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
 }
 /* 内容容器滚动设置 */
 .dialog-body-wrapper {
@@ -267,7 +290,7 @@ thead {
   );
   border-radius: 12px;
   backdrop-filter: blur(20px);
-  box-shadow: 0 8px 32px rgba(79, 209, 197, 0.15);
+  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.15);
 }
 
 .dialog_el .el-table {
@@ -277,7 +300,7 @@ thead {
 }
 
 .dialog_el .el-table th {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
+  background: linear-gradient(135deg, #00d4aa 0%, #1de9b6 100%) !important;
   color: #ffffff !important;
   font-weight: 600 !important;
 }
@@ -285,11 +308,11 @@ thead {
 .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;
+  border-bottom: 1px solid rgba(0, 212, 170, 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;
+  background-color: rgba(0, 212, 170, 0.1) !important;
 }
 /* .dialog-table{
   background-color: #ffffff;
@@ -308,29 +331,34 @@ thead {
   background-color: rgba(255,255,255,0.8);
 } */
 .scroll-wrapper {
-  height: 550px; /*适配大屏，数据较多可增加高度 */
+  flex: 1;
   overflow: hidden;
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.5);
-  background: rgba(255, 255, 255, 0.8);
+}
-  backdrop-filter: blur(10px);
+
+.scroll-container {
+  height: 100%;
+  overflow: hidden;
 }
 
 .scroll-container table {
   width: 100%;
+  table-layout: fixed; /* 确保与表头布局一致 */
 }
 
 tr {
-  border-bottom: 1px solid rgba(79, 209, 197, 0.1);
+  border-bottom: 1px solid rgba(0, 212, 170, 0.1);
   transition: all 0.2s ease;
+  border: none;
 }
 
 tr:nth-child(even) {
-  background: rgba(79, 209, 197, 0.05);
+  background: rgba(0, 212, 170, 0.05);
 }
 
-tr:hover {
+/* tr:hover {
-  background: rgba(79, 209, 197, 0.1);
+  background: rgba(0, 212, 170, 0.1);
   transform: translateX(2px);
-}
+} */
 </style>