headertime

liuqimichale
1 parent 414b2840
Showing 4 changed files with 42 additions and 6 deletions
index.html
src/components/VHeader.vue
src/images/header/headertime.png
src/utils/formate.js
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>兰州沙盘</title>
     <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
-    <link rel="stylesheet" href="src/style/reset.css" >
+    <link href="src/style/reset.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb"></script>
   </head>
   <body>
 <template>
     <header class="header-wrap">
         <span>车场实时概况</span>
+        <div class="header-time">{{headerTime}}</div>
     </header>
 </template>
 <script>
+import { formateTime } from "../utils/formate";
+
 export default {
   name: 'VHeader',
-
+  data() {
+    return {
+      headerTime: formateTime()
+    }
+  }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
     header {
         height: 65px;
-        line-height: 65px;
         text-align: center;
-        font-size: 32px;
+        position: relative;
         background-image: url("../images/header/headerbg.png");
         background-repeat: no-repeat;
         background-position: center center;
-
+        >span{
+            font-size: 32px;
+            line-height: 75px;
+        }
+        .header-time{
+            width: 128px;
+            height: 35px;
+            line-height: 18px;
+            position: absolute;
+            right: 10px;
+            top:16px;
+            padding-left: 45px;
+            text-align: left;
+            background:url("../images/header/headertime.png") no-repeat 0 center;
+            background-size: 35px 35px;
+        }
     }
 </style>
+function formateTime() {
+  let date = new Date()
+  let str = ''
+  let year = date.getFullYear()
+  let month = date.getMonth()+1<10? "0"+ (date.getMonth()+1) : date.getMonth()+1
+  let day = date.getDate()<10 ? "0"+date.getDate() : date.getDate
+  let hours = date.getHours()<10? "0"+date.getHours() : date.getHours()
+  let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
+  let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
+
+  str = year +"-"+ month +"-"+day  +hours+":"+minutes+":"+seconds
+  return str
+}
+
+export  { formateTime }