|
@@ -1,27 +1,53 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="hor-nowData">
|
|
|
- <NowData screenType="ver" />
|
|
|
- <AirSwitchVer status="false" />
|
|
|
- <LastMonth screenType="ver" />
|
|
|
- <div>
|
|
|
- <AirSwitch />
|
|
|
+ <div class="verticalWrap">
|
|
|
+ <NowData screenType="ver" />
|
|
|
+ <AirSwitchVer />
|
|
|
+ <LastMonthData screenType="ver" />
|
|
|
+ <div class="lastTotalEnergy verticalClass">
|
|
|
+ <div class="head-title">
|
|
|
+ <span>上月总能耗</span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <FloorSpace />
|
|
|
+ <div class="subhead-title">低能耗亲自然</div>
|
|
|
+ <div class="bottomCont">
|
|
|
+ <img src='@/assets/circleEnergy.png' />
|
|
|
+ <div class="showData">
|
|
|
+ <div class="title">比基准能耗</div>
|
|
|
+ <div class="energySave">节能<span>50%</span></div>
|
|
|
+ <div class="totalEnergy">总能耗<span>25541</span>KWh</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div class="lastSaveEnergy verticalClass">
|
|
|
+ <div class="head-title">
|
|
|
+ <span>上月节约能耗</span>
|
|
|
+ </div>
|
|
|
+ <div class="bottomCont">
|
|
|
+ <img src='@/assets/save_energy.png' />
|
|
|
+ <div class="showData">
|
|
|
+ <div class="leftsave">节约电<br /><span>2566</span>度</div>
|
|
|
+ <div class="equalTo">相当于</div>
|
|
|
+ <div class="saveCo2">减排<span>0.955</span>kg二氧化碳</div>
|
|
|
+ <div class="saveCarbon">减排<span>0.225</span>kg碳</div>
|
|
|
+ <div class="plantTree">为国家种<span>26</span>棵树</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <div>
|
|
|
+ <FloorSpace />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import NowData from './valueDelivery/NowData.vue'
|
|
|
-import LastMonth from './valueDelivery/LastMonthData.vue'
|
|
|
+import LastMonthData from './valueDelivery/LastMonthData.vue'
|
|
|
import AirSwitch from './valueDelivery/AirSwitch.vue'
|
|
|
import AirSwitchVer from './valueDelivery/AirSwitchVer.vue'
|
|
|
import FloorSpace from './valueDelivery/FloorSpace.vue'
|
|
|
+
|
|
|
+
|
|
|
export default {
|
|
|
- components: { NowData, AirSwitch, FloorSpace, LastMonth, AirSwitchVer },
|
|
|
+ components: { NowData, AirSwitch, FloorSpace, LastMonthData, AirSwitchVer },
|
|
|
data() {
|
|
|
return {
|
|
|
|
|
@@ -30,9 +56,105 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.hor-nowData {
|
|
|
- width: 100%;
|
|
|
- background: #e5e5e5;
|
|
|
+@import "/src/assets/css/common.less";
|
|
|
+.verticalWrap {
|
|
|
+ background: #f3fdff;
|
|
|
+}
|
|
|
+.lastTotalEnergy {
|
|
|
+ height: 535px;
|
|
|
+ .bottomCont {
|
|
|
+ width: 580px;
|
|
|
+ margin: 4px auto;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .showData {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 90px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .title {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #575271;
|
|
|
+ }
|
|
|
+ .energySave {
|
|
|
+ margin-top: 14px;
|
|
|
+ font-size: 56px;
|
|
|
+ span {
|
|
|
+ font-size: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .totalEnergy {
|
|
|
+ margin-top: 18px;
|
|
|
+ color: #2ec5f5;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.lastSaveEnergy {
|
|
|
+ height: 535px;
|
|
|
+ .bottomCont {
|
|
|
+ width: 900px;
|
|
|
+ margin: 40px auto;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .showData {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
+ // flex-direction: column;
|
|
|
+ .leftsave {
|
|
|
+ position: absolute;
|
|
|
+ left: 12px;
|
|
|
+ top: 160px;
|
|
|
+ color: #fff;
|
|
|
+ width: 210px;
|
|
|
+ line-height: 34px;
|
|
|
+ text-align: center;
|
|
|
+ span {
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .equalTo {
|
|
|
+ position: absolute;
|
|
|
+ left: 249px;
|
|
|
+ top: 186px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .saveCo2 {
|
|
|
+ position: absolute;
|
|
|
+ left: 562px;
|
|
|
+ top: 32px;
|
|
|
+ }
|
|
|
+ .saveCarbon {
|
|
|
+ position: absolute;
|
|
|
+ left: 562px;
|
|
|
+ top: 186px;
|
|
|
+ }
|
|
|
+ .plantTree {
|
|
|
+ position: absolute;
|
|
|
+ left: 562px;
|
|
|
+ top: 340px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|