common/layout/home/top.vue

<template>
  <div id="top">
    <el-row>
      <el-col :span="24" class="top">
        <div class="w_1200">
          <el-col :span="22" class="date">
            {{ gettime }}
          </el-col>
          <el-col :span="2" class="btn" v-if="user && user.id"> {{ user.name }} | <el-link :underline="false" @click="toLogOut">注销</el-link> </el-col>
          <el-col :span="2" class="btn">
            <el-link :underline="false" @click="loginBtn()" target="_blank">注册</el-link>|<el-link :underline="false" @click="loginBtn()" target="_blank"
              >登录</el-link
            >
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'top',
  props: {},
  components: {},
  data: () => ({
    gettime: '',
  }),
  created() {
    this.currentTime();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    currentTime() {
      setInterval(this.getTime, 500);
    },
    getTime: function() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let day = new Date().getDay();
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + weekday[day];
    },
    loginBtn() {
      this.$router.push({ path: '/login' });
    },
    toLogOut() {},
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.date {
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 16px;
}
.btn {
  height: 40px;
  line-height: 40px;
  color: #fff;
}
.btn .el-link {
  color: #fff;
  margin: 0 5px;
}
</style>