更新header

package-lock.json

@@ -6724,11 +6724,19 @@
       }
     },
     "echarts": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
-      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
+      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
       "requires": {
-        "zrender": "4.3.2"
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
       }
     },
     "ee-first": {
@@ -15286,9 +15294,19 @@
       }
     },
     "zrender": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
-      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

runner @ 3e0dc018

-Subproject commit fe3cb93fbe4caf5aa09741b53b8e363fcde43fb2
+Subproject commit 3e0dc01835973a7f1d3ecdbb3533cf1826f41fb6

src/components/Header/index.vue

 <template>
-    <header id="header">{{ title }}</header>
+    <header id="header">
+        <div class="logo">
+            <img src="./images/logo.png" alt="logo">
+        </div>
+        <h2 class="title"><span>{{ currPageTitle }}</span></h2>
+        <div class="date">
+            <span class="curr-date">{{ fullDate || '' }}</span>
+            <span class="curr-times">{{ fullTime || '' }}</span>
+        </div>
+    </header>
 </template>
 
 <script>
+import utils from 'utils'
+let timerId = null
+
 export default {
     data () {
-        return {}
+        return {
+            fullDate: '',
+            fullTime: ''
+        }
     },
 
-    props: ['title'],
+    computed: {
+        // 当前页面名称
+        currPageTitle () {
+            const { meta = {} } = this.$router.currentRoute
+
+            return meta.title || ''
+        }
+    },
 
     created () {
         window.vm = this
+
+        this.getSysTime()
+    },
+
+    beforeDestroy () {
+        clearInterval(timerId)
+        timerId = null
+    },
+
+    methods: {
+        getSysTime () {
+            const that = this
+            try {
+                timerId = setTimeout(function getTimer () {
+                    const { fullDate = '', fullTime = '' } = utils.getCurrTime('/') || {}
+                    that.fullDate = fullDate
+                    that.fullTime = fullTime
+
+                    timerId = setTimeout(getTimer, 1000)
+                }, 1000)
+            } catch (error) {
+                console.log('getSysTime-error > ', error)
+            }
+        }
     }
 }
 </script>
 
 <style lang="less" scoped>
+#header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: @pageHeaderHeight;
+    padding-right: 35px;
+    padding-left: 25px;
+}
+
+.logo {
+    padding-top: 12px;
+
+    > img {
+        vertical-align: -5px;
+    }
 
+    .logo-desc {
+        margin-left: 24px;
+        font-size: 18px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #fff;
+    }
+}
+
+.title {
+    flex: 1;
+    height: 100%;
+    line-height: @pageHeaderHeight + 4;
+    white-space: nowrap;
+    text-align: center;
+
+    > span {
+        font-size: 34px;
+        font-family: Adobe Heiti Std;
+        font-weight: bold;
+        color: #fff;
+
+        background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 100%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
+.date {
+    width: 205px;
+    padding-top: 30px;
+    color: #fff;
+
+    > span {
+        font-size: 18px;
+        font-family: Source Han Sans CN;
+    }
+
+    .curr-times {
+        margin-left: 8px;
+        font-size: 24px;
+        font-weight: bold;
+    }
+}
 </style>>

src/pages/index.vue

 <template>
-    <div class="index-page">
-        <layout :layoutConf="layoutSize">
-            <Header title="头部标题" slot="header" />
-            <!-- left -->
-            <div class="index-left" slot="left"></div>
-            <!-- center -->
-            <div class="index-center" slot="center"></div>
-            <!-- right -->
-            <div class="index-right" slot="right"></div>
-        </layout>
-    </div>
+    <layout :layoutConf="layoutSize" class="index-page">
+        <!-- left -->
+        <div class="index-left" slot="left"></div>
+        <!-- center -->
+        <div class="index-center" slot="center"></div>
+        <!-- right -->
+        <div class="index-right" slot="right"></div>
+    </layout>
 </template>
 
 <script>

static/styles/global.less

+
+// 页面头部高度
+@pageHeaderHeight: 57px;