首页

src/views/choicePart/components/Navbar.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="navbar">
+    <div style="color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 13px">
+      <img src="../../../assets/images/cnbm.png" style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px" alt="">
+      MES
+    </div>
+    <div class="right-msg">
+      <div class="time-msg">
+        <div class="line1">{{timeZone}}&nbsp;&nbsp;&nbsp;&nbsp;{{topTime}}</div>
+        <div class="line2">{{topDate}}</div>
+      </div>
+      <div class="base-msg">
+        <div class="avatar">
+          <img :src="require(`../../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
+        </div>
+        <div class="use-msg">
+          <div class="line1">{{userName}}</div>
+          <div class="line2">角色名11111111111111</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  name: 'Navbar',
+  data() {
+    return {
+      topDate: '',
+      topTime: '',
+      timeZone: '',
+      timer: '',
+      userRole:this.$store.getters.name,
+      userName: this.$store.getters.name
+    }
+  },
+  mounted() {
+    this.getTime()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    getTime() {
+      let _this = this
+      this.timer = setInterval(function () {
+        _this.topDate = moment().format('YYYY/MM/DD')
+        let temp = moment().format('A-hh:mm').split('-')
+        _this.timeZone = temp[0]
+        _this.topTime = temp[1]
+      }, 1000)
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.navbar {
+  height: 64px;
+  background: rgba(8, 17, 50, 0.25);
+  .right-msg {
+    float: right;
+    height: 100%;
+    font-size: 14px;
+    color: #fff;
+    padding-top: 15px;
+    padding-right: 38px;
+    .time-msg {
+      display: inline-block;
+      margin-right: 30px;
+    }
+    .base-msg {
+      display: inline-block;
+      .avatar {
+        display: inline-block;
+        margin-right: 10px;
+      }
+      .use-msg {
+        display: inline-block;
+      }
+    }
+    .line2 {
+      opacity: 0.65;
+    }
+  }
+}
+</style>