finance-cms/src/layout/layout-part/heads.vue

<template>
  <div id="heads">
    <el-row>
      <el-col :span="24">
        <el-col :span="1" style="width: 35px;padding-top: 20px;">
          <el-image style="width: 35px; height: 35px;border-radius: 50%" :src="require('../../assets/top.png')"></el-image>
        </el-col>
        <el-col :span="17" class="title">
          吉企银通管理后台
        </el-col>
        <el-col :span="6" class="admin">
          <i class="el-icon-user icon"></i>
          <span class="name">管理员：{{ user.name }}</span>
          <span class="shu">|</span>
          <el-link :underline="false" class="out" @click="toLogout()">退出</el-link>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
export default {
  name: 'heads',
  props: {},
  components: {},
  data: () => ({}),
  created() {},
  watch: {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapMutations(['deleteUser']),
    async toLogout() {
      this.deleteUser();
      this.$message({
        message: '注销成功',
        type: 'success',
      });
      this.toLogin();
    },
    async toLogin() {
      this.$router.push({ name: 'login' });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 18px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #ffffff;
  padding: 23px 10px;
}
.admin {
  text-align: right;
  padding: 24px 30px;
}
.admin .icon {
  color: #fff;
  padding: 0 5px;
}
.admin .name {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.admin .shu {
  padding: 0 10px;
  color: rgba(255, 255, 255, 1);
}
.admin .out {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(233, 2, 29, 1);
}
</style>