适配修改

src/components/chart/card.vue

@@ -82,7 +82,7 @@ export default {
     .tit{
       padding: 2% 0 0 4.1%;
       box-sizing: border-box;
-      font-size: 18px;
+      font-size: .18rem;
       color: #F3F3F3;
     }
   }

src/components/chart/chart210323/monthIncome.vue

@@ -44,13 +44,13 @@ export default {
           z: 10,
           axisLabel: {
             show: true,
-            fontSize: 12,
+            fontSize: 10,
             interval: 0,
             formatter: function (value) {
               const fIndex = _this.data.projectName.findIndex(item => {
                 return item === value
               })
-              return fIndex === 0 ? '' : `${value}（${(_this.data.data[fIndex].value / 10000).toFixed(2)}万）`
+              return fIndex === 0 ? '' : `${value} (${(_this.data.data[fIndex].value / 10000).toFixed(2)}万)`
             }
           },
           axisLine: {

src/components/chart/chart210323/nowApply.vue

@@ -79,17 +79,17 @@ export default {
 .nav-title-apply{
   display: flex;
   div{
-    line-height: 39px;
+    line-height: .39rem;
     color: #34A6D2;
     text-align: center;
     width: 20%;
-    height: 39px;
-    font-size: 14px;
+    height: .39rem;
+    font-size: .14rem;
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
     span{
-      font-size: 12px;
+      font-size: .12rem;
     }
   }
   border-bottom: 1px solid rgba(52, 166, 210, .4);
@@ -97,14 +97,14 @@ export default {
 .apply-content{
   li{
     display: flex;
-    height: 39px;
+    height: .39rem;
     border-bottom: 1px solid rgba(52, 166, 210, .4);
     div{
       width: 20%;
-      line-height: 39px;
+      line-height: .39rem;
       color: #fff;
       text-align: center;
-      font-size: 16px;
+      font-size: .16rem;
       span{
         width: 40%;
         display: block;

src/components/chart/chart210323/nowIncome.vue

@@ -129,7 +129,7 @@ export default {
 }
 .nav-title{
   display: flex;
-  font-size: 16px;
+  font-size: .16rem;
   color: #34A6D2;
   padding-top: 2%;
   justify-content: space-between;

src/components/chart/chart210323/nowIncome2.vue

@@ -131,7 +131,7 @@ export default {
 }
 .nav-title{
   display: flex;
-  font-size: 16px;
+  font-size: .16rem;
   color: #34A6D2;
   padding-top: 2%;
   justify-content: space-between;
@@ -176,6 +176,7 @@ export default {
         }
       }
       div{
+        font-size: .14rem;
         color: #E59700;
         text-align: center;
         &:nth-child(1){

src/components/chart/chart210323/yearIncome.vue

@@ -121,14 +121,14 @@ export default {
   // align-items: center;
   .tips-box{
     padding-top: 5%;
-    transform: translateX(-20px);
+    transform: translateX(-.2rem);
     li{
-      width: 142px;
+      width: 1.42rem;
       display: flex;
-      margin-bottom: 10px;
+      margin-bottom: .1rem;
       .block{
-        width: 13px;
-        height: 13px;
+        width: .13rem;
+        height: .13rem;
         &.col-Sofia{
           background: rgba(252, 101, 75, 1);
         }
@@ -146,15 +146,15 @@ export default {
         }
       }
       .project-name{
-        font-size: 12px;
+        font-size: .12rem;
         color: #F3F3F3;
-        line-height: 13px;
-        margin-left: 12px;
+        line-height: .13rem;
+        margin-left: .12rem;
       }
       .num{
-        font-size: 14px;
+        font-size: .14rem;
         color: #F3F3F3;
-        line-height: 13px;
+        line-height: .13rem;
         margin-left: auto;
       }
     }
@@ -166,5 +166,6 @@ export default {
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
+  font-size: .14rem;
 }
 </style>

src/components/chart/chart210323/yearRankingApply.vue

@@ -63,30 +63,30 @@ export default {
     justify-content: center;
     .name{
       width: 18%;
-      font-size: 12px;
+      font-size: .14rem;
       color: #0A7199;
-      line-height: 12px;
+      line-height: .12rem;
     }
     .progress-box{
       width: 95%;
-      height: 12px;
+      height: .12rem;
       // border: 1px solid #0A7199;
       border-radius: 5px;
       box-sizing: border-box;
       .block{
         width: 50%;
-        height: 8px;
+        height: .08rem;
         background: rgba(52, 166, 210, 1);
         border-radius: 3px;
-        margin: 1px 0;
+        margin: .01rem 0;
       }
     }
     .num{
       width: 18%;
       text-align: right;
-      font-size: 14px;
+      font-size: .14rem;
       color: #E59700;
-      line-height: 12px;
+      line-height: .12rem;
     }
   }
 }

src/index.html

@@ -13,6 +13,18 @@
   <!-- <meta http-equiv="Expires" content="0" /> -->
   <title>标题</title>
   <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
+  <script>
+    var oHtml = document.getElementsByTagName('html')[0];
+    function setFontSize() {
+      let width1 = oHtml.clientWidth;
+      // 320px的屏幕基准像素为12px
+      oHtml.style.fontSize = 100 * (width1 / 1920) + "px";
+    }
+    setFontSize();
+    window.onresize=function () {
+      setFontSize();
+    }
+  </script>
 </head>
 <body>
   <div id="app"></div>

src/pages/chart/chart-210323.vue

@@ -206,14 +206,15 @@ export default {
     z-index: 9;
     max-width: 1920px;
     width: 100%;
-    height: 96px;
+    height: .96rem;
+    // padding: 2% 0;
     background: url(https://zws-imgs-pub.ezijing.com/static/public/4d17cfb3f6d4afec61a026d18b190ccf.png) center;
     background-size: 100% 100%;
     text-align: center;
-    font-size: 36px;
+    font-size: .36rem;
     font-weight: bold;
     color: #F3F3F3;
-    line-height: 70px;
+    line-height: .7rem;
   }
   .chart-content{
     width: 100%;
@@ -344,20 +345,20 @@ export default {
         .name{
           width: 100%;
           text-align: center;
-          font-size: 18px;
+          font-size: .18rem;
           font-weight: bold;
           color: #F3F3F3;
-          margin-top: 30px;
+          margin-top: .6rem;
         }
         .num{
           width: 100%;
           text-align: center;
-          font-size: 36px;
+          font-size: .36rem;
           // font-weight: bold;
           color: #03FDF0;
-          padding-top: 5px;
+          padding-top: .2rem;
           span{
-            font-size: 18px;
+            font-size: .18rem;
           }
         }
       }
@@ -439,9 +440,9 @@ export default {
   position: absolute;
   top: 2%;
   right: 2%;
-  font-size: 16px;
+  font-size: .16rem;
   font-weight: bold;
   color: #FFFFFF;
-  line-height: 27px;
+  line-height: .27rem;
 }
 </style>