Skip to content

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

文件重命名

parent 142b2cf4
正在显示 包含 796 行增加 和 789 行删除
report-multi.css → report-ioc.css
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;
......@@ -51,18 +47,8 @@ body {
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;
height: 51px;
}
@media screen and (min-width: 1651px) {
width: 780px;
height: 82px;
}
}
.report-title {
position: absolute;
......@@ -73,198 +59,79 @@ body {
}
.report-title-time {
color: #37f1e7;
@media screen and (max-width: 1650px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
margin-right: 10px;
}
.report-title-info {
color: #ffffff;
@media screen and (max-width: 1650px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
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-left: 47px;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
height: 25px;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
height: 43px;
}
@media screen and (min-width: 1651px) {
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;
height: 43px;
}
@media screen and (min-width: 1651px) {
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-top: 8px;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
}
}
.invest-wrapper-content-left-item {
display: flex;
@media screen and (max-width: 1650px) {
margin-bottom: 4px;
}
@media screen and (min-width: 1651px) {
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;
height: 30px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 258px;
height: 47px;
margin-right: 20px;
}
text-align: center;
}
......@@ -273,66 +140,25 @@ body {
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;
height: 7px;
margin-top: 9px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 127px;
height: 14px;
margin-top: 18px;
margin-right: 20px;
}
}
.invest-wrapper-content-left-item-type {
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;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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-top: 40px;
}
@media screen and (min-width: 1651px) {
margin-left: 184px;
margin-top: 60px;
}
}
.invest-wrapper-content-red-triangle {
width: 0;
......@@ -353,33 +179,16 @@ body {
left: 0;
top: 0;
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 {
position: absolute;
right: 0;
top: 0;
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 {
......@@ -393,18 +202,8 @@ body {
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: 3.73pxpx;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
}
.invest-wrapper-right-bracket-middle img {
......@@ -412,18 +211,8 @@ body {
right: 0;
top: 0;
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) {
width: 10px;
height: 68px;
}
}
.invest-wrapper-content-green-triangle {
......@@ -436,85 +225,38 @@ body {
}
.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;
}
.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 {
display: flex;
flex-wrap: wrap;
}
.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;
}
.operator-wrapper-content-box-title {
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;
}
.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;
background-size: cover;
padding-top: 4px;
......@@ -522,15 +264,7 @@ body {
display: flex;
}
.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;
background-size: cover;
......@@ -539,125 +273,44 @@ body {
display: flex;
}
.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;
background-size: cover;
padding-top: 4px;
box-sizing: border-box;
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 {
@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;
}
.advise-wrapper-title {
margin-bottom: 10px;
}
.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) {
width: 257px;
height: 38px;
}
}
.advise-wrapper-content-item {
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) {
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 {
@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;
opacity: 0.7;
}
.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;
box-sizing: border-box;
......@@ -666,20 +319,8 @@ body {
}
.circle-bar {
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;
/* background-color: #333; */
......@@ -687,20 +328,8 @@ body {
}
.circle-bar-left,
.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;
......@@ -710,45 +339,15 @@ 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: 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 {
@media screen and (max-width: 750px) {
/* clip: rect(0, 2rem, auto, 0); */
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
}
.mask {
@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;
text-align: center;
......@@ -756,24 +355,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255);
}
.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;
}
......@@ -781,18 +365,8 @@ 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) {
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;
}
......@@ -801,79 +375,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.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 {
@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;
text-align: center;
line-height: 22.4px;
color: rgba(255, 255, 255);
}
.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;
}
.circle-bar-3 {
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;
background: #f3be28;
}
......@@ -895,79 +421,31 @@ 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) {
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;
}
.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 {
@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 {
@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;
text-align: center;
line-height: 22.4px;
color: rgba(255, 255, 255);
}
.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;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
......@@ -986,18 +464,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.percent-text {
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;
}
opacity: 0.7;
}
......@@ -1007,82 +475,34 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.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;
bottom: 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 {
position: relative;
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 {
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 {
margin-left: auto;
margin-right: 10px;
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;
}
......@@ -1091,33 +511,15 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc-unfinished-value {
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;
margin-left: auto;
margin-right: 10px;
}
.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);
opacity: 1;
border: 2px solid #5cb3ff;
......@@ -1125,18 +527,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: 20px;
}
.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);
opacity: 1;
border: 2px solid #ff6464;
......@@ -1148,52 +540,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.repair-require-chart {
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;
}
.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 {
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;
}
.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 {
......@@ -1229,153 +593,51 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right: 0;
}
.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;
}
.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 {
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 {
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;
}
.electricity-info-text {
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 {
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;
}
.chart-data {
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) {
margin-top: 20px;
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 {
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 {
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 {
display: flex;
......@@ -1383,33 +645,17 @@ 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) {
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
}
.chart-data-text-num {
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;
}
.return-rate {
/* background: linear-gradient(#00d8ff, #00b6ff); */
color: #00d8ff;
width: 260px;
}
......@@ -1420,18 +666,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
initial-value: 0%;
}
.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;
}
width: 167px;
height: 9px;
border-radius: 25px;
......@@ -1445,18 +681,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
transition: 0.3s --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;
}
width: 166px;
height: 9px;
border-radius: 25px;
......
report-multi.html → report-ioc.html
......@@ -8,7 +8,7 @@
<!-- 如果你没有echarts.min.js文件，用下面的语句代替即可
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
<link rel="stylesheet" href="report-multi.css" />
<link rel="stylesheet" href="report-ioc.css" />
</head>
<body>
......@@ -316,7 +316,6 @@
<img src="./assets/repair-requir-icon.png" />
<div class="repair-require-info-text"><span>389</span>个</div>
</div>
<div class="repair-requir-info">
<div class="chart-desc">
<div class="chart-data">
<div class="chart-data-text">
......@@ -351,7 +350,6 @@
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报，半年报，年报-->
<div class="top-left"></div>
......@@ -501,6 +499,9 @@
tooltip: {
trigger: "item",
},
title: {
show: false,
},
legend: false,
color: ["#FF6464", "#5CB3FF"],
series: [
......@@ -508,6 +509,7 @@
name: "",
type: "pie",
radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: "",
......@@ -554,6 +556,7 @@
name: "",
type: "pie",
radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: "",
......
report.css
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;
......@@ -47,8 +51,18 @@ body {
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;
height: 51px;
}
@media screen and (min-width: 1651px) {
width: 780px;
height: 82px;
}
}
.report-title {
position: absolute;
......@@ -59,79 +73,198 @@ body {
}
.report-title-time {
color: #37f1e7;
@media screen and (max-width: 1650px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
margin-right: 10px;
}
.report-title-info {
color: #ffffff;
@media screen and (max-width: 1650px) {
font-size: 24px;
}
@media screen and (min-width: 1651px) {
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-left: 47px;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
height: 25px;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
height: 43px;
}
@media screen and (min-width: 1651px) {
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;
height: 43px;
}
@media screen and (min-width: 1651px) {
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-top: 8px;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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;
}
}
.invest-wrapper-content-left-item {
display: flex;
@media screen and (max-width: 1650px) {
margin-bottom: 4px;
}
@media screen and (min-width: 1651px) {
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;
height: 30px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 258px;
height: 47px;
margin-right: 20px;
}
text-align: center;
}
......@@ -140,25 +273,66 @@ body {
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;
height: 7px;
margin-top: 9px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 127px;
height: 14px;
margin-top: 18px;
margin-right: 20px;
}
}
.invest-wrapper-content-left-item-type {
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;
}
@media screen and (min-width: 1651px) {
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;
}
@media screen and (min-width: 1651px) {
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-top: 40px;
}
@media screen and (min-width: 1651px) {
margin-left: 184px;
margin-top: 60px;
}
}
.invest-wrapper-content-red-triangle {
width: 0;
......@@ -179,16 +353,33 @@ body {
left: 0;
top: 0;
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 {
position: absolute;
right: 0;
top: 0;
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 {
......@@ -202,8 +393,18 @@ body {
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: 3.73pxpx;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
}
.invest-wrapper-right-bracket-middle img {
......@@ -211,8 +412,18 @@ body {
right: 0;
top: 0;
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) {
width: 10px;
height: 68px;
}
}
.invest-wrapper-content-green-triangle {
......@@ -225,38 +436,85 @@ body {
}
.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;
}
.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 {
display: flex;
flex-wrap: wrap;
}
.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;
}
.operator-wrapper-content-box-title {
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;
}
.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;
background-size: cover;
padding-top: 4px;
......@@ -264,7 +522,15 @@ body {
display: flex;
}
.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;
background-size: cover;
......@@ -273,44 +539,125 @@ body {
display: flex;
}
.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;
background-size: cover;
padding-top: 4px;
box-sizing: border-box;
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 {
@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;
}
.advise-wrapper-title {
margin-bottom: 10px;
}
.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) {
width: 257px;
height: 38px;
}
}
.advise-wrapper-content-item {
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) {
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 {
@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;
opacity: 0.7;
}
.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;
box-sizing: border-box;
......@@ -319,8 +666,20 @@ body {
}
.circle-bar {
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;
/* background-color: #333; */
......@@ -328,8 +687,20 @@ body {
}
.circle-bar-left,
.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;
......@@ -339,15 +710,45 @@ 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: 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 {
@media screen and (max-width: 750px) {
/* clip: rect(0, 2rem, auto, 0); */
clip: rect(0, 35px, auto, 0);
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
}
.mask {
@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;
text-align: center;
......@@ -355,9 +756,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255);
}
.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;
}
......@@ -365,8 +781,18 @@ 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) {
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;
}
......@@ -375,31 +801,79 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.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 {
@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;
text-align: center;
line-height: 22.4px;
color: rgba(255, 255, 255);
}
.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;
}
.circle-bar-3 {
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;
background: #f3be28;
}
......@@ -421,31 +895,79 @@ 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) {
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;
}
.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 {
@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 {
@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;
text-align: center;
line-height: 22.4px;
color: rgba(255, 255, 255);
}
.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;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
......@@ -464,8 +986,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.percent-text {
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;
}
opacity: 0.7;
}
......@@ -475,34 +1007,82 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.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;
bottom: 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 {
position: relative;
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 {
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 {
margin-left: auto;
margin-right: 10px;
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;
}
......@@ -511,15 +1091,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc-unfinished-value {
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;
margin-left: auto;
margin-right: 10px;
}
.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);
opacity: 1;
border: 2px solid #5cb3ff;
......@@ -527,8 +1125,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: 20px;
}
.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);
opacity: 1;
border: 2px solid #ff6464;
......@@ -540,24 +1148,52 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.repair-require-chart {
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;
}
.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 {
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;
}
.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 {
......@@ -593,51 +1229,153 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right: 0;
}
.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;
}
.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 {
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 {
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;
}
.electricity-info-text {
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 {
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;
}
.chart-data {
position: relative;
margin-top: 20px;
@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 {
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 {
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 {
display: flex;
......@@ -645,17 +1383,33 @@ 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) {
font-size: 1rem;
}
@media screen and (max-width: 1650px) and (min-width: 751px) {
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
}
.chart-data-text-num {
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;
}
.return-rate {
/* background: linear-gradient(#00d8ff, #00b6ff); */
color: #00d8ff;
width: 260px;
}
......@@ -666,8 +1420,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
initial-value: 0%;
}
.g-progress {
margin: auto;
@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;
border-radius: 25px;
......@@ -681,8 +1445,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
transition: 0.3s --progress;
}
.assign-progress {
margin: auto;
@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;
border-radius: 25px;
......
report.html
......@@ -316,6 +316,7 @@
<img src="./assets/repair-requir-icon.png" />
<div class="repair-require-info-text"><span>389</span>个</div>
</div>
<div class="repair-requir-info">
<div class="chart-desc">
<div class="chart-data">
<div class="chart-data-text">
......@@ -350,6 +351,7 @@
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报，半年报，年报-->
<div class="top-left"></div>
......@@ -506,6 +508,7 @@
name: "",
type: "pie",
radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: "",
......@@ -552,6 +555,7 @@
name: "",
type: "pie",
radius: ["50%", "60%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: "",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论