Skip to content

R
report-html-template
Commit 83968555 by 呼呼啦啦
Options

修改

parent 3d8c898d
正在显示 包含 462 行增加 和 2 行删除
energy-report/index.css
......@@ -12,6 +12,7 @@ body {
background-color: #152235;
padding: 0 4vw 0 4vw;
box-sizing: border-box;
overflow: auto;
}
@media screen and (max-width: 768px) {
.energy-wrap .flex {
......@@ -20,6 +21,27 @@ body {
.energy-wrap .flex .right {
width: 100%;
}
.energy-wrap .header {
height: 4vh;
font-size: 18px;
}
.top-15-wrap > .items {
height: 56px;
}
.top-15-wrap > .items .company-name {
flex: 1;
}
.top-15-wrap > .items .process {
position: absolute !important;
left: 50px;
height: 20px;
top: 44px;
width: calc(100% - 70px);
margin-right: 0 !important;
}
.production-portrait .popup {
width: 100%;
}
}
.flex {
display: flex;
......@@ -27,20 +49,458 @@ body {
.block-bg {
background: rgba(8, 16, 24, 0.27);
}
.yongdianqushi {
.header {
height: 6vh;
width: 60vw;
max-width: 766px;
background: url('./assets/top-bg.png') no-repeat;
background-size: 100% 100%;
position: relative;
left: 0;
right: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 30px;
padding-bottom: 10px;
}
.time {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.month-check {
position: relative;
background-color: #152235;
outline: none;
border: 1px solid #fff;
color: #fff;
width: 100px;
padding: 6px 0;
}
.month-check::-webkit-calendar-picker-indicator {
position: absolute;
right: 0;
padding-left: 100%;
}
.title {
color: #fff;
margin: 20px 0;
display: flex;
align-items: center;
}
.title > img {
width: 18px;
height: 18px;
margin-right: 4px;
}
.chart-wrap {
}
.echarts-box {
width: 100%;
height: 30vh;
height: 400px;
/* height: 30vh; */
}
.gonglv {
height: 30vh;
}
.echarts-box1 {
flex: 1;
}
.echarts-box1#distribution-charts{
height: 30vh;
}
.right {
width: 40vw;
height: 30vh;
}
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-15-wrap {
max-height: 500px;
overflow-y: auto;
}
.top-15-wrap > .items {
background-color: rgba(255, 255, 255, 0.1);
margin-bottom: 4px;
display: flex;
padding: 12px 20px;
color: #fff;
position: relative;
}
.top-15-wrap > .items .index {
width: 22px;
height: 18px;
flex-shrink: 0;
}
.top-15-wrap > .items .company-name {
margin: 0 20px 0 10px;
width: 300px;
}
.top-15-wrap > .items .process {
flex: 1;
margin-right: 20px;
position: relative;
}
.top-15-wrap > .items .process > span {
width: 100%;
height: 100%;
content: '';
display: flex;
width: 70%;
position: absolute;
background: linear-gradient(to right, rgba(0, 216, 255, 1), rgba(0, 182, 255, 1));
}
.top-15-wrap > .items .process::after {
width: 100%;
height: 100%;
content: '';
display: flex;
background-color: rgba(255, 255, 255, 0.1);
}
.top-15-wrap .items .unit {
width: 140px;
text-align: right;
}
.top-15-wrap .items .unit > span {
/* font-size: 14px; */
}
.distribution-wrap {
}
.production-portrait {
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 300px;
display: inline-flex;
}
.popup {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.popup > span {
position: absolute;
background-color: rgba(52, 69, 94, 1);
border: 1px solid rgba(103, 120, 144, 1);
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
padding: 10px;
box-sizing: border-box;
white-space: wrap;
text-align: center;
}
.popup > span:nth-of-type(1) {
left: 20%;
top: 38%;
width: 22px;
height: 22px;
}
.popup > span:nth-of-type(2) {
left: 55%;
top: 5%;
width: 22px;
height: 22px;
}
.popup > span:nth-of-type(3) {
left: 70%;
top: 26%;
width: 72px;
height: 72px;
}
.popup > div:nth-of-type(1) {
position: relative;
width: 110px;
height: 110px;
}
.popup > div:nth-of-type(1) > span {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(92, 179, 255, 1), rgba(8, 86, 155, 1));
position: absolute;
border-radius: 50%;
z-index: 1;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
padding: 20px;
box-sizing: border-box;
white-space: wrap;
text-align: center;
}
.popup > div:nth-of-type(1)::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(52, 69, 94, 1);
left: -10px;
top: -10px;
border-radius: 50%;
}
.popup > div:nth-of-type(1)::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(52, 69, 94, 1);
left: 10px;
top: 10px;
border-radius: 50%;
}
.popup.right > div:nth-of-type(1) > span {
background: linear-gradient(to bottom, rgba(246, 133, 0, 1), rgba(168, 91, 0, 1));
}
.popup.right > div:nth-of-type(1)::before {
background: rgba(246, 133, 0, 0.3);
}
.right.popup > div:nth-of-type(1)::after {
background: rgba(246, 133, 0, 0.3);
}
.popup > span:nth-of-type(4) {
left: 62%;
top: 68%;
width: 42px;
height: 42px;
}
.popup > span:nth-of-type(5) {
left: 18%;
top: 68%;
width: 72px;
height: 72px;
}
.echarts-title {
width: 211px;
height: 25px;
}
.echarts-title img {
width: 100%;
}
.echarts-title-repair {
padding: 3%;
background: rgba(255, 255, 255, 0.05);
}
.echarts-title-content {
display: flex;
align-items: center;
}
.echarts-title-top {
background: url('../assets/contract-bg.png') no-repeat;
width: 208px;
height: 208px;
background-size: cover;
}
.echarts-title-repair-top {
width: 208px;
height: 208px;
}
.echarts-title-repair-top2 {
height: 228px;
width: 100%;
}
.echarts-title-repair-left {
margin-right: 3%;
}
.echarts-title-repair-list {
display: flex;
margin-top: 13px;
}
.echarts-title-repair-list img {
width: 20px;
height: 20px;
margin-top: 3px;
}
.echarts-title-repair-list-right {
margin-left: 13px;
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.echarts-title-repair-list-right-red {
color: rgba(255, 100, 100, 1);
}
.chart-desc {
position: relative;
margin-top: -15px;
}
.chart-desc img {
width: 165px;
height: 18px;
position: absolute;
bottom: 0;
left: 0;
}
.chart-desc-task {
position: relative;
display: flex;
margin-top: 10px;
}
.chart-desc-text {
color: #fff;
font-size: 18px;
margin-left: 8px;
margin-top: 4px;
}
.chart-desc-value {
margin-left: 30px;
color: #fff;
font-size: 22px;
font-weight: 700;
font-family: DIN Alternate-Bold;
text-align: right;
}
.chart-desc-unfinished {
margin-top: 10px;
}
.chart-desc-unfinished-value {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-left: auto;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.chart-desc-daily-legend {
width: 8px;
height: 8px;
background: rgba(92, 179, 255, 0.302);
opacity: 1;
border: 2px solid #5cb3ff;
margin-top: 12px;
margin-left: 20px;
}
.chart-desc-handle-legend {
width: 8px;
height: 8px;
background: rgba(255, 100, 100, 0.302);
opacity: 1;
border: 2px solid #ff6464;
margin-top: 12px;
margin-left: 20px;
}
.will-finished {
background: rgba(237, 241, 243, 0.302);
opacity: 1;
border: 2px solid #e9eff2;
margin-top: 12px;
margin-left: 20px;
width: 8px;
height: 8px;
}
.electricity-content {
height: 236px;
background: rgba(255, 255, 255, 0.05);
margin-bottom: 36px;
}
.electricity-content-title {
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
padding: 16px 0 0 24px;
}
.chart-desc-icon {
width: 8px;
height: 8px;
background: rgba(246, 133, 0, 0.302);
opacity: 1;
border: 2px solid #f68500;
margin-top: 12px;
margin-left: 20px;
}
.chart-desc-icon2 {
background: rgba(63, 241, 217, 0.302);
border: 2px solid #3ff1d9;
}
.chart-desc-icon3 {
background: rgba(255, 100, 100, 0.302);
border: 2px solid #ff6464;
}
.chart-desc-icon4 {
background: rgba(92, 179, 255, 0.302);
border: 2px solid #5cb3ff;
}
.echarts-box1-right {
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
margin-top: 20px;
}
.invest-wrapper-content {
display: flex;
height: 68px;
align-items: center;
justify-content: center;
}
.invest-wrapper-content-first {
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.invest-wrapper-left-bracket img {
width: 100%;
}
.invest-wrapper-right-bracket img {
width: 100%;
}
.invest-wrapper-content-customers {
color: #c8565b;
}
.analysis-content {
height: 380px;
background: rgba(8, 16, 24, 0.27);
border-radius: 0px 0px 0px 0px;
margin: 27px 0 37px;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论