perf: overview字体分辨率适配

nezha-fronted/index.html

@@ -13,6 +13,26 @@
       padding: 0;
       font-family: NotoSans;
     }
+    @media only screen and (min-width: 10px) and (min-height: 10px){
+      html {
+        font-size: 10px;
+      }
+    }
+    @media only screen and (min-width: 1020px) and (min-height: 560px){
+      html {
+        font-size: 12px;
+      }
+    }
+    @media only screen and (min-width: 1360px) and (min-height: 650px){
+      html {
+        font-size: 14px;
+      }
+    }
+    @media only screen and (min-width: 1700px) and (min-height: 800px){
+      html {
+        font-size: 16px;
+      }
+    }
   </style>
 </head>
 

nezha-fronted/src/components/page/dashboard/overview/overview2.scss

@@ -41,8 +41,8 @@
   line-height: 1.1rem;
 }
 .date .sys-date{
-  font-size: .75rem;
+  font-size: 0.75rem;
-  line-height: 0.5rem;
+  line-height: 0.75rem;
 }
 .tool-container .operation{
   flex: 2;
@@ -115,23 +115,9 @@
     .el-input__suffix i {
       color: #606266;
     }
-    .el-tag {
-      background-color: #efefef;
-      height: 100%;
-      line-height: 1.6rem;
-      margin: 0;
-      border: none;
-      padding-left: 2px;
-      font-size: 0.85rem;
-      color: #606266;
-      max-width: calc(100% - 25px);
-    }
     .el-cascader__tags {
       display: none;
     }
-    .el-tag:last-of-type:not(first-of-type) {
-      padding-right: 0;
-    }
     .el-input {
       height: 100%;
       line-height: 1.6rem;
@@ -152,9 +138,15 @@
       position: absolute;
       left: 0;
       top: 0;
+      font-size: 1rem;
     }
   }
 }
+.trend-cascader {
+  .el-cascader-panel {
+    font-size: 0.85rem;
+  }
+}
 .no-data-tip {
   position: absolute;
   left: 50%;
@@ -225,10 +217,29 @@
   font-style: italic;
 }
 .content-col-content-num {
-  font-size: 3.2rem;
   font-weight: bold;
   color: #333;
 }
+@media only screen and (min-width: 10px) and (min-height: 10px){
+  .content-col-content-num {
+    font-size: 1.6rem;
+  }
+}
+@media only screen and (min-width: 1020px) and (min-height: 560px){
+  .content-col-content-num {
+    font-size: 1.6rem;
+  }
+}
+@media only screen and (min-width: 1360px) and (min-height: 650px){
+  .content-col-content-num {
+    font-size: 2.1rem;
+  }
+}
+@media only screen and (min-width: 1700px) and (min-height: 800px){
+  .content-col-content-num {
+    font-size: 2.8rem;
+  }
+}
 .hide-div {
   visibility: hidden;
 }

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -69,7 +69,7 @@
             <div class="content-col-box">
               <div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
               <div class="content-col-content" v-loading="alertMessageLoading">
-                <div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup></div>
+                <div class="content-col-content-num"><vue-countup :start-value="0" :end-value="9999999"></vue-countup></div>
                 <span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
                 <span>{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
               </div>