样式修改

c2f1c360 · Tippi.Rao · ae308bca · c2f1c360 · c2f1c360 · c2f1c360
Commit c2f1c360 authored Jun 19, 2023 by Tippi.Rao
--- a/period-report/report-ioc.css
+++ b/period-report/report-ioc.css
@@ -254,7 +254,27 @@ body {
  color: #fff;
  font-size: 16px;
  /* margin-bottom: 10px; */
-  margin-left: 28px;
+  /* margin-left: 28px; */
+}
+.circle-title {
+  width: 125px;
+  text-align: center;
+}
+.repair-title {
+  width: 130px;
+  text-align: center;
+}
+.contract-title {
+  width: 105px;
+  text-align: center;
+}
+.repair-title-2 {
+  width: 90px;
+  text-align: center;
+}
+.ele-title {
+  width: 90px;
+  text-align: center;
 }
 .operator-wrapper-content-box-chart {
  /* width: 472px; */
@@ -312,8 +332,8 @@ body {
  opacity: 0.7;
 }
 .chart-area {
-  width: 102px;
+  width: 90px;
-  height: 102px;
+  height: 90px;
  margin: 12px 10px 14px 19px;
  padding: 14px 14px;
  box-sizing: border-box;
@@ -324,10 +344,12 @@ body {
  font-size: 200px;
  width: 76px;
  height: 76px;
+  /* position: relative; */
-  position: relative;
  /* background-color: #333; */
  background: linear-gradient(#35e5cd, #15e9ee);
+  position: absolute;
+  top: 23px;
+  left: 26px;
 }
 .circle-bar-left,
 .circle-bar-right {
@@ -403,8 +425,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
  font-size: 200px;
  width: 76px;
  height: 76px;
-  position: relative;
+  /* position: relative; */
  background: #f3be28 !important;
+  position: absolute;
+  top: 23px;
+  left: 26px;
 }
 /*所有的后代都水平垂直居中，这样就是同心圆了*/
@@ -514,7 +539,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
  font-family: DIN Alternate-Bold;
 }
 .chart-desc-unfinished {
-  margin-top: 10px;
+  margin-top: 6px;
 }
 .chart-desc-unfinished-value {
  color: #ff6464;
@@ -552,44 +577,54 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
  height: 8px;
 }
 .desc-contract {
-  margin-top: 4px;
+  margin-top: -6px;
 }
 .repair-require-chart {
  /* background: url("./assets/repair-require-bg.png") no-repeat; */
-  width: 115px;
+  /* width: 115px;
-  height: 115px;
+  height: 115px; */
+  width: 100px;
+  height: 100px;
  position: relative;
-  margin-left: 15px;
+  margin-left: 16px;
+  margin-right: 3px;
  /* background-size: cover; */
 }
 .repair-require-chart img {
-  width: 160px;
+  width: 145px;
-  height: 160px;
+  height: 145px;
  position: absolute;
-  top: -23px;
+  top: -22px;
  left: -23px;
 }
 .repair-require-chart-wrapper {
-  width: 115px;
+  /* width: 115px;
-  height: 115px;
+  height: 115px; */
+  width: 100px;
+  height: 100px;
 }
 .contract-chart {
  /* background: url("./assets/contract-bg.png") no-repeat; */
-  width: 115px;
+  /* width: 115px;
-  height: 115px;
+  height: 115px; */
+  width: 100px;
+  height: 100px;
  position: relative;
+  margin-left: 4px;
  /* background-size: cover; */
 }
 .contract-chart img {
-  width: 160px;
+  width: 145px;
-  height: 160px;
+  height: 145px;
  position: absolute;
-  top: -23px;
+  top: -22px;
  left: -23px;
 }
 .contract-chart-wrapper {
-  width: 115px;
+  /* width: 115px;
-  height: 115px;
+  height: 115px; */
+  width: 100px;
+  height: 100px;
 }
 .top-left {
@@ -660,20 +695,20 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
 }
 .chart-data {
  position: relative;
-  margin-top: 20px;
+  margin-top: 10px;
  width: 180px;
  margin-left: 20px;
 }
 .bar-data {
  position: relative;
  margin-left: 20px;
-  margin-top: -20px;
+  margin-top: -26px;
  width: 180px;
 }
 .bar-data-2 {
  position: relative;
  margin-left: 20px;
-  margin-top: 10px;
+  margin-top: 4px;
  width: 180px;
 }
 .chart-data-text {

--- a/period-report/report-ioc.html
+++ b/period-report/report-ioc.html
@@ -148,7 +148,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">秩序维护部</div>
+          <div class="operator-wrapper-content-box-title circle-title">
+            秩序维护部
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="chart-area">
              <div class="circle-bar">
@@ -180,7 +182,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">安防部</div>
+          <div class="operator-wrapper-content-box-title circle-title">
+            安防部
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="chart-area">
              <div class="circle-bar">
@@ -212,7 +216,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">设备告警工单</div>
+          <div class="operator-wrapper-content-box-title circle-title">
+            设备告警工单
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="chart-area">
              <div class="circle-bar-3">
@@ -245,7 +251,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">报事报修</div>
+          <div class="operator-wrapper-content-box-title repair-title">
+            报事报修
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="pie-chart-area repair-require-chart">
              <img src="./assets/repair-require-bg.png" />
@@ -276,7 +284,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">合同</div>
+          <div class="operator-wrapper-content-box-title contract-title">
+            合同
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="pie-chart-area contract-chart">
@@ -297,7 +307,7 @@
                <img src="./assets/desc-line.png" />
              </div>
              <div class="chart-desc-task chart-desc-unfinished">
-                <div class="chart-desc-handle-legend"></div>
+                <div class="will-finished"></div>
                <div class="chart-desc-text">即将到期</div>
                <div class="chart-desc-unfinished-value">7</div>
                <img src="./assets/desc-line.png" />
@@ -311,7 +321,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">报事报修</div>
+          <div class="operator-wrapper-content-box-title repair-title-2">
+            报事报修
+          </div>
          <div class="operator-wrapper-content-box-progress">
            <div class="pie-chart-area repair-require-info">
@@ -358,7 +370,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">水电费单</div>
+          <div class="operator-wrapper-content-box-title ele-title">
+            水电费单
+          </div>
          <div class="electricity-box-progress">
            <div class="pie-chart-area repair-require-info">

--- a/period-report/report.css
+++ b/period-report/report.css
--- a/period-report/report.html
+++ b/period-report/report.html
@@ -123,7 +123,7 @@
          <div class="invest-wrapper-content-second-text">人，客户信息更新</div>
          <span class="invest-wrapper-content-customers">9</span>
          <div class="invest-wrapper-content-last-text">份</div>
-          <!-- <br /> -->
+          <br />
          <!--月报，季报，半年报，年报-->
          <div class="invest-wrapper-content-first-text">去化率</div>
          <span class="invest-wrapper-content-customers">93%</span>
@@ -152,7 +152,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">秩序维护部</div>
+          <div class="operator-wrapper-content-box-title circle-title">
+            秩序维护部
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="chart-area">
              <div class="circle-bar">
@@ -184,7 +186,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">安防部</div>
+          <div class="operator-wrapper-content-box-title circle-title">
+            安防部
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="chart-area">
              <div class="circle-bar">
@@ -216,7 +220,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">设备告警工单</div>
+          <div class="operator-wrapper-content-box-title circle-title">
+            设备告警工单
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="chart-area">
              <div class="circle-bar-3">
@@ -249,7 +255,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">报事报修</div>
+          <div class="operator-wrapper-content-box-title repair-title">
+            报事报修
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <div class="pie-chart-area repair-require-chart">
              <image src="./assets/repair-require-bg.png" />
@@ -280,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">合同</div>
+          <div class="operator-wrapper-content-box-title contract-title">
+            合同
+          </div>
          <div class="operator-wrapper-content-box-chart">
            <!-- <div class="pie-chart-area contract-chart">
@@ -288,22 +298,26 @@
            </div> -->
            <div class="pie-chart-area contract-chart">
              <img src="./assets/contract-bg.png" />
-              <div id="contract" class="repair-require-chart-wrapper"></div>
+              <div id="contract" class="contract-chart-wrapper"></div>
            </div>
-            <div class="chart-desc chart-desc-other">
+            <div class="chart-desc chart-desc-other contract-new">
              <div class="chart-desc-task desc-contract">
                <div class="chart-desc-daily-legend"></div>
                <div class="chart-desc-text">新增合同</div>
                <div class="chart-desc-value">18</div>
                <img src="./assets/desc-line.png" />
              </div>
-              <div class="chart-desc-task chart-desc-unfinished">
+              <div
+                class="chart-desc-task chart-desc-unfinished contract-unfinished"
+              >
                <div class="chart-desc-handle-legend"></div>
                <div class="chart-desc-text">到期合同</div>
                <div class="chart-desc-unfinished-value">5</div>
                <img src="./assets/desc-line.png" />
              </div>
-              <div class="chart-desc-task chart-desc-unfinished">
+              <div
+                class="chart-desc-task chart-desc-unfinished contract-unfinished"
+              >
                <div class="will-finished"></div>
                <div class="chart-desc-text">即将到期</div>
                <div class="chart-desc-unfinished-value">7</div>
@@ -318,7 +332,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">报事报修</div>
+          <div class="operator-wrapper-content-box-title repair-title-2">
+            报事报修
+          </div>
          <div class="operator-wrapper-content-box-progress">
            <div class="pie-chart-area repair-require-info">
@@ -367,7 +383,9 @@
          <div class="top-right"></div>
          <div class="bottom-left"></div>
          <div class="bottom-right"></div> -->
-          <div class="operator-wrapper-content-box-title">水电费单</div>
+          <div class="operator-wrapper-content-box-title ele-title">
+            水电费单
+          </div>
          <div class="electricity-box-progress">
            <div class="pie-chart-area repair-require-info">