feat: optimize screen2 chart styles

src/components/mCountCard/index.vue

@@ -263,6 +263,131 @@ onBeforeUnmount(() => {
     &.icon-zongxiaoliang {
       background-image: url("~@/assets/images/icon2.png");
     }
+
+    &.icon-area,
+    &.icon-town,
+    &.icon-yield,
+    &.icon-rate,
+    &.icon-stack,
+    &.icon-leaf,
+    &.icon-risk {
+      border: 1px solid rgba(48, 220, 255, 0.26);
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 50% 50%, rgba(36, 246, 196, 0.2), rgba(48, 220, 255, 0.08) 54%, rgba(48, 220, 255, 0.02) 56%),
+        linear-gradient(135deg, rgba(48, 220, 255, 0.16), rgba(36, 246, 196, 0.08));
+      box-shadow:
+        inset 0 0 0 1px rgba(48, 220, 255, 0.08),
+        0 0 12px rgba(48, 220, 255, 0.24);
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        pointer-events: none;
+      }
+
+      &::before {
+        left: 11px;
+        top: 11px;
+        width: 20px;
+        height: 20px;
+        background: #30dcff;
+        box-shadow: 0 0 10px rgba(48, 220, 255, 0.42);
+      }
+
+      &::after {
+        left: 7px;
+        top: 7px;
+        width: 26px;
+        height: 26px;
+        border: 1px solid rgba(36, 246, 196, 0.28);
+        border-radius: 50%;
+      }
+    }
+
+    &.icon-area::before {
+      border: 2px solid #24f6c4;
+      border-radius: 4px;
+      background: transparent;
+      clip-path: polygon(0 16%, 100% 0, 84% 100%, 0 82%);
+    }
+
+    &.icon-town::before {
+      left: 10px;
+      top: 12px;
+      width: 22px;
+      height: 18px;
+      background: #24f6c4;
+      clip-path: polygon(0 100%, 0 45%, 22% 45%, 22% 22%, 48% 22%, 48% 0, 86% 0, 86% 100%);
+    }
+
+    &.icon-yield::before,
+    &.icon-leaf::before {
+      left: 13px;
+      top: 8px;
+      width: 17px;
+      height: 24px;
+      border-radius: 16px 2px 16px 2px;
+      background: #24f6c4;
+      transform: rotate(-28deg);
+    }
+
+    &.icon-yield::after,
+    &.icon-leaf::after {
+      left: 20px;
+      top: 19px;
+      width: 2px;
+      height: 13px;
+      border: 0;
+      border-radius: 0;
+      background: rgba(255, 224, 107, 0.88);
+      transform: rotate(20deg);
+    }
+
+    &.icon-rate::before {
+      left: 10px;
+      top: 20px;
+      width: 22px;
+      height: 12px;
+      background: transparent;
+      border-left: 3px solid #24f6c4;
+      border-bottom: 3px solid #24f6c4;
+      transform: skew(-18deg) rotate(-45deg);
+    }
+
+    &.icon-stack::before {
+      left: 11px;
+      top: 10px;
+      width: 20px;
+      height: 22px;
+      background:
+        linear-gradient(#24f6c4 0 0) 0 0 / 100% 4px no-repeat,
+        linear-gradient(#30dcff 0 0) 0 8px / 100% 4px no-repeat,
+        linear-gradient(#ffe06b 0 0) 0 16px / 100% 4px no-repeat;
+      box-shadow: none;
+    }
+
+    &.icon-risk::before {
+      left: 11px;
+      top: 9px;
+      width: 20px;
+      height: 22px;
+      background: #ffe06b;
+      clip-path: polygon(50% 0, 100% 88%, 0 88%);
+      box-shadow: 0 0 12px rgba(255, 224, 107, 0.38);
+    }
+
+    &.icon-risk::after {
+      left: 20px;
+      top: 17px;
+      width: 2px;
+      height: 8px;
+      border: 0;
+      border-radius: 0;
+      background: rgba(2, 16, 29, 0.88);
+      box-shadow: 0 10px 0 rgba(2, 16, 29, 0.88);
+    }
   }
   &-title {
     .title-zh {