Skip to content

R
report-html-template
Commit 7a0f94f6 by 杨翔
Options

css修改

parent 533c25dd
正在显示 包含 348 行增加 和 152 行删除
energy-report/index.css
......@@ -138,12 +138,22 @@ body {
flex: 2;
}
#distribution-charts {
height: 380px;
flex: 2;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
margin-right: 30px;
@media screen and (min-width: 769px){
#distribution-charts {
height: 380px;
flex: 2;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
margin-right: 30px;
}
}
@media screen and (max-width: 768px){
#distribution-charts {
height: 380px;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
}
}
.right {
......@@ -221,69 +231,143 @@ body {
/* font-size: 14px; */
}
.distribution-wrap {
display: flex;
}
@media screen and (min-width: 769px) {
.distribution-wrap {
display: flex;
}
.distribution-right {
flex: 1;
position: relative;
}
.distribution-right {
flex: 1;
position: relative;
}
.distribution-right-top {
.distribution-right-top {
}
}
#slide {
position: absolute;
height: 270px;
overflow: hidden;
margin-bottom: 21px;
width: 100%;
}
#slide {
position: absolute;
height: 270px;
overflow: hidden;
margin-bottom: 21px;
width: 100%;
}
.distribution-right-bottom {
position: absolute;
bottom: 0;
}
.distribution-right-bottom {
position: absolute;
bottom: 0;
}
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar {
display: none;
.distribution-right-top-list {
background: rgba(255, 255, 255, 0.1);
padding: 12px;
display: flex;
justify-content: space-between;
font-size: 18px;
font-family: PingFang TC-Regular, PingFang TC;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 4px;
}
.distribution-right-top-two {
font-weight: 600;
}
}
.distribution-right-top-list {
background: rgba(255, 255, 255, 0.1);
padding: 12px;
display: flex;
justify-content: space-between;
font-size: 18px;
font-family: PingFang TC-Regular, PingFang TC;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 4px;
@media screen and (max-width: 768px) {
.distribution-wrap {
display: flex;
flex-direction: column;
}
.distribution-right {
flex: 1;
position: relative;
}
.distribution-right-top {
}
#slide {
position: absolute;
height: 270px;
overflow: hidden;
margin-bottom: 21px;
width: 100%;
}
.distribution-right-bottom {
margin-top: 290px;
}
::-webkit-scrollbar {
display: none;
}
.distribution-right-top-list {
background: rgba(255, 255, 255, 0.1);
padding: 12px;
display: flex;
justify-content: space-between;
font-size: 18px;
font-family: PingFang TC-Regular, PingFang TC;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 4px;
}
.distribution-right-top-two {
font-weight: 600;
}
}
.distribution-right-top-two {
font-weight: 600;
@media screen and (min-width: 769px) {
.production-portrait {
display: flex;
justify-content: space-between;
}
}
.production-portrait {
display: flex;
justify-content: space-between;
@media screen and (max-width: 768px) {
.production-portrait {
display: flex;
flex-direction: column;
}
}
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27);
padding: 10px 0 25px 55px;
margin-top: 30px;
@media screen and (min-width: 769px) {
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27);
padding: 10px 0 25px 55px;
margin-top: 30px;
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 380px;
display: inline-flex;
}
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 380px;
display: inline-flex;
@media screen and (max-width: 768px) {
.production-portrait-bottom {
background: rgba(8, 16, 24, 0.27);
padding: 20px;
margin-top: 10px;
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 380px;
display: inline-flex;
}
}
.popup {
position: relative;
display: flex;
......@@ -726,17 +810,43 @@ body {
margin: 27px 0 37px;
}
.centerPro {
display: flex;
margin-bottom: 30px;
@media screen and (min-width: 769px) {
.centerPro {
display: flex;
margin-bottom: 30px;
}
.centerPro-left {
flex: 2;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
margin-right: 30px;
height: 354px;
}
.centerPro-right {
flex: 1;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
}
.centerPro-left {
flex: 2;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
margin-right: 30px;
height: 354px;
@media screen and (max-width: 768px) {
.centerPro {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.centerPro-left {
background: rgba(8, 16, 24, 0.27);
padding: 15px;
}
.centerPro-right {
margin-top: 10px;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
}
#repair-require6 {
......@@ -744,13 +854,6 @@ body {
margin-top: -5px
}
.centerPro-right {
flex: 1;
background: rgba(8, 16, 24, 0.27);
padding: 15px;
height: 354px;
}
#repair-require7 {
height: 200px;
margin-top: -10px;
......@@ -826,28 +929,56 @@ body {
margin-bottom: 19px;
}
.timePeriod-textBox {
width: 100%;
height: 40px;
background: linear-gradient(
-90deg,
rgba(92, 179, 255, 0) 0%,
rgba(92, 179, 255, 0.2) 100%
);
background-size: cover;
border-radius: 20px;
margin-bottom: 30px;
@media screen and (min-width: 769px){
.timePeriod-textBox {
width: 100%;
height: 40px;
background: linear-gradient(
-90deg,
rgba(92, 179, 255, 0) 0%,
rgba(92, 179, 255, 0.2) 100%
);
background-size: cover;
border-radius: 20px;
margin-bottom: 30px;
}
.timePeriod-textBox-text {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 13px;
}
}
.timePeriod-textBox-text {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 13px;
@media screen and (max-width: 768px){
.timePeriod-textBox {
width: 100%;
height: 40px;
background: linear-gradient(
-90deg,
rgba(92, 179, 255, 0) 0%,
rgba(92, 179, 255, 0.2) 100%
);
background-size: cover;
border-radius: 20px;
margin-bottom: 15px;
}
.timePeriod-textBox-text {
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 12px;
display: inline-block;
margin-left: 20px;
margin-top: 13px;
}
}
.echarts-timePeriod1 {
......@@ -867,12 +998,23 @@ body {
}
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05);
height: 200px;
width: calc(100% - 2.4vw);
margin-bottom: 24px;
padding: 16px 0px 0 30px;
@media screen and (min-width: 769px){
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05);
height: 200px;
width: calc(100% - 2.4vw);
margin-bottom: 24px;
padding: 16px 0px 0 30px;
}
}
@media screen and (max-width: 768px){
.avgMonthlyBox {
background: rgba(255, 255, 255, 0.05);
width: auto;
margin-bottom: 24px;
padding: 20px;
}
}
.avgMonthlyBox-title {
......@@ -885,9 +1027,19 @@ body {
margin-bottom: 39px;
}
.avgMonthlyBox-content {
display: flex;
width: 100%;
@media screen and (min-width: 769px){
.avgMonthlyBox-content {
display: flex;
width: 100%;
}
}
@media screen and (max-width: 768px){
.avgMonthlyBox-content {
display: flex;
flex-direction: column;
/*width: 100%;*/
}
}
.content-item {
......@@ -915,23 +1067,54 @@ body {
margin-bottom: 10px;
}
.content-item-r {
width: 26%;
.content-item-m {
display: flex;
margin-left: 5%;
padding-right: 30px;
flex: 1;
flex-direction: row;
align-content: center;
justify-content: space-between;
}
.item-r-text {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 25px;
letter-spacing: 2px;
margin: 22px 1% 0 4%;
@media screen and (min-width: 769px){
.content-item-r {
width: 26%;
display: flex;
margin-left: 5%;
padding-right: 30px;
}
.item-r-text {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 25px;
letter-spacing: 2px;
margin: 22px 1% 0 4%;
}
}
@media screen and (max-width: 768px){
.content-item-r {
display: flex;
width: 100%;
margin-top: 20px;
}
.item-r-text {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 25px;
letter-spacing: 2px;
padding: 10px;
}
}
.item-r-text-red {
color: #ff6464;
}
......@@ -947,12 +1130,23 @@ body {
}
.timePeriod-legend-img {
float: right;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
padding-right: 20px;
@media screen and (min-width: 769px){
.timePeriod-legend-img {
float: right;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
padding-right: 20px;
}
}
@media screen and (max-width: 768px){
.timePeriod-legend-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
}
energy-report/index.html
......@@ -256,21 +256,23 @@
<div class="avgMonthlyBox-title">各时段生产企业 月度平均数(家)</div>
<div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/>
<div class="content-item">
<div class="item-text1">尖时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">峰时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">平时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">谷时</div>
<div class="item-text2">205</div>
<div class="content-item-m">
<div class="content-item">
<div class="item-text1">尖时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">峰时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">平时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">谷时</div>
<div class="item-text2">205</div>
</div>
</div>
<div class="content-item-r">
<img src="./assets/avgMonthlyLeft.svg"/>
......@@ -285,20 +287,19 @@
</div>
<!-- 尖峰平谷各时段，集中生产的企业月度平均数 -->
<div class="timePeriod-textBox">
<span class="timePeriod-textBox-text">
尖峰平谷各时段，集中生产的企业月度平均数
</span>
<span class="timePeriod-textBox-text">
尖峰平谷各时段，集中生产的企业月度平均数
</span>
</div>
<div class="centerPro">
<div class="centerPro-left">
<div class="timePeriod-legend2">
<img src="./assets/legend.svg" class="timePeriod-legend-img"/>
</div>
<div id="repair-require6"></div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right">
<span>根据以上数据显示，该企业在<span
<span>根据以上数据显示，该企业在<span
class="echarts-title-repair-list-right-red">集中生产时段1、集中生产时段2、集中生产时段3</span>进行集中生产的频率最高</span>
</div>
</div>
......@@ -334,21 +335,23 @@
</div>
<div class="avgMonthlyBox-content">
<img src="./assets/avgMonthlyIcon.svg"/>
<div class="content-item">
<div class="item-text1">尖时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">峰时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">平时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">谷时</div>
<div class="item-text2">205</div>
<div class="content-item-m">
<div class="content-item">
<div class="item-text1">尖时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">峰时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">平时</div>
<div class="item-text2">205</div>
</div>
<div class="content-item">
<div class="item-text1">谷时</div>
<div class="item-text2">205</div>
</div>
</div>
<div class="content-item-r">
<img src="./assets/avgMonthlyLeft.svg"/>
......@@ -2483,4 +2486,4 @@
}
</script>
</html>
\ No newline at end of file
</html>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论