Skip to content

R
report-html-template
Commit 0a688d0c by Tippi.Rao
Options

小程序适配

parent f7d9847c
正在显示 包含 751 行增加 和 1034 行删除
report-ioc.css
...@@ -535,6 +535,15 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -535,6 +535,15 @@ 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 {
background: rgba(61, 235, 213, 0.302);
opacity: 1;
border: 2px solid #3debd5;
margin-top: 12px;
margin-left: 20px;
width: 8px;
height: 8px;
}
.desc-contract { .desc-contract {
margin-top: 4px; margin-top: 4px;
} }
......
report.css
...@@ -23,6 +23,9 @@ ...@@ -23,6 +23,9 @@
.invest-wrapper-content { .invest-wrapper-content {
font-size: 1rem; font-size: 1rem;
} }
.invest-wrapper-flex {
display: flex;
}
.invest-wrapper-left-bracket img { .invest-wrapper-left-bracket img {
width: 0.36rem; width: 0.36rem;
height: 2.43rem; height: 2.43rem;
...@@ -44,6 +47,9 @@ ...@@ -44,6 +47,9 @@
.invest-wrapper-content-left { .invest-wrapper-content-left {
font-size: 1rem; font-size: 1rem;
} }
.invest-wrapper-content-left-item {
margin-bottom: 0.14rem;
}
.invest-wrapper-content-left-item-img { .invest-wrapper-content-left-item-img {
width: 9.21rem; width: 9.21rem;
height: 1.68rem; height: 1.68rem;
...@@ -70,6 +76,11 @@ ...@@ -70,6 +76,11 @@
width: 0.36rem; width: 0.36rem;
height: 4.07rem; height: 4.07rem;
} }
.invest-wrapper-right-bracket-big img {
width: 0.21rem;
height: 2.61rem;
}
.invest-wrapper-left-bracket-middle img { .invest-wrapper-left-bracket-middle img {
width: 0.36rem; width: 0.36rem;
height: 2.43rem; height: 2.43rem;
...@@ -108,6 +119,10 @@ ...@@ -108,6 +119,10 @@
.repair-requir-info { .repair-requir-info {
display: block; display: block;
} }
.advise-wrapper {
margin-left: 1.68rem;
margin-top: 0.5rem;
}
.advise-wrapper-title img { .advise-wrapper-title img {
width: 9.18rem; width: 9.18rem;
height: 1.36rem; height: 1.36rem;
...@@ -248,9 +263,25 @@ ...@@ -248,9 +263,25 @@
width: 0.43rem; width: 0.43rem;
height: 0.43rem; height: 0.43rem;
} }
.will-finished {
width: 0.43rem;
height: 0.43rem;
}
.repair-require-chart { .repair-require-chart {
width: 115px; width: 4.11rem;
height: 115px; height: 4.11rem;
}
.repair-require-chart-wrapper {
width: 4.11rem;
height: 4.11rem;
}
.contract-chart {
width: 4.11rem;
height: 4.11rem;
}
.contract-chart-wrapper {
width: 4.11rem;
height: 4.11rem;
} }
.repair-require-info { .repair-require-info {
margin-left: 0.71rem; margin-left: 0.71rem;
...@@ -311,342 +342,758 @@ ...@@ -311,342 +342,758 @@
html { html {
height: 99vh; height: 99vh;
} }
} .report-title-bg > img {
html {
border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235;
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 99vh;
}
@media screen and (min-width: 1651px) {
}
position: relative;
}
body {
/* opacity: 0.15; */
font-size: 28px;
}
.left-top {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
left: -2px;
top: -2px;
}
.right-top {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
right: -2px;
top: -2px;
}
.left-bottom {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
left: -2px;
bottom: -2px;
}
.right-bottom {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
right: -2px;
bottom: -2px;
}
.report-title-bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.report-title-bg > img {
/* @media screen and (max-width: 750px) {
width: 23.57rem;
height: 2.8rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 504px; width: 504px;
height: 51px; height: 51px;
} }
@media screen and (min-width: 1651px) { .report-title-time {
width: 780px;
height: 82px;
}
}
.report-title {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
}
.report-title-time {
color: #37f1e7;
@media screen and (max-width: 1650px) {
font-size: 24px; font-size: 24px;
} }
@media screen and (min-width: 1651px) { .report-title-info {
font-size: 36px;
}
margin-right: 10px;
}
.report-title-info {
color: #ffffff;
@media screen and (max-width: 1650px) {
font-size: 24px; font-size: 24px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper {
font-size: 36px;
}
}
.invest-wrapper {
/* @media screen and (max-width: 750px) {
margin-top: 3.75rem;
margin-left: 2.4rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-top: 70px; margin-top: 70px;
margin-left: 47px; margin-left: 47px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-title {
margin-top: 120px;
margin-left: 72px;
}
}
.invest-wrapper-title {
/* @media screen and (max-width: 750px) {
margin-bottom: 1.1rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 27px; margin-bottom: 27px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper .invest-wrapper-title img {
margin-bottom: 30px;
}
}
.invest-wrapper .invest-wrapper-title img {
/* @media screen and (max-width: 750px) {
width: 6rem;
height: 1.36rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 110px; width: 110px;
height: 25px; height: 25px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content {
width: 168px;
height: 38px;
}
}
.invest-wrapper-content {
color: #fff;
/* @media screen and (max-width: 750px) {
font-size: 1rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px; font-size: 18px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-left-bracket img {
font-size: 28px;
}
position: relative;
display: inline-block;
}
.invest-wrapper-flex {
@media screen and (min-width: 751px) {
display: flex;
}
}
.invest-wrapper-left-bracket img {
position: absolute;
left: 0;
top: 0;
margin-right: 10px;
/* @media screen and (max-width: 750px) {
width: 0.36rem;
height: 2.43rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px; width: 6px;
height: 43px; height: 43px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-right-bracket img {
width: 10px;
height: 68px;
}
}
.invest-wrapper-right-bracket img {
position: absolute;
right: 0;
top: 0;
margin-left: 10px;
/* @media screen and (max-width: 750px) {
width: 0.36rem;
height: 2.42rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px; width: 6px;
height: 43px; height: 43px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-first-text {
width: 10px;
height: 68px;
}
}
.invest-wrapper-content-first-text {
display: inline-block;
/* @media screen and (max-width: 750px) {
margin-left: 0.32rem;
margin-top: 0.32rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px; margin-left: 10px;
margin-top: 8px; margin-top: 8px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-last-text {
margin-left: 20px;
margin-top: 12px;
}
}
.invest-wrapper-content-second-text {
display: inline-block;
}
.invest-wrapper-content-last-text {
display: inline-block;
/* @media screen and (max-width: 750px) {
margin-right: 0.14rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-right: 10px; margin-right: 10px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-customers {
margin-right: 20px;
}
}
.invest-wrapper-content-customers {
color: #ff6464;
/* @media screen and (max-width: 750px) {
font-size: 1.5rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 24px; font-size: 24px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-left {
font-size: 42px;
}
}
.invest-wrapper-content-left {
color: #fff;
/* @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; font-size: 28px;
} }
} .invest-wrapper-content-left-item {
.invest-wrapper-content-left-item {
display: flex;
@media screen and (max-width: 1650px) {
margin-bottom: 4px; margin-bottom: 4px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-left-item-img {
margin-bottom: 10px;
}
}
.invest-wrapper-content-left-item-img {
/* @media screen and (max-width: 750px) {
width: 9.21rem;
height: 1.68rem;
margin-right: 0.82rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 170px; width: 170px;
height: 30px; height: 30px;
margin-right: 10px; margin-right: 10px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-left-item-line {
width: 258px;
height: 47px;
margin-right: 20px;
}
text-align: center;
}
.invest-wrapper-content-left-item-img img {
width: 100%;
height: 100%;
}
.invest-wrapper-content-left-item-line {
/* @media screen and (max-width: 750px) {
width: 4.54rem;
height: 0.5rem;
margin-top: 0.64rem;
margin-right: 0.71rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 82px; width: 82px;
height: 7px; height: 7px;
margin-top: 9px; margin-top: 9px;
margin-right: 10px; margin-right: 10px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-left-item-type {
width: 127px;
height: 14px;
margin-top: 18px;
margin-right: 20px;
}
}
.invest-wrapper-content-left-item-type {
color: #fff;
opacity: 0.7;
/* @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; font-size: 18px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-left-item-num {
font-size: 28px;
}
margin-right: 45px;
}
.invest-wrapper-content-left-item-num {
color: #fff;
/* @media screen and (max-width: 750px) {
font-size: 1.21rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px; font-size: 22px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-content-right {
font-size: 34px;
}
font-weight: 700;
}
.invest-wrapper-content-right {
/* @media screen and (max-width: 750px) {
margin-left: 0;
margin-top: 1.79rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 130px; margin-left: 130px;
margin-top: 40px; margin-top: 40px;
} }
@media screen and (min-width: 1651px) { .invest-wrapper-left-bracket-big img {
width: 6px;
height: 73px;
}
.invest-wrapper-right-bracket-big img {
width: 6px;
height: 73px;
}
.invest-wrapper-left-bracket-middle img {
width: 3.73pxpx;
height: 43px;
}
.invest-wrapper-right-bracket-middle img {
width: 3.73px;
height: 43px;
}
.operator-wrapper {
margin-left: 47px;
margin-top: 26px;
}
.operator-wrapper-title {
margin-bottom: 30px;
}
.operator-wrapper-title img {
width: 110px;
height: 25px;
}
.operator-wrapper-content-box {
margin-right: 30px;
margin-bottom: 18px;
}
.operator-wrapper-content-box-title {
font-size: 16px;
}
.operator-wrapper-content-box-chart {
height: 120px;
}
.operator-wrapper-content-box-progress {
height: 137px;
}
.electricity-box-progress {
height: 137px;
}
.repair-requir-info {
display: flex;
}
.advise-wrapper {
margin-left: 47px;
margin-top: 14px;
}
.advise-wrapper-title img {
width: 140px;
height: 24px;
}
.advise-wrapper-content-item {
margin-bottom: 8px;
}
.advise-wrapper-content-item img {
width: 13px;
height: 13px;
margin-right: 13px;
margin-top: 6px;
}
.advise-wrapper-content-item-text {
font-size: 18px;
}
.chart-area {
width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
}
.circle-bar {
width: 72px;
height: 72px;
}
.circle-bar-left,
.circle-bar-right {
width: 72px;
height: 72px;
}
.circle-bar-right {
clip: rect(0, auto, auto, 35px);
}
.circle-bar-left {
clip: rect(0, 35px, auto, 0);
}
.mask {
width: 60px;
height: 60px;
}
.mask :first-child {
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: 18px;
margin-top: 30px !important;
}
.chart-desc img {
width: 165px;
height: 18px;
}
.chart-desc-other {
width: 175px !important;
height: 18px;
}
.chart-desc-task {
margin-top: 10px;
width: 160px;
}
.chart-desc-text {
font-size: 18px;
margin-left: 8px;
margin-top: 4px;
}
.chart-desc-value {
font-size: 22px;
}
.chart-desc-unfinished-value {
font-size: 22px;
}
.chart-desc-daily-legend {
width: 8px;
height: 8px;
}
.chart-desc-handle-legend {
width: 8px;
height: 8px;
}
.will-finished {
width: 8px;
height: 8px;
}
.repair-require-chart {
width: 115px;
height: 115px;
}
.repair-require-chart-wrapper {
width: 115px;
height: 115px;
}
.contract-chart {
width: 115px;
height: 115px;
}
.contract-chart-wrapper {
width: 115px;
height: 115px;
}
.repair-require-info {
margin-left: 10px;
}
.repair-require-info img {
width: 65px;
height: 60px;
}
.repair-require-info-text {
margin-left: 8px;
}
.repair-require-info-text span {
font-size: 18px;
}
.electricity-info-text {
margin-left: 8px;
}
.electricity-info-text span {
font-size: 18px;
}
.chart-data {
width: 180px;
margin-left: 20px;
margin-top: 20px;
}
.chart-data img {
width: 165px;
height: 18px;
}
.bar-data {
margin-left: 20px;
margin-top: -20px;
width: 180px;
}
.bar-data-2 {
margin-left: 20px;
margin-top: 10px;
width: 180px;
}
.chart-data-text-title {
font-size: 16px;
}
.chart-data-text-num {
font-size: 22px;
margin-right: 30px;
}
.g-progress {
width: 167px;
margin: auto;
}
.assign-progress {
width: 166px;
margin: auto;
}
}
@media screen and (min-width: 1651px) {
.report-title-bg > img {
width: 780px;
height: 82px;
}
.report-title-time {
font-size: 36px;
}
.report-title-info {
font-size: 36px;
}
.invest-wrapper {
margin-top: 120px;
margin-left: 72px;
}
.invest-wrapper-title {
margin-bottom: 30px;
}
.invest-wrapper .invest-wrapper-title img {
width: 168px;
height: 38px;
}
.invest-wrapper-content {
font-size: 28px;
}
.invest-wrapper-flex {
display: flex;
}
.invest-wrapper-left-bracket img {
width: 10px;
height: 68px;
}
.invest-wrapper-right-bracket img {
width: 10px;
height: 68px;
}
.invest-wrapper-content-first-text {
margin-left: 20px;
margin-top: 12px;
}
.invest-wrapper-content-last-text {
margin-right: 20px;
}
.invest-wrapper-content-customers {
font-size: 42px;
}
.invest-wrapper-content-left {
font-size: 28px;
}
.invest-wrapper-content-left-item {
margin-bottom: 10px;
}
.invest-wrapper-content-left-item-img {
width: 258px;
height: 47px;
margin-right: 20px;
}
.invest-wrapper-content-left-item-line {
width: 127px;
height: 14px;
margin-top: 18px;
margin-right: 20px;
}
.invest-wrapper-content-left-item-type {
font-size: 28px;
}
.invest-wrapper-content-left-item-num {
font-size: 34px;
}
.invest-wrapper-content-right {
margin-left: 184px; margin-left: 184px;
margin-top: 60px; margin-top: 60px;
} }
.invest-wrapper-left-bracket-big img {
width: 10px;
height: 114px;
}
.invest-wrapper-right-bracket-big img {
width: 10px;
height: 114px;
}
.invest-wrapper-left-bracket-middle img {
width: 10px;
height: 68px;
}
.invest-wrapper-right-bracket-middle img {
width: 10px;
height: 68px;
}
.operator-wrapper {
margin-left: 72px;
margin-top: 36px;
}
.operator-wrapper-title {
margin-bottom: 30px;
}
.operator-wrapper-title img {
width: 168px;
height: 38px;
}
.operator-wrapper-content-box {
margin-right: 40px;
margin-bottom: 30px;
}
.operator-wrapper-content-box-title {
font-size: 24px;
}
.operator-wrapper-content-box-chart {
height: 170px;
}
.operator-wrapper-content-box-progress {
height: 170px;
}
.electricity-box-progress {
height: 170px;
}
.repair-requir-info {
display: flex;
}
.advise-wrapper {
margin-left: 72px;
margin-top: 20px;
}
.advise-wrapper-title img {
width: 257px;
height: 38px;
}
.advise-wrapper-content-item {
margin-bottom: 16px;
}
.advise-wrapper-content-item img {
width: 20px;
height: 20px;
margin-right: 20px;
margin-top: 10px;
}
.advise-wrapper-content-item-text {
font-size: 28px;
}
.chart-area {
width: 140px;
height: 140px;
margin: 12px 24px 20px 28px;
}
.circle-bar {
width: 112px;
height: 112px;
}
.circle-bar-left,
.circle-bar-right {
width: 112px;
height: 112px;
}
.circle-bar-right {
clip: rect(0, auto, auto, 56px);
}
.circle-bar-left {
clip: rect(0, 56px, auto, 0);
}
.mask {
width: 89.6px;
height: 89.6px;
}
.mask :first-child {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
.circle-bar-left-2,
.circle-bar-right-2 {
width: 112px;
height: 112px;
}
.circle-bar-right-2 {
clip: rect(0, auto, auto, 56px);
}
.circle-bar-left-2 {
clip: rect(0, 56px, auto, 0);
}
.second-mask {
width: 89.6px;
height: 89.6px;
}
.second-mask :first-child {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
.circle-bar-3 {
width: 112px;
height: 112px;
}
.circle-bar-left-3,
.circle-bar-right-3 {
width: 112px;
height: 112px;
}
.circle-bar-right-3 {
clip: rect(0, auto, auto, 56px);
}
.circle-bar-left-3 {
clip: rect(0, 56px, auto, 0);
}
.third-mask {
width: 89.6px;
height: 89.6px;
}
.third-mask :first-child {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
.percent-text {
font-size: 22px;
margin-top: 50px !important;
}
.chart-desc img {
width: 277px;
height: 27px;
}
.chart-desc-other {
width: 293px;
height: 27px;
}
.chart-desc-task {
margin-top: 30px;
width: 260px;
}
.chart-desc-text {
font-size: 28px;
margin-left: 20px;
}
.chart-desc-value {
font-size: 34px;
}
.chart-desc-unfinished-value {
font-size: 34px;
}
.chart-desc-daily-legend {
width: 12px;
height: 12px;
}
.chart-desc-handle-legend {
width: 12px;
height: 12px;
}
.will-finished {
width: 12px;
height: 12px;
}
.repair-require-chart {
width: 160px;
height: 160px;
}
.repair-require-chart-wrapper {
width: 160px;
height: 160px;
}
.contract-chart {
width: 160px;
height: 160px;
}
.contract-chart-wrapper {
width: 160px;
height: 160px;
}
.repair-require-info {
margin-left: 20px;
}
.repair-require-info img {
width: 100px;
height: 92px;
}
.repair-require-info-text {
margin-left: 20px;
}
.repair-require-info-text span {
font-size: 34px;
}
.electricity-info-text {
margin-left: 20px;
}
.electricity-info-text span {
font-size: 34px;
}
.chart-data {
width: 260px;
margin-left: 55px;
margin-top: 20px;
}
.chart-data img {
width: 277px;
height: 27px;
}
.bar-data {
margin-left: 55px;
margin-top: -35px;
width: 260px;
}
.bar-data-2 {
margin-left: 55px;
margin-top: 10px;
width: 260px;
}
.chart-data-text-num {
font-size: 34px;
}
.g-progress {
width: 256px;
margin: auto;
}
.assign-progress {
width: 256px;
margin: auto;
}
}
html {
border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235;
position: relative;
}
body {
/* opacity: 0.15; */
font-size: 28px;
}
.left-top {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
left: -2px;
top: -2px;
}
.right-top {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
right: -2px;
top: -2px;
}
.left-bottom {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
left: -2px;
bottom: -2px;
}
.right-bottom {
width: 9px;
height: 9px;
background: #fffcfc;
position: absolute;
right: -2px;
bottom: -2px;
}
.report-title-bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.report-title {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
}
.report-title-time {
color: #37f1e7;
margin-right: 10px;
}
.report-title-info {
color: #ffffff;
}
.invest-wrapper {
@media screen and (min-width: 1651px) {
margin-top: 120px;
margin-left: 72px;
}
}
.invest-wrapper-content {
color: #fff;
position: relative;
display: inline-block;
}
.invest-wrapper-left-bracket img {
position: absolute;
left: 0;
top: 0;
margin-right: 10px;
}
.invest-wrapper-right-bracket img {
position: absolute;
right: 0;
top: 0;
margin-left: 10px;
}
.invest-wrapper-content-first-text {
display: inline-block;
}
.invest-wrapper-content-second-text {
display: inline-block;
}
.invest-wrapper-content-last-text {
display: inline-block;
}
.invest-wrapper-content-customers {
color: #ff6464;
}
.invest-wrapper-content-left {
color: #fff;
}
.invest-wrapper-content-left-item {
display: flex;
}
.invest-wrapper-content-left-item-img {
text-align: center;
}
.invest-wrapper-content-left-item-img img {
width: 100%;
height: 100%;
}
.invest-wrapper-content-left-item-type {
color: #fff;
opacity: 0.7;
margin-right: 45px;
}
.invest-wrapper-content-left-item-num {
color: #fff;
font-weight: 700;
} }
.invest-wrapper-content-red-triangle { .invest-wrapper-content-red-triangle {
width: 0; width: 0;
...@@ -667,18 +1114,6 @@ body { ...@@ -667,18 +1114,6 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
/* @media screen and (max-width: 750px) {
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 {
...@@ -686,14 +1121,6 @@ body { ...@@ -686,14 +1121,6 @@ body {
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 1650px) {
width: 6px;
height: 73px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 114px;
}
} }
.invest-wrapper-left-bracket-middle { .invest-wrapper-left-bracket-middle {
...@@ -707,18 +1134,6 @@ body { ...@@ -707,18 +1134,6 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
/* @media screen and (max-width: 750px) {
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 {
...@@ -726,14 +1141,6 @@ body { ...@@ -726,14 +1141,6 @@ body {
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
/* @media screen and (max-width: 750px) {
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) { @media screen and (min-width: 1651px) {
width: 10px; width: 10px;
height: 68px; height: 68px;
...@@ -750,85 +1157,20 @@ body { ...@@ -750,85 +1157,20 @@ body {
} }
.operator-wrapper { .operator-wrapper {
/* @media screen and (max-width: 750px) {
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 {
/* @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 {
/* @media screen and (max-width: 750px) {
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 {
@media screen and (max-width: 1650px) {
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;
@media screen and (max-width: 1650px) {
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 24px;
}
/* margin-bottom: 10px; */
margin-left: 28px; margin-left: 28px;
} }
.operator-wrapper-content-box-chart { .operator-wrapper-content-box-chart {
/* width: 472px; */
/* height: 170px; */
/* @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;
...@@ -836,16 +1178,6 @@ body { ...@@ -836,16 +1178,6 @@ body {
display: flex; display: flex;
} }
.operator-wrapper-content-box-progress { .operator-wrapper-content-box-progress {
/* @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;
padding-top: 4px; padding-top: 4px;
...@@ -853,56 +1185,19 @@ body { ...@@ -853,56 +1185,19 @@ body {
display: flex; display: flex;
} }
.electricity-box-progress { .electricity-box-progress {
/* @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 {
@media screen and (max-width: 1650px) {
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 {
/* @media screen and (max-width: 750px) {
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) { @media screen and (min-width: 1651px) {
width: 257px; width: 257px;
height: 38px; height: 38px;
...@@ -910,69 +1205,15 @@ body { ...@@ -910,69 +1205,15 @@ body {
} }
.advise-wrapper-content-item { .advise-wrapper-content-item {
display: flex; display: flex;
/* @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) { @media screen and (min-width: 1651px) {
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
.advise-wrapper-content-item img {
/* @media screen and (max-width: 750px) {
width: 0.71rem;
height: 0.71rem;
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 {
/* @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 {
/* @media screen and (max-width: 750px) { */
/* width: 5rem;
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;
background: url("./assets/chart-bg.png") no-repeat; background: url("./assets/chart-bg.png") no-repeat;
...@@ -980,90 +1221,25 @@ body { ...@@ -980,90 +1221,25 @@ body {
} }
.circle-bar { .circle-bar {
font-size: 200px; font-size: 200px;
/* @media screen and (max-width: 750px) { */
/* 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: linear-gradient(#35e5cd, #15e9ee); background: linear-gradient(#35e5cd, #15e9ee);
} }
.circle-bar-left, .circle-bar-left,
.circle-bar-right { .circle-bar-right {
/* @media screen and (max-width: 750px) { */
/* 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: #2c3849; background-color: #2c3849;
} }
/* /*
这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层， 这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
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 {
/* @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 {
/* @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) { @media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0); clip: rect(0, 56px, auto, 0);
} }
} }
.mask { .mask {
/* @media screen and (max-width: 750px) { */
/* 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;
line-height: 22.4px; line-height: 22.4px;
...@@ -1071,124 +1247,30 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1071,124 +1247,30 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
position: relative; position: relative;
} }
.mask :first-child { .mask :first-child {
/* @media screen and (max-width: 750px) { */
/* font-size: 1.2rem;
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;
} }
.circle-bar-left-2, .circle-bar-left-2,
.circle-bar-right-2 { .circle-bar-right-2 {
/* width: 112px;
height: 112px; */
/* @media screen and (max-width: 750px) {
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: #2c3849; background-color: #2c3849;
} }
/* /*
这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层， 这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
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 {
/* @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 {
/* @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 {
/* @media screen and (max-width: 750px) {
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 {
/* @media screen and (max-width: 750px) {
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;
} }
.circle-bar-3 { .circle-bar-3 {
font-size: 200px; font-size: 200px;
/* @media screen and (max-width: 750px) {
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;
} }
...@@ -1210,79 +1292,21 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1210,79 +1292,21 @@ 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;
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: #2c3849; background-color: #2c3849;
} }
.circle-bar-right-3 { .circle-bar-right-3 {
/* @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 {
/* @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 {
/* @media screen and (max-width: 750px) {
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 {
/* @media screen and (max-width: 750px) {
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;
} }
/*所有的后代都水平垂直居中，这样就是同心圆了*/ /*所有的后代都水平垂直居中，这样就是同心圆了*/
...@@ -1301,18 +1325,6 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1301,18 +1325,6 @@ 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: 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;
}
position: absolute; position: absolute;
bottom: 0; bottom: 0;
opacity: 0.7; opacity: 0.7;
...@@ -1323,82 +1335,22 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1323,82 +1335,22 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc img { .chart-desc img {
/* @media screen and (max-width: 750px) {
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 {
/* @media screen and (max-width: 750px) {
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;
/* @media screen and (max-width: 750px) {
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;
/* @media screen and (max-width: 750px) {
font-size: 1rem;
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;
/* @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;
} }
...@@ -1407,33 +1359,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1407,33 +1359,11 @@ 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: 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: 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;
...@@ -1441,18 +1371,6 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1441,18 +1371,6 @@ 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: 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;
...@@ -1460,14 +1378,6 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1460,14 +1378,6 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: 20px; margin-left: 20px;
} }
.will-finished { .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); background: rgba(61, 235, 213, 0.302);
opacity: 1; opacity: 1;
border: 2px solid #3debd5; border: 2px solid #3debd5;
...@@ -1479,53 +1389,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1479,53 +1389,12 @@ 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;
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 {
@media screen and (max-width: 1650px) {
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;
@media screen and (max-width: 1650px) {
width: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
background-size: cover; background-size: cover;
} }
.contract-chart-wrapper {
@media screen and (max-width: 1650px) {
width: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
}
.top-left { .top-left {
background: url("./assets/corner-sprite.png") -0px -0px no-repeat; background: url("./assets/corner-sprite.png") -0px -0px no-repeat;
...@@ -1560,153 +1429,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1560,153 +1429,33 @@ 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: 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 {
/* @media screen and (max-width: 750px) {
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;
/* @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;
/* @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;
/* @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;
/* @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;
/* @media screen and (max-width: 750px) {
width: 10.55rem;
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;
/* @media screen and (max-width: 750px) {
margin-left: 1.96rem;
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;
/* @media screen and (max-width: 750px) {
margin-left: 1.96rem;
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;
...@@ -1714,30 +1463,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1714,30 +1463,12 @@ 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: 1rem;
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 16px;
}
@media screen and (min-width: 1651px) { @media screen and (min-width: 1651px) {
font-size: 28px; font-size: 28px;
} }
} }
.chart-data-text-num { .chart-data-text-num {
color: #fff; color: #fff;
/* @media screen and (max-width: 750px) {
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 {
...@@ -1751,19 +1482,6 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1751,19 +1482,6 @@ 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: 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;
background: linear-gradient( background: linear-gradient(
...@@ -1776,19 +1494,6 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1776,19 +1494,6 @@ 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: 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;
background: linear-gradient( background: linear-gradient(
......
report.html
...@@ -282,8 +282,11 @@ ...@@ -282,8 +282,11 @@
<div class="operator-wrapper-content-box-title">合同</div> <div class="operator-wrapper-content-box-title">合同</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area contract-chart"> <!-- <div class="pie-chart-area contract-chart">
<div id="contract" class="contract-chart-wrapper"></div> <div id="contract" class="contract-chart-wrapper"></div>
</div> -->
<div class="pie-chart-area contract-chart">
<div id="contract" class="repair-require-chart-wrapper"></div>
</div> </div>
<div class="chart-desc chart-desc-other"> <div class="chart-desc chart-desc-other">
<div class="chart-desc-task desc-contract"> <div class="chart-desc-task desc-contract">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论