zhaojing 3 years ago
parent
commit
7b487d295e

+ 2 - 2
src/assets/css/common.less

@@ -1,13 +1,13 @@
 
 .verticalClass{
     padding: 24px 32px;
-    height: 250px;
     width: 1000px;
-    margin: 0 auto;
+    margin: 0 auto 20px;
     box-sizing: border-box;
     border-radius: 20px;
     border: 2px solid #ffffff;
     background: #ffffff;
+    font-size:24px;
     .head-title{
         font-size: 20px;
         font-weight: 600;

BIN
src/assets/save_energy.png


BIN
src/assets/save_energy2.png


BIN
src/assets/tree.png


+ 1 - 1
src/views/valueDelivery/AirSwitchVer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="airSwitch verticalClass">
+    <div class="airSwitch">
         <div class="air-title head-title">
             <span>空调实时开关</span>
             <span class="status">{{status ? "空调已开启" : "空调已关闭"}}</span>

+ 3 - 3
src/views/valueDelivery/LastMonthData.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="[screenType==='hor' ? 'lastMonth' : 'lastMonth verticalClass' ]">
+    <div :class="[screenType==='hor' ? 'lastMonth' : 'lastMonth verticalClass2' ]">
         <div class="lastMonth-title"><span>上月数据</span></div>
         <div class="itemWrap">
             <div class="item" v-for="(item,index) in lastMonthData" :key="index">
@@ -139,10 +139,10 @@ export default {
         }
     }
 }
-.verticalClass {
+.verticalClass2 {
     height: 440px;
     width: 1000px;
-    margin: 0 auto;
+    margin:0 auto 20px;
     box-sizing: border-box;
        .itemWrap{
            display: flex;

+ 3 - 3
src/views/valueDelivery/NowData.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="NowData"
-        :class="[screenType==='hor' ? 'hor-nowData-contain' : 'verticalClass' ]"
+        :class="[screenType==='hor' ? 'hor-nowData-contain' : 'verticalClass2' ]"
     >
         <div class="nowData-title">
             <span class="hor-nowData-title-text">实时数据</span>
@@ -163,10 +163,10 @@ export default {
         display: flex;
         align-items: center;
     }
-    &.verticalClass{
+    &.verticalClass2{
          height: 460px;
          width: 1000px;
-        margin:0 auto;
+        margin:0 auto 20px;
         .item{
             .item_content{
                 .content_value{

+ 2 - 14
src/views/valueDelivery/lastTotalEnergy.vue

@@ -1,11 +1,5 @@
 <template>
-    <div class="lastTotalEnergy verticalClass">
-        <div class="head-title">
-            <span>上月总能耗</span>
-        </div>
-        <div class="subhead-title">低能耗亲自然</div>
-        <div class="bottomCont"></div>
-    </div>
+
 </template>
 <script>
 import air_close from '@/assets/horImg/air_close.png';
@@ -28,13 +22,7 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "/src/assets/css/common.less";
-.lastTotalEnergy {
-    height: 535px;
-    .bottomCont {
-        height: 383px;
-        width: 660px;
-    }
-}
+
 </style>
 
 

+ 128 - 15
src/views/verticalScreen.vue

@@ -1,27 +1,51 @@
 <template>
-    <div>
-        <div class="hor-nowData">
-            <NowData screenType="ver" />
-            <AirSwitchVer  />
-            <LastMonth screenType="ver" />
-            <lastTotalEnergy></lastTotalEnergy>
-            <div>
-                <FloorSpace />
+    <div class="verticalWrap">
+        <NowData screenType="ver" />
+        <AirSwitchVer />
+        <LastMonthData screenType="ver" />
+        <div class="lastTotalEnergy verticalClass">
+            <div class="head-title">
+                <span>上月总能耗</span>
+            </div>
+            <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="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>
+            <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'
-import lastTotalEnergy from './valueDelivery/lastTotalEnergy.vue'
+
 
 export default {
-    components: { NowData, AirSwitch, FloorSpace, LastMonth, AirSwitchVer ,lastTotalEnergy},
+    components: { NowData, AirSwitch, FloorSpace, LastMonthData, AirSwitchVer },
     data() {
         return {
 
@@ -30,9 +54,98 @@ 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: 60px;
+                top: 160px;
+                color:#fff;
+                line-height: 34px;
+                span{
+                    font-size:32px;
+                }
+            }
+            .saveCo2 {
+                position: absolute;
+                left: 562px;
+                top: 32px;
+                
+            }
+            .saveCarbon {
+                position: absolute;
+                left: 562px;
+                top: 186px;
+            }
+            .plantTree {
+                position: absolute;
+                left: 562px;
+                top: 340px;
+            }
+        }
+    }
 }
 </style>