FE_bankTeaching/src/layouts/header/index.vue

<template>
  <div class="header"
       ref="exitHeader">
    <div class="inner"
         style="width: 100%">
      <div class="logo"
           @click="toIndex"
           style="float: left">
        <img src="../../assets/img/logo.png"
             alt="">
      </div>
      <div style="float: right;margin:0 60px;font-size: 18px">
        <span style="cursor:pointer"
              @click="logout">
          退出<i class="icon el-icon-s-unfold"></i>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import Setting from '@/setting'
import util from '@/libs/util'
import Cookie from 'js-cookie'
export default {
  data () {
    return {
      token: util.local.get(Setting.tokenKey),
    };
  },
  mounted () {
    this.$route.query.manager ? Cookie.set('manager', 1) : Cookie.remove('manager')
  },
  methods: {
    ...mapMutations({
      logout: 'user/logout',
    }),
    toIndex () {
      this.$refs.nav.jump({
        index: '/index/list',
        title: '首页'
      })
    },
    exit () {
      const url = location.href
      let href = process.env.NODE_ENV === 'development' ?
        `http://${location.hostname}:8082/#/` :
        `${url.includes('huorantech.cn') ? `https://www.occupationlab.com` : location.origin}${Cookie.get('manager') ?
          '/admin' :
          (url.includes('huorantech.cn') || url.includes('izhixinyun.com')) ?
            '' :
            '/student'}/#/`
      let assessmentId = sessionStorage.getItem('assessmentId')
      if (assessmentId != 'null' && assessmentId != null && assessmentId != '') {
        href += `ass/list`
      } else {
        const cid = sessionStorage.getItem('cid')
        href += `station/preview?courseId=${cid}&curriculumName=银行项目&mallId=${this.$route.query.mallId}`
      }
      sessionStorage.clear()
      location.href = href
    },
  },
  watch: {
    '$route.path': {
      handler (newVal) {
        this.$nextTick(() => {
          console.log(newVal)
          if (newVal === '/index/list') {
            this.$refs.exitHeader.style.backgroundColor = 'rgb(250, 250, 250)'
          } else {
            this.$refs.exitHeader.style.backgroundColor = 'rgb(244, 245, 248)'
          }
        })
      },
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    height: 68px;
    // background-color: #fff;
    background-color: rgb(244, 245, 248);
    z-index: 1001;
    .logo {
        width: 500px;
        margin-left: 42px;
        cursor: pointer;
        img {
            width: 100%;
        }
    }
}
</style>