From 9808a4b6cb70f3c966a7effbc217f081a43dbd51 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Wed, 28 Nov 2018 19:59:50 +0800
Subject: [PATCH] 公用头部

---
 config/index.js                 |  2 +-
 src/App.vue                     |  2 --
 src/assets/img/time-wrap.png    | Bin 0 -> 1947 bytes
 src/components/headerCommon.vue | 39 +++++++++++++++++++++++++++++++++++----
 src/styles/reset.css            |  1 +
 src/utils/formatetime.js        | 25 +++++++++++++++++++++++++
 src/views/mainContainer.vue     |  2 +-
 7 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/img/time-wrap.png
 create mode 100644 src/utils/formatetime.js

diff --git a/config/index.js b/config/index.js
index b1a3657..6d09b35 100644
--- a/config/index.js
+++ b/config/index.js
@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '192.168.1.7', // can be overwritten by process.env.HOST
+    host: '192.168.101.26', // can be overwritten by process.env.HOST
     port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
diff --git a/src/App.vue b/src/App.vue
index 1cfdfe8..ecc7428 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,8 +21,6 @@ export default {
 #app {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/assets/img/time-wrap.png b/src/assets/img/time-wrap.png
new file mode 100644
index 0000000..1deb55e
Binary files /dev/null and b/src/assets/img/time-wrap.png differ
diff --git a/src/components/headerCommon.vue b/src/components/headerCommon.vue
index 76d6b2e..a76a1f5 100644
--- a/src/components/headerCommon.vue
+++ b/src/components/headerCommon.vue
@@ -1,15 +1,23 @@
 <template>
   <div class="headercommon">
-
+    <h3>丹阳停车运营监控中心</h3>
+    <div class="time-wrap">
+      <p>{{timedate}}</p>
+      <p>{{time}}</p>
+    </div>
   </div>
 </template>
 
 <script>
+import { getNowFormatDate, getNowFormatTime } from '../utils/formatetime'
 export default {
   name: 'HelloWorld',
+  created() {
+  },
   data() {
     return {
-      msg: 'Welcome to Your Vue.js App'
+      timedate: getNowFormatDate(),
+      time: getNowFormatTime()
     }
   }
 }
@@ -20,7 +28,30 @@ export default {
   .headercommon {
     width: 100%;
     height: 77px;
-    /*background: url("../assets/img/headerbg.svg");*/
-    background: #f00;
+    position: relative;
+
+  }
+  .headercommon h3{
+    width: 1200px;
+    margin: 0 auto;
+    line-height: 77px;
+    background: url("../assets/img/headerbg.svg") no-repeat center center;
+    /*background: #f00;*/
+    font-size: 27px;
+    text-align: center;
+    font-weight:800;
+    color:rgba(255,255,255,1);
+  }
+  .time-wrap{
+    position: absolute;
+    right: 12px;
+    top:20px;
+    padding-left: 44px;
+    background: url("../assets/img/time-wrap.png") no-repeat 0 center;
+    text-align: left;
+    font-size:16px;
+    font-weight:400;
+    color:rgba(255,255,255,1);
+    line-height:18px;
   }
 </style>
diff --git a/src/styles/reset.css b/src/styles/reset.css
index c758456..24cd767 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -45,6 +45,7 @@ html, body {
   background: url("../assets/img/bg.jpg") no-repeat;
   background-size: 100% 100%;
   overflow: hidden;
+  /*box-sizing: border-box;*/
 }
 
 ol, ul {
diff --git a/src/utils/formatetime.js b/src/utils/formatetime.js
new file mode 100644
index 0000000..1cfa06a
--- /dev/null
+++ b/src/utils/formatetime.js
@@ -0,0 +1,25 @@
+export  function getNowFormatDate() {
+  var date = new Date();
+  var seperator1 = "-";
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var strDate = date.getDate();
+  if (month >= 1 && month <= 9) {
+    month = "0" + month;
+  }
+  if (strDate >= 0 && strDate <= 9) {
+    strDate = "0" + strDate;
+  }
+  var currentdate = year + seperator1 + month + seperator1 + strDate;
+  return currentdate;
+}
+
+export  function getNowFormatTime() {
+  var date = new Date();
+  var seperator1 = ":";
+  var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+  var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+  var second =  date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+  var curentTime = hour + seperator1 + minute + seperator1 + second
+  return curentTime
+}
diff --git a/src/views/mainContainer.vue b/src/views/mainContainer.vue
index 37edd11..f4e52d6 100644
--- a/src/views/mainContainer.vue
+++ b/src/views/mainContainer.vue
@@ -40,7 +40,7 @@ export default {
 <style scoped>
   .maincontainer {
     padding: 12px 12px;
-    flex: 1;
+    height:calc(100% - 101px);
   }
 
   .containerwrap {
--
libgit2 0.21.4