lixiaobang
/
yanchengScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-01-06 14:21:35 +08:00
parent 0e16db941e
commit e8590d8964
7 changed files with 217 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.vue
View File

@ -254,6 +254,7 @@ import {getData} from './api/index.js'
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}
}
.handleAction{
@ -262,6 +263,17 @@ import {getData} from './api/index.js'
display: flex;
justify-content: flex-start;
color:rgb(15,251,251);
.leftBtnText{
height: 61%;
// width: 56.62%;
width: 100%;
background: url("./assets/images/leftAct.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}
}
.middleText{
width:59%;
@ -298,6 +310,7 @@ import {getData} from './api/index.js'
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}
}
.handleAction1{
@ -306,6 +319,17 @@ import {getData} from './api/index.js'
display: flex;
justify-content: flex-end;
color:rgb(15,251,251);
.rightBtnText{
height: 61%;
// width: 56.62%;
width: 100%;
background: url("./assets/images/rightAct.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}
}
}
.right{

BIN
src/assets/images/btnLeftPdf.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/images/btnRightPdf.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/greenLeft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/leftAct.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/rightAct.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

192
src/views/index.vue
View File

@ -115,7 +115,31 @@
<div class="Bicarbon">
<div class="title" text="绿色双碳">绿色双碳</div>
<div class="content">
<div class="one"></div>
<div class="one">
<div class="oneContent">
<div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px"/></div>
<div class="green">
<div class="greenLeft">
<div class="powerGeneration" v-for="(item,index) in greenLeftData" :key="index">
<div class="fadian" :text="item.name">{{item.name}}</div>
<div class="fadianliang">
<div class="shuzhi" :style="{color:item.color}" style="font-size:37px;font-family: emoji;">{{item.count}}</div>
<div class="danwei" :text="item.company">{{item.company}}</div>
</div>
</div>
</div>
<div class="greenRight">
<div class="powerGeneration" v-for="(item,index) in greenRightData" :key="index">
<div class="fadian" :text="item.name">{{item.name}}</div>
<div class="fadianliang">
<div class="shuzhi" :style="{color:item.color}" style="font-size:30px;font-family: emoji;">{{item.count}}</div>
<div class="danwei" :text="item.company">{{item.company}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="two">
<div class="title" text="清洁能源电力消纳情况">清洁能源电力消纳情况</div>
<div class="twoContent">
@ -283,6 +307,34 @@ import {getData} from '../api/index.js'
export default {
data(){
return{
greenLeftData:[
{
name:'上月清洁能源电厂发电量',
count:'025529',
company:'万千瓦时',
color:'rgb(255,204,0)',
},
{
name:'本年度清洁能源电厂发电量',
count:'262561',
company:'万千瓦时',
color:'rgb(71,211,252)',
},
],
greenRightData:[
{
name:'减少碳排放量',
count:'068310',
company:'吨',
color:'rgb(2,244,177)',
},
{
name:'减少碳排放量',
count:'00055',
company:'万吨',
color:'rgb(249,163,70)',
},
],
smallMapData:'',
smallMapDataShow:true,
powerGeneration:'',//清洁能源发电量
@ -4856,6 +4908,144 @@ export default {
width: 100%;
background: url("../assets/images/kuang.png") no-repeat;
background-size: 100% 100%;
.oneContent{
width: 100%;
height: 100%;
.details{
height: 14%;
width: 100%;
padding-right: 2%;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
}
.green{
height: calc(100% - 14%);
width: 100%;
display: flex;
justify-content: space-evenly;
.greenLeft{
width: 58.5%;
height: 100%;
padding: 2%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.powerGeneration{
height: 46%;
width: 100%;
background: url("../assets/images/greenLeft.png") no-repeat;
background-size: 100% 100%;
.fadian{
width: 100%;
height: 35%;
color: #ffffff;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 7%;
box-sizing: border-box;
}
.fadian:before{
content: attr(text);
position: absolute;
z-index: 10;
color:rgb(11,243,194);
-webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
}
.fadianliang{
width: 100%;
height: calc(100% - 35%);
display: flex;
.shuzhi{
width: 70%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.danwei{
width: calc(100% - 75%);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.danwei:before{
content: attr(text);
position: absolute;
z-index: 10;
color:rgb(11,243,194);
-webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
}
}
}
}
.greenRight{
width: calc(100% - 60%);
height: 100%;
padding: 2%;
padding-left: 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.powerGeneration{
height: 46%;
width: 100%;
background: url("../assets/images/greenLeft.png") no-repeat;
background-size: 100% 100%;
.fadian{
width: 100%;
height: 35%;
color: #ffffff;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 7%;
box-sizing: border-box;
}
.fadian:before{
content: attr(text);
position: absolute;
z-index: 10;
color:rgb(11,243,194);
-webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
}
.fadianliang{
width: 100%;
height: calc(100% - 35%);
display: flex;
.shuzhi{
width: 70%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.danwei{
width: calc(100% - 75%);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.danwei:before{
content: attr(text);
position: absolute;
z-index: 10;
color:rgb(11,243,194);
-webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
}
}
}
}
}
}
}
.two{
height: 32%;