2026新UI

2026-01-28 17:54:51 +08:00
parent 667006bb89
commit daa9749c96
24 changed files with 1443 additions and 1048 deletions
--- a/src/views/indexs/center-map.vue
+++ b/src/views/indexs/center-map.vue
@@ -7,41 +7,40 @@
 -->
 <template>
  <div class="centermap">
-    <div class="maptitle">
-      <div class="zuo"></div>
+    <!-- <div class="maptitle">
      <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="quanguo" @click="getData('china')" v-if="code !== 'china'">
+      <div class="map-card">
+        <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>
-
-        <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",
-              // "#5cb3cc",
-              // "#8abcd1",
-              // "#66a9c9",
-              // "#2f90b9",
-              // "#1781b5",
-              "#6EC3F7",
-              "#2196F3",
-              "#1565C0",
-              "#0D47A1",
+              "#a7f3d0",
+              "#6ee7b7",
+              "#34d399",
+              "#10b981",
+              "#059669",
+              "#047857",
            ],
          },
          textStyle: {
@@ -437,12 +432,12 @@ export default {

            type: "scatter",
            coordinateSystem: "geo",
-            symbol:
-              "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
-            symbolSize: function (val) {
-              return 20;
-              // return val[2] / 50;
-            },
+            // symbol:
+            //   "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
+            // symbolSize: function (val) {
+            //   return 20;
+            //   // 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",
-              // "#5cb3cc",
-              // "#8abcd1",
-              // "#66a9c9",
-              // "#2f90b9",
-              // "#1781b5",
-              "#6EC3F7",
-              "#2196F3",
-              "#1565C0",
-              "#0D47A1",
+              "#a7f3d0",
+              "#6ee7b7",
+              "#34d399",
+              "#10b981",
+              "#059669",
+              "#047857",
            ],
          },
          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;
-    box-sizing: border-box;
+    align-items: center;
+    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-weight: 900;
-      letter-spacing: 6px;
+      font-size: 28px;
+      font-weight: 700;
+      letter-spacing: 2px;
      background: linear-gradient(
        92deg,
-        #0072ff 0%,
-        #00eaff 48.8525390625%,
-        #01aaff 100%
+        #00d4aa 0%,
+        #1de9b6 48.8525390625%,
+        #00bfa5 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
-      margin: 0 10px;
+      margin: 0 8px;
    }
    .titletextBefore {
-      font-size: 28px;
-      font-weight: 900;
-      letter-spacing: 6px;
-      color: #333333;
-      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;
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      color: #666666;
    }
  }

  .mapwrap {
-    height: 548px;
+    flex: 1;
    width: 100%;
-    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

-    .quanguo {
-      position: absolute;
-      right: 20px;
-      top: -46px;
-      width: 80px;
-      height: 28px;
-      border: 1px solid #1976d2;
-      border-radius: 10px;
-      color: #1976d2;
-      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);
+    .map-card {
+      width: 100%;
+      height: 100%;
+      background: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      padding: 16px;
+      box-sizing: border-box;
+      position: relative;
    }

    .quanguo1 {
      position: absolute;
      right: 20px;
-      top: 24px;
-      width: 100px;
-      height: 28px;
-      border: 1px solid #1976d2;
-      border-radius: 10px;
-      color: #333333;
-      text-align: center;
-      line-height: 26px;
-      letter-spacing: 6px;
+      top: 16px;
+      padding: 6px 16px;
+      border-radius: 8px;
+      border: 1px solid #a7f3d0;
+      box-sizing: border-box;
+      background: #d1fae5;
      cursor: pointer;
-      box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
-        0 0 6px rgba(25, 118, 210, 0.2);
-      font-family: "微软雅黑", sans-serif;
-      z-index: 9999;
+      z-index: 999;
+      text-align: center;
+      color: #047857;
+      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;
-      width: 100px;
-      height: 28px;
-      border: 1px solid #1976d2;
-      border-radius: 10px;
-      color: #333333;
+      top: 16px;
+      border-radius: 6px;
+      color: #1e293b;
+      display: flex;
+      align-items: center;
+      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),
-        0 0 6px rgba(25, 118, 210, 0.2);
-      font-family: "微软雅黑", sans-serif;
-      z-index: 9999;
+      z-index: 999;
+      .btn {
+        width: 102px;
+        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;
-      width: 100px;
-      height: 28px;
-      border: 1px solid #1976d2;
-      border-radius: 10px;
+      top: 52px;
+      padding: 6px 16px;
+      background: #ffffff;
+      border: 1px solid #00d4aa;
+      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),
-        0 0 6px rgba(25, 118, 210, 0.2);
-      font-family: "微软雅黑", sans-serif;
-      z-index: 9999;
+      transition: all 0.3s ease;
+      z-index: 999;
+
+      &:hover {
+        background: rgba(0, 212, 170, 0.1);
+      }
    }
  }
 }