init

src/components/NavHeader.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="top_header">
+    <header>
+      <button class="fl iconfont back_icon" @click="goBack"></button>
+      <div class="fl header-title">{{navTitle}}</div>
+      <div class="fr date-box date-box_time">{{date}}&nbsp;{{week}}&nbsp;{{time}}</div>
+    </header>
+    <ul v-if="tabShow" class="tabs">
+      <li v-for="i in nav" :key="i.index">
+        <router-link :to="i.url" :class="{'router-link-active': i.url === $route.path}">{{i.title}}</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Assignment',
+  props: {
+    tabShow: {
+      type: Boolean,
+      default: true
+    },
+    inner: {
+      type: Boolean,
+      default: false
+    },
+    navTitle: String,
+    nav: Array
+  },
+  data () {
+    return {
+      timer: null,
+      time: '',
+      date: '',
+      week: ''
+    }
+  },
+  mounted () {
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  methods: {
+    goBack () {
+      if (this.inner) {
+        this.$emit('goIn')
+      } else {
+        this.$router.push('/home')
+      }
+    },
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.top_header
+  div
+    color #ffffff
+  button
+    color #ffffff
+</style>