首页优化

src/assets/css/screen.scss

@@ -37,6 +37,7 @@
 }
 .wrap {
   width: 100%;
+  min-height: calc(100vh - 61px);
   padding-top: 30px;
   color:#333;
   background: url('../../assets/img/screen/screen1.jpg') no-repeat;
@@ -368,7 +369,7 @@
 }
 .data_content .data_main .main_left>div{
   width: 100%;
-  height: 280px;
+  height: 340px;
   box-sizing: border-box;
   border: 1px solid #2C58A6;
   position: relative;
@@ -399,7 +400,9 @@
     margin-right: 10px;
   }
 }
-
+.chart {
+  height: 330px;
+}
 .data_content .data_main .main_center{
   width: 52%;
   height: 610px;
@@ -407,10 +410,8 @@
 }
 .data_content .data_main .main_center .center_text{
   width: calc(100% - 50px);
-  height: 350px;
-  margin-left: 25px;
-  margin-right: 25px;
-  box-sizing: border-box;
+  height: 340px;
+  margin: 0 25px 50px;
   border: 1px solid #2C58A6;
   box-shadow: 0px 0px 6px #2C58A6;
   position: relative;
@@ -479,7 +480,7 @@
 }
 .data_content .data_main .main_right>div{
   width: 100%;
-  height: 280px;
+  height: 340px;
   box-sizing: border-box;
   border: 1px solid #2C58A6;
   position: relative;

src/components/page/HomePage.vue

@@ -29,7 +29,7 @@
                   <img src="@/assets/img/screen/t_1.png" alt="">
                 今日新增业务申请数量 {{allApply}}
               </div>
-              <div ref="topCookieChart" style="min-height:240px;width:100%"></div>
+              <div class="chart" ref="topCookieChart"></div>
             </div>
             <div class="left_2" style="cursor: pointer;">
                 <div class="t_line_box">
@@ -56,7 +56,7 @@
             </div>
           </div>
           <div class="main_center fl">
-            <div class="center_text" style="position: relative;margin-bottom: 25px;">
+            <div class="center_text">
                 <!--左上边框-->
                 <div class="t_line_box">
                     <i class="t_l_line"></i> 
@@ -81,9 +81,9 @@
                     <img src="@/assets/img/screen/t_3.png" alt="">
                     {{ month+'月新增业务数量趋势图' }}
                 </div>
-                <div ref="newApplyChart" style="min-height:340px;width:100%"></div>
+                <div class="chart" ref="newApplyChart"></div>
             </div>
-            <div class="center_text" style="position: relative;height: 232px">
+            <div class="center_text">
                 <!--左上边框-->
                 <div class="t_line_box">
                     <i class="t_l_line"></i> 
@@ -176,7 +176,7 @@
                     <img src="@/assets/img/screen/t_4.png" alt="">
                     今日访问次数
                 </div>
-                <div ref="bottomCookieChart" style="min-height:270px"></div>
+                <div class="chart" ref="bottomCookieChart"></div>
             </div>
             <div class="right_2">
                 <!--左上边框-->
@@ -203,7 +203,7 @@
                     <img src="@/assets/img/screen/t_5.png" alt="">
                     登录用户趋势图
                 </div>
-                <div ref="loginUserChart" style="min-height:270px"></div>
+                <div class="chart" ref="loginUserChart"></div>
             </div>
           </div>
         </div>
@@ -415,7 +415,7 @@ export default {
                         name: '申请业务数量',
                         type: 'pie',
                         radius: '50%',
-                        center: ['50%', '60%'],
+                        center: ['50%', '53%'],
                         legendHoverLink:true,
                         hoverAnimation:true,
                         data: [
@@ -561,14 +561,26 @@ export default {
             if (chart) {
                 const myChart = this.$echarts.init(chart)
                 const option = {
-                    // backgroundColor: '#fff',
                     title: {
+                        text:this.countSum,
+                        right:"center",
+                        top:"60%",
+                        textStyle:{
+                            color: 'rgba(32, 186, 211, 1)',
+                            fontSize: 40,
+                            align:"center"
+                        }
+                    },
+                    graphic:{
+                        type:"text",
+                        left:"center",
+                        top:"50%",
+                        style:{
                             text: '今日访问次数',
-                        top: '11%',
-                        left: 'center',
-                        textStyle: {
-                          color: '#fff',
-                          fontSize: '16'
+                            textAlign:"center",
+                            fill: 'rgba(177, 79, 211, .7)',
+                            fontSize: 18,
+                            fontWeight:700
                         }
                     },
                     tooltip: {