Browse Source

竖屏修改

zhaojing 3 years ago
parent
commit
0453eb7f62

+ 128 - 0
src/views/valueDelivery/AirSwitchVer.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="airSwitch">
+        <div class="air-title">
+            <span>空调实时开关</span>
+            <span class="status">{{status ? "空调已开启" : "空调已关闭"}}</span>
+        </div>
+        <div class="air-cont">
+            <div class="air-left">
+                <div class="bar-box">
+                    <div class="bar"></div>
+                </div>
+                <div class="air-rate">
+                    <span>空调开启率</span>
+                    <span class="air-rate-value">{{value}}%</span>
+                </div>
+            </div>
+            <div class="air-bg">
+                <img :src="[status ? img.openImg : img.closeImg]" />
+            </div>
+        </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: "AirSwitch",
+    props: {
+        status: {
+            type: Boolean,
+            default: () => { return false } // 默认开
+        },
+        value: {
+            type: Number,
+            default: () => { return 75 } // 默认开
+        },
+
+    },
+    data() {
+        return {
+            img: {
+                openImg: air_open,
+                closeImg: air_close,
+            }
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+.airSwitch {
+    padding: 24px 32px;
+    height: 250px;
+    width: 1000px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    border-radius: 20px;
+    border: 2px solid #ffffff;
+    background: #ffffff;
+    .air-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #3b3558;
+        .status {
+            margin-top: 8px;
+            margin-left: 12px;
+            display: inline-block;
+            height: 24px;
+            line-height: 24px;
+            width: 86px;
+            border-radius: 4px;
+            background: rgba(126, 216, 116, 1);
+            box-sizing: border-box;
+            color: #ffffff;
+            font-weight: 600;
+            text-align: center;
+            font-size: 14px;
+            &.close {
+                background: rgba(155, 152, 173, 1);
+            }
+        }
+    }
+    .air-cont {
+        display: flex;
+        flex-direction: row;
+        .air-left {
+            flex: 3;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            .bar-box {
+                width: 88%;
+                height: 10px;
+                background: rgba(62, 140, 255, 0.2);
+                border-radius: 6px;
+                .bar {
+                    width: 80%;
+                    height: 10px;
+                    background: linear-gradient(
+                        90deg,
+                        #76deff 0%,
+                        #3e91f8 100%
+                    );
+                    border-radius: 6px;
+                }
+            }
+            .air-rate {
+                font-size: 20px;
+                display: flex;
+                height: 40px;
+                align-items: center;
+                margin-top:14px;
+                .air-rate-value {
+                    font-size: 32px;
+                    padding-left:8px;
+                }
+            }
+        }
+        .air-bg {
+            flex: 1;
+            img {
+                width: 240px;
+            }
+        }
+    }
+}
+</style>
+
+

+ 12 - 8
src/views/valueDelivery/NowData.vue

@@ -10,7 +10,7 @@
                 <span class="title-right">正常范围</span>
             </div>
         </div>
-        <span class="hor-nowData-title-slogan">主动式空调,会呼吸的写字楼</span>
+        <div class="hor-nowData-title-slogan">主动式空调,会呼吸的写字楼</div>
         <div
             class="contain"
         >
@@ -93,21 +93,20 @@ export default {
         text-align: left;
     }
     .hor-nowData-title-slogan {
-        padding: 6px 0 0px 32px;
+        padding: 4px 0 0px 32px;
     }
     .contain {
         display: flex;
          // width: 1306px;
          // margin-left: 101px;
-        height: 280px;
-        
-        padding-top: 46px;
+        // height: 280px;
+        padding-top: 47px;
        
     }
     .item {
         width: calc(100% / 5);
         .item_content {
-            height: 100%;
+            // height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -125,11 +124,11 @@ export default {
                 font-family: Persagy;
                 font-size: 42px;
                 font-weight: 700;
-                margin-top: 20px;
+                margin-top: 10px;
                 color: rgba(59, 53, 88, 1);
             }
             .content_name {
-                margin-top: 12px;
+                margin-top: 8px;
                 font-family: PingFang SC;
                 font-size: 24px;
                 font-weight: 400;
@@ -140,6 +139,7 @@ export default {
     }
     .content_level {
         margin-top: 8px;
+        margin-right: 8px;
         box-sizing: border-box;
         width: 16px;
         height: 16px;
@@ -173,9 +173,13 @@ export default {
                     font-size: 32px;
                 }
                 .content_name{
+                     margin-top:12px;
                     font-size: 20px; 
 
                 }
+                .content_level{
+                    margin-top:12px;
+                }
             }
         }
       

+ 6 - 3
src/views/verticalScreen.vue

@@ -2,11 +2,13 @@
     <div>
         <div class="hor-nowData">
             <NowData screenType="ver" />
+            <AirSwitchVer status="false" />
             <div>
                 <LastMonth screenType="hor" />
             </div>
+
             <div>
-                <AirSwitch screenType="hor" />
+                <AirSwitch />
             </div>
             <div>
                 <FloorSpace />
@@ -19,9 +21,10 @@
 import NowData from './valueDelivery/NowData.vue'
 import LastMonth 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 },
+    components: { NowData, AirSwitch, FloorSpace, LastMonth, AirSwitchVer },
     data() {
         return {
 
@@ -31,7 +34,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .hor-nowData {
-    width:100%;
+    width: 100%;
     background: #e5e5e5;
 }
 </style>