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

<template>
  <div id="heads">
    <el-row>
      <div class="superbanner">
        <img :src="top_bg" />
      </div>
      <div class="supertop">
        <div class="w_1200">
          <el-col :span="12" class="left">
            <span>欢迎来到中科在线（长春）</span>
          </el-col>
          <el-col :span="12" class="right" v-if="user || user.name || user.adminuser">
            <span>{{ user.name || user.adminuser }}</span>
            <el-button type="danger" size="mini" @click="zhuxiao">退出登录</el-button>
          </el-col>
        </div>
      </div>
      <div class="superlogo">
        <div class="w_1200">
          <el-col :span="24" @click.native="linkBtn()">
            <img :src="logo" />
            <span>
              中科在线（长春）
            </span>
          </el-col>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import Vue from 'vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
const { mapActions: dockLogin } = createNamespacedHelpers('dockLogin');
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' }),
    ...dockLogin({ docklogout: 'logout', transactiondtetle: 'delete' }),
    async zhuxiao() {
      if (this.user.role === '3' || this.user.role === '8') {
        this.docklogout();
        this.$message({
          message: '注销成功',
          type: 'success',
        });
        this.toLogin();
      } else {
        this.logout();
        this.$message({
          message: '注销成功',
          type: 'success',
        });
        this.toLogin();
      }
    },
    async toLogin() {
      this.$router.push({ path: '/' });
    },
    // 返回科技超市页面
    linkBtn() {
      // this.$router.push({ path: `${process.env.NODE_ENV === 'development' ? '' : Vue.config.weixin.baseUrl}/market/index` });
      this.$router.push({ path: '/market/index' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
/deep/.superbanner {
  position: relative;
  height: 250px;
  overflow: hidden;
}
.supertop {
  .left {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    span:last-child {
      padding: 0 10px;
      font-weight: bold;
    }
    span:last-child:hover {
      cursor: pointer;
      color: #0085d2;
      font-weight: bold;
    }
  }
  .right {
    text-align: right;
    height: 40px;
    line-height: 40px;
    span {
      color: #000;
      font-weight: bold;
      font-size: 16px;
      padding: 0 10px;
    }
  }
}
.superlogo {
  position: absolute;
  top: 40px;
  width: 100%;
  padding: 50px 0 0 0;
}

.superlogo img {
  width: 76px;
  height: 64px;
  overflow: hidden;
}

.superlogo span {
  color: #2d64b3;
  font-size: 36px;
  font-family: cursive;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  font-weight: 600;
  position: relative;
  top: 10px;
  padding: 0 0 0 10px;
}
.superlogo:hover {
  cursor: pointer;
}
</style>