Skip to content

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

小程序适配修改

parent 0e99ff9e
正在显示 包含 496 行增加 和 160 行删除
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 {
border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235;
......@@ -51,10 +365,10 @@ body {
transform: translateX(-50%);
}
.report-title-bg > img {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 23.57rem;
height: 2.8rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 504px;
height: 51px;
......@@ -91,10 +405,10 @@ body {
}
}
.invest-wrapper {
@media screen and (max-width: 750px) {
/* @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-left: 47px;
......@@ -105,9 +419,9 @@ body {
}
}
.invest-wrapper-title {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
margin-bottom: 1.1rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 27px;
}
......@@ -116,10 +430,10 @@ body {
}
}
.invest-wrapper .invest-wrapper-title img {
@media screen and (max-width: 750px) {
/* @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;
......@@ -131,9 +445,9 @@ body {
}
.invest-wrapper-content {
color: #fff;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
......@@ -153,10 +467,10 @@ body {
left: 0;
top: 0;
margin-right: 10px;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 0.36rem;
height: 2.43rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 43px;
......@@ -171,10 +485,10 @@ body {
right: 0;
top: 0;
margin-left: 10px;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 0.36rem;
height: 2.42rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 6px;
height: 43px;
......@@ -186,10 +500,10 @@ body {
}
.invest-wrapper-content-first-text {
display: inline-block;
@media screen and (max-width: 750px) {
/* @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-top: 8px;
......@@ -204,9 +518,9 @@ body {
}
.invest-wrapper-content-last-text {
display: inline-block;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
margin-right: 0.14rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-right: 10px;
}
......@@ -216,9 +530,9 @@ body {
}
.invest-wrapper-content-customers {
color: #ff6464;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1.5rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 24px;
}
......@@ -229,9 +543,9 @@ body {
.invest-wrapper-content-left {
color: #fff;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 28px;
}
......@@ -250,11 +564,11 @@ body {
}
}
.invest-wrapper-content-left-item-img {
@media screen and (max-width: 750px) {
/* @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;
height: 30px;
......@@ -273,12 +587,12 @@ body {
height: 100%;
}
.invest-wrapper-content-left-item-line {
@media screen and (max-width: 750px) {
/* @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;
height: 7px;
......@@ -295,10 +609,10 @@ body {
.invest-wrapper-content-left-item-type {
color: #fff;
opacity: 0.7;
@media screen and (max-width: 750px) {
/* @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;
}
......@@ -309,9 +623,9 @@ body {
}
.invest-wrapper-content-left-item-num {
color: #fff;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
......@@ -321,10 +635,10 @@ body {
font-weight: 700;
}
.invest-wrapper-content-right {
@media screen and (max-width: 750px) {
/* @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-top: 40px;
......@@ -353,10 +667,10 @@ body {
left: 0;
top: 0;
margin-right: 10px;
@media screen and (max-width: 750px) {
/* @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;
......@@ -393,10 +707,10 @@ body {
left: 0;
top: 0;
margin-right: 10px;
@media screen and (max-width: 750px) {
/* @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;
......@@ -412,10 +726,10 @@ body {
right: 0;
top: 0;
margin-left: 10px;
@media screen and (max-width: 750px) {
/* @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;
......@@ -436,10 +750,10 @@ body {
}
.operator-wrapper {
@media screen and (max-width: 750px) {
/* @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;
......@@ -451,9 +765,9 @@ body {
display: relative;
}
.operator-wrapper-title {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
margin-bottom: 1.07rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 30px;
}
......@@ -463,10 +777,10 @@ body {
}
.operator-wrapper-title img {
@media screen and (max-width: 750px) {
/* @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;
......@@ -506,9 +820,9 @@ body {
.operator-wrapper-content-box-chart {
/* width: 472px; */
/* height: 170px; */
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
height: 7.43rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 120px;
}
......@@ -522,9 +836,9 @@ body {
display: flex;
}
.operator-wrapper-content-box-progress {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
height: 12rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px;
}
......@@ -539,9 +853,9 @@ body {
display: flex;
}
.electricity-box-progress {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
height: 7.6rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
height: 137px;
}
......@@ -556,9 +870,9 @@ body {
display: flex;
}
.repair-requir-info {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
display: block;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
display: flex;
}
......@@ -581,10 +895,10 @@ body {
margin-bottom: 10px;
}
.advise-wrapper-title img {
@media screen and (max-width: 750px) {
/* @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;
......@@ -596,9 +910,9 @@ body {
}
.advise-wrapper-content-item {
display: flex;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
margin-bottom: 0.57rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-bottom: 8px;
}
......@@ -607,12 +921,12 @@ body {
}
}
.advise-wrapper-content-item img {
@media screen and (max-width: 750px) {
/* @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;
......@@ -627,9 +941,9 @@ body {
}
}
.advise-wrapper-content-item-text {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
......@@ -640,14 +954,14 @@ body {
opacity: 0.7;
}
.chart-area {
@media screen and (max-width: 750px) {
/* width: 5rem;
/* @media screen and (max-width: 750px) { */
/* width: 5rem;
height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */
width: 100px;
/* width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 100px;
height: 100px;
......@@ -666,12 +980,12 @@ body {
}
.circle-bar {
font-size: 200px;
@media screen and (max-width: 750px) {
/* width: 4rem;
/* @media screen and (max-width: 750px) { */
/* width: 4rem;
height: 4rem; */
width: 72px;
/* width: 72px;
height: 72px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
......@@ -687,12 +1001,12 @@ body {
}
.circle-bar-left,
.circle-bar-right {
@media screen and (max-width: 750px) {
/* width: 4rem;
/* @media screen and (max-width: 750px) { */
/* width: 4rem;
height: 4rem; */
width: 72px;
/* width: 72px;
height: 72px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
......@@ -710,10 +1024,10 @@ body {
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: 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);
}
......@@ -722,10 +1036,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
}
.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: 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);
}
......@@ -735,12 +1049,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.mask {
@media screen and (max-width: 750px) {
/* width: 3.2rem;
/* @media screen and (max-width: 750px) { */
/* width: 3.2rem;
height: 3.2rem; */
width: 60px;
/* width: 60px;
height: 60px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
......@@ -754,16 +1068,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
text-align: center;
line-height: 22.4px;
color: rgba(255, 255, 255);
position: relative;
}
.mask :first-child {
@media screen and (max-width: 750px) {
/* font-size: 1.2rem;
/* @media screen and (max-width: 750px) { */
/* font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem; */
font-size: 22px;
/* font-size: 22px;
height: 30px;
line-height: 10px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
height: 30px;
......@@ -781,10 +1096,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-right-2 {
/* width: 112px;
height: 112px; */
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 72px;
height: 72px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
......@@ -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
*/
.circle-bar-right-2 {
@media screen and (max-width: 750px) {
/* @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);
}
......@@ -812,9 +1127,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
}
.circle-bar-left-2 {
@media screen and (max-width: 750px) {
/* @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);
}
......@@ -824,10 +1139,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.second-mask {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 60px;
height: 60px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
......@@ -842,11 +1157,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255);
}
.second-mask :first-child {
@media screen and (max-width: 750px) {
/* @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;
......@@ -862,10 +1177,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-3 {
font-size: 200px;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 72px;
height: 72px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
......@@ -895,10 +1210,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-left-3,
.circle-bar-right-3 {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 72px;
height: 72px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 72px;
height: 72px;
......@@ -912,9 +1227,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.circle-bar-right-3 {
@media screen and (max-width: 750px) {
/* @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);
}
......@@ -923,9 +1238,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
}
.circle-bar-left-3 {
@media screen and (max-width: 750px) {
/* @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);
}
......@@ -935,10 +1250,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.third-mask {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 60px;
height: 60px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 60px;
height: 60px;
......@@ -953,11 +1268,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255);
}
.third-mask :first-child {
@media screen and (max-width: 750px) {
/* @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;
......@@ -986,10 +1301,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.percent-text {
color: #fff;
@media screen and (max-width: 750px) {
/* @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;
......@@ -998,7 +1313,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-size: 22px;
margin-top: 50px;
}
position: absolute;
bottom: 0;
opacity: 0.7;
}
......@@ -1007,10 +1323,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc img {
@media screen and (max-width: 750px) {
/* @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;
......@@ -1025,10 +1341,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
left: 0;
}
.chart-desc-other {
@media screen and (max-width: 750px) {
/* @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;
......@@ -1041,10 +1357,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-desc-task {
position: relative;
display: flex;
@media screen and (max-width: 750px) {
/* @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;
......@@ -1056,10 +1372,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc-text {
color: #fff;
@media screen and (max-width: 750px) {
/* @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;
......@@ -1074,9 +1390,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: auto;
margin-right: 10px;
color: #fff;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
......@@ -1091,9 +1407,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc-unfinished-value {
color: #ff6464;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 22px;
}
......@@ -1106,10 +1422,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-right: 10px;
}
.chart-desc-daily-legend {
@media screen and (max-width: 750px) {
/* @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;
......@@ -1125,10 +1441,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: 20px;
}
.chart-desc-handle-legend {
@media screen and (max-width: 750px) {
/* @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;
......@@ -1143,15 +1459,30 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-top: 12px;
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 {
margin-top: 4px;
}
.repair-require-chart {
background: url("./assets/repair-require-bg.png") no-repeat;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
width: 115px;
height: 115px;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
width: 115px;
height: 115px;
......@@ -1229,9 +1560,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right: 0;
}
.repair-require-info {
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
margin-left: 0.71rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 10px;
}
......@@ -1242,10 +1573,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-top: 10px;
}
.repair-require-info img {
@media screen and (max-width: 750px) {
/* @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;
......@@ -1257,9 +1588,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.repair-require-info-text {
color: #fff;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 0.86rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px;
}
......@@ -1269,9 +1600,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.repair-require-info-text span {
font-weight: 700;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
......@@ -1283,9 +1614,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.electricity-info-text {
color: #ff6464;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 0.86rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
margin-left: 8px;
}
......@@ -1295,9 +1626,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.electricity-info-text span {
font-weight: 700;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1.21rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 18px;
}
......@@ -1310,12 +1641,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data {
position: relative;
@media screen and (max-width: 750px) {
/* @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;
......@@ -1328,10 +1659,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
}
.chart-data img {
@media screen and (max-width: 750px) {
/* @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;
......@@ -1343,11 +1674,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.bar-data {
position: relative;
@media screen and (max-width: 750px) {
/* @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;
......@@ -1361,11 +1692,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.bar-data-2 {
position: relative;
@media screen and (max-width: 750px) {
/* @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;
......@@ -1383,9 +1714,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data-text-title {
color: #fff;
opacity: 0.8;
@media screen and (max-width: 750px) {
/* @media screen and (max-width: 750px) {
font-size: 1rem;
}
} */
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 16px;
}
......@@ -1395,10 +1726,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-data-text-num {
color: #fff;
@media screen and (max-width: 750px) {
/* @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;
......@@ -1420,10 +1751,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
initial-value: 0%;
}
.g-progress {
@media screen and (max-width: 750px) {
/* @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;
......@@ -1445,10 +1776,10 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
transition: 0.3s --progress;
}
.assign-progress {
@media screen and (max-width: 750px) {
/* @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;
......
report.html
......@@ -2,6 +2,10 @@
<html lang="en">
<head>
<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>
<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>
......@@ -295,7 +299,7 @@
<img src="./assets/desc-line.png" />
</div>
<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-unfinished-value">7</div>
<img src="./assets/desc-line.png" />
......@@ -433,6 +437,7 @@
</div>
<script type="text/javascript">
var myChart, myChart2;
$(function () {
var percent = parseInt($(".mask :first-child").text());
console.log("percent==", percent);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论