Jelajahi Sumber

竖屏改动

zhaojing 3 tahun lalu
induk
melakukan
c2fc44c2b8

TEMPAT SAMPAH
src/assets/circleEnergy.png


+ 19 - 0
src/assets/css/common.less

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

+ 3 - 5
src/views/valueDelivery/AirSwitchVer.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="airSwitch">
-        <div class="air-title">
+    <div class="airSwitch verticalClass">
+        <div class="air-title head-title">
             <span>空调实时开关</span>
             <span class="status">{{status ? "空调已开启" : "空调已关闭"}}</span>
         </div>
@@ -47,6 +47,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+@import "/src/assets/css/common.less";
 .airSwitch {
     padding: 24px 32px;
     height: 250px;
@@ -57,9 +58,6 @@ export default {
     border: 2px solid #ffffff;
     background: #ffffff;
     .air-title {
-        font-size: 20px;
-        font-weight: 600;
-        color: #3b3558;
         .status {
             margin-top: 8px;
             margin-left: 12px;

+ 2 - 1
src/views/valueDelivery/LastMonthData.vue

@@ -143,6 +143,7 @@ export default {
     height: 440px;
     width: 1000px;
     margin: 0 auto;
+    box-sizing: border-box;
        .itemWrap{
            display: flex;
            flex-direction: row;
@@ -150,7 +151,7 @@ export default {
         //  justify-content:space-around;
          .item{
              padding-bottom: 20px;
-             margin-right:75px;
+             margin-right:70px;
          }
     }
 

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

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

+ 40 - 0
src/views/valueDelivery/lastTotalEnergy.vue

@@ -0,0 +1,40 @@
+<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';
+import air_open from '@/assets/horImg/air_open.png';
+export default {
+    name: "lastTotalEnergy",
+    props: {
+        value: {
+            type: Number,
+            default: () => { return 75 } // 默认开
+        },
+
+    },
+    data() {
+        return {
+
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+@import "/src/assets/css/common.less";
+.lastTotalEnergy {
+    height: 535px;
+    .bottomCont {
+        height: 383px;
+        width: 660px;
+    }
+}
+</style>
+
+

+ 6 - 6
src/views/verticalScreen.vue

@@ -2,11 +2,9 @@
     <div>
         <div class="hor-nowData">
             <NowData screenType="ver" />
-            <AirSwitchVer status="false" />
-                <LastMonth screenType="ver" />
-            <div>
-                <AirSwitch />
-            </div>
+            <AirSwitchVer  />
+            <LastMonth screenType="ver" />
+            <lastTotalEnergy></lastTotalEnergy>
             <div>
                 <FloorSpace />
             </div>
@@ -20,8 +18,10 @@ import LastMonth 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 },
+    components: { NowData, AirSwitch, FloorSpace, LastMonth, AirSwitchVer ,lastTotalEnergy},
     data() {
         return {