代码提交
This commit is contained in:
parent
0e16db941e
commit
e8590d8964
28
src/App.vue
28
src/App.vue
|
|
@ -254,6 +254,7 @@ import {getData} from './api/index.js'
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.handleAction{
|
.handleAction{
|
||||||
|
|
@ -262,6 +263,17 @@ import {getData} from './api/index.js'
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
color:rgb(15,251,251);
|
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{
|
.middleText{
|
||||||
width:59%;
|
width:59%;
|
||||||
|
|
@ -298,14 +310,26 @@ import {getData} from './api/index.js'
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.handleAction1{
|
.handleAction1{
|
||||||
width:25%;
|
width:25%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
color:rgb(15,251,251);
|
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{
|
.right{
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -115,7 +115,31 @@
|
||||||
<div class="Bicarbon">
|
<div class="Bicarbon">
|
||||||
<div class="title" text="绿色双碳">绿色双碳</div>
|
<div class="title" text="绿色双碳">绿色双碳</div>
|
||||||
<div class="content">
|
<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="two">
|
||||||
<div class="title" text="清洁能源电力消纳情况">清洁能源电力消纳情况</div>
|
<div class="title" text="清洁能源电力消纳情况">清洁能源电力消纳情况</div>
|
||||||
<div class="twoContent">
|
<div class="twoContent">
|
||||||
|
|
@ -283,6 +307,34 @@ import {getData} from '../api/index.js'
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
return{
|
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:'',
|
smallMapData:'',
|
||||||
smallMapDataShow:true,
|
smallMapDataShow:true,
|
||||||
powerGeneration:'',//清洁能源发电量
|
powerGeneration:'',//清洁能源发电量
|
||||||
|
|
@ -4856,6 +4908,144 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: url("../assets/images/kuang.png") no-repeat;
|
background: url("../assets/images/kuang.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
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{
|
.two{
|
||||||
height: 32%;
|
height: 32%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue