anxiaoxia hace 3 años
padre
commit
0995c6e352

+ 30 - 5
src/views/horThree.vue

@@ -20,10 +20,12 @@
                             <div>上月总能耗</div>
                             <div class="left-title-text">低能耗亲自然</div>
                         </div>
-                        <div>
-                            <span>比基准能耗</span>
-                            <span>节能50%</span>
-                            <span>总能耗28050KWh</span>
+                        <div class="left-content">
+                            <div class="left-content-first">比基准能耗</div>
+                            <div class="left-content-next">
+                                节能<span class="next-num">50%</span>
+                            </div>
+                            <div class="left-content-first blue">总能耗28050KWh</div>
                         </div>
                     </div>
                     <div class="right box">
@@ -134,6 +136,29 @@ export default Vue.extend({
             font-weight: 400;
             line-height: 20px;
         }
+        .left-content {
+            text-align: center;
+            .left-content-first {
+                font-size: 20px;
+                font-weight: 500;
+                line-height: 28px;
+                &.blue {
+                    color: #2ec5f5;
+                    padding-top: 12px;
+                }
+            }
+            .left-content-next {
+                padding-top: 12px;
+                font-size: 46px;
+                font-weight: 600;
+                line-height: 64px;
+                .next-num {
+                    font-size: 48px;
+                    font-weight: 700;
+                    line-height: 58px;
+                }
+            }
+        }
     }
     .right {
         position: relative;
@@ -181,7 +206,7 @@ export default Vue.extend({
             top: 400px;
         }
     }
-    .chart-box{
+    .chart-box {
         margin-top: 24px;
     }
 }

+ 37 - 5
src/views/horTwo.vue

@@ -1,16 +1,48 @@
 <template>
     <div class="horTwo">
-        2
+        <div class="bg">
+            <img
+                :src="bgImg"
+                alt=""
+            >
+        </div>
+        <div class="container">
+            <div class="hor-head">
+                <HorHead />
+            </div>
+            <div>
+                <HorFloorSpace />
+            </div>
+        </div>
+
     </div>
 </template>
 <script lang="ts">
-import Vue from 'vue'
+import Vue from "vue";
+import HorHead from "./valueDelivery/HorHead.vue";
+import HorFloorSpace from "./valueDelivery/HorFloorSpace.vue";
+declare function require(img: string): string;
+const hor_big_bg = require("@/assets/horImg/hor_big_bg.png");
 export default Vue.extend({
+    components: { HorHead, HorFloorSpace },
     data() {
         return {
-            
-        }
+            bgImg: hor_big_bg
+        };
     },
-})
+});
 </script>
+<style lang="less" scoped>
+.horTwo {
+    .hor-head {
+        display: flex;
+        justify-content: center;
+    }
+    .bg {
+        position: absolute;
+        z-index: -1;
+    }
+}
+</style>
+
 

+ 1 - 4
src/views/valueDelivery.vue

@@ -34,9 +34,7 @@
                 </div>
             </div>
 
-            <!-- <div>
-                <FloorSpace />
-            </div> -->
+         
         </div>
 
     </div>
@@ -47,7 +45,6 @@ import HorHead from './valueDelivery/HorHead.vue'
 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: { HorHead, NowData, AirSwitch, FloorSpace, LastMonth },
     data() {

+ 16 - 15
src/views/valueDelivery/HorFloorSpace.vue

@@ -18,32 +18,33 @@
         </div>
     </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
     name: 'FloorSpace',
     data() {
         return {
             floorData: [
                 {
-                    floorName: '8F',
+                    floorName: "8F",
                     data: [
-                        { id: 1, name: '空间1' },
-                        { id: 2, name: '空间2' },
-                        { id: 3, name: '空间3' },
-                    ]
+                        { id: 1, name: "空间1" },
+                        { id: 2, name: "空间2" },
+                        { id: 3, name: "空间3" },
+                    ],
                 },
                 {
-                    floorName: '7F',
+                    floorName: "7F",
                     data: [
-                        { id: 1, name: '空间1' },
-                        { id: 2, name: '空间2' },
-                        { id: 3, name: '空间3' },
-                    ]
+                        { id: 1, name: "空间1" },
+                        { id: 2, name: "空间2" },
+                        { id: 3, name: "空间3" },
+                    ],
                 },
-            ]
-        }
+            ],
+        };
     },
-}
+});
 </script>
 <style lang="less" scoped>
 .floorSpace {