Skip to content

R
report-html-template
Commit 444c1ed1 by Tippi.Rao
Options

样式修改

parent 6b6a8f5c
正在显示 包含 66 行增加 和 27 行删除
assets/advise-info.png
assets/advise-info.png

3.64 KB | W: | H:

assets/advise-info.png

9.42 KB | W: | H:

assets/advise-info.png
assets/advise-info.png
assets/advise-info.png
assets/advise-info.png
  • 2-up
  • Swipe
  • Onion skin
assets/chart-bg.png
assets/chart-bg.png

16.4 KB | W: | H:

assets/chart-bg.png

12.5 KB | W: | H:

assets/chart-bg.png
assets/chart-bg.png
assets/chart-bg.png
assets/chart-bg.png
  • 2-up
  • Swipe
  • Onion skin
assets/invest-info.png
assets/invest-info.png

2.61 KB | W: | H:

assets/invest-info.png

6.67 KB | W: | H:

assets/invest-info.png
assets/invest-info.png
assets/invest-info.png
assets/invest-info.png
  • 2-up
  • Swipe
  • Onion skin
assets/operation-info.png
assets/operation-info.png

2.47 KB | W: | H:

assets/operation-info.png

6.26 KB | W: | H:

assets/operation-info.png
assets/operation-info.png
assets/operation-info.png
assets/operation-info.png
  • 2-up
  • Swipe
  • Onion skin
