anxiaoxia 3 роки тому
батько
коміт
dc3febce09

BIN
src/assets/horImg/changeVer.png


BIN
src/assets/horImg/hor_big_bg.png


BIN
src/assets/horImg/hor_title.png


BIN
src/assets/horImg/persagyLogo.png


BIN
src/assets/horImg/shrink.png


+ 32 - 6
src/views/valueDelivery.vue

@@ -1,14 +1,24 @@
 <template>
-    <div>
+    <div class="valueDelivery">
+        <div class="bg">
+            <img
+                :src="bgImg"
+                alt=""
+            >
+        </div>
+
         <div class="hor-nowData">
+            <div class="hor-head">
+                <HorHead />
+            </div>
             <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 />
@@ -18,18 +28,34 @@
     </div>
 </template>
 <script>
+import hor_big_bg from '@/assets/horImg/hor_big_bg.png';
+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: { NowData,AirSwitch,FloorSpace,LastMonth},
+    components: { HorHead, NowData, AirSwitch, FloorSpace, LastMonth },
     data() {
         return {
-
+            bgImg: hor_big_bg
         }
     }
 }
 </script>
+<style lang="less" scoped>
+.valueDelivery {
+    .bg {
+        position: absolute;
+        z-index: -1;
+    }
+    .hor-head {
+        padding-top: 32px;
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>
+
 
 

+ 98 - 0
src/views/valueDelivery/HorHead.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="horHead horSty">
+        <div class="horHead-left">
+            <img
+                :src="logo"
+                alt=""
+            >
+        </div>
+        <div class="horHead-content">
+            <img :src="title" />
+        </div>
+        <div class="horHead-right">
+            <div class="right-item">
+                <span class="item-time"> 2021.07.26 11:00</span>
+
+            </div>
+            <div class="right-item">
+                晴
+            </div>
+            <div class="right-item">
+                <img
+                    class="firstImg"
+                    :src="changeVer"
+                    alt=""
+                >
+                <img
+                    :src="shrink"
+                    alt=""
+                >
+            </div>
+            <div class="right-item">
+                退出
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+
+declare function require(img: string): string;
+
+const persagyLogo = require("@/assets/horImg/persagyLogo.png");
+const title = require("@/assets/horImg/hor_title.png");
+const changeVer = require("@/assets/horImg/changeVer.png");
+const shrink = require("@/assets/horImg/shrink.png");
+export default Vue.extend({
+    data() {
+        return {
+            logo: persagyLogo,
+            title: title,
+            changeVer: changeVer,
+            shrink: shrink,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.horHead {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &.horSty {
+        height: 74px;
+        width: 1840px;
+    }
+    .horHead-right {
+        display: flex;
+        justify-content: space-between;
+        height: 46px;
+        width: 396px;
+        .right-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            padding: 12px 16px;
+            font-size: 16px;
+            color: #575271;
+            font-weight: 400;
+            line-height: 22px;
+
+            background: #ffffff99;
+            border: 2px solid #ffffffcc;
+            box-sizing: border-box;
+            border-radius: 8px;
+            .firstImg {
+                margin-right: 6px;
+            }
+            .item-time {
+                font-family: Persagy;
+                font-weight: 400;
+            }
+        }
+    }
+}
+</style>
+