web-test/src/layout/enterprise/heads.vue

<template>
  <div id="heads">
    <div class="w_0100">
      <div class="superbanner">
        <img :src="top_bg" />
      </div>
      <div class="supertop">
        <div class="w_1200">
          <p>
            欢迎来到吉林省计算中心科技平台
          </p>
          <p>
            <span v-if="user && user.name"
              >{{ user.name }}

              <button type="button" class="logininfo" @click="zhuxiao">注销</button>
            </span>
          </p>
        </div>
      </div>
      <div class="superlogo">
        <div class="w_1200">
          <a href="/platlive">
            <img :src="logo" />
            <span>
              吉林省计算中心科技平台
            </span>
          </a>
        </div>
      </div>
      <div class="supermenu">
        <div class="w_1200"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
export default {
  name: 'heads',
  props: {},
  components: {},
  data: () => {
    return {
      top_bg: require('@/assets/live/top_bg.png'),
      logo: require('@/assets/live/logo.png'),
    };
  },
  created() {},
  methods: {
    ...login({ logout: 'logout', transactiondtetle: 'delete' }),
    async zhuxiao() {
      this.logout();
      this.$message({
        message: '注销成功',
        type: 'success',
      });
      this.toLogin();
    },
    async toLogin() {
      this.$router.push({ path: '/platlive' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
@import '~@/style/style.css';
.logininfo {
  font-size: 20px;
  margin: 0 0 0 5px;
}
/deep/.superbanner {
  position: relative;
  height: 250px;
  overflow: hidden;
  margin: 0 0 15px 0;
}
</style>