样式修改

period-report/report-ioc.css

@@ -515,13 +515,13 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
   left: 0;
 }
 .chart-desc-other {
-  width: 175px !important;
+  width: 172px !important;
   height: 18px;
 }
 .chart-desc-task {
   position: relative;
   display: flex;
-  margin-top: 10px;
+  margin-top: 26px;
   width: 160px;
 }
 .chart-desc-text {
@@ -611,8 +611,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
   height: 100px;
   position: relative;
   margin-left: 4px;
+  margin-right: 3px;
   /* background-size: cover; */
 }
+.contract-chart-first {
+  margin-left: 16px !important;
+  margin-right: 3px;
+}
+.contract-title-first {
+  width: 130px;
+  text-align: center;
+}
 .contract-chart img {
   width: 145px;
   height: 145px;
@@ -670,9 +679,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
 }
 .repair-require-info-text {
   color: #fff;
-  margin-left: 8px;
+  /* margin-left: 8px; */
+  /* margin: 0 auto; */
+  display: flex;
+  justify-content: center;
 }
-.repair-require-info-text span {
+.repair-require-info-text > div:first-child {
   font-weight: 700;
   font-size: 18px;
   text-align: center;
@@ -680,10 +692,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
 }
 .electricity-info-text {
   color: #ff6464;
-  margin-left: 8px;
+  /* margin-left: 8px; */
   display: flex;
+  /* margin: 0 auto; */
+  justify-content: center;
 }
-.electricity-info-text div {
+.electricity-info-text > div:first-child {
   font-weight: 700;
   font-size: 18px;
   text-align: center;

period-report/report-ioc.html

@@ -284,12 +284,14 @@
           <div class="top-right"></div>
           <div class="bottom-left"></div>
           <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title contract-title">
+          <div
+            class="operator-wrapper-content-box-title contract-title contract-title-first"
+          >
             合同
           </div>
 
           <div class="operator-wrapper-content-box-chart">
-            <div class="pie-chart-area contract-chart">
+            <div class="pie-chart-area contract-chart contract-chart-first">
               <img src="./assets/contract-bg.png" />
               <div id="contract" class="contract-chart-wrapper"></div>
             </div>
@@ -328,7 +330,10 @@
           <div class="operator-wrapper-content-box-progress">
             <div class="pie-chart-area repair-require-info">
               <img src="./assets/repair-requir-icon.png" />
-              <div class="repair-require-info-text"><span>389</span>个</div>
+              <div class="repair-require-info-text">
+                <div>389</div>
+                <div>个</div>
+              </div>
             </div>
             <div class="chart-desc">
               <div class="chart-data">
@@ -379,7 +384,7 @@
               <img src="./assets/electricity-icon.png" />
               <div class="electricity-info-text">
                 <div>3.09</div>
-                万元
+                <div>万元</div>
               </div>
             </div>
             <div class="chart-desc">

period-report/report.css

@@ -126,7 +126,7 @@
   }
   .contract-title {
     /* width: 140px; */
-    width: 6.5rem;
+    width: 7rem;
     text-align: center;
   }
   .repair-title-2 {
@@ -407,6 +407,7 @@
     font-size: 1.21rem;
     font-family: DIN Alternate-Bold;
     margin-left: 0.5rem;
+    margin-top: -0.1rem;
   }
   .chart-data {
     width: 10rem;
@@ -696,7 +697,7 @@
     height: 18px;
   }
   .chart-desc-other {
-    width: 175px !important;
+    width: 172px !important;
     height: 18px;
   }
   .chart-desc-task {
@@ -778,6 +779,7 @@
   }
   .electricity-info-text span {
     font-size: 18px;
+    margin-top: -4px;
   }
   .chart-data {
     width: 180px;
@@ -940,6 +942,10 @@
     width: 160px;
     text-align: center;
   }
+  .contract-title-first {
+    width: 200px;
+    text-align: center;
+  }
   .repair-title-2 {
     width: 150px;
     text-align: center;
@@ -1123,6 +1129,9 @@
     top: -30px;
     left: -30px;
   }
+  .contract-chart-first {
+    margin-left: 20px !important;
+  }
   .contract-chart-wrapper {
     width: 160px;
     height: 160px;
@@ -1146,6 +1155,7 @@
   }
   .electricity-info-text span {
     font-size: 34px;
+    margin-top: -4px;
   }
   .chart-data {
     width: 260px;

period-report/report.html

@@ -288,7 +288,9 @@
           <div class="top-right"></div>
           <div class="bottom-left"></div>
           <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title contract-title">
+          <div
+            class="operator-wrapper-content-box-title contract-title contract-title-first"
+          >
             合同
           </div>
 
@@ -296,7 +298,7 @@
             <!-- <div class="pie-chart-area contract-chart">
               <div id="contract" class="contract-chart-wrapper"></div>
             </div> -->
-            <div class="pie-chart-area contract-chart">
+            <div class="pie-chart-area contract-chart contract-chart-first">
               <img src="./assets/contract-bg.png" />
               <div id="contract" class="contract-chart-wrapper"></div>
             </div>