Skip to content

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

文件重命名

parent 142b2cf4
正在显示 包含 1128 行增加 和 1121 行删除
report-multi.css → report-ioc.css
html { html {
border: 3px solid rgba(255, 255, 255, 0.15); border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235; background-color: #152235;
@media screen and (max-width: 1650px) and (min-width: 751px) { height: 99vh;
height: 99vh;
}
@media screen and (min-width: 1651px) {
}
position: relative; position: relative;
} }
body { body {
/* opacity: 0.15; */ /* opacity: 0.15; */
font-size: 28px;
} }
.left-top { .left-top {
width: 9px; width: 9px;
...@@ -51,18 +47,8 @@ body { ...@@ -51,18 +47,8 @@ body {
transform: translateX(-50%); transform: translateX(-50%);
} }
.report-title-bg > img { .report-title-bg > img {
@media screen and (max-width: 750px) { width: 504px;
width: 23.57rem; height: 51px;
height: 2.8rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 504px;
height: 51px;
}
@media screen and (min-width: 1651px) {
width: 780px;
height: 82px;
}
} }
.report-title { .report-title {
position: absolute; position: absolute;
...@@ -73,198 +59,79 @@ body { ...@@ -73,198 +59,79 @@ body {
} }
.report-title-time { .report-title-time {
color: #37f1e7; color: #37f1e7;
@media screen and (max-width: 1650px) { font-size: 24px;
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
margin-right: 10px; margin-right: 10px;
} }
.report-title-info { .report-title-info {
color: #ffffff; color: #ffffff;
@media screen and (max-width: 1650px) { font-size: 24px;
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
} }
.invest-wrapper { .invest-wrapper {
@media screen and (max-width: 750px) { margin-top: 70px;
margin-top: 3.75rem; margin-left: 47px;
margin-left: 2.4rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 70px;
margin-left: 47px;
}
@media screen and (min-width: 1651px) {
margin-top: 120px;
margin-left: 72px;
}
} }
.invest-wrapper-title { .invest-wrapper-title {
@media screen and (max-width: 750px) { margin-bottom: 27px;
margin-bottom: 1.1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 27px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 30px;
}
} }
.invest-wrapper .invest-wrapper-title img { .invest-wrapper .invest-wrapper-title img {
@media screen and (max-width: 750px) { width: 110px;
width: 6rem; height: 25px;
height: 1.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 110px;
height: 25px;
}
@media screen and (min-width: 1651px) {
width: 168px;
height: 38px;
}
} }
.invest-wrapper-content { .invest-wrapper-content {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { font-size: 18px;
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.invest-wrapper-flex { .invest-wrapper-flex {
@media screen and (min-width: 751px) { display: flex;
display: flex;
}
} }
.invest-wrapper-left-bracket img { .invest-wrapper-left-bracket img {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 750px) { width: 6px;
width: 0.36rem; height: 43px;
height: 2.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-right-bracket img { .invest-wrapper-right-bracket img {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 750px) { width: 6px;
width: 0.36rem; height: 43px;
height: 2.42rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-content-first-text { .invest-wrapper-content-first-text {
display: inline-block; display: inline-block;
@media screen and (max-width: 750px) { margin-left: 10px;
margin-left: 0.32rem; margin-top: 8px;
margin-top: 0.32rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px;
margin-top: 8px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
margin-top: 12px;
}
} }
.invest-wrapper-content-second-text { .invest-wrapper-content-second-text {
display: inline-block; display: inline-block;
} }
.invest-wrapper-content-last-text { .invest-wrapper-content-last-text {
display: inline-block; display: inline-block;
@media screen and (max-width: 750px) { margin-right: 10px;
margin-right: 0.14rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
margin-right: 20px;
}
} }
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
color: #ff6464; color: #ff6464;
@media screen and (max-width: 750px) { font-size: 24px;
font-size: 1.5rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 42px;
}
} }
.invest-wrapper-content-left { .invest-wrapper-content-left {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { font-size: 28px;
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 28px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
} }
.invest-wrapper-content-left-item { .invest-wrapper-content-left-item {
display: flex; display: flex;
@media screen and (max-width: 1650px) { margin-bottom: 4px;
margin-bottom: 4px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 10px;
}
} }
.invest-wrapper-content-left-item-img { .invest-wrapper-content-left-item-img {
@media screen and (max-width: 750px) { width: 170px;
width: 9.21rem; height: 30px;
height: 1.68rem; margin-right: 10px;
margin-right: 0.82rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 170px;
height: 30px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 258px;
height: 47px;
margin-right: 20px;
}
text-align: center; text-align: center;
} }
...@@ -273,66 +140,25 @@ body { ...@@ -273,66 +140,25 @@ body {
height: 100%; height: 100%;
} }
.invest-wrapper-content-left-item-line { .invest-wrapper-content-left-item-line {
@media screen and (max-width: 750px) { width: 82px;
width: 4.54rem; height: 7px;
height: 0.5rem; margin-top: 9px;
margin-top: 0.64rem; margin-right: 10px;
margin-right: 0.71rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 82px;
height: 7px;
margin-top: 9px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 127px;
height: 14px;
margin-top: 18px;
margin-right: 20px;
}
} }
.invest-wrapper-content-left-item-type { .invest-wrapper-content-left-item-type {
color: #fff; color: #fff;
opacity: 0.7; opacity: 0.7;
@media screen and (max-width: 750px) { font-size: 18px;
font-size: 1rem;
width: 4.29rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
margin-right: 45px; margin-right: 45px;
} }
.invest-wrapper-content-left-item-num { .invest-wrapper-content-left-item-num {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { font-size: 22px;
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
} }
.invest-wrapper-content-right { .invest-wrapper-content-right {
@media screen and (max-width: 750px) { margin-left: 130px;
margin-left: 0; margin-top: 40px;
margin-top: 1.79rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 130px;
margin-top: 40px;
}
@media screen and (min-width: 1651px) {
margin-left: 184px;
margin-top: 60px;
}
} }
.invest-wrapper-content-red-triangle { .invest-wrapper-content-red-triangle {
width: 0; width: 0;
...@@ -353,33 +179,16 @@ body { ...@@ -353,33 +179,16 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 750px) { width: 6px;
width: 0.36rem; height: 73px;
height: 4.07rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 73px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 114px;
}
} }
.invest-wrapper-right-bracket-big img { .invest-wrapper-right-bracket-big img {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 1650px) { width: 6px;
width: 6px; height: 73px;
height: 73px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 114px;
}
} }
.invest-wrapper-left-bracket-middle { .invest-wrapper-left-bracket-middle {
...@@ -393,18 +202,8 @@ body { ...@@ -393,18 +202,8 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 750px) { width: 3.73pxpx;
width: 0.36rem; height: 43px;
height: 2.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 3.73pxpx;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-right-bracket-middle img { .invest-wrapper-right-bracket-middle img {
...@@ -412,18 +211,8 @@ body { ...@@ -412,18 +211,8 @@ body {
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 750px) { width: 3.73pxpx;
width: 0.36rem; height: 43px;
height: 2.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 3.73pxpx;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-content-green-triangle { .invest-wrapper-content-green-triangle {
...@@ -436,85 +225,38 @@ body { ...@@ -436,85 +225,38 @@ body {
} }
.operator-wrapper { .operator-wrapper {
@media screen and (max-width: 750px) { margin-left: 47px;
margin-left: 2.88rem; margin-top: 26px;
margin-top: 1.29rem;
}
@media screen and (max-width: 1650px) {
margin-left: 47px;
margin-top: 26px;
}
@media screen and (min-width: 1651px) and (min-width: 751px) {
margin-left: 72px;
margin-top: 36px;
}
display: relative; display: relative;
} }
.operator-wrapper-title { .operator-wrapper-title {
@media screen and (max-width: 750px) { margin-bottom: 30px;
margin-bottom: 1.07rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 30px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 30px;
}
} }
.operator-wrapper-title img { .operator-wrapper-title img {
@media screen and (max-width: 750px) { width: 110px;
width: 6rem; height: 25px;
height: 1.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 110px;
height: 25px;
}
@media screen and (min-width: 1651px) {
width: 168px;
height: 38px;
}
} }
.operator-wrapper-content { .operator-wrapper-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.operator-wrapper-content-box { .operator-wrapper-content-box {
@media screen and (max-width: 1650px) { margin-right: 30px;
margin-right: 30px; margin-bottom: 18px;
margin-bottom: 18px;
}
@media screen and (min-width: 1651px) {
margin-right: 40px;
margin-bottom: 30px;
}
position: relative; position: relative;
} }
.operator-wrapper-content-box-title { .operator-wrapper-content-box-title {
color: #37f1e7; color: #37f1e7;
@media screen and (max-width: 1650px) { font-size: 16px;
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 24px;
}
/* margin-bottom: 10px; */ /* margin-bottom: 10px; */
margin-left: 28px; margin-left: 28px;
} }
.operator-wrapper-content-box-chart { .operator-wrapper-content-box-chart {
/* width: 472px; */ /* width: 472px; */
/* height: 170px; */ /* height: 170px; */
@media screen and (max-width: 750px) { height: 120px;
height: 7.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 120px;
}
@media screen and (min-width: 1651px) {
height: 170px;
}
position: relative; position: relative;
background-size: cover; background-size: cover;
padding-top: 4px; padding-top: 4px;
...@@ -522,15 +264,7 @@ body { ...@@ -522,15 +264,7 @@ body {
display: flex; display: flex;
} }
.operator-wrapper-content-box-progress { .operator-wrapper-content-box-progress {
@media screen and (max-width: 750px) { height: 137px;
height: 12rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px;
}
@media screen and (min-width: 1651px) {
height: 170px;
}
position: relative; position: relative;
background-size: cover; background-size: cover;
...@@ -539,125 +273,44 @@ body { ...@@ -539,125 +273,44 @@ body {
display: flex; display: flex;
} }
.electricity-box-progress { .electricity-box-progress {
@media screen and (max-width: 750px) { height: 137px;
height: 7.6rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px;
}
@media screen and (min-width: 1651px) {
height: 170px;
}
position: relative; position: relative;
background-size: cover; background-size: cover;
padding-top: 4px; padding-top: 4px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
} }
.repair-requir-info {
@media screen and (max-width: 750px) {
display: block;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
display: flex;
}
@media screen and (min-width: 1651px) {
display: flex;
}
}
.advise-wrapper { .advise-wrapper {
@media screen and (max-width: 1650px) { margin-left: 47px;
margin-left: 47px; margin-top: 14px;
margin-top: 14px;
}
@media screen and (min-width: 1651px) {
margin-left: 72px;
margin-top: 20px;
}
display: relative; display: relative;
} }
.advise-wrapper-title { .advise-wrapper-title {
margin-bottom: 10px; margin-bottom: 10px;
} }
.advise-wrapper-title img { .advise-wrapper-title img {
@media screen and (max-width: 750px) { width: 140px;
width: 9.18rem; height: 24px;
height: 1.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 140px;
height: 24px;
}
@media screen and (min-width: 1651px) {
width: 257px;
height: 38px;
}
} }
.advise-wrapper-content-item { .advise-wrapper-content-item {
display: flex; display: flex;
@media screen and (max-width: 750px) { margin-bottom: 8px;
margin-bottom: 0.57rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 8px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 16px;
}
} }
.advise-wrapper-content-item img { .advise-wrapper-content-item img {
@media screen and (max-width: 750px) { width: 13px;
width: 0.71rem; height: 13px;
height: 0.71rem; margin-right: 13px;
margin-right: 0.71rem; margin-top: 6px;
margin-top: 0.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 13px;
height: 13px;
margin-right: 13px;
margin-top: 6px;
}
@media screen and (min-width: 1651px) {
width: 20px;
height: 20px;
margin-right: 20px;
margin-top: 10px;
}
} }
.advise-wrapper-content-item-text { .advise-wrapper-content-item-text {
@media screen and (max-width: 750px) { font-size: 18px;
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
color: #fff; color: #fff;
opacity: 0.7; opacity: 0.7;
} }
.chart-area { .chart-area {
@media screen and (max-width: 750px) { width: 100px;
/* width: 5rem; height: 100px;
height: 5rem; margin: 12px 10px 14px 19px;
margin: 0.43rem 0.86rem 0.71rem 1rem; */
width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
}
@media screen and (min-width: 1651px) {
width: 140px;
height: 140px;
margin: 12px 24px 20px 28px;
}
padding: 14px 14px; padding: 14px 14px;
box-sizing: border-box; box-sizing: border-box;
...@@ -666,20 +319,8 @@ body { ...@@ -666,20 +319,8 @@ body {
} }
.circle-bar { .circle-bar {
font-size: 200px; font-size: 200px;
@media screen and (max-width: 750px) { width: 72px;
/* width: 4rem; height: 72px;
height: 4rem; */
width: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
position: relative; position: relative;
/* background-color: #333; */ /* background-color: #333; */
...@@ -687,20 +328,8 @@ body { ...@@ -687,20 +328,8 @@ body {
} }
.circle-bar-left, .circle-bar-left,
.circle-bar-right { .circle-bar-right {
@media screen and (max-width: 750px) { width: 72px;
/* width: 4rem; height: 72px;
height: 4rem; */
width: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
...@@ -710,45 +339,15 @@ body { ...@@ -710,45 +339,15 @@ body {
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/ */
.circle-bar-right { .circle-bar-right {
@media screen and (max-width: 750px) { clip: rect(0, auto, auto, 35px);
/* clip: rect(0, auto, auto, 2rem); */
clip: rect(0, auto, auto, 35px);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (min-width: 1651px) {
clip: rect(0, auto, auto, 56px);
}
} }
.circle-bar-left { .circle-bar-left {
@media screen and (max-width: 750px) { clip: rect(0, 35px, auto, 0);
/* clip: rect(0, 2rem, auto, 0); */
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
} }
.mask { .mask {
@media screen and (max-width: 750px) { width: 60px;
/* width: 3.2rem; height: 60px;
height: 3.2rem; */
width: 60px;
height: 60px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 89.6px;
height: 89.6px;
}
background-color: #0c0e14; background-color: #0c0e14;
text-align: center; text-align: center;
...@@ -756,24 +355,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -756,24 +355,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.mask :first-child { .mask :first-child {
@media screen and (max-width: 750px) { font-size: 22px;
/* font-size: 1.2rem; height: 30px;
height: 3.2rem; line-height: 10px;
line-height: 2.5rem; */
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
...@@ -781,18 +365,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -781,18 +365,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-right-2 { .circle-bar-right-2 {
/* width: 112px; /* width: 112px;
height: 112px; */ height: 112px; */
@media screen and (max-width: 750px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
} }
...@@ -801,79 +375,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -801,79 +375,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/ */
.circle-bar-right-2 { .circle-bar-right-2 {
@media screen and (max-width: 750px) { clip: rect(0, auto, auto, 35px);
clip: rect(0, auto, auto, 35px);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (min-width: 1651px) {
clip: rect(0, auto, auto, 56px);
}
} }
.circle-bar-left-2 { .circle-bar-left-2 {
@media screen and (max-width: 750px) { clip: rect(0, 35px, auto, 0);
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
} }
.second-mask { .second-mask {
@media screen and (max-width: 750px) { width: 60px;
width: 60px; height: 60px;
height: 60px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 89.6px;
height: 89.6px;
}
background-color: #0c0e14; background-color: #0c0e14;
text-align: center; text-align: center;
line-height: 22.4px; line-height: 22.4px;
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.second-mask :first-child { .second-mask :first-child {
@media screen and (max-width: 750px) { font-size: 22px;
font-size: 22px; height: 30px;
height: 30px; line-height: 10px;
line-height: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
.circle-bar-3 { .circle-bar-3 {
font-size: 200px; font-size: 200px;
@media screen and (max-width: 750px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
position: relative; position: relative;
background: #f3be28; background: #f3be28;
} }
...@@ -895,79 +421,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -895,79 +421,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-left-3, .circle-bar-left-3,
.circle-bar-right-3 { .circle-bar-right-3 {
@media screen and (max-width: 750px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
} }
.circle-bar-right-3 { .circle-bar-right-3 {
@media screen and (max-width: 750px) { clip: rect(0, auto, auto, 35px);
clip: rect(0, auto, auto, 35px);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (min-width: 1651px) {
clip: rect(0, auto, auto, 56px);
}
} }
.circle-bar-left-3 { .circle-bar-left-3 {
@media screen and (max-width: 750px) { clip: rect(0, 35px, auto, 0);
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
} }
.third-mask { .third-mask {
@media screen and (max-width: 750px) { width: 60px;
width: 60px; height: 60px;
height: 60px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 89.6px;
height: 89.6px;
}
background-color: #0c0e14; background-color: #0c0e14;
text-align: center; text-align: center;
line-height: 22.4px; line-height: 22.4px;
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.third-mask :first-child { .third-mask :first-child {
@media screen and (max-width: 750px) { font-size: 22px;
font-size: 22px; height: 30px;
height: 30px; line-height: 10px;
line-height: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
/*所有的后代都水平垂直居中，这样就是同心圆了*/ /*所有的后代都水平垂直居中，这样就是同心圆了*/
...@@ -986,18 +464,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -986,18 +464,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.percent-text { .percent-text {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { font-size: 18px;
font-size: 0.79rem; margin-top: 30px;
margin-top: 1.79rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
margin-top: 30px;
}
@media screen and (min-width: 1651px) {
font-size: 22px;
margin-top: 50px;
}
opacity: 0.7; opacity: 0.7;
} }
...@@ -1007,82 +475,34 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1007,82 +475,34 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc img { .chart-desc img {
@media screen and (max-width: 750px) { width: 165px;
width: 9.89rem; height: 18px;
height: 0.96rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 165px;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 277px;
height: 27px;
}
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.chart-desc-other { .chart-desc-other {
@media screen and (max-width: 750px) { width: 175px !important;
width: 10.46rem; height: 18px;
height: 0.96rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 175px !important;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 293px;
height: 27px;
}
} }
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
display: flex; display: flex;
@media screen and (max-width: 750px) { margin-top: 10px;
margin-top: 1.07rem; width: 160px;
width: 9.29rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 10px;
width: 160px;
}
@media screen and (min-width: 1651px) {
margin-top: 30px;
width: 260px;
}
} }
.chart-desc-text { .chart-desc-text {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { font-size: 18px;
font-size: 1rem; margin-left: 8px;
margin-left: 0.71rem; margin-top: 4px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
margin-left: 8px;
margin-top: 4px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
margin-left: 20px;
}
} }
.chart-desc-value { .chart-desc-value {
margin-left: auto; margin-left: auto;
margin-right: 10px; margin-right: 10px;
color: #fff; color: #fff;
@media screen and (max-width: 750px) { font-size: 22px;
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
} }
...@@ -1091,33 +511,15 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1091,33 +511,15 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc-unfinished-value { .chart-desc-unfinished-value {
color: #ff6464; color: #ff6464;
@media screen and (max-width: 750px) { font-size: 22px;
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
margin-left: auto; margin-left: auto;
margin-right: 10px; margin-right: 10px;
} }
.chart-desc-daily-legend { .chart-desc-daily-legend {
@media screen and (max-width: 750px) { width: 8px;
width: 0.43rem; height: 8px;
height: 0.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 8px;
height: 8px;
}
@media screen and (min-width: 1651px) {
width: 12px;
height: 12px;
}
background: rgba(92, 179, 255, 0.302); background: rgba(92, 179, 255, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #5cb3ff; border: 2px solid #5cb3ff;
...@@ -1125,18 +527,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1125,18 +527,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: 20px; margin-left: 20px;
} }
.chart-desc-handle-legend { .chart-desc-handle-legend {
@media screen and (max-width: 750px) { width: 8px;
width: 0.43rem; height: 8px;
height: 0.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 8px;
height: 8px;
}
@media screen and (min-width: 1651px) {
width: 12px;
height: 12px;
}
background: rgba(255, 100, 100, 0.302); background: rgba(255, 100, 100, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #ff6464; border: 2px solid #ff6464;
...@@ -1148,52 +540,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1148,52 +540,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.repair-require-chart { .repair-require-chart {
background: url("./assets/repair-require-bg.png") no-repeat; background: url("./assets/repair-require-bg.png") no-repeat;
@media screen and (max-width: 750px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
background-size: cover; background-size: cover;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
@media screen and (max-width: 1650px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
} }
.contract-chart { .contract-chart {
background: url("./assets/contract-bg.png") no-repeat; background: url("./assets/contract-bg.png") no-repeat;
@media screen and (max-width: 1650px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
background-size: cover; background-size: cover;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
@media screen and (max-width: 1650px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
} }
.top-left { .top-left {
...@@ -1229,153 +593,51 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1229,153 +593,51 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right: 0; right: 0;
} }
.repair-require-info { .repair-require-info {
@media screen and (max-width: 750px) { margin-left: 10px;
margin-left: 0.71rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
}
margin-top: 10px; margin-top: 10px;
} }
.repair-require-info img { .repair-require-info img {
@media screen and (max-width: 750px) { width: 65px;
width: 4.82rem; height: 60px;
height: 4.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 65px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 100px;
height: 92px;
}
} }
.repair-require-info-text { .repair-require-info-text {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { margin-left: 8px;
font-size: 0.86rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
}
} }
.repair-require-info-text span { .repair-require-info-text span {
font-weight: 700; font-weight: 700;
@media screen and (max-width: 750px) { font-size: 18px;
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
text-align: center; text-align: center;
} }
.electricity-info-text { .electricity-info-text {
color: #ff6464; color: #ff6464;
@media screen and (max-width: 750px) { margin-left: 8px;
font-size: 0.86rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
}
} }
.electricity-info-text span { .electricity-info-text span {
font-weight: 700; font-weight: 700;
@media screen and (max-width: 750px) { font-size: 18px;
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
text-align: center; text-align: center;
} }
.chart-data { .chart-data {
position: relative; position: relative;
@media screen and (max-width: 750px) { margin-top: 20px;
width: 10.55rem; width: 180px;
margin-left: 1.39rem; margin-left: 20px;
margin-top: 0.36rem;
margin-bottom: 0.8rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 180px;
margin-left: 20px;
margin-top: 20px;
}
@media screen and (min-width: 1651px) {
width: 260px;
margin-left: 55px;
margin-top: 20px;
}
}
.chart-data img {
@media screen and (max-width: 750px) {
width: 11rem;
height: 0.96rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 165px;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 277px;
height: 27px;
}
} }
.bar-data { .bar-data {
position: relative; position: relative;
@media screen and (max-width: 750px) { margin-left: 20px;
margin-left: 1.96rem; margin-top: -20px;
margin-top: -1.25rem; width: 180px;
width: 10.1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 20px;
margin-top: -20px;
width: 180px;
}
@media screen and (min-width: 1651px) and (min-width: 751px) {
margin-left: 55px;
margin-top: -35px;
width: 260px;
}
} }
.bar-data-2 { .bar-data-2 {
position: relative; position: relative;
@media screen and (max-width: 750px) { margin-left: 20px;
margin-left: 1.96rem; margin-top: 10px;
margin-top: 0.35rem; width: 180px;
width: 10.1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 20px;
margin-top: 10px;
width: 180px;
}
@media screen and (min-width: 1651px) {
margin-left: 55px;
margin-top: 10px;
width: 260px;
}
} }
.chart-data-text { .chart-data-text {
display: flex; display: flex;
...@@ -1383,33 +645,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1383,33 +645,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data-text-title { .chart-data-text-title {
color: #fff; color: #fff;
opacity: 0.8; opacity: 0.8;
@media screen and (max-width: 750px) { font-size: 16px;
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
} }
.chart-data-text-num { .chart-data-text-num {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { font-size: 22px;
font-size: 1.21rem; margin-right: 30px;
margin-right: 2rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
margin-right: 30px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
margin-left: auto; margin-left: auto;
} }
.return-rate { .return-rate {
/* background: linear-gradient(#00d8ff, #00b6ff); */
color: #00d8ff; color: #00d8ff;
width: 260px; width: 260px;
} }
...@@ -1420,18 +666,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1420,18 +666,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
initial-value: 0%; initial-value: 0%;
} }
.g-progress { .g-progress {
@media screen and (max-width: 750px) { margin: auto;
margin: 0; width: 167px;
width: 9.14rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 167px;
margin: auto;
}
@media screen and (min-width: 1651px) {
width: 256px;
margin: auto;
}
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
...@@ -1445,18 +681,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1445,18 +681,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
transition: 0.3s --progress; transition: 0.3s --progress;
} }
.assign-progress { .assign-progress {
@media screen and (max-width: 750px) { margin: auto;
margin: 0; width: 166px;
width: 9.14rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 166px;
margin: auto;
}
@media screen and (min-width: 1651px) {
width: 256px;
margin: auto;
}
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
......
report-multi.html → report-ioc.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<!-- 如果你没有echarts.min.js文件，用下面的语句代替即可 <!-- 如果你没有echarts.min.js文件，用下面的语句代替即可
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
--> -->
<link rel="stylesheet" href="report-multi.css" /> <link rel="stylesheet" href="report-ioc.css" />
</head> </head>
<body> <body>
...@@ -316,38 +316,36 @@ ...@@ -316,38 +316,36 @@
<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"><span>389</span>个</div>
</div> </div>
<div class="repair-requir-info"> <div class="chart-desc">
<div class="chart-desc"> <div class="chart-data">
<div class="chart-data"> <div class="chart-data-text">
<div class="chart-data-text"> <div class="chart-data-text-title">处理中</div>
<div class="chart-data-text-title">处理中</div> <div class="chart-data-text-num">293</div>
<div class="chart-data-text-num">293</div>
</div>
<img src="./assets/line.png" />
</div> </div>
<div class="chart-data"> <img src="./assets/line.png" />
<div class="chart-data-text"> </div>
<div class="chart-data-text-title">工单回访率</div> <div class="chart-data">
<div class="chart-data-text-num">70%</div> <div class="chart-data-text">
</div> <div class="chart-data-text-title">工单回访率</div>
<div class="g-progress" style="--progress: 70%"></div> <div class="chart-data-text-num">70%</div>
</div> </div>
<div class="g-progress" style="--progress: 70%"></div>
</div> </div>
<div class="chart-desc"> </div>
<div class="chart-data"> <div class="chart-desc">
<div class="chart-data-text"> <div class="chart-data">
<div class="chart-data-text-title">平均处理时长</div> <div class="chart-data-text">
<div class="chart-data-text-num">2.4h</div> <div class="chart-data-text-title">平均处理时长</div>
</div> <div class="chart-data-text-num">2.4h</div>
<img src="./assets/line.png" />
</div> </div>
<div class="chart-data"> <img src="./assets/line.png" />
<div class="chart-data-text"> </div>
<div class="chart-data-text-title">派单及时率</div> <div class="chart-data">
<div class="chart-data-text-num">99%</div> <div class="chart-data-text">
</div> <div class="chart-data-text-title">派单及时率</div>
<div class="assign-progress" style="--progress: 99%"></div> <div class="chart-data-text-num">99%</div>
</div> </div>
<div class="assign-progress" style="--progress: 99%"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -501,6 +499,9 @@ ...@@ -501,6 +499,9 @@
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
title: {
show: false,
},
legend: false, legend: false,
color: ["#FF6464", "#5CB3FF"], color: ["#FF6464", "#5CB3FF"],
series: [ series: [
...@@ -508,6 +509,7 @@ ...@@ -508,6 +509,7 @@
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
borderColor: "", borderColor: "",
...@@ -554,6 +556,7 @@ ...@@ -554,6 +556,7 @@
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
borderColor: "", borderColor: "",
......
report.css
html { html {
border: 3px solid rgba(255, 255, 255, 0.15); border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235; background-color: #152235;
height: 99vh; @media screen and (max-width: 1650px) and (min-width: 751px) {
height: 99vh;
}
@media screen and (min-width: 1651px) {
}
position: relative; position: relative;
} }
body { body {
/* opacity: 0.15; */ /* opacity: 0.15; */
font-size: 28px;
} }
.left-top { .left-top {
width: 9px; width: 9px;
...@@ -47,8 +51,18 @@ body { ...@@ -47,8 +51,18 @@ body {
transform: translateX(-50%); transform: translateX(-50%);
} }
.report-title-bg > img { .report-title-bg > img {
width: 504px; @media screen and (max-width: 750px) {
height: 51px; width: 23.57rem;
height: 2.8rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 504px;
height: 51px;
}
@media screen and (min-width: 1651px) {
width: 780px;
height: 82px;
}
} }
.report-title { .report-title {
position: absolute; position: absolute;
...@@ -59,79 +73,198 @@ body { ...@@ -59,79 +73,198 @@ body {
} }
.report-title-time { .report-title-time {
color: #37f1e7; color: #37f1e7;
font-size: 24px; @media screen and (max-width: 1650px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
margin-right: 10px; margin-right: 10px;
} }
.report-title-info { .report-title-info {
color: #ffffff; color: #ffffff;
font-size: 24px; @media screen and (max-width: 1650px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
} }
.invest-wrapper { .invest-wrapper {
margin-top: 70px; @media screen and (max-width: 750px) {
margin-left: 47px; margin-top: 3.75rem;
margin-left: 2.4rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 70px;
margin-left: 47px;
}
@media screen and (min-width: 1651px) {
margin-top: 120px;
margin-left: 72px;
}
} }
.invest-wrapper-title { .invest-wrapper-title {
margin-bottom: 27px; @media screen and (max-width: 750px) {
margin-bottom: 1.1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 27px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 30px;
}
} }
.invest-wrapper .invest-wrapper-title img { .invest-wrapper .invest-wrapper-title img {
width: 110px; @media screen and (max-width: 750px) {
height: 25px; width: 6rem;
height: 1.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 110px;
height: 25px;
}
@media screen and (min-width: 1651px) {
width: 168px;
height: 38px;
}
} }
.invest-wrapper-content { .invest-wrapper-content {
color: #fff; color: #fff;
font-size: 18px; @media screen and (max-width: 750px) {
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.invest-wrapper-flex { .invest-wrapper-flex {
display: flex; @media screen and (min-width: 751px) {
display: flex;
}
} }
.invest-wrapper-left-bracket img { .invest-wrapper-left-bracket img {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
width: 6px; @media screen and (max-width: 750px) {
height: 43px; width: 0.36rem;
height: 2.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-right-bracket img { .invest-wrapper-right-bracket img {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
width: 6px; @media screen and (max-width: 750px) {
height: 43px; width: 0.36rem;
height: 2.42rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-content-first-text { .invest-wrapper-content-first-text {
display: inline-block; display: inline-block;
margin-left: 10px; @media screen and (max-width: 750px) {
margin-top: 8px; margin-left: 0.32rem;
margin-top: 0.32rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px;
margin-top: 8px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
margin-top: 12px;
}
} }
.invest-wrapper-content-second-text { .invest-wrapper-content-second-text {
display: inline-block; display: inline-block;
} }
.invest-wrapper-content-last-text { .invest-wrapper-content-last-text {
display: inline-block; display: inline-block;
margin-right: 10px; @media screen and (max-width: 750px) {
margin-right: 0.14rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
margin-right: 20px;
}
} }
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
color: #ff6464; color: #ff6464;
font-size: 24px; @media screen and (max-width: 750px) {
font-size: 1.5rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 42px;
}
} }
.invest-wrapper-content-left { .invest-wrapper-content-left {
color: #fff; color: #fff;
font-size: 28px; @media screen and (max-width: 750px) {
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 28px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
} }
.invest-wrapper-content-left-item { .invest-wrapper-content-left-item {
display: flex; display: flex;
margin-bottom: 4px; @media screen and (max-width: 1650px) {
margin-bottom: 4px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 10px;
}
} }
.invest-wrapper-content-left-item-img { .invest-wrapper-content-left-item-img {
width: 170px; @media screen and (max-width: 750px) {
height: 30px; width: 9.21rem;
margin-right: 10px; height: 1.68rem;
margin-right: 0.82rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 170px;
height: 30px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 258px;
height: 47px;
margin-right: 20px;
}
text-align: center; text-align: center;
} }
...@@ -140,25 +273,66 @@ body { ...@@ -140,25 +273,66 @@ body {
height: 100%; height: 100%;
} }
.invest-wrapper-content-left-item-line { .invest-wrapper-content-left-item-line {
width: 82px; @media screen and (max-width: 750px) {
height: 7px; width: 4.54rem;
margin-top: 9px; height: 0.5rem;
margin-right: 10px; margin-top: 0.64rem;
margin-right: 0.71rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 82px;
height: 7px;
margin-top: 9px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 127px;
height: 14px;
margin-top: 18px;
margin-right: 20px;
}
} }
.invest-wrapper-content-left-item-type { .invest-wrapper-content-left-item-type {
color: #fff; color: #fff;
opacity: 0.7; opacity: 0.7;
font-size: 18px; @media screen and (max-width: 750px) {
font-size: 1rem;
width: 4.29rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
margin-right: 45px; margin-right: 45px;
} }
.invest-wrapper-content-left-item-num { .invest-wrapper-content-left-item-num {
color: #fff; color: #fff;
font-size: 22px; @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
} }
.invest-wrapper-content-right { .invest-wrapper-content-right {
margin-left: 130px; @media screen and (max-width: 750px) {
margin-top: 40px; margin-left: 0;
margin-top: 1.79rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 130px;
margin-top: 40px;
}
@media screen and (min-width: 1651px) {
margin-left: 184px;
margin-top: 60px;
}
} }
.invest-wrapper-content-red-triangle { .invest-wrapper-content-red-triangle {
width: 0; width: 0;
...@@ -179,16 +353,33 @@ body { ...@@ -179,16 +353,33 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
width: 6px; @media screen and (max-width: 750px) {
height: 73px; width: 0.36rem;
height: 4.07rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 73px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 114px;
}
} }
.invest-wrapper-right-bracket-big img { .invest-wrapper-right-bracket-big img {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
width: 6px; @media screen and (max-width: 1650px) {
height: 73px; width: 6px;
height: 73px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 114px;
}
} }
.invest-wrapper-left-bracket-middle { .invest-wrapper-left-bracket-middle {
...@@ -202,8 +393,18 @@ body { ...@@ -202,8 +393,18 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
width: 3.73pxpx; @media screen and (max-width: 750px) {
height: 43px; width: 0.36rem;
height: 2.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 3.73pxpx;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-right-bracket-middle img { .invest-wrapper-right-bracket-middle img {
...@@ -211,8 +412,18 @@ body { ...@@ -211,8 +412,18 @@ body {
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
width: 3.73pxpx; @media screen and (max-width: 750px) {
height: 43px; width: 0.36rem;
height: 2.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 3.73pxpx;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-content-green-triangle { .invest-wrapper-content-green-triangle {
...@@ -225,38 +436,85 @@ body { ...@@ -225,38 +436,85 @@ body {
} }
.operator-wrapper { .operator-wrapper {
margin-left: 47px; @media screen and (max-width: 750px) {
margin-top: 26px; margin-left: 2.88rem;
margin-top: 1.29rem;
}
@media screen and (max-width: 1650px) {
margin-left: 47px;
margin-top: 26px;
}
@media screen and (min-width: 1651px) and (min-width: 751px) {
margin-left: 72px;
margin-top: 36px;
}
display: relative; display: relative;
} }
.operator-wrapper-title { .operator-wrapper-title {
margin-bottom: 30px; @media screen and (max-width: 750px) {
margin-bottom: 1.07rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 30px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 30px;
}
} }
.operator-wrapper-title img { .operator-wrapper-title img {
width: 110px; @media screen and (max-width: 750px) {
height: 25px; width: 6rem;
height: 1.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 110px;
height: 25px;
}
@media screen and (min-width: 1651px) {
width: 168px;
height: 38px;
}
} }
.operator-wrapper-content { .operator-wrapper-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.operator-wrapper-content-box { .operator-wrapper-content-box {
margin-right: 30px; @media screen and (max-width: 1650px) {
margin-bottom: 18px; margin-right: 30px;
margin-bottom: 18px;
}
@media screen and (min-width: 1651px) {
margin-right: 40px;
margin-bottom: 30px;
}
position: relative; position: relative;
} }
.operator-wrapper-content-box-title { .operator-wrapper-content-box-title {
color: #37f1e7; color: #37f1e7;
font-size: 16px; @media screen and (max-width: 1650px) {
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 24px;
}
/* margin-bottom: 10px; */ /* margin-bottom: 10px; */
margin-left: 28px; margin-left: 28px;
} }
.operator-wrapper-content-box-chart { .operator-wrapper-content-box-chart {
/* width: 472px; */ /* width: 472px; */
/* height: 170px; */ /* height: 170px; */
height: 120px; @media screen and (max-width: 750px) {
height: 7.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 120px;
}
@media screen and (min-width: 1651px) {
height: 170px;
}
position: relative; position: relative;
background-size: cover; background-size: cover;
padding-top: 4px; padding-top: 4px;
...@@ -264,7 +522,15 @@ body { ...@@ -264,7 +522,15 @@ body {
display: flex; display: flex;
} }
.operator-wrapper-content-box-progress { .operator-wrapper-content-box-progress {
height: 137px; @media screen and (max-width: 750px) {
height: 12rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px;
}
@media screen and (min-width: 1651px) {
height: 170px;
}
position: relative; position: relative;
background-size: cover; background-size: cover;
...@@ -273,44 +539,125 @@ body { ...@@ -273,44 +539,125 @@ body {
display: flex; display: flex;
} }
.electricity-box-progress { .electricity-box-progress {
height: 137px; @media screen and (max-width: 750px) {
height: 7.6rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px;
}
@media screen and (min-width: 1651px) {
height: 170px;
}
position: relative; position: relative;
background-size: cover; background-size: cover;
padding-top: 4px; padding-top: 4px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
} }
.repair-requir-info {
@media screen and (max-width: 750px) {
display: block;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
display: flex;
}
@media screen and (min-width: 1651px) {
display: flex;
}
}
.advise-wrapper { .advise-wrapper {
margin-left: 47px; @media screen and (max-width: 1650px) {
margin-top: 14px; margin-left: 47px;
margin-top: 14px;
}
@media screen and (min-width: 1651px) {
margin-left: 72px;
margin-top: 20px;
}
display: relative; display: relative;
} }
.advise-wrapper-title { .advise-wrapper-title {
margin-bottom: 10px; margin-bottom: 10px;
} }
.advise-wrapper-title img { .advise-wrapper-title img {
width: 140px; @media screen and (max-width: 750px) {
height: 24px; width: 9.18rem;
height: 1.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 140px;
height: 24px;
}
@media screen and (min-width: 1651px) {
width: 257px;
height: 38px;
}
} }
.advise-wrapper-content-item { .advise-wrapper-content-item {
display: flex; display: flex;
margin-bottom: 8px; @media screen and (max-width: 750px) {
margin-bottom: 0.57rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 8px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 16px;
}
} }
.advise-wrapper-content-item img { .advise-wrapper-content-item img {
width: 13px; @media screen and (max-width: 750px) {
height: 13px; width: 0.71rem;
margin-right: 13px; height: 0.71rem;
margin-top: 6px; margin-right: 0.71rem;
margin-top: 0.36rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 13px;
height: 13px;
margin-right: 13px;
margin-top: 6px;
}
@media screen and (min-width: 1651px) {
width: 20px;
height: 20px;
margin-right: 20px;
margin-top: 10px;
}
} }
.advise-wrapper-content-item-text { .advise-wrapper-content-item-text {
font-size: 18px; @media screen and (max-width: 750px) {
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
color: #fff; color: #fff;
opacity: 0.7; opacity: 0.7;
} }
.chart-area { .chart-area {
width: 100px; @media screen and (max-width: 750px) {
height: 100px; /* width: 5rem;
margin: 12px 10px 14px 19px; height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */
width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
}
@media screen and (min-width: 1651px) {
width: 140px;
height: 140px;
margin: 12px 24px 20px 28px;
}
padding: 14px 14px; padding: 14px 14px;
box-sizing: border-box; box-sizing: border-box;
...@@ -319,8 +666,20 @@ body { ...@@ -319,8 +666,20 @@ body {
} }
.circle-bar { .circle-bar {
font-size: 200px; font-size: 200px;
width: 72px; @media screen and (max-width: 750px) {
height: 72px; /* width: 4rem;
height: 4rem; */
width: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
position: relative; position: relative;
/* background-color: #333; */ /* background-color: #333; */
...@@ -328,8 +687,20 @@ body { ...@@ -328,8 +687,20 @@ body {
} }
.circle-bar-left, .circle-bar-left,
.circle-bar-right { .circle-bar-right {
width: 72px; @media screen and (max-width: 750px) {
height: 72px; /* width: 4rem;
height: 4rem; */
width: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
...@@ -339,15 +710,45 @@ body { ...@@ -339,15 +710,45 @@ body {
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/ */
.circle-bar-right { .circle-bar-right {
clip: rect(0, auto, auto, 35px); @media screen and (max-width: 750px) {
/* clip: rect(0, auto, auto, 2rem); */
clip: rect(0, auto, auto, 35px);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (min-width: 1651px) {
clip: rect(0, auto, auto, 56px);
}
} }
.circle-bar-left { .circle-bar-left {
clip: rect(0, 35px, auto, 0); @media screen and (max-width: 750px) {
/* clip: rect(0, 2rem, auto, 0); */
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
} }
.mask { .mask {
width: 60px; @media screen and (max-width: 750px) {
height: 60px; /* width: 3.2rem;
height: 3.2rem; */
width: 60px;
height: 60px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 89.6px;
height: 89.6px;
}
background-color: #0c0e14; background-color: #0c0e14;
text-align: center; text-align: center;
...@@ -355,9 +756,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -355,9 +756,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.mask :first-child { .mask :first-child {
font-size: 22px; @media screen and (max-width: 750px) {
height: 30px; /* font-size: 1.2rem;
line-height: 10px; height: 3.2rem;
line-height: 2.5rem; */
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
...@@ -365,8 +781,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -365,8 +781,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-right-2 { .circle-bar-right-2 {
/* width: 112px; /* width: 112px;
height: 112px; */ height: 112px; */
width: 72px; @media screen and (max-width: 750px) {
height: 72px; width: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
} }
...@@ -375,31 +801,79 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -375,31 +801,79 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/ */
.circle-bar-right-2 { .circle-bar-right-2 {
clip: rect(0, auto, auto, 35px); @media screen and (max-width: 750px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (min-width: 1651px) {
clip: rect(0, auto, auto, 56px);
}
} }
.circle-bar-left-2 { .circle-bar-left-2 {
clip: rect(0, 35px, auto, 0); @media screen and (max-width: 750px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
} }
.second-mask { .second-mask {
width: 60px; @media screen and (max-width: 750px) {
height: 60px; width: 60px;
height: 60px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 89.6px;
height: 89.6px;
}
background-color: #0c0e14; background-color: #0c0e14;
text-align: center; text-align: center;
line-height: 22.4px; line-height: 22.4px;
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.second-mask :first-child { .second-mask :first-child {
font-size: 22px; @media screen and (max-width: 750px) {
height: 30px; font-size: 22px;
line-height: 10px; height: 30px;
line-height: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
.circle-bar-3 { .circle-bar-3 {
font-size: 200px; font-size: 200px;
width: 72px; @media screen and (max-width: 750px) {
height: 72px; width: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
position: relative; position: relative;
background: #f3be28; background: #f3be28;
} }
...@@ -421,31 +895,79 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -421,31 +895,79 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-left-3, .circle-bar-left-3,
.circle-bar-right-3 { .circle-bar-right-3 {
width: 72px; @media screen and (max-width: 750px) {
height: 72px; width: 72px;
height: 72px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
} }
.circle-bar-right-3 { .circle-bar-right-3 {
clip: rect(0, auto, auto, 35px); @media screen and (max-width: 750px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px);
}
@media screen and (min-width: 1651px) {
clip: rect(0, auto, auto, 56px);
}
} }
.circle-bar-left-3 { .circle-bar-left-3 {
clip: rect(0, 35px, auto, 0); @media screen and (max-width: 750px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
} }
.third-mask { .third-mask {
width: 60px; @media screen and (max-width: 750px) {
height: 60px; width: 60px;
height: 60px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 89.6px;
height: 89.6px;
}
background-color: #0c0e14; background-color: #0c0e14;
text-align: center; text-align: center;
line-height: 22.4px; line-height: 22.4px;
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.third-mask :first-child { .third-mask :first-child {
font-size: 22px; @media screen and (max-width: 750px) {
height: 30px; font-size: 22px;
line-height: 10px; height: 30px;
line-height: 10px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
height: 30px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
/*所有的后代都水平垂直居中，这样就是同心圆了*/ /*所有的后代都水平垂直居中，这样就是同心圆了*/
...@@ -464,8 +986,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -464,8 +986,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.percent-text { .percent-text {
color: #fff; color: #fff;
font-size: 18px; @media screen and (max-width: 750px) {
margin-top: 30px; font-size: 0.79rem;
margin-top: 1.79rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
margin-top: 30px;
}
@media screen and (min-width: 1651px) {
font-size: 22px;
margin-top: 50px;
}
opacity: 0.7; opacity: 0.7;
} }
...@@ -475,34 +1007,82 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -475,34 +1007,82 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc img { .chart-desc img {
width: 165px; @media screen and (max-width: 750px) {
height: 18px; width: 9.89rem;
height: 0.96rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 165px;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 277px;
height: 27px;
}
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.chart-desc-other { .chart-desc-other {
width: 175px !important; @media screen and (max-width: 750px) {
height: 18px; width: 10.46rem;
height: 0.96rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 175px !important;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 293px;
height: 27px;
}
} }
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
display: flex; display: flex;
margin-top: 10px; @media screen and (max-width: 750px) {
width: 160px; margin-top: 1.07rem;
width: 9.29rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 10px;
width: 160px;
}
@media screen and (min-width: 1651px) {
margin-top: 30px;
width: 260px;
}
} }
.chart-desc-text { .chart-desc-text {
color: #fff; color: #fff;
font-size: 18px; @media screen and (max-width: 750px) {
margin-left: 8px; font-size: 1rem;
margin-top: 4px; margin-left: 0.71rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
margin-left: 8px;
margin-top: 4px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
margin-left: 20px;
}
} }
.chart-desc-value { .chart-desc-value {
margin-left: auto; margin-left: auto;
margin-right: 10px; margin-right: 10px;
color: #fff; color: #fff;
font-size: 22px; @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
} }
...@@ -511,15 +1091,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -511,15 +1091,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc-unfinished-value { .chart-desc-unfinished-value {
color: #ff6464; color: #ff6464;
font-size: 22px; @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
margin-left: auto; margin-left: auto;
margin-right: 10px; margin-right: 10px;
} }
.chart-desc-daily-legend { .chart-desc-daily-legend {
width: 8px; @media screen and (max-width: 750px) {
height: 8px; width: 0.43rem;
height: 0.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 8px;
height: 8px;
}
@media screen and (min-width: 1651px) {
width: 12px;
height: 12px;
}
background: rgba(92, 179, 255, 0.302); background: rgba(92, 179, 255, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #5cb3ff; border: 2px solid #5cb3ff;
...@@ -527,8 +1125,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -527,8 +1125,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: 20px; margin-left: 20px;
} }
.chart-desc-handle-legend { .chart-desc-handle-legend {
width: 8px; @media screen and (max-width: 750px) {
height: 8px; width: 0.43rem;
height: 0.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 8px;
height: 8px;
}
@media screen and (min-width: 1651px) {
width: 12px;
height: 12px;
}
background: rgba(255, 100, 100, 0.302); background: rgba(255, 100, 100, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #ff6464; border: 2px solid #ff6464;
...@@ -540,24 +1148,52 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -540,24 +1148,52 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.repair-require-chart { .repair-require-chart {
background: url("./assets/repair-require-bg.png") no-repeat; background: url("./assets/repair-require-bg.png") no-repeat;
width: 115px; @media screen and (max-width: 750px) {
height: 115px; width: 115px;
height: 115px;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
background-size: cover; background-size: cover;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
width: 115px; @media screen and (max-width: 1650px) {
height: 115px; width: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
} }
.contract-chart { .contract-chart {
background: url("./assets/contract-bg.png") no-repeat; background: url("./assets/contract-bg.png") no-repeat;
width: 115px; @media screen and (max-width: 1650px) {
height: 115px; width: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
background-size: cover; background-size: cover;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
width: 115px; @media screen and (max-width: 1650px) {
height: 115px; width: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
} }
.top-left { .top-left {
...@@ -593,51 +1229,153 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -593,51 +1229,153 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right: 0; right: 0;
} }
.repair-require-info { .repair-require-info {
margin-left: 10px; @media screen and (max-width: 750px) {
margin-left: 0.71rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
}
margin-top: 10px; margin-top: 10px;
} }
.repair-require-info img { .repair-require-info img {
width: 65px; @media screen and (max-width: 750px) {
height: 60px; width: 4.82rem;
height: 4.43rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 65px;
height: 60px;
}
@media screen and (min-width: 1651px) {
width: 100px;
height: 92px;
}
} }
.repair-require-info-text { .repair-require-info-text {
color: #fff; color: #fff;
margin-left: 8px; @media screen and (max-width: 750px) {
font-size: 0.86rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
}
} }
.repair-require-info-text span { .repair-require-info-text span {
font-weight: 700; font-weight: 700;
font-size: 18px; @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
text-align: center; text-align: center;
} }
.electricity-info-text { .electricity-info-text {
color: #ff6464; color: #ff6464;
margin-left: 8px; @media screen and (max-width: 750px) {
font-size: 0.86rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
}
} }
.electricity-info-text span { .electricity-info-text span {
font-weight: 700; font-weight: 700;
font-size: 18px; @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
text-align: center; text-align: center;
} }
.chart-data { .chart-data {
position: relative; position: relative;
margin-top: 20px; @media screen and (max-width: 750px) {
width: 180px; width: 10.55rem;
margin-left: 20px; margin-left: 1.39rem;
margin-top: 0.36rem;
margin-bottom: 0.8rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 180px;
margin-left: 20px;
margin-top: 20px;
}
@media screen and (min-width: 1651px) {
width: 260px;
margin-left: 55px;
margin-top: 20px;
}
}
.chart-data img {
@media screen and (max-width: 750px) {
width: 11rem;
height: 0.96rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 165px;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 277px;
height: 27px;
}
} }
.bar-data { .bar-data {
position: relative; position: relative;
margin-left: 20px; @media screen and (max-width: 750px) {
margin-top: -20px; margin-left: 1.96rem;
width: 180px; margin-top: -1.25rem;
width: 10.1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 20px;
margin-top: -20px;
width: 180px;
}
@media screen and (min-width: 1651px) and (min-width: 751px) {
margin-left: 55px;
margin-top: -35px;
width: 260px;
}
} }
.bar-data-2 { .bar-data-2 {
position: relative; position: relative;
margin-left: 20px; @media screen and (max-width: 750px) {
margin-top: 10px; margin-left: 1.96rem;
width: 180px; margin-top: 0.35rem;
width: 10.1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 20px;
margin-top: 10px;
width: 180px;
}
@media screen and (min-width: 1651px) {
margin-left: 55px;
margin-top: 10px;
width: 260px;
}
} }
.chart-data-text { .chart-data-text {
display: flex; display: flex;
...@@ -645,17 +1383,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -645,17 +1383,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data-text-title { .chart-data-text-title {
color: #fff; color: #fff;
opacity: 0.8; opacity: 0.8;
font-size: 16px; @media screen and (max-width: 750px) {
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
} }
.chart-data-text-num { .chart-data-text-num {
color: #fff; color: #fff;
font-size: 22px; @media screen and (max-width: 750px) {
margin-right: 30px; font-size: 1.21rem;
margin-right: 2rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
margin-right: 30px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
margin-left: auto; margin-left: auto;
} }
.return-rate { .return-rate {
/* background: linear-gradient(#00d8ff, #00b6ff); */
color: #00d8ff; color: #00d8ff;
width: 260px; width: 260px;
} }
...@@ -666,8 +1420,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -666,8 +1420,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
initial-value: 0%; initial-value: 0%;
} }
.g-progress { .g-progress {
margin: auto; @media screen and (max-width: 750px) {
width: 167px; margin: 0;
width: 9.14rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 167px;
margin: auto;
}
@media screen and (min-width: 1651px) {
width: 256px;
margin: auto;
}
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
...@@ -681,8 +1445,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -681,8 +1445,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
transition: 0.3s --progress; transition: 0.3s --progress;
} }
.assign-progress { .assign-progress {
margin: auto; @media screen and (max-width: 750px) {
width: 166px; margin: 0;
width: 9.14rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 166px;
margin: auto;
}
@media screen and (min-width: 1651px) {
width: 256px;
margin: auto;
}
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
......
report.html
...@@ -316,36 +316,38 @@ ...@@ -316,36 +316,38 @@
<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"><span>389</span>个</div>
</div> </div>
<div class="chart-desc"> <div class="repair-requir-info">
<div class="chart-data"> <div class="chart-desc">
<div class="chart-data-text"> <div class="chart-data">
<div class="chart-data-text-title">处理中</div> <div class="chart-data-text">
<div class="chart-data-text-num">293</div> <div class="chart-data-text-title">处理中</div>
<div class="chart-data-text-num">293</div>
</div>
<img src="./assets/line.png" />
</div> </div>
<img src="./assets/line.png" /> <div class="chart-data">
</div> <div class="chart-data-text">
<div class="chart-data"> <div class="chart-data-text-title">工单回访率</div>
<div class="chart-data-text"> <div class="chart-data-text-num">70%</div>
<div class="chart-data-text-title">工单回访率</div> </div>
<div class="chart-data-text-num">70%</div> <div class="g-progress" style="--progress: 70%"></div>
</div> </div>
<div class="g-progress" style="--progress: 70%"></div>
</div> </div>
</div> <div class="chart-desc">
<div class="chart-desc"> <div class="chart-data">
<div class="chart-data"> <div class="chart-data-text">
<div class="chart-data-text"> <div class="chart-data-text-title">平均处理时长</div>
<div class="chart-data-text-title">平均处理时长</div> <div class="chart-data-text-num">2.4h</div>
<div class="chart-data-text-num">2.4h</div> </div>
<img src="./assets/line.png" />
</div> </div>
<img src="./assets/line.png" /> <div class="chart-data">
</div> <div class="chart-data-text">
<div class="chart-data"> <div class="chart-data-text-title">派单及时率</div>
<div class="chart-data-text"> <div class="chart-data-text-num">99%</div>
<div class="chart-data-text-title">派单及时率</div> </div>
<div class="chart-data-text-num">99%</div> <div class="assign-progress" style="--progress: 99%"></div>
</div> </div>
<div class="assign-progress" style="--progress: 99%"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -506,6 +508,7 @@ ...@@ -506,6 +508,7 @@
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
borderColor: "", borderColor: "",
...@@ -552,6 +555,7 @@ ...@@ -552,6 +555,7 @@
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
borderColor: "", borderColor: "",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论