Skip to content

R
report-html-template
Commit c2e217e2 by Tippi.Rao
Options

样式修改

parent c2f1c360
正在显示 包含 45 行增加 和 14 行删除
period-report/report-ioc.css
...@@ -515,13 +515,13 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -515,13 +515,13 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
left: 0; left: 0;
} }
.chart-desc-other { .chart-desc-other {
width: 175px !important; width: 172px !important;
height: 18px; height: 18px;
} }
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
display: flex; display: flex;
margin-top: 10px; margin-top: 26px;
width: 160px; width: 160px;
} }
.chart-desc-text { .chart-desc-text {
...@@ -611,8 +611,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -611,8 +611,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
height: 100px; height: 100px;
position: relative; position: relative;
margin-left: 4px; margin-left: 4px;
margin-right: 3px;
/* background-size: cover; */ /* background-size: cover; */
} }
.contract-chart-first {
margin-left: 16px !important;
margin-right: 3px;
}
.contract-title-first {
width: 130px;
text-align: center;
}
.contract-chart img { .contract-chart img {
width: 145px; width: 145px;
height: 145px; height: 145px;
...@@ -670,9 +679,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -670,9 +679,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.repair-require-info-text { .repair-require-info-text {
color: #fff; 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-weight: 700;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
...@@ -680,10 +692,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -680,10 +692,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.electricity-info-text { .electricity-info-text {
color: #ff6464; color: #ff6464;
margin-left: 8px; /* margin-left: 8px; */
display: flex; display: flex;
/* margin: 0 auto; */
justify-content: center;
} }
.electricity-info-text div { .electricity-info-text > div:first-child {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
......
period-report/report-ioc.html
...@@ -284,12 +284,14 @@ ...@@ -284,12 +284,14 @@
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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>
<div class="operator-wrapper-content-box-chart"> <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" /> <img src="./assets/contract-bg.png" />
<div id="contract" class="contract-chart-wrapper"></div> <div id="contract" class="contract-chart-wrapper"></div>
</div> </div>
...@@ -328,7 +330,10 @@ ...@@ -328,7 +330,10 @@
<div class="operator-wrapper-content-box-progress"> <div class="operator-wrapper-content-box-progress">
<div class="pie-chart-area repair-require-info"> <div class="pie-chart-area repair-require-info">
<img src="./assets/repair-requir-icon.png" /> <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>
<div class="chart-desc"> <div class="chart-desc">
<div class="chart-data"> <div class="chart-data">
...@@ -379,7 +384,7 @@ ...@@ -379,7 +384,7 @@
<img src="./assets/electricity-icon.png" /> <img src="./assets/electricity-icon.png" />
<div class="electricity-info-text"> <div class="electricity-info-text">
<div>3.09</div> <div>3.09</div>
万元 <div>万元</div>
</div> </div>
</div> </div>
<div class="chart-desc"> <div class="chart-desc">
......
period-report/report.css
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
} }
.contract-title { .contract-title {
/* width: 140px; */ /* width: 140px; */
width: 6.5rem; width: 7rem;
text-align: center; text-align: center;
} }
.repair-title-2 { .repair-title-2 {
...@@ -407,6 +407,7 @@ ...@@ -407,6 +407,7 @@
font-size: 1.21rem; font-size: 1.21rem;
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
margin-left: 0.5rem; margin-left: 0.5rem;
margin-top: -0.1rem;
} }
.chart-data { .chart-data {
width: 10rem; width: 10rem;
...@@ -696,7 +697,7 @@ ...@@ -696,7 +697,7 @@
height: 18px; height: 18px;
} }
.chart-desc-other { .chart-desc-other {
width: 175px !important; width: 172px !important;
height: 18px; height: 18px;
} }
.chart-desc-task { .chart-desc-task {
...@@ -778,6 +779,7 @@ ...@@ -778,6 +779,7 @@
} }
.electricity-info-text span { .electricity-info-text span {
font-size: 18px; font-size: 18px;
margin-top: -4px;
} }
.chart-data { .chart-data {
width: 180px; width: 180px;
...@@ -940,6 +942,10 @@ ...@@ -940,6 +942,10 @@
width: 160px; width: 160px;
text-align: center; text-align: center;
} }
.contract-title-first {
width: 200px;
text-align: center;
}
.repair-title-2 { .repair-title-2 {
width: 150px; width: 150px;
text-align: center; text-align: center;
...@@ -1123,6 +1129,9 @@ ...@@ -1123,6 +1129,9 @@
top: -30px; top: -30px;
left: -30px; left: -30px;
} }
.contract-chart-first {
margin-left: 20px !important;
}
.contract-chart-wrapper { .contract-chart-wrapper {
width: 160px; width: 160px;
height: 160px; height: 160px;
...@@ -1146,6 +1155,7 @@ ...@@ -1146,6 +1155,7 @@
} }
.electricity-info-text span { .electricity-info-text span {
font-size: 34px; font-size: 34px;
margin-top: -4px;
} }
.chart-data { .chart-data {
width: 260px; width: 260px;
......
period-report/report.html
...@@ -288,7 +288,9 @@ ...@@ -288,7 +288,9 @@
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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>
...@@ -296,7 +298,7 @@ ...@@ -296,7 +298,7 @@
<!-- <div class="pie-chart-area contract-chart"> <!-- <div class="pie-chart-area contract-chart">
<div id="contract" class="contract-chart-wrapper"></div> <div id="contract" class="contract-chart-wrapper"></div>
</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" /> <img src="./assets/contract-bg.png" />
<div id="contract" class="contract-chart-wrapper"></div> <div id="contract" class="contract-chart-wrapper"></div>
</div> </div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论