Skip to content

R
report-html-template
Commit 142b2cf4 by Tippi.Rao
Options

适配不同的屏幕

parent e0ccc500
正在显示 包含 2305 行增加 和 558 行删除
report-multi.css 0 → 100644
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;
height: 51px;
}
@media screen and (min-width: 1651px) {
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;
}
@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;
}
.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;
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;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #ff6464;
display: inline-block;
}
.invest-wrapper-left-bracket-big {
display: inline-block;
}
.invest-wrapper-right-bracket-big {
display: inline-block;
}
.invest-wrapper-left-bracket-big img {
position: absolute;
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 {
display: inline-block;
}
.invest-wrapper-right-bracket-middle {
display: inline-block;
}
.invest-wrapper-left-bracket-middle 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: 3.73pxpx;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
}
.invest-wrapper-right-bracket-middle img {
position: absolute;
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 {
width: 0;
height: 0;
border-top: 12px solid #56fcb1;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
display: inline-block;
}
.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;
box-sizing: border-box;
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;
padding-top: 4px;
box-sizing: border-box;
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;
background: url("./assets/chart-bg.png") no-repeat;
background-size: cover;
}
.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; */
background: linear-gradient(#35e5cd, #15e9ee);
}
.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;
}
/*
这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
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;
line-height: 22.4px;
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;
}
.circle-bar-left-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;
}
/*
这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
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;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
.circle-bar-3 * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*自身以及子元素都是圆*/
.circle-bar-3,
.circle-bar-3 > * {
border-radius: 50%;
}
.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;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
.circle-bar * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*自身以及子元素都是圆*/
.circle-bar,
.circle-bar > * {
border-radius: 50%;
}
.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;
}
.chart-desc {
position: relative;
}
.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;
}
.chart-desc-unfinished {
margin-top: 10px;
}
.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;
margin-top: 12px;
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;
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) {
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 {
background: url("./assets/corner-sprite.png") -0px -0px no-repeat;
width: 9px;
height: 9px;
position: absolute;
top: 0;
left: 0;
}
.top-right {
background: url("./assets/corner-sprite.png") -9px -0px no-repeat;
width: 9px;
height: 9px;
position: absolute;
top: 0;
right: 0;
}
.bottom-left {
background: url("./assets/corner-sprite.png") -18px -0px no-repeat;
width: 9px;
height: 9px;
position: absolute;
bottom: 0;
left: 0;
}
.bottom-right {
background: url("./assets/corner-sprite.png") -27px -0px no-repeat;
width: 9px;
height: 9px;
position: absolute;
bottom: 0;
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) {
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;
}
.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 {
color: #00d8ff;
width: 260px;
}
@property --progress {
syntax: "<percentage>";
inherits: false;
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;
}
height: 9px;
border-radius: 25px;
background: linear-gradient(
90deg,
#00b6ff,
#00d8ff var(--progress),
transparent 0
);
border: 1px solid #eee;
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;
}
height: 9px;
border-radius: 25px;
background: linear-gradient(
90deg,
#ff432d,
#ffa174 var(--progress),
transparent 0
);
border: 1px solid #eee;
transition: 0.3s --progress;
}
report-multi.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<!-- 如果你没有echarts.min.js文件，用下面的语句代替即可
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
<link rel="stylesheet" href="report-multi.css" />
</head>
<body>
<div class="left-top"></div>
<div class="right-top"></div>
<div class="left-bottom"></div>
<div class="right-bottom"></div>
<div class="report-title-bg">
<img src="./assets/report-header.png" />
</div>
<div class="report-title">
<span class="report-title-time">5.15</span
><span class="report-title-info">成阿园区</span
><span class="report-title-info">日报</span>
</div>
<div class="invest-wrapper">
<!-- 日报-->
<div class="invest-wrapper-title">
<img src="./assets/invest-info.png" />
</div>
<div class="invest-wrapper-content">
<div class="invest-wrapper-left-bracket">
<img src="./assets/bracket-left.png" />
</div>
<div class="invest-wrapper-content-first-text">今日录入客户数</div>
<span class="invest-wrapper-content-customers">12</span>
<div class="invest-wrapper-content-second-text">人，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div>
<div class="invest-wrapper-right-bracket">
<img src="./assets/bracket-right.png" />
</div>
</div>
</div>
<div class="invest-wrapper">
<!-- 周报，月报，季报-->
<div class="invest-wrapper-title">
<img src="./assets/invest-info.png" />
</div>
<div class="invest-wrapper-flex">
<div class="invest-wrapper-content-left">
<div class="invest-wrapper-content-left-item">
<div class="invest-wrapper-content-left-item-img">
<img src="./assets/qzxm.png" style="width: 100%; height: 100%" />
</div>
<img
src="./assets/invest_line.png"
class="invest-wrapper-content-left-item-line"
/>
<div class="invest-wrapper-content-left-item-type">潜在项目</div>
<div class="invest-wrapper-content-left-item-num">320</div>
</div>
<div class="invest-wrapper-content-left-item">
<div class="invest-wrapper-content-left-item-img">
<img src="./assets/dhlf.png" style="width: 80%; height: 80%" />
</div>
<img
src="./assets/invest_line.png"
class="invest-wrapper-content-left-item-line"
/>
<div class="invest-wrapper-content-left-item-type">电话来访</div>
<div class="invest-wrapper-content-left-item-num">55</div>
</div>
<div class="invest-wrapper-content-left-item">
<div class="invest-wrapper-content-left-item-img">
<img src="./assets/xclf.png" style="width: 60%; height: 60%" />
</div>
<img
src="./assets/invest_line.png"
class="invest-wrapper-content-left-item-line"
/>
<div class="invest-wrapper-content-left-item-type">现场来访</div>
<div class="invest-wrapper-content-left-item-num">53</div>
</div>
<div class="invest-wrapper-content-left-item">
<div class="invest-wrapper-content-left-item-img">
<img src="./assets/hxgj.png" style="width: 40%; height: 40%" />
</div>
<img
src="./assets/invest_line.png"
class="invest-wrapper-content-left-item-line"
/>
<div class="invest-wrapper-content-left-item-type">后续跟进</div>
<div class="invest-wrapper-content-left-item-num">6</div>
</div>
<div class="invest-wrapper-content-left-item">
<div class="invest-wrapper-content-left-item-img">
<img src="./assets/qdht.png" style="width: 20%; height: 20%" />
</div>
<img
src="./assets/invest_line.png"
class="invest-wrapper-content-left-item-line"
/>
<div class="invest-wrapper-content-left-item-type">签订合同</div>
<div class="invest-wrapper-content-left-item-num">2</div>
</div>
</div>
<div class="invest-wrapper-content invest-wrapper-content-right">
<div
class="invest-wrapper-left-bracket-middle invest-wrapper-left-bracket-big"
>
<img src="./assets/bracket-left-big.png" />
</div>
<div class="invest-wrapper-content-first-text">
本<span>月</span>入录客户数
</div>
<span class="invest-wrapper-content-customers">12</span>
<div class="invest-wrapper-content-second-text">人，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div>
<br />
<!--月报，季报，半年报，年报-->
<div class="invest-wrapper-content-first-text">去化率</div>
<span class="invest-wrapper-content-customers">93%</span>
<div class="invest-wrapper-content-second-text">较上月</div>
<span class="invest-wrapper-content-customers">+9%</span>
<!--正数-->
<div class="invest-wrapper-content-red-triangle"></div>
<!--负数-->
<div class="invest-wrapper-content-green-triangle"></div>
<!--end-->
<div
class="invest-wrapper-right-bracket-middle invest-wrapper-right-bracket-big"
>
<img src="./assets/bracket-right-big.png" />
</div>
</div>
</div>
</div>
<div class="operator-wrapper">
<div class="operator-wrapper-title">
<img src="./assets/operation-info.png" />
</div>
<div class="operator-wrapper-content">
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">秩序维护部</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar">
<div class="circle-bar-left"></div>
<div class="circle-bar-right"></div>
<!-- 遮罩层，显示百分比 -->
<div class="mask">
<span class="percent">5%</span>
<span class="percent-text">完成率</span>
</div>
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-text">任务数</div>
<div class="chart-desc-value">32</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">未完成</div>
<div class="chart-desc-unfinished-value">40</div>
<img src="./assets/desc-line.png" />
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">安防部</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar">
<div class="circle-bar-left-2"></div>
<div class="circle-bar-right-2"></div>
<!-- 遮罩层，显示百分比 -->
<div class="second-mask">
<span class="percent">10%</span>
<span class="percent-text">完成率</span>
</div>
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-text">任务数</div>
<div class="chart-desc-value">32</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">未完成</div>
<div class="chart-desc-unfinished-value">40</div>
<img src="./assets/desc-line.png" />
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">设备告警工单</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar-3">
<div class="circle-bar-left-3"></div>
<div class="circle-bar-right-3"></div>
<!-- 遮罩层，显示百分比 -->
<div class="third-mask">
<span class="percent">30%</span>
<span class="percent-text">完成率</span>
</div>
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-text">新增工单</div>
<div class="chart-desc-value">32</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">待处理</div>
<div class="chart-desc-unfinished-value">30</div>
<img src="./assets/desc-line.png" />
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<!--日报， 周报， -->
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">报事报修</div>
<div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area repair-require-chart">
<div
id="repair-require"
class="repair-require-chart-wrapper"
></div>
</div>
<div class="chart-desc chart-desc-other">
<div class="chart-desc-task">
<div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">今日新增</div>
<div class="chart-desc-value">18</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">处理中</div>
<div class="chart-desc-unfinished-value">5</div>
<img src="./assets/desc-line.png" />
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<!--日报， 周报，月报， 半年报，年报-->
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">合同</div>
<div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area contract-chart">
<div id="contract" class="contract-chart-wrapper"></div>
</div>
<div class="chart-desc chart-desc-other">
<div class="chart-desc-task desc-contract">
<div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">新增合同</div>
<div class="chart-desc-value">18</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">到期合同</div>
<div class="chart-desc-unfinished-value">5</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">即将到期</div>
<div class="chart-desc-unfinished-value">7</div>
<img src="./assets/desc-line.png" />
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报， 半年报，年报-->
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">报事报修</div>
<div class="operator-wrapper-content-box-progress">
<div class="pie-chart-area repair-require-info">
<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">
<div class="chart-data-text-title">处理中</div>
<div class="chart-data-text-num">293</div>
</div>
<img src="./assets/line.png" />
</div>
<div class="chart-data">
<div class="chart-data-text">
<div class="chart-data-text-title">工单回访率</div>
<div class="chart-data-text-num">70%</div>
</div>
<div class="g-progress" style="--progress: 70%"></div>
</div>
</div>
<div class="chart-desc">
<div class="chart-data">
<div class="chart-data-text">
<div class="chart-data-text-title">平均处理时长</div>
<div class="chart-data-text-num">2.4h</div>
</div>
<img src="./assets/line.png" />
</div>
<div class="chart-data">
<div class="chart-data-text">
<div class="chart-data-text-title">派单及时率</div>
<div class="chart-data-text-num">99%</div>
</div>
<div class="assign-progress" style="--progress: 99%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报，半年报，年报-->
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">水电费单</div>
<div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info">
<img src="./assets/electricity-icon.png" />
<div class="electricity-info-text"><span>3.09</span>万元</div>
</div>
<div class="chart-desc">
<div class="bar-data">
<div class="chart-data-text">
<div class="chart-data-text-title">下发数</div>
<div class="chart-data-text-num">32</div>
</div>
<img src="./assets/line.png" />
</div>
<div class="bar-data-2">
<div class="chart-data-text">
<div class="chart-data-text-title">下发率</div>
<div class="chart-data-text-num">60%</div>
</div>
<div class="g-progress" style="--progress: 60%"></div>
</div>
<div class="bar-data-2">
<div class="chart-data-text">
<div class="chart-data-text-title">企业签收率</div>
<div class="chart-data-text-num">85%</div>
</div>
<div class="assign-progress" style="--progress: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="advise-wrapper">
<div class="advise-wrapper-title">
<img src="./assets/advise-info.png" />
</div>
<div class="advise-wrapper-content">
<div class="advise-wrapper-content-item">
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
秩序维护部巡检任务完成度不足，需加强管控并找到完成不及时原因。
</div>
</div>
<div class="advise-wrapper-content-item">
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
安防部巡检任务完成度不足，需加强管控并找到完成不及时原因。
</div>
</div>
<div class="advise-wrapper-content-item">
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
设备告警工单处理不及时，易导致设备故障发现不及时。
</div>
</div>
<div class="advise-wrapper-content-item">
<!-- 周报，月报，季报，半年报，年报， 日报没有此条 -->
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
合同续租或退租信息更新不及时，请尽快处理。
</div>
</div>
<div class="advise-wrapper-content-item">
<!-- 月报，季报，半年报，年报 日报，周报没有此条，-->
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
水电费单企业签收率较低，请督促企业通过小程序签收。
</div>
</div>
</div>
</div>
<script type="text/javascript">
var myChart, myChart2;
$(function () {
var percent = parseInt($(".mask :first-child").text());
console.log("percent==", percent);
var baseColor = $(".circle-bar").css("background");
if (percent <= 50) {
$(".circle-bar-right").css(
"transform",
"rotate(" + percent * 3.6 + "deg)"
);
} else {
$(".circle-bar-right").css({
transform: "rotate(0deg)",
background: baseColor,
});
$(".circle-bar-left").css(
"transform",
"rotate(" + (percent - 50) * 3.6 + "deg)"
);
}
var percent2 = parseInt($(".second-mask :first-child").text());
var baseColor = $(".circle-bar").css("background");
console.log("percent2==", percent2);
if (percent2 <= 50) {
$(".circle-bar-right-2").css(
"transform",
"rotate(" + percent2 * 3.6 + "deg)"
);
} else {
$(".circle-bar-right-2").css({
transform: "rotate(0deg)",
background: baseColor,
});
$(".circle-bar-left-2").css(
"transform",
"rotate(" + (percent2 - 50) * 3.6 + "deg)"
);
}
var percent3 = parseInt($(".third-mask :first-child").text());
var baseColor = $(".circle-bar").css("background");
console.log("percent3==", percent3);
if (percent3 <= 50) {
$(".circle-bar-right-3").css(
"transform",
"rotate(" + percent3 * 3.6 + "deg)"
);
} else {
$(".circle-bar-right-3").css({
transform: "rotate(0deg)",
background: baseColor,
});
$(".circle-bar-left-3").css(
"transform",
"rotate(" + (percent3 - 50) * 3.6 + "deg)"
);
}
var chartDom = document.getElementById("repair-require");
console.log("chartDom==", chartDom);
myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: "item",
},
legend: false,
color: ["#FF6464", "#5CB3FF"],
series: [
{
name: "",
type: "pie",
radius: ["50%", "60%"],
itemStyle: {
borderRadius: 10,
borderColor: "",
borderWidth: 2,
},
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 18, name: "今日新增" },
{ value: 5, name: "处理中" },
],
},
],
};
option && myChart.setOption(option);
var chartDom2 = document.getElementById("contract");
console.log("chartDom==", chartDom2);
myChart2 = echarts.init(chartDom2);
var option;
option = {
tooltip: {
trigger: "item",
},
legend: false,
color: ["#FF6464", "#5CB3FF", "#3DEBD5"],
series: [
{
name: "",
type: "pie",
radius: ["50%", "60%"],
itemStyle: {
borderRadius: 10,
borderColor: "",
borderWidth: 2,
},
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 18, name: "新增合同" },
{ value: 5, name: "合同到期" },
{ value: 7, name: "即将到期" },
],
},
],
};
option && myChart2.setOption(option);
window.onresize = function () {
myChart.resize();
myChart2.resize();
};
});
</script>
</body>
</html>
report.css
html { html {
border: 3px solid rgba(255, 255, 255, 0.15); border: 3px solid rgba(255, 255, 255, 0.15);
background-color: #152235; background-color: #152235;
@media screen and (max-width: 1650px) { height: 99vh;
height: 99vh;
}
@media screen and (min-width: 1651px) {
}
position: relative; position: relative;
} }
body { body {
...@@ -50,14 +47,8 @@ body { ...@@ -50,14 +47,8 @@ body {
transform: translateX(-50%); transform: translateX(-50%);
} }
.report-title-bg > img { .report-title-bg > img {
@media screen and (max-width: 1650px) { width: 504px;
width: 504px; height: 51px;
height: 51px;
}
@media screen and (min-width: 1651px) {
width: 780px;
height: 82px;
}
} }
.report-title { .report-title {
position: absolute; position: absolute;
...@@ -68,54 +59,27 @@ body { ...@@ -68,54 +59,27 @@ body {
} }
.report-title-time { .report-title-time {
color: #37f1e7; color: #37f1e7;
@media screen and (max-width: 1650px) { font-size: 24px;
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
margin-right: 10px; margin-right: 10px;
} }
.report-title-info { .report-title-info {
color: #ffffff; color: #ffffff;
@media screen and (max-width: 1650px) { font-size: 24px;
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 36px;
}
} }
.invest-wrapper { .invest-wrapper {
@media screen and (max-width: 1650px) { margin-top: 70px;
margin-top: 70px; margin-left: 47px;
margin-left: 47px;
}
@media screen and (min-width: 1651px) {
margin-top: 120px;
margin-left: 72px;
}
} }
.invest-wrapper-title { .invest-wrapper-title {
margin-bottom: 30px; margin-bottom: 27px;
} }
.invest-wrapper .invest-wrapper-title img { .invest-wrapper .invest-wrapper-title img {
@media screen and (max-width: 1650px) { width: 110px;
width: 110px; height: 25px;
height: 25px;
}
@media screen and (min-width: 1651px) {
width: 168px;
height: 38px;
}
} }
.invest-wrapper-content { .invest-wrapper-content {
color: #fff; color: #fff;
@media screen and (max-width: 1650px) { font-size: 18px;
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
...@@ -127,60 +91,32 @@ body { ...@@ -127,60 +91,32 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 1650px) { width: 6px;
width: 6px; height: 43px;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-right-bracket img { .invest-wrapper-right-bracket img {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 1650px) { width: 6px;
width: 6px; height: 43px;
height: 43px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 68px;
}
} }
.invest-wrapper-content-first-text { .invest-wrapper-content-first-text {
display: inline-block; display: inline-block;
@media screen and (max-width: 1650px) { margin-left: 10px;
margin-left: 10px; margin-top: 8px;
margin-top: 8px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
margin-top: 12px;
}
} }
.invest-wrapper-content-second-text { .invest-wrapper-content-second-text {
display: inline-block; display: inline-block;
} }
.invest-wrapper-content-last-text { .invest-wrapper-content-last-text {
display: inline-block; display: inline-block;
@media screen and (max-width: 1650px) { margin-right: 10px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
margin-right: 20px;
}
} }
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
color: #ff6464; color: #ff6464;
@media screen and (max-width: 1650px) { font-size: 24px;
font-size: 24px;
}
@media screen and (min-width: 1651px) {
font-size: 42px;
}
} }
.invest-wrapper-content-left { .invest-wrapper-content-left {
...@@ -190,24 +126,12 @@ body { ...@@ -190,24 +126,12 @@ body {
.invest-wrapper-content-left-item { .invest-wrapper-content-left-item {
display: flex; display: flex;
@media screen and (max-width: 1650px) { margin-bottom: 4px;
margin-bottom: 4px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 10px;
}
} }
.invest-wrapper-content-left-item-img { .invest-wrapper-content-left-item-img {
@media screen and (max-width: 1650px) { width: 170px;
width: 170px; height: 30px;
height: 30px; margin-right: 10px;
margin-right: 10px;
}
@media screen and (min-width: 1651px) {
width: 258px;
height: 47px;
margin-right: 20px;
}
text-align: center; text-align: center;
} }
...@@ -216,49 +140,25 @@ body { ...@@ -216,49 +140,25 @@ body {
height: 100%; height: 100%;
} }
.invest-wrapper-content-left-item-line { .invest-wrapper-content-left-item-line {
@media screen and (max-width: 1650px) { 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) {
width: 127px;
height: 14px;
margin-top: 18px;
margin-right: 20px;
}
} }
.invest-wrapper-content-left-item-type { .invest-wrapper-content-left-item-type {
color: #fff; color: #fff;
opacity: 0.7; opacity: 0.7;
@media screen and (max-width: 1650px) { font-size: 18px;
font-size: 18px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
margin-right: 45px; margin-right: 45px;
} }
.invest-wrapper-content-left-item-num { .invest-wrapper-content-left-item-num {
color: #fff; color: #fff;
@media screen and (max-width: 1650px) { font-size: 22px;
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
} }
.invest-wrapper-content-right { .invest-wrapper-content-right {
@media screen and (max-width: 1650px) { margin-left: 130px;
margin-left: 130px; margin-top: 40px;
margin-top: 40px;
}
@media screen and (min-width: 1651px) {
margin-left: 184px;
margin-top: 60px;
}
} }
.invest-wrapper-content-red-triangle { .invest-wrapper-content-red-triangle {
width: 0; width: 0;
...@@ -279,29 +179,42 @@ body { ...@@ -279,29 +179,42 @@ body {
left: 0; left: 0;
top: 0; top: 0;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: 1650px) { width: 6px;
width: 6px; height: 73px;
height: 73px;
}
@media screen and (min-width: 1651px) {
width: 10px;
height: 114px;
}
} }
.invest-wrapper-right-bracket-big img { .invest-wrapper-right-bracket-big img {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
margin-left: 10px; margin-left: 10px;
@media screen and (max-width: 1650px) { width: 6px;
width: 6px; height: 73px;
height: 73px; }
}
@media screen and (min-width: 1651px) { .invest-wrapper-left-bracket-middle {
width: 10px; display: inline-block;
height: 114px; }
} .invest-wrapper-right-bracket-middle {
display: inline-block;
}
.invest-wrapper-left-bracket-middle img {
position: absolute;
left: 0;
top: 0;
margin-right: 10px;
width: 3.73pxpx;
height: 43px;
}
.invest-wrapper-right-bracket-middle img {
position: absolute;
right: 0;
top: 0;
margin-left: 10px;
width: 3.73pxpx;
height: 43px;
} }
.invest-wrapper-content-green-triangle { .invest-wrapper-content-green-triangle {
width: 0; width: 0;
height: 0; height: 0;
...@@ -312,65 +225,38 @@ body { ...@@ -312,65 +225,38 @@ body {
} }
.operator-wrapper { .operator-wrapper {
@media screen and (max-width: 1650px) { margin-left: 47px;
margin-left: 47px; margin-top: 26px;
margin-top: 26px;
}
@media screen and (min-width: 1651px) {
margin-left: 72px;
margin-top: 36px;
}
display: relative; display: relative;
} }
.operator-wrapper-title { .operator-wrapper-title {
margin-bottom: 30px; margin-bottom: 30px;
} }
.operator-wrapper-title img { .operator-wrapper-title img {
@media screen and (max-width: 1650px) { width: 110px;
width: 110px; height: 25px;
height: 25px;
}
@media screen and (min-width: 1651px) {
width: 168px;
height: 38px;
}
} }
.operator-wrapper-content { .operator-wrapper-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.operator-wrapper-content-box { .operator-wrapper-content-box {
@media screen and (max-width: 1650px) { margin-right: 30px;
margin-right: 30px; margin-bottom: 18px;
margin-bottom: 18px;
}
@media screen and (min-width: 1651px) {
margin-right: 40px;
margin-bottom: 30px;
}
position: relative; position: relative;
} }
.operator-wrapper-content-box-title { .operator-wrapper-content-box-title {
color: #37f1e7; color: #37f1e7;
@media screen and (max-width: 1650px) { font-size: 16px;
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 24px;
}
/* margin-bottom: 10px; */ /* margin-bottom: 10px; */
margin-left: 28px; margin-left: 28px;
} }
.operator-wrapper-content-box-chart { .operator-wrapper-content-box-chart {
/* width: 472px; */ /* width: 472px; */
/* height: 170px; */ /* height: 170px; */
@media screen and (max-width: 1650px) { height: 120px;
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;
...@@ -378,12 +264,7 @@ body { ...@@ -378,12 +264,7 @@ body {
display: flex; display: flex;
} }
.operator-wrapper-content-box-progress { .operator-wrapper-content-box-progress {
@media screen and (max-width: 1650px) { height: 137px;
height: 137px;
}
@media screen and (min-width: 1651px) {
height: 170px;
}
position: relative; position: relative;
background-size: cover; background-size: cover;
...@@ -391,74 +272,45 @@ body { ...@@ -391,74 +272,45 @@ body {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
} }
.electricity-box-progress {
height: 137px;
position: relative;
background-size: cover;
padding-top: 4px;
box-sizing: border-box;
display: flex;
}
.advise-wrapper { .advise-wrapper {
@media screen and (max-width: 1650px) { margin-left: 47px;
margin-left: 47px; margin-top: 14px;
margin-top: 14px;
}
@media screen and (min-width: 1651px) {
margin-left: 72px;
margin-top: 20px;
}
display: relative; display: relative;
} }
.advise-wrapper-title { .advise-wrapper-title {
margin-bottom: 10px; margin-bottom: 10px;
} }
.advise-wrapper-title img { .advise-wrapper-title img {
@media screen and (max-width: 1650px) { width: 140px;
width: 140px; height: 24px;
height: 24px;
}
@media screen and (min-width: 1651px) {
width: 257px;
height: 38px;
}
} }
.advise-wrapper-content-item { .advise-wrapper-content-item {
display: flex; display: flex;
@media screen and (max-width: 1650px) { margin-bottom: 8px;
margin-bottom: 8px;
}
@media screen and (min-width: 1651px) {
margin-bottom: 16px;
}
} }
.advise-wrapper-content-item img { .advise-wrapper-content-item img {
@media screen and (max-width: 1650px) { width: 13px;
width: 13px; height: 13px;
height: 13px; margin-right: 13px;
margin-right: 13px; margin-top: 6px;
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: 1650px) { font-size: 18px;
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: 1650px) { width: 100px;
width: 100px; height: 100px;
height: 100px; margin: 12px 10px 14px 19px;
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;
...@@ -467,14 +319,8 @@ body { ...@@ -467,14 +319,8 @@ body {
} }
.circle-bar { .circle-bar {
font-size: 200px; font-size: 200px;
@media screen and (max-width: 1650px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
position: relative; position: relative;
/* background-color: #333; */ /* background-color: #333; */
...@@ -482,14 +328,8 @@ body { ...@@ -482,14 +328,8 @@ body {
} }
.circle-bar-left, .circle-bar-left,
.circle-bar-right { .circle-bar-right {
@media screen and (max-width: 1650px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
...@@ -499,31 +339,15 @@ body { ...@@ -499,31 +339,15 @@ body {
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/ */
.circle-bar-right { .circle-bar-right {
@media screen and (max-width: 1650px) { clip: rect(0, auto, auto, 35px);
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: 1650px) { clip: rect(0, 35px, auto, 0);
clip: rect(0, 35px, auto, 0);
}
@media screen and (min-width: 1651px) {
clip: rect(0, 56px, auto, 0);
}
} }
.mask { .mask {
@media screen and (max-width: 1650px) { width: 60px;
width: 60px; height: 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;
...@@ -531,16 +355,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -531,16 +355,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: rgba(255, 255, 255); color: rgba(255, 255, 255);
} }
.mask :first-child { .mask :first-child {
@media screen and (max-width: 1650px) { font-size: 22px;
font-size: 22px; height: 30px;
height: 30px; line-height: 10px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
...@@ -548,14 +365,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -548,14 +365,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-right-2 { .circle-bar-right-2 {
/* width: 112px; /* width: 112px;
height: 112px; */ height: 112px; */
@media screen and (max-width: 1650px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
} }
...@@ -564,60 +375,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -564,60 +375,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/ */
.circle-bar-right-2 { .circle-bar-right-2 {
@media screen and (max-width: 1650px) { clip: rect(0, auto, auto, 35px);
clip: rect(0, auto, auto, 35px);
}
@media screen and (min-width: 1651px) {
clip: rect(0, auto, auto, 56px);
}
} }
.circle-bar-left-2 { .circle-bar-left-2 {
@media screen and (max-width: 1650px) { clip: rect(0, 35px, auto, 0);
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: 1650px) { width: 60px;
width: 60px; height: 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: 1650px) { font-size: 22px;
font-size: 22px; height: 30px;
height: 30px; line-height: 10px;
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: 1650px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
position: relative; position: relative;
background: #f3be28; background: #f3be28;
} }
...@@ -639,60 +421,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -639,60 +421,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-left-3, .circle-bar-left-3,
.circle-bar-right-3 { .circle-bar-right-3 {
@media screen and (max-width: 1650px) { width: 72px;
width: 72px; height: 72px;
height: 72px;
}
@media screen and (min-width: 1651px) {
width: 112px;
height: 112px;
}
/* background-color: #eee; */ /* background-color: #eee; */
background-color: #2c3849; background-color: #2c3849;
} }
.circle-bar-right-3 { .circle-bar-right-3 {
@media screen and (max-width: 1650px) { clip: rect(0, auto, auto, 35px);
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: 1650px) { clip: rect(0, 35px, auto, 0);
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: 1650px) { width: 60px;
width: 60px; height: 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: 1650px) { font-size: 22px;
font-size: 22px; height: 30px;
height: 30px; line-height: 10px;
line-height: 10px;
}
@media screen and (min-width: 1651px) {
font-size: 33.6px;
height: 89.6px;
line-height: 70px;
}
display: block; display: block;
} }
/*所有的后代都水平垂直居中，这样就是同心圆了*/ /*所有的后代都水平垂直居中，这样就是同心圆了*/
...@@ -711,14 +464,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -711,14 +464,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.percent-text { .percent-text {
color: #fff; color: #fff;
@media screen and (max-width: 1650px) { font-size: 18px;
font-size: 18px; margin-top: 30px;
margin-top: 30px;
}
@media screen and (min-width: 1651px) {
font-size: 22px;
margin-top: 50px;
}
opacity: 0.7; opacity: 0.7;
} }
...@@ -728,64 +475,34 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -728,64 +475,34 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc img { .chart-desc img {
@media screen and (max-width: 1650px) { width: 165px;
width: 165px; height: 18px;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 277px;
height: 27px;
}
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.chart-desc-other { .chart-desc-other {
@media screen and (max-width: 1650px) { width: 175px !important;
width: 175px !important; height: 18px;
height: 18px;
}
@media screen and (min-width: 1651px) {
width: 293px;
height: 27px;
}
} }
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
display: flex; display: flex;
margin-top: 10px;
@media screen and (max-width: 1650px) { width: 160px;
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: 1650px) { font-size: 18px;
font-size: 18px; margin-left: 8px;
margin-left: 8px; margin-top: 4px;
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: 1650px) { font-size: 22px;
font-size: 22px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
font-weight: 700; font-weight: 700;
} }
...@@ -794,26 +511,15 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -794,26 +511,15 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-desc-unfinished-value { .chart-desc-unfinished-value {
color: #ff6464; color: #ff6464;
@media screen and (max-width: 1650px) { font-size: 22px;
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: 1650px) { width: 8px;
width: 8px; height: 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;
...@@ -821,14 +527,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -821,14 +527,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left: 20px; margin-left: 20px;
} }
.chart-desc-handle-legend { .chart-desc-handle-legend {
@media screen and (max-width: 1650px) { width: 8px;
width: 8px; height: 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;
...@@ -840,48 +540,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -840,48 +540,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.repair-require-chart { .repair-require-chart {
background: url("./assets/repair-require-bg.png") no-repeat; background: url("./assets/repair-require-bg.png") no-repeat;
@media screen and (max-width: 1650px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
background-size: cover; background-size: cover;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
@media screen and (max-width: 1650px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
} }
.contract-chart { .contract-chart {
background: url("./assets/contract-bg.png") no-repeat; background: url("./assets/contract-bg.png") no-repeat;
@media screen and (max-width: 1650px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
background-size: cover; background-size: cover;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
@media screen and (max-width: 1650px) { width: 115px;
width: 115px; height: 115px;
height: 115px;
}
@media screen and (min-width: 1651px) {
width: 160px;
height: 160px;
}
} }
.top-left { .top-left {
...@@ -917,82 +593,51 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -917,82 +593,51 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right: 0; right: 0;
} }
.repair-require-info { .repair-require-info {
@media screen and (max-width: 1650px) { margin-left: 10px;
margin-left: 10px;
}
@media screen and (min-width: 1651px) {
margin-left: 20px;
}
margin-top: 10px; margin-top: 10px;
} }
.repair-require-info img { .repair-require-info img {
@media screen and (max-width: 1650px) { width: 65px;
width: 65px; height: 60px;
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: 1650px) { margin-left: 8px;
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: 1650px) { font-size: 18px;
font-size: 18px;
} text-align: center;
@media screen and (min-width: 1651px) { }
font-size: 34px; .electricity-info-text {
} color: #ff6464;
margin-left: 8px;
}
.electricity-info-text span {
font-weight: 700;
font-size: 18px;
text-align: center; text-align: center;
} }
.chart-data { .chart-data {
position: relative; position: relative;
margin-top: 20px; margin-top: 20px;
@media screen and (max-width: 1650px) { width: 180px;
width: 180px; margin-left: 20px;
margin-left: 20px;
}
@media screen and (min-width: 1651px) {
width: 260px;
margin-left: 55px;
}
} }
.bar-data { .bar-data {
position: relative; position: relative;
@media screen and (max-width: 1650px) { margin-left: 20px;
margin-left: 20px; margin-top: -20px;
margin-top: -20px; width: 180px;
width: 180px;
}
@media screen and (min-width: 1651px) {
margin-left: 55px;
margin-top: -35px;
width: 260px;
}
} }
.bar-data-2 { .bar-data-2 {
position: relative; position: relative;
@media screen and (max-width: 1650px) { margin-left: 20px;
margin-left: 20px; margin-top: 10px;
margin-top: 10px; width: 180px;
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;
...@@ -1000,22 +645,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1000,22 +645,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: 1650px) { font-size: 16px;
font-size: 16px;
}
@media screen and (min-width: 1651px) {
font-size: 28px;
}
} }
.chart-data-text-num { .chart-data-text-num {
color: #fff; color: #fff;
@media screen and (max-width: 1650px) { font-size: 22px;
font-size: 22px; margin-right: 30px;
margin-right: 30px;
}
@media screen and (min-width: 1651px) {
font-size: 34px;
}
margin-left: auto; margin-left: auto;
} }
...@@ -1032,12 +667,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1032,12 +667,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.g-progress { .g-progress {
margin: auto; margin: auto;
@media screen and (max-width: 1650px) { width: 167px;
width: 167px;
}
@media screen and (min-width: 1651px) {
width: 256px;
}
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
...@@ -1052,12 +682,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1052,12 +682,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.assign-progress { .assign-progress {
margin: auto; margin: auto;
@media screen and (max-width: 1650px) { width: 166px;
width: 166px;
}
@media screen and (min-width: 1651px) {
width: 256px;
}
height: 9px; height: 9px;
border-radius: 25px; border-radius: 25px;
......
report.html
...@@ -107,7 +107,9 @@ ...@@ -107,7 +107,9 @@
</div> </div>
</div> </div>
<div class="invest-wrapper-content invest-wrapper-content-right"> <div class="invest-wrapper-content invest-wrapper-content-right">
<div class="invest-wrapper-left-bracket-big"> <div
class="invest-wrapper-left-bracket-middle invest-wrapper-left-bracket-big"
>
<img src="./assets/bracket-left-big.png" /> <img src="./assets/bracket-left-big.png" />
</div> </div>
<div class="invest-wrapper-content-first-text"> <div class="invest-wrapper-content-first-text">
...@@ -128,7 +130,9 @@ ...@@ -128,7 +130,9 @@
<!--负数--> <!--负数-->
<div class="invest-wrapper-content-green-triangle"></div> <div class="invest-wrapper-content-green-triangle"></div>
<!--end--> <!--end-->
<div class="invest-wrapper-right-bracket-big"> <div
class="invest-wrapper-right-bracket-middle invest-wrapper-right-bracket-big"
>
<img src="./assets/bracket-right-big.png" /> <img src="./assets/bracket-right-big.png" />
</div> </div>
</div> </div>
...@@ -354,10 +358,10 @@ ...@@ -354,10 +358,10 @@
<div class="bottom-right"></div> <div class="bottom-right"></div>
<div class="operator-wrapper-content-box-title">水电费单</div> <div class="operator-wrapper-content-box-title">水电费单</div>
<div class="operator-wrapper-content-box-progress"> <div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info"> <div class="pie-chart-area repair-require-info">
<img src="./assets/electricity-icon.png" /> <img src="./assets/electricity-icon.png" />
<div class="repair-require-info-text"><span>3.09</span>万元</div> <div class="electricity-info-text"><span>3.09</span>万元</div>
</div> </div>
<div class="chart-desc"> <div class="chart-desc">
<div class="bar-data"> <div class="bar-data">
...@@ -426,6 +430,7 @@ ...@@ -426,6 +430,7 @@
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var myChart, myChart2;
$(function () { $(function () {
var percent = parseInt($(".mask :first-child").text()); var percent = parseInt($(".mask :first-child").text());
console.log("percent==", percent); console.log("percent==", percent);
...@@ -487,7 +492,7 @@ ...@@ -487,7 +492,7 @@
var chartDom = document.getElementById("repair-require"); var chartDom = document.getElementById("repair-require");
console.log("chartDom==", chartDom); console.log("chartDom==", chartDom);
var myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
...@@ -533,7 +538,7 @@ ...@@ -533,7 +538,7 @@
var chartDom2 = document.getElementById("contract"); var chartDom2 = document.getElementById("contract");
console.log("chartDom==", chartDom2); console.log("chartDom==", chartDom2);
var myChart = echarts.init(chartDom2); myChart2 = echarts.init(chartDom2);
var option; var option;
option = { option = {
...@@ -576,7 +581,12 @@ ...@@ -576,7 +581,12 @@
], ],
}; };
option && myChart.setOption(option); option && myChart2.setOption(option);
window.onresize = function () {
myChart.resize();
myChart2.resize();
};
}); });
</script> </script>
</body> </body>
......
test.html 0 → 100644
<html>
<head>
<style>
body {
width: 100vw;
height: 100vh;
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.a {
width: 460px;
height: 100px;
background: red;
}
.b {
width: 1000px;
height: 100px;
background: green;
}
.c {
width: 460px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="a">
<div>
22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
</div>
</div>
<div class="b">b</div>
<div class="c">
<div>
22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
</div>
</div>
</div>
</body>
</html>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论