From 530a78a71da4567e759e268047e4b46cb9082cca Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Fri, 10 Mar 2023 09:35:28 +0800
Subject: [PATCH] 统计页面添加布局

---
 src/views/layout/index.vue |   59 +++++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index b722328..c2c474a 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -55,6 +55,13 @@
                         </div>
                     </div>
                 </div>
+                <div class="weather">
+                    <span>{{ weather }}</span><span>{{ temperature}}&#8451</span>
+                </div>
+                <div class="userInfo">
+                    <span>{{ userName }}</span>
+                    <div class="exit"><img src="/img/exit.png" alt=""></div>
+                </div>
             </div>
     </div>
     <div class="main-container">
@@ -75,11 +82,12 @@
 
 <script>
 import mapBox from '@/components/map/index.vue'
+import { getWeather } from '@/api/layout/index.js'
 
 export default {
   name: 'layout',
   components: {
-    mapBox
+    mapBox,
   },
   data(){
     return {
@@ -113,7 +121,10 @@
         userOn: false,
         isShowUserDetail: false,
         currentUrl: '/layout/statistics',
-        time: "----年--月--日 --:--"
+        time: "----年--月--日 --:--",
+        weather:'',
+        temperature:'',
+        userName:'管理员',
     }
   },
 
@@ -148,6 +159,11 @@
       setInterval(this.getTime, 500);
     },
 
+    // 天气组件
+    currentWeather(){
+        setInterval(this.getWeather, 60000);
+    },
+
     // 时间组件
     getTime() {
       let yy = new Date().getFullYear();
@@ -171,6 +187,11 @@
 
   mounted() {
     this.currentTime();
+    
+    getWeather().then(res=>{
+        this.weather = res.data.data.weather.weather
+        this.temperature = res.data.data.weather.temp
+    })
   },
 
   watch: {
@@ -245,6 +266,8 @@
 
         .menu-list.left {
             margin-left: 10px;
+            // width: calc((100% - 450px)/2);
+            justify-content: space-between;
 
             .nav-list {
                 background: $menu-tab-bg-color;
@@ -253,9 +276,27 @@
 
         .menu-list.right {
             margin-right: 72px;
+            // width: calc((100% - 450px)/2);
+            justify-content: space-between;
 
             .nav-list {
                 background: $menu-tab-bg-color;
+            }
+
+            .weather {
+                width: 100px;
+                font-size: 16px;
+                span:first-child{
+                    margin-right: 10px;
+                }
+            }
+
+            .userInfo {
+                font-size: 16px;
+                display: flex;
+                .exit {
+                    margin-left: 10px;
+                }
             }
         }
 
@@ -290,14 +331,12 @@
                     width: 100%;
                     cursor: default;
                     z-index: 999;
-                    // transform: skew(58deg);
 
                     div {
                         height: 36px;
                         text-align: center;
                         line-height: 36px;
                         font-size: 16px;
-                        // background: $bg-blue;
                         background: $menu-tab-bg-color;
                         cursor: pointer;
                         box-sizing: content-box;
@@ -414,18 +453,6 @@
         position: relative;
         width: 100%;
         height: 100%;
-
-        .main-content {
-            position: absolute;
-            top: 60px;
-            height: calc(100% - 60px);
-            width: 400px;
-            z-index: 99;
-        }
-
-        .main-content.take-back {
-            width: 0px;
-        }
     }
 }
 </style>

--
Gitblit v1.9.3