Skip to content

R
report-html-template
Commit 1d93efa1 by Tippi.Rao
Options

小程序适配修改

parent 0e99ff9e
正在显示 包含 489 行增加 和 153 行删除
report.css
@media screen and (max-width: 750px) {
.report-title-bg > img {
width: 23.57rem;
height: 2.8rem;
}
.report-title-time {
font-size: 0.86rem;
}
.report-title-info {
font-size: 0.86rem;
}
.invest-wrapper {
margin-top: 3.75rem;
margin-left: 2.4rem;
}
.invest-wrapper-title {
margin-bottom: 1.1rem;
}
.invest-wrapper .invest-wrapper-title img {
width: 6rem;
height: 1.36rem;
}
.invest-wrapper-content {
font-size: 1rem;
}
.invest-wrapper-left-bracket img {
width: 0.36rem;
height: 2.43rem;
}
.invest-wrapper-right-bracket img {
width: 0.36rem;
height: 2.42rem;
}
.invest-wrapper-content-first-text {
margin-left: 0.32rem;
margin-top: 0.32rem;
}
.invest-wrapper-content-last-text {
margin-right: 0.14rem;
}
.invest-wrapper-content-customers {
font-size: 1.5rem;
}
.invest-wrapper-content-left {
font-size: 1rem;
}
.invest-wrapper-content-left-item-img {
width: 9.21rem;
height: 1.68rem;
margin-right: 0.82rem;
}
.invest-wrapper-content-left-item-line {
width: 4.54rem;
height: 0.5rem;
margin-top: 0.64rem;
margin-right: 0.71rem;
}
.invest-wrapper-content-left-item-type {
font-size: 1rem;
width: 4.29rem;
}
.invest-wrapper-content-left-item-num {
font-size: 1.21rem;
}
.invest-wrapper-content-right {
margin-left: 0;
margin-top: 1.79rem;
}
.invest-wrapper-left-bracket-big img {
width: 0.36rem;
height: 4.07rem;
}
.invest-wrapper-left-bracket-middle img {
width: 0.36rem;
height: 2.43rem;
}
.invest-wrapper-right-bracket-middle img {
width: 0.36rem;
height: 2.43rem;
}
.operator-wrapper {
margin-left: 2.88rem;
margin-top: 1.29rem;
}
.operator-wrapper-title {
margin-bottom: 1.07rem;
}
.operator-wrapper-title img {
width: 6rem;
height: 1.36rem;
}
.operator-wrapper-content-box {
margin-right: 1.07rem;
margin-bottom: 0.64rem;
}
.operator-wrapper-content-box-title {
font-size: 0.57rem;
}
.operator-wrapper-content-box-chart {
height: 7.43rem;
}
.operator-wrapper-content-box-progress {
height: 12rem;
}
.electricity-box-progress {
height: 7.6rem;
}
.repair-requir-info {
display: block;
}
.advise-wrapper-title img {
width: 9.18rem;
height: 1.36rem;
}
.advise-wrapper-content-item {
margin-bottom: 0.57rem;
}
.advise-wrapper-content-item img {
width: 0.71rem;
height: 0.71rem;
margin-right: 0.71rem;
margin-top: 0.36rem;
}
.advise-wrapper-content-item-text {
font-size: 1rem;
}
.chart-area {
/* width: 5rem;
height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */
width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
}
.circle-bar {
/* width: 4rem;
height: 4rem; */
width: 72px;
height: 72px;
}
.circle-bar-left,
.circle-bar-right {
/* width: 4rem;
height: 4rem; */
width: 72px;
height: 72px;
}
.circle-bar-right {
/* clip: rect(0, auto, auto, 2rem); */
clip: rect(0, auto, auto, 35px);
}
.circle-bar-left {
/* clip: rect(0, 2rem, auto, 0); */
clip: rect(0, 35px, auto, 0);
}
.mask {
/* width: 3.2rem;
height: 3.2rem; */
width: 60px;
height: 60px;
position: relative;
}
.mask :first-child {
/* font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem; */
font-size: 22px;
height: 30px;
line-height: 10px;
}
.circle-bar-left-2,
.circle-bar-right-2 {
width: 72px;
height: 72px;
}
.circle-bar-right-2 {
clip: rect(0, auto, auto, 35px);
}
.circle-bar-left-2 {
clip: rect(0, 35px, auto, 0);
}
.second-mask {
width: 60px;
height: 60px;
}
.second-mask :first-child {
font-size: 22px;
height: 30px;
line-height: 10px;
}
.circle-bar-3 {
width: 72px;
height: 72px;
}
.circle-bar-left-3,
.circle-bar-right-3 {
width: 72px;
height: 72px;
}
.circle-bar-right-3 {
clip: rect(0, auto, auto, 35px);
}
.circle-bar-left-3 {
clip: rect(0, 35px, auto, 0);
}
.third-mask {
width: 60px;
height: 60px;
}
.third-mask :first-child {
font-size: 22px;
height: 30px;
line-height: 10px;
}
.percent-text {
font-size: 0.79rem;
margin-top: 1.79rem !important;
/* margin-top: 3rem; */
/* margin-top: 0; */
}
.chart-desc img {
width: 9.89rem;
height: 0.96rem;
}
.chart-desc-other {
width: 10.46rem;
height: 0.96rem;
}
.chart-desc-task {
margin-top: 1.07rem;
width: 9.29rem;
}
.chart-desc-text {
font-size: 1rem;
margin-left: 0.71rem;
}
.chart-desc-value {
font-size: 1.21rem;
}
.chart-desc-unfinished-value {
font-size: 1.21rem;
}
.chart-desc-daily-legend {
width: 0.43rem;
height: 0.43rem;
}
.chart-desc-handle-legend {
width: 0.43rem;
height: 0.43rem;
}
.repair-require-chart {
width: 115px;
height: 115px;
}
.repair-require-info {
margin-left: 0.71rem;
}
.repair-require-info img {
width: 4.82rem;
height: 4.43rem;
}
.repair-require-info-text {
font-size: 0.86rem;
}
.repair-require-info-text span {
font-size: 1.21rem;
}
.electricity-info-text {
font-size: 0.86rem;
}
.electricity-info-text span {
font-size: 1.21rem;
}
.chart-data {
width: 10.55rem;
margin-left: 1.39rem;
margin-top: 0.36rem;
margin-bottom: 0.8rem;
}
.chart-data img {
width: 11rem;
height: 0.96rem;
}
.bar-data {
margin-left: 1.96rem;
margin-top: -1.25rem;
width: 10.1rem;
}
.bar-data-2 {
margin-left: 1.96rem;
margin-top: 0.35rem;
width: 10.1rem;
}
.chart-data-text-title {
font-size: 1rem;
}
.chart-data-text-num {
font-size: 1.21rem;
margin-right: 2rem;
}
.g-progress {
margin: 0;
width: 9.14rem;
}
.assign-progress {
margin: 0;
width: 9.14rem;
}
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
html {
height: 99vh;
}
}
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;
...@@ -51,10 +365,10 @@ body { ...@@ -51,10 +365,10 @@ body {
transform: translateX(-50%); transform: translateX(-50%);
} }
.report-title-bg > img { .report-title-bg > img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 23.57rem; width: 23.57rem;
height: 2.8rem; height: 2.8rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 504px; width: 504px;
height: 51px; height: 51px;
...@@ -91,10 +405,10 @@ body { ...@@ -91,10 +405,10 @@ body {
} }
} }
.invest-wrapper { .invest-wrapper {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-top: 3.75rem; margin-top: 3.75rem;
margin-left: 2.4rem; margin-left: 2.4rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 70px; margin-top: 70px;
margin-left: 47px; margin-left: 47px;
...@@ -105,9 +419,9 @@ body { ...@@ -105,9 +419,9 @@ body {
} }
} }
.invest-wrapper-title { .invest-wrapper-title {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-bottom: 1.1rem; margin-bottom: 1.1rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 27px; margin-bottom: 27px;
} }
...@@ -116,10 +430,10 @@ body { ...@@ -116,10 +430,10 @@ body {
} }
} }
.invest-wrapper .invest-wrapper-title img { .invest-wrapper .invest-wrapper-title img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 6rem; width: 6rem;
height: 1.36rem; height: 1.36rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 110px; width: 110px;
height: 25px; height: 25px;
...@@ -131,9 +445,9 @@ body { ...@@ -131,9 +445,9 @@ body {
} }
.invest-wrapper-content { .invest-wrapper-content {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1rem; font-size: 1rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
} }
...@@ -153,10 +467,10 @@ body { ...@@ -153,10 +467,10 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 0.36rem; width: 0.36rem;
height: 2.43rem; height: 2.43rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px; width: 6px;
height: 43px; height: 43px;
...@@ -171,10 +485,10 @@ body { ...@@ -171,10 +485,10 @@ body {
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 0.36rem; width: 0.36rem;
height: 2.42rem; height: 2.42rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px; width: 6px;
height: 43px; height: 43px;
...@@ -186,10 +500,10 @@ body { ...@@ -186,10 +500,10 @@ body {
} }
.invest-wrapper-content-first-text { .invest-wrapper-content-first-text {
display: inline-block; display: inline-block;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-left: 0.32rem; margin-left: 0.32rem;
margin-top: 0.32rem; margin-top: 0.32rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px; margin-left: 10px;
margin-top: 8px; margin-top: 8px;
...@@ -204,9 +518,9 @@ body { ...@@ -204,9 +518,9 @@ body {
} }
.invest-wrapper-content-last-text { .invest-wrapper-content-last-text {
display: inline-block; display: inline-block;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-right: 0.14rem; margin-right: 0.14rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-right: 10px; margin-right: 10px;
} }
...@@ -216,9 +530,9 @@ body { ...@@ -216,9 +530,9 @@ body {
} }
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
color: #ff6464; color: #ff6464;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1.5rem; font-size: 1.5rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 24px; font-size: 24px;
} }
...@@ -229,9 +543,9 @@ body { ...@@ -229,9 +543,9 @@ body {
.invest-wrapper-content-left { .invest-wrapper-content-left {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1rem; font-size: 1rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 28px; font-size: 28px;
} }
...@@ -250,11 +564,11 @@ body { ...@@ -250,11 +564,11 @@ body {
} }
} }
.invest-wrapper-content-left-item-img { .invest-wrapper-content-left-item-img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 9.21rem; width: 9.21rem;
height: 1.68rem; height: 1.68rem;
margin-right: 0.82rem; margin-right: 0.82rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 170px; width: 170px;
height: 30px; height: 30px;
...@@ -273,12 +587,12 @@ body { ...@@ -273,12 +587,12 @@ body {
height: 100%; height: 100%;
} }
.invest-wrapper-content-left-item-line { .invest-wrapper-content-left-item-line {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 4.54rem; width: 4.54rem;
height: 0.5rem; height: 0.5rem;
margin-top: 0.64rem; margin-top: 0.64rem;
margin-right: 0.71rem; margin-right: 0.71rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 82px; width: 82px;
height: 7px; height: 7px;
...@@ -295,10 +609,10 @@ body { ...@@ -295,10 +609,10 @@ body {
.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) { /* @media screen and (max-width: 750px) {
font-size: 1rem; font-size: 1rem;
width: 4.29rem; width: 4.29rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
} }
...@@ -309,9 +623,9 @@ body { ...@@ -309,9 +623,9 @@ body {
} }
.invest-wrapper-content-left-item-num { .invest-wrapper-content-left-item-num {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1.21rem; font-size: 1.21rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
} }
...@@ -321,10 +635,10 @@ body { ...@@ -321,10 +635,10 @@ body {
font-weight: 700; font-weight: 700;
} }
.invest-wrapper-content-right { .invest-wrapper-content-right {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-left: 0; margin-left: 0;
margin-top: 1.79rem; margin-top: 1.79rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 130px; margin-left: 130px;
margin-top: 40px; margin-top: 40px;
...@@ -353,10 +667,10 @@ body { ...@@ -353,10 +667,10 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 0.36rem; width: 0.36rem;
height: 4.07rem; height: 4.07rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px; width: 6px;
height: 73px; height: 73px;
...@@ -393,10 +707,10 @@ body { ...@@ -393,10 +707,10 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 0.36rem; width: 0.36rem;
height: 2.43rem; height: 2.43rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 3.73pxpx; width: 3.73pxpx;
height: 43px; height: 43px;
...@@ -412,10 +726,10 @@ body { ...@@ -412,10 +726,10 @@ body {
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 0.36rem; width: 0.36rem;
height: 2.43rem; height: 2.43rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 3.73pxpx; width: 3.73pxpx;
height: 43px; height: 43px;
...@@ -436,10 +750,10 @@ body { ...@@ -436,10 +750,10 @@ body {
} }
.operator-wrapper { .operator-wrapper {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-left: 2.88rem; margin-left: 2.88rem;
margin-top: 1.29rem; margin-top: 1.29rem;
} } */
@media screen and (max-width: 1650px) { @media screen and (max-width: 1650px) {
margin-left: 47px; margin-left: 47px;
margin-top: 26px; margin-top: 26px;
...@@ -451,9 +765,9 @@ body { ...@@ -451,9 +765,9 @@ body {
display: relative; display: relative;
} }
.operator-wrapper-title { .operator-wrapper-title {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-bottom: 1.07rem; margin-bottom: 1.07rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 30px; margin-bottom: 30px;
} }
...@@ -463,10 +777,10 @@ body { ...@@ -463,10 +777,10 @@ body {
} }
.operator-wrapper-title img { .operator-wrapper-title img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 6rem; width: 6rem;
height: 1.36rem; height: 1.36rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 110px; width: 110px;
height: 25px; height: 25px;
...@@ -506,9 +820,9 @@ body { ...@@ -506,9 +820,9 @@ body {
.operator-wrapper-content-box-chart { .operator-wrapper-content-box-chart {
/* width: 472px; */ /* width: 472px; */
/* height: 170px; */ /* height: 170px; */
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
height: 7.43rem; height: 7.43rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
height: 120px; height: 120px;
} }
...@@ -522,9 +836,9 @@ body { ...@@ -522,9 +836,9 @@ body {
display: flex; display: flex;
} }
.operator-wrapper-content-box-progress { .operator-wrapper-content-box-progress {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
height: 12rem; height: 12rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px; height: 137px;
} }
...@@ -539,9 +853,9 @@ body { ...@@ -539,9 +853,9 @@ body {
display: flex; display: flex;
} }
.electricity-box-progress { .electricity-box-progress {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
height: 7.6rem; height: 7.6rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px; height: 137px;
} }
...@@ -556,9 +870,9 @@ body { ...@@ -556,9 +870,9 @@ body {
display: flex; display: flex;
} }
.repair-requir-info { .repair-requir-info {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
display: block; display: block;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
display: flex; display: flex;
} }
...@@ -581,10 +895,10 @@ body { ...@@ -581,10 +895,10 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
.advise-wrapper-title img { .advise-wrapper-title img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 9.18rem; width: 9.18rem;
height: 1.36rem; height: 1.36rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 140px; width: 140px;
height: 24px; height: 24px;
...@@ -596,9 +910,9 @@ body { ...@@ -596,9 +910,9 @@ body {
} }
.advise-wrapper-content-item { .advise-wrapper-content-item {
display: flex; display: flex;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-bottom: 0.57rem; margin-bottom: 0.57rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 8px; margin-bottom: 8px;
} }
...@@ -607,12 +921,12 @@ body { ...@@ -607,12 +921,12 @@ body {
} }
} }
.advise-wrapper-content-item img { .advise-wrapper-content-item img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 0.71rem; width: 0.71rem;
height: 0.71rem; height: 0.71rem;
margin-right: 0.71rem; margin-right: 0.71rem;
margin-top: 0.36rem; margin-top: 0.36rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 13px; width: 13px;
height: 13px; height: 13px;
...@@ -627,9 +941,9 @@ body { ...@@ -627,9 +941,9 @@ body {
} }
} }
.advise-wrapper-content-item-text { .advise-wrapper-content-item-text {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1rem; font-size: 1rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
} }
...@@ -640,14 +954,14 @@ body { ...@@ -640,14 +954,14 @@ body {
opacity: 0.7; opacity: 0.7;
} }
.chart-area { .chart-area {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) { */
/* width: 5rem; /* width: 5rem;
height: 5rem; height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */ margin: 0.43rem 0.86rem 0.71rem 1rem; */
width: 100px; /* width: 100px;
height: 100px; height: 100px;
margin: 12px 10px 14px 19px; margin: 12px 10px 14px 19px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 100px; width: 100px;
height: 100px; height: 100px;
...@@ -666,12 +980,12 @@ body { ...@@ -666,12 +980,12 @@ body {
} }
.circle-bar { .circle-bar {
font-size: 200px; font-size: 200px;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) { */
/* width: 4rem; /* width: 4rem;
height: 4rem; */ height: 4rem; */
width: 72px; /* width: 72px;
height: 72px; height: 72px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
...@@ -687,12 +1001,12 @@ body { ...@@ -687,12 +1001,12 @@ body {
} }
.circle-bar-left, .circle-bar-left,
.circle-bar-right { .circle-bar-right {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) { */
/* width: 4rem; /* width: 4rem;
height: 4rem; */ height: 4rem; */
width: 72px; /* width: 72px;
height: 72px; height: 72px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
...@@ -710,10 +1024,10 @@ body { ...@@ -710,10 +1024,10 @@ 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) { /* @media screen and (max-width: 750px) { */
/* clip: rect(0, auto, auto, 2rem); */ /* clip: rect(0, auto, auto, 2rem); */
clip: rect(0, auto, auto, 35px); /* clip: rect(0, auto, auto, 35px);
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px); clip: rect(0, auto, auto, 35px);
} }
...@@ -722,10 +1036,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -722,10 +1036,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
} }
.circle-bar-left { .circle-bar-left {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) { */
/* clip: rect(0, 2rem, auto, 0); */ /* clip: rect(0, 2rem, auto, 0); */
clip: rect(0, 35px, auto, 0); /* clip: rect(0, 35px, auto, 0);
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0); clip: rect(0, 35px, auto, 0);
} }
...@@ -735,12 +1049,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -735,12 +1049,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.mask { .mask {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) { */
/* width: 3.2rem; /* width: 3.2rem;
height: 3.2rem; */ height: 3.2rem; */
width: 60px; /* width: 60px;
height: 60px; height: 60px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px; width: 60px;
height: 60px; height: 60px;
...@@ -754,16 +1068,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -754,16 +1068,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
text-align: center; text-align: center;
line-height: 22.4px; line-height: 22.4px;
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
position: relative;
} }
.mask :first-child { .mask :first-child {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) { */
/* font-size: 1.2rem; /* font-size: 1.2rem;
height: 3.2rem; height: 3.2rem;
line-height: 2.5rem; */ line-height: 2.5rem; */
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) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
height: 30px; height: 30px;
...@@ -781,10 +1096,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -781,10 +1096,10 @@ 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) { /* @media screen and (max-width: 750px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
...@@ -801,9 +1116,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -801,9 +1116,9 @@ 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) { /* @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) { @media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px); clip: rect(0, auto, auto, 35px);
} }
...@@ -812,9 +1127,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -812,9 +1127,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
} }
.circle-bar-left-2 { .circle-bar-left-2 {
@media screen and (max-width: 750px) { /* @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) { @media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0); clip: rect(0, 35px, auto, 0);
} }
...@@ -824,10 +1139,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -824,10 +1139,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.second-mask { .second-mask {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 60px; width: 60px;
height: 60px; height: 60px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px; width: 60px;
height: 60px; height: 60px;
...@@ -842,11 +1157,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -842,11 +1157,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.second-mask :first-child { .second-mask :first-child {
@media screen and (max-width: 750px) { /* @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) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
height: 30px; height: 30px;
...@@ -862,10 +1177,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -862,10 +1177,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-3 { .circle-bar-3 {
font-size: 200px; font-size: 200px;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
...@@ -895,10 +1210,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -895,10 +1210,10 @@ 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) { /* @media screen and (max-width: 750px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px; width: 72px;
height: 72px; height: 72px;
...@@ -912,9 +1227,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -912,9 +1227,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.circle-bar-right-3 { .circle-bar-right-3 {
@media screen and (max-width: 750px) { /* @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) { @media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, auto, auto, 35px); clip: rect(0, auto, auto, 35px);
} }
...@@ -923,9 +1238,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -923,9 +1238,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
} }
.circle-bar-left-3 { .circle-bar-left-3 {
@media screen and (max-width: 750px) { /* @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) { @media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0); clip: rect(0, 35px, auto, 0);
} }
...@@ -935,10 +1250,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -935,10 +1250,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.third-mask { .third-mask {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 60px; width: 60px;
height: 60px; height: 60px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px; width: 60px;
height: 60px; height: 60px;
...@@ -953,11 +1268,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -953,11 +1268,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.third-mask :first-child { .third-mask :first-child {
@media screen and (max-width: 750px) { /* @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) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
height: 30px; height: 30px;
...@@ -986,10 +1301,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -986,10 +1301,10 @@ 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) { /* @media screen and (max-width: 750px) {
font-size: 0.79rem; font-size: 0.79rem;
margin-top: 1.79rem; margin-top: 1.79rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
margin-top: 30px; margin-top: 30px;
...@@ -998,7 +1313,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -998,7 +1313,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-size: 22px; font-size: 22px;
margin-top: 50px; margin-top: 50px;
} }
position: absolute;
bottom: 0;
opacity: 0.7; opacity: 0.7;
} }
...@@ -1007,10 +1323,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1007,10 +1323,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc img { .chart-desc img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 9.89rem; width: 9.89rem;
height: 0.96rem; height: 0.96rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 165px; width: 165px;
height: 18px; height: 18px;
...@@ -1025,10 +1341,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1025,10 +1341,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
left: 0; left: 0;
} }
.chart-desc-other { .chart-desc-other {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 10.46rem; width: 10.46rem;
height: 0.96rem; height: 0.96rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 175px !important; width: 175px !important;
height: 18px; height: 18px;
...@@ -1041,10 +1357,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1041,10 +1357,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
display: flex; display: flex;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-top: 1.07rem; margin-top: 1.07rem;
width: 9.29rem; width: 9.29rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 10px; margin-top: 10px;
width: 160px; width: 160px;
...@@ -1056,10 +1372,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1056,10 +1372,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc-text { .chart-desc-text {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1rem; font-size: 1rem;
margin-left: 0.71rem; margin-left: 0.71rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
margin-left: 8px; margin-left: 8px;
...@@ -1074,9 +1390,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1074,9 +1390,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: auto; margin-left: auto;
margin-right: 10px; margin-right: 10px;
color: #fff; color: #fff;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1.21rem; font-size: 1.21rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
} }
...@@ -1091,9 +1407,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1091,9 +1407,9 @@ 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) { /* @media screen and (max-width: 750px) {
font-size: 1.21rem; font-size: 1.21rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
} }
...@@ -1106,10 +1422,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1106,10 +1422,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-right: 10px; margin-right: 10px;
} }
.chart-desc-daily-legend { .chart-desc-daily-legend {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 0.43rem; width: 0.43rem;
height: 0.43rem; height: 0.43rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -1125,10 +1441,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1125,10 +1441,10 @@ 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) { /* @media screen and (max-width: 750px) {
width: 0.43rem; width: 0.43rem;
height: 0.43rem; height: 0.43rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -1143,15 +1459,30 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1143,15 +1459,30 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-top: 12px; margin-top: 12px;
margin-left: 20px; margin-left: 20px;
} }
.will-finished {
@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(61, 235, 213, 0.302);
opacity: 1;
border: 2px solid #3debd5;
margin-top: 12px;
margin-left: 20px;
}
.desc-contract { .desc-contract {
margin-top: 4px; margin-top: 4px;
} }
.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) { /* @media screen and (max-width: 750px) {
width: 115px; width: 115px;
height: 115px; height: 115px;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 115px; width: 115px;
height: 115px; height: 115px;
...@@ -1229,9 +1560,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1229,9 +1560,9 @@ 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) { /* @media screen and (max-width: 750px) {
margin-left: 0.71rem; margin-left: 0.71rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px; margin-left: 10px;
} }
...@@ -1242,10 +1573,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1242,10 +1573,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-top: 10px; margin-top: 10px;
} }
.repair-require-info img { .repair-require-info img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 4.82rem; width: 4.82rem;
height: 4.43rem; height: 4.43rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 65px; width: 65px;
height: 60px; height: 60px;
...@@ -1257,9 +1588,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1257,9 +1588,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.repair-require-info-text { .repair-require-info-text {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 0.86rem; font-size: 0.86rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px; margin-left: 8px;
} }
...@@ -1269,9 +1600,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1269,9 +1600,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.repair-require-info-text span { .repair-require-info-text span {
font-weight: 700; font-weight: 700;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1.21rem; font-size: 1.21rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
} }
...@@ -1283,9 +1614,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1283,9 +1614,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.electricity-info-text { .electricity-info-text {
color: #ff6464; color: #ff6464;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 0.86rem; font-size: 0.86rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px; margin-left: 8px;
} }
...@@ -1295,9 +1626,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1295,9 +1626,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.electricity-info-text span { .electricity-info-text span {
font-weight: 700; font-weight: 700;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1.21rem; font-size: 1.21rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
} }
...@@ -1310,12 +1641,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1310,12 +1641,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data { .chart-data {
position: relative; position: relative;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 10.55rem; width: 10.55rem;
margin-left: 1.39rem; margin-left: 1.39rem;
margin-top: 0.36rem; margin-top: 0.36rem;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 180px; width: 180px;
margin-left: 20px; margin-left: 20px;
...@@ -1328,10 +1659,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1328,10 +1659,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
} }
.chart-data img { .chart-data img {
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
width: 11rem; width: 11rem;
height: 0.96rem; height: 0.96rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 165px; width: 165px;
height: 18px; height: 18px;
...@@ -1343,11 +1674,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1343,11 +1674,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.bar-data { .bar-data {
position: relative; position: relative;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-left: 1.96rem; margin-left: 1.96rem;
margin-top: -1.25rem; margin-top: -1.25rem;
width: 10.1rem; width: 10.1rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 20px; margin-left: 20px;
margin-top: -20px; margin-top: -20px;
...@@ -1361,11 +1692,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1361,11 +1692,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.bar-data-2 { .bar-data-2 {
position: relative; position: relative;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
margin-left: 1.96rem; margin-left: 1.96rem;
margin-top: 0.35rem; margin-top: 0.35rem;
width: 10.1rem; width: 10.1rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 20px; margin-left: 20px;
margin-top: 10px; margin-top: 10px;
...@@ -1383,9 +1714,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1383,9 +1714,9 @@ 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) { /* @media screen and (max-width: 750px) {
font-size: 1rem; font-size: 1rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 16px; font-size: 16px;
} }
...@@ -1395,10 +1726,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1395,10 +1726,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-data-text-num { .chart-data-text-num {
color: #fff; color: #fff;
@media screen and (max-width: 750px) { /* @media screen and (max-width: 750px) {
font-size: 1.21rem; font-size: 1.21rem;
margin-right: 2rem; margin-right: 2rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
margin-right: 30px; margin-right: 30px;
...@@ -1420,10 +1751,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1420,10 +1751,10 @@ 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) { /* @media screen and (max-width: 750px) {
margin: 0; margin: 0;
width: 9.14rem; width: 9.14rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 167px; width: 167px;
margin: auto; margin: auto;
...@@ -1445,10 +1776,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1445,10 +1776,10 @@ 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) { /* @media screen and (max-width: 750px) {
margin: 0; margin: 0;
width: 9.14rem; width: 9.14rem;
} } */
@media screen and (max-width: 1650px) and (min-width: 751px) { @media screen and (max-width: 1650px) and (min-width: 751px) {
width: 166px; width: 166px;
margin: auto; margin: auto;
......
report.html
...@@ -2,6 +2,10 @@ ...@@ -2,6 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"
/>
<title>ECharts</title> <title>ECharts</title>
<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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
...@@ -295,7 +299,7 @@ ...@@ -295,7 +299,7 @@
<img src="./assets/desc-line.png" /> <img src="./assets/desc-line.png" />
</div> </div>
<div class="chart-desc-task chart-desc-unfinished"> <div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div> <div class="will-finished"></div>
<div class="chart-desc-text">即将到期</div> <div class="chart-desc-text">即将到期</div>
<div class="chart-desc-unfinished-value">7</div> <div class="chart-desc-unfinished-value">7</div>
<img src="./assets/desc-line.png" /> <img src="./assets/desc-line.png" />
...@@ -433,6 +437,7 @@ ...@@ -433,6 +437,7 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var myChart, myChart2; var myChart, myChart2;
$(function () { $(function () {
var percent = parseInt($(".mask :first-child").text()); var percent = parseInt($(".mask :first-child").text());
console.log("percent==", percent); console.log("percent==", percent);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论