Merge branch 'test' of http://gitlab.renniting.cn/web_developers/lzsandtable into test

Andy
2 parents 7636c7d7 50b9599a
Showing 6 changed files with 74 additions and 9 deletions
index.html
src/components/VHeader.vue
src/images/content/frame-wrap.png
src/images/header/headertime.png
src/utils/formate.js
src/view/VHome.vue
@@ -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">
+            <p>{{headerDay}}</p>
+            <p>{{headerTime}}</p>
+        </div>
     </header>
 </template>
 <script>
+import { formateTime, formateday } from "../utils/formate";
+
 export default {
   name: 'VHeader',
-
+  data() {
+    return {
+      headerDay: formateday(),
+      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 formateday() {
+  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
+  str = year +"-"+ month +"-"+ day
+  return str
+}
+
+function formateTime() {
+  let date = new Date()
+  let str = ''
+  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 = hours+":"+minutes+":"+seconds
+  return str
+}
+
+export  { formateday, formateTime }
@@ -2,11 +2,19 @@
   <div class="main-content">
     <v-header></v-header>
     <ul class="main-wrap">
-      <li class="main-left">left</li>
+      <li class="main-left">
+        <div class="frame-wrap"></div>
+        <div class="frame-wrap frame-wrap-center"></div>
+        <div class="frame-wrap"></div>
+      </li>
       <li class="main-center">
         <v-map></v-map>
       </li>
-      <li class="main-right">right</li>
+      <li class="main-right">
+        <div class="frame-wrap"></div>
+        <div class="frame-wrap frame-wrap-center"></div>
+        <div class="frame-wrap"></div>
+      </li>
     </ul>
   </div>
 </template>
@@ -37,7 +45,6 @@ export default {
     }
   }
   .main-left,.main-right{
-    background-color: #ccc;
     width: 25%;
   }
   .main-center{
@@ -45,5 +52,16 @@ export default {
     margin: 0 10px;
     border:1px solid #1679de;
   }
+  .frame-wrap-center{
+    margin: 10px 0;
+  }
+  .frame-wrap{
+    height: calc((100% - 20px)/3);
+    border-image-source: url("../images/content/frame-wrap.png");
+    border-image-slice: 10 16 15 10 fill;
+    border-width: 10px 16px 15px 10px;
+    border-style: solid;
+    background-clip: border-box;
+  }
 </style>