report-ioc.css
......@@ -7,6 +7,7 @@ html {
}
body {
/* opacity: 0.15; */
font-family: PingFang SC-Regular;
}
.left-top {
width: 9px;
......@@ -58,9 +59,10 @@ body {
margin-top: 4px;
}
.report-title-time {
color: #37f1e7;
color: #5cb3ff;
font-size: 24px;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.report-title-info {
color: #ffffff;
......@@ -117,6 +119,7 @@ body {
.invest-wrapper-content-customers {
color: #ff6464;
font-size: 24px;
font-family: DIN Alternate-Bold;
}
.invest-wrapper-content-left {
......@@ -155,6 +158,7 @@ body {
color: #fff;
font-size: 22px;
font-weight: 700;
font-family: DIN Alternate-Bold;
}
.invest-wrapper-content-right {
margin-left: 130px;
......@@ -247,7 +251,7 @@ body {
position: relative;
}
.operator-wrapper-content-box-title {
color: #37f1e7;
color: #fff;
font-size: 16px;
/* margin-bottom: 10px; */
margin-left: 28px;
......@@ -308,8 +312,8 @@ body {
opacity: 0.7;
}
.chart-area {
width: 100px;
height: 100px;
width: 102px;
height: 102px;
margin: 12px 10px 14px 19px;
padding: 14px 14px;
......@@ -319,8 +323,8 @@ body {
}
.circle-bar {
font-size: 200px;
width: 72px;
height: 72px;
width: 76px;
height: 76px;
position: relative;
/* background-color: #333; */
......@@ -328,8 +332,8 @@ body {
}
.circle-bar-left,
.circle-bar-right {
width: 72px;
height: 72px;
width: 76px;
height: 76px;
/* background-color: #eee; */
background-color: #2c3849;
......@@ -348,11 +352,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.mask {
width: 60px;
height: 60px;
background-color: #0c0e14;
text-align: center;
line-height: 22.4px;
color: rgba(255, 255, 255);
margin: 0;
}
.mask :first-child {
font-size: 22px;
......@@ -365,8 +369,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-right-2 {
/* width: 112px;
height: 112px; */
width: 72px;
height: 72px;
width: 76px;
height: 76px;
/* background-color: #eee; */
background-color: #2c3849;
}
......@@ -398,8 +402,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-3 {
font-size: 200px;
width: 72px;
height: 72px;
width: 76px;
height: 76px;
position: relative;
background: #f3be28;
}
......@@ -421,8 +425,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-left-3,
.circle-bar-right-3 {
width: 72px;
height: 72px;
width: 76px;
height: 76px;
/* background-color: #eee; */
background-color: #2c3849;
}
......@@ -462,6 +466,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar > * {
border-radius: 50%;
}
.percent {
font-family: DIN Alternate-Bold;
}
.percent-text {
color: #fff;
font-size: 18px;
......@@ -503,8 +510,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-right: 10px;
color: #fff;
font-size: 22px;
font-weight: 700;
font-family: DIN Alternate-Bold;
}
.chart-desc-unfinished {
margin-top: 10px;
......@@ -512,10 +519,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-desc-unfinished-value {
color: #ff6464;
font-size: 22px;
font-weight: 700;
margin-left: auto;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.chart-desc-daily-legend {
width: 8px;
......@@ -617,18 +624,23 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.repair-require-info-text span {
font-weight: 700;
font-size: 18px;
text-align: center;
font-family: DIN Alternate-Bold;
}
.electricity-info-text {
color: #ff6464;
margin-left: 8px;
display: flex;
}
.electricity-info-text span {
.electricity-info-text div {
font-weight: 700;
font-size: 18px;
text-align: center;
font-family: DIN Alternate-Bold;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chart-data {
position: relative;
......@@ -664,8 +676,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: #fff;
font-size: 22px;
margin-right: 30px;
margin-left: auto;
font-family: DIN Alternate-Bold;
}
.return-rate {
/* background: linear-gradient(#00d8ff, #00b6ff); */
......@@ -692,6 +704,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
);
border: 1px solid #eee;
transition: 0.3s --progress;
margin-left: 0;
}
.assign-progress {
margin: auto;
......@@ -707,4 +720,5 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
);
border: 1px solid #eee;
transition: 0.3s --progress;
margin-left: 0;
}
report-ioc.html
......@@ -361,7 +361,10 @@
<div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info">
<img src="./assets/electricity-icon.png" />
<div class="electricity-info-text"><span>3.09</span>万元</div>
<div class="electricity-info-text">
<div>3.09</div>
万元
</div>
</div>
<div class="chart-desc">
<div class="bar-data">
......
report.css
......@@ -311,6 +311,7 @@
}
.electricity-info-text span {
font-size: 1.21rem;
font-family: DIN Alternate-Bold;
}
.chart-data {
width: 10.55rem;
......@@ -998,6 +999,7 @@ html {
body {
/* opacity: 0.15; */
font-size: 28px;
font-family: PingFang SC-Regular;
}
.left-top {
width: 9px;
......@@ -1045,8 +1047,9 @@ body {
margin-top: 4px;
}
.report-title-time {
color: #37f1e7;
color: #5cb3ff;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.report-title-info {
color: #ffffff;
......@@ -1085,6 +1088,7 @@ body {
}
.invest-wrapper-content-customers {
color: #ff6464;
font-family: DIN Alternate-Bold;
}
.invest-wrapper-content-left {
......@@ -1108,6 +1112,7 @@ body {
.invest-wrapper-content-left-item-num {
color: #fff;
font-weight: 700;
font-family: DIN Alternate-Bold;
}
.invest-wrapper-content-red-triangle {
width: 0;
......@@ -1181,7 +1186,7 @@ body {
position: relative;
}
.operator-wrapper-content-box-title {
color: #37f1e7;
color: #fff;
margin-left: 28px;
}
.operator-wrapper-content-box-chart {
......@@ -1337,6 +1342,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar > * {
border-radius: 50%;
}
.percent {
font-family: DIN Alternate-Bold;
}
.percent-text {
color: #fff;
position: absolute;
......@@ -1365,8 +1373,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: auto;
margin-right: 10px;
color: #fff;
font-weight: 700;
font-family: DIN Alternate-Bold;
}
.chart-desc-unfinished {
margin-top: 10px;
......@@ -1376,6 +1384,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-weight: 700;
margin-left: auto;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.chart-desc-daily-legend {
background: rgba(92, 179, 255, 0.302);
......@@ -1452,13 +1461,20 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.repair-require-info-text span {
font-weight: 700;
text-align: center;
font-family: DIN Alternate-Bold;
}
.electricity-info-text {
color: #ff6464;
display: flex;
}
.electricity-info-text span {
.electricity-info-text div {
font-weight: 700;
text-align: center;
font-family: DIN Alternate-Bold;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chart-data {
......@@ -1484,6 +1500,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data-text-num {
color: #fff;
margin-left: auto;
font-family: DIN Alternate-Bold;
}
.return-rate {
color: #00d8ff;
......@@ -1506,6 +1523,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
);
border: 1px solid #eee;
transition: 0.3s --progress;
margin-left: 0;
}
.assign-progress {
height: 9px;
......@@ -1518,4 +1536,5 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
);
border: 1px solid #eee;
transition: 0.3s --progress;
margin-left: 0;
}
report.html
......@@ -370,7 +370,10 @@
<div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info">
<img src="./assets/electricity-icon.png" />
<div class="electricity-info-text"><span>3.09</span>万元</div>
<div class="electricity-info-text">
<div>3.09</div>
万元
</div>
</div>
<div class="chart-desc">
<div class="bar-data">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论