zhaojing 3 سال پیش
والد
کامیت
e7553633a7
4فایلهای تغییر یافته به همراه79 افزوده شده و 26 حذف شده
  1. 4 3
      src/router/index.ts
  2. 3 3
      src/views/valueDelivery.vue
  3. 33 20
      src/views/valueDelivery/NowData.vue
  4. 39 0
      src/views/verticalScreen.vue

+ 4 - 3
src/router/index.ts

@@ -11,15 +11,16 @@ const routes: Array<RouteConfig> = [
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
-    component: () => import( '../views/About.vue')
+    path: '/verticalScreen',
+    name: 'verticalScreen',
+    component: () => import( '../views/verticalScreen.vue')
   },
   {
     path: '/hor',
     name: 'hor',
     component: () => import( '../views/valueDelivery.vue')
   }
+  
 ]
 
 const router = new VueRouter({

+ 3 - 3
src/views/valueDelivery.vue

@@ -2,13 +2,13 @@
     <div>
         <div class="hor-nowData">
             <div>
-                 <!-- <NowData screenType="hor" />  -->
+                  <NowData screenType="hor" />  
             </div>
             <div>
-                <!-- <LastMonth screenType="hor"/> -->
+              <LastMonth screenType="hor"/>
             </div>
             <div>
-                <!-- <AirSwitch screenType="hor"/> -->
+                 <AirSwitch screenType="hor"/> 
             </div>
             <div>
                 <FloorSpace />

+ 33 - 20
src/views/valueDelivery/NowData.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="NowData"
-        :class="[screenType==='hor' ? 'hor-nowData-contain' : '' ]"
+        :class="[screenType==='hor' ? 'hor-nowData-contain' : 'ver-nowData-contain' ]"
     >
         <div class="nowData-title">
             <span class="hor-nowData-title-text">实时数据</span>
@@ -10,11 +10,9 @@
                 <span class="title-right">正常范围</span>
             </div>
         </div>
-        <span :class="[screenType==='hor' ? 'hor-nowData-title-slogan' : '' ]">主动式空调,会呼吸的写字楼</span>
-
+        <span class="hor-nowData-title-slogan">主动式空调,会呼吸的写字楼</span>
         <div
             class="contain"
-            :class="[screenType==='hor' ? 'hor-contain' : 'vert-contain' ]"
         >
             <div
                 class="item"
@@ -74,11 +72,11 @@ export default {
 <style lang="less" scoped>
 .NowData {
     &.hor-nowData-contain {
-        height: 498px;
         width: 1508px;
-        border-radius: 20px;
-        background: #ffffff;
+        height: 498px;
     }
+    border-radius: 20px;
+    background: #ffffff;
     color: rgba(87, 82, 113, 1);
     .nowData-title {
         display: flex;
@@ -95,18 +93,16 @@ export default {
         text-align: left;
     }
     .hor-nowData-title-slogan {
-        padding: 4px 0 0px 32px;
+        padding: 6px 0 0px 32px;
     }
     .contain {
         display: flex;
-        &.hor-contain {
-            width: 1306px;
-            height: 280px;
-            margin-left: 101px;
-            padding-top: 46px;
-        }
-        &.vert-contain {
-        }
+         // width: 1306px;
+         // margin-left: 101px;
+        height: 280px;
+        
+        padding-top: 46px;
+       
     }
     .item {
         width: calc(100% / 5);
@@ -125,25 +121,25 @@ export default {
                     height: 130px;
                 }
             }
-
             .content_value {
                 font-family: Persagy;
                 font-size: 42px;
                 font-weight: 700;
-                line-height: 51px;
+                margin-top: 20px;
                 color: rgba(59, 53, 88, 1);
             }
             .content_name {
-                padding-top: 8px;
+                margin-top: 12px;
                 font-family: PingFang SC;
                 font-size: 24px;
                 font-weight: 400;
                 line-height: 34px;
             }
         }
+
     }
     .content_level {
-        padding-top: 8px;
+        margin-top: 8px;
         box-sizing: border-box;
         width: 16px;
         height: 16px;
@@ -167,6 +163,23 @@ export default {
         display: flex;
         align-items: center;
     }
+    &.ver-nowData-contain{
+         height: 460px;
+         width: 1000px;
+        margin:0 auto;
+        .item{
+            .item_content{
+                .content_value{
+                    font-size: 32px;
+                }
+                .content_name{
+                    font-size: 20px; 
+
+                }
+            }
+        }
+      
+    }
 }
 </style>
 

+ 39 - 0
src/views/verticalScreen.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div class="hor-nowData">
+            <NowData screenType="ver" />
+            <div>
+                <LastMonth screenType="hor" />
+            </div>
+            <div>
+                <AirSwitch screenType="hor" />
+            </div>
+            <div>
+                <FloorSpace />
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+import NowData from './valueDelivery/NowData.vue'
+import LastMonth from './valueDelivery/LastMonthData.vue'
+import AirSwitch from './valueDelivery/AirSwitch.vue'
+import FloorSpace from './valueDelivery/FloorSpace.vue'
+export default {
+    components: { NowData, AirSwitch, FloorSpace, LastMonth },
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.hor-nowData {
+    width:100%;
+    background: #e5e5e5;
+}
+</style>
+
+