feats

resources/static/less/chart-card.less

@@ -5,7 +5,86 @@
 .chart-page {
   width: 100%;
   height: 100%;
+  overflow-y: auto;
   background: @chart-card-bg;
+
+  .flex-part {
+    display: flex;
+    justify-content: space-between;
+
+    .flex-part-3 {
+      flex: 3;
+    }
+
+    .flex-part-2 {
+      flex: 3;
+    }
+
+    .flex-part-1 {
+      flex: 1;
+    }
+  }
+
+  .count {
+    border-radius: 20px;
+    
+    dl {
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+      padding-left: 150px;
+
+      dt, dd {
+        padding: 0;
+      }
+
+      img {
+        position: absolute;
+        display: block;
+        top: 24px;
+        left: 30px;
+        width: 88px;
+        height: 88px;
+      }
+
+      &::before,&::after {
+        content: "";
+        position: absolute;
+        background: #FFFFFF;
+        opacity: 0.1;
+        border-radius: 50%;
+        font-size: 0;
+      }
+
+      &::before {
+        width: 166px;
+        height: 140px;
+        left: calc(100% - 88px);
+        top: -40px;
+      }
+      
+      &::after {
+        width: 281px;
+        height: 177px;
+        border-radius: 50%;
+        left: calc(100% - 160px);
+        top: 81px;
+      }
+
+      &:nth-child(1) {
+        background: linear-gradient(90deg, #3886D6, #003789);
+      }
+      &:nth-child(2) {
+        background: linear-gradient(90deg, #29A0B1, #3C1A63);
+      }
+      &:nth-child(3) {
+        background: linear-gradient(90deg, #1570AB, #343894);
+      }
+      &:nth-child(4) {
+        background: linear-gradient(90deg, #2788B6, #083A8C);
+      }
+    }
+  }
 }
 
 .chart-card {
@@ -22,9 +101,22 @@
 
   &.panel {
     .panel-heading {
+      position: relative;
       box-sizing: border-box;
       padding: 1em 1em 0 1em;
 
+      .selectGroup {
+        position: absolute;
+        top: 1em;
+        right: 1em;
+
+        select {
+          background: transparent;
+          border: 0;
+          color: #FFFFFF;
+        }
+      }
+
       img {
         width: 28px;
         height: 28px;
@@ -36,15 +128,50 @@
         font-size: 22px;
         font-weight: 500;
         color: transparent;
-        background-clip: text;
         background-image: linear-gradient(0deg, #6F39B9 0%, #1EAED1 100%);
         vertical-align: middle;
+        background-clip: text;
+        -webkit-background-clip: text;
       }
     }
 
     .panel-body {
       padding: 0;
       background: @chart-card-bg;
+
+      .info-list {
+        li {
+          color: rgba(255,255,255, .6);
+          background: transparent;
+          height: 45px;
+          line-height: 45px;
+          font-size: 16px;
+          padding: 0 1em;
+          margin: 0 1em;
+          width: calc(100% - 2em);
+          box-sizing: border-box;
+
+          span {
+            color: #fff;
+          }
+
+          &:nth-child(odd) {
+            color: #fff;
+            background-color: rgba(255,255,255, .05);
+          }
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background-color: rgba(255,255,255, .5);
+            vertical-align: middle;
+            margin-right: 1em;
+          }
+        }
+      }
     }
   }
 

resources/static/less/nav-menu.less

@@ -21,17 +21,17 @@
       border-bottom: 4px solid rgba(0,0,0,0); // 占位
     }
 
-    & + .nav-menu-item {
-      &::before {
-        content: '';
-        height: .8em;
-        border-left: 2px solid #547EF5;
-        transform: rotate(20deg);
-        display: block;
-        position: absolute;
-        top: calc(50% - 0.4em);
-      }
-    }
+    // & + .nav-menu-item {
+    //   &::before {
+    //     content: '';
+    //     height: .8em;
+    //     border-left: 2px solid #547EF5;
+    //     transform: rotate(20deg);
+    //     display: block;
+    //     position: absolute;
+    //     top: calc(50% - 0.4em);
+    //   }
+    // }
 
     span {
       font-size: 20px;
@@ -41,8 +41,20 @@
     &.active {
 
       div {
+        position: relative;
         border-bottom: 4px solid #3CBAF5;
-        background: linear-gradient(rgba(36, 103, 176, 0), rgba(36, 103, 176, 1));
+        // background: linear-gradient(rgba(36, 103, 176, 0), rgba(36, 103, 176, 1));
+
+        &::after {
+          content: "";
+          width: 0;
+          height: 0;
+          border: 8px solid transparent;
+          border-bottom-color: #3CBAF5;
+          position: absolute;
+          left: calc(50% - 8px);
+          bottom: 0;
+        }
       }
 
       span {