CN-435 feat: Dashboard--dns 加密dns协议统计图开发

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -345,4 +345,82 @@
       }
     }
   }
+
+  &.cn-chart__single-value--protocol {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+    flex-direction: column;
+    .single-value__content {
+      display: flex;
+      justify-content: center;
+      .content__data {
+        display: flex;
+        flex-direction: column;
+      }
+      .content__data-protocol:nth-of-type(1) {
+        margin-bottom: 50px;
+        span {
+          font-size: 14px;
+          color: #FC8157;
+          font-weight: 500;
+        }
+      }
+      .content__data-protocol:nth-of-type(2) {
+        span {
+          font-size: 14px;
+          color: #FBA342;
+          font-weight: 500;
+        }
+      }
+      .content__data-protocol {
+        display: flex;
+        height: 68px;
+        width: 100%;
+        text-align: center;
+        .content__data-protocol-icon {
+          flex-shrink: 0;
+          display: flex;
+          justify-content: center;
+          width: 68px;
+          height: 100%;
+          line-height: 68px;
+          border-radius: 100%;
+          margin-right: 8px;
+        }
+        .content__data-protocol-value {
+          flex-shrink: 0;
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          text-align: left;
+          margin-right: 20px;
+          .content__data-protocol-value-title {
+            flex-shrink: 0;
+            display: flex;
+            margin-bottom: 7px;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+          }
+          .content__data-protocol-value-num {
+            flex-shrink: 0;
+            display: flex;
+            font-size: 28px;
+            color: #333333;
+            font-weight: 500;
+          }
+        }
+        .content__data-protocol-percent {
+          flex-shrink: 0;
+          display: flex;
+          font-size: 14px;
+          color: #666666;
+          font-weight: 400;
+          line-height: 95px;
+        }
+      }
+    }
+  }
 }

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1647594989129') format('woff2'),
-       url('iconfont.woff?t=1647594989129') format('woff'),
-       url('iconfont.ttf?t=1647594989129') format('truetype');
+  src: url('iconfont.woff2?t=1648624431165') format('woff2'),
+       url('iconfont.woff?t=1648624431165') format('woff'),
+       url('iconfont.ttf?t=1648624431165') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-requests:before {
+  content: "\e76a";
+}
+
+.cn-icon-traffic:before {
+  content: "\e76b";
+}
+
 .cn-icon-domain2:before {
   content: "\e767";
 }