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="exit">
              退出<i class="icon el-icon-s-unfold"></i>
            </span>
          </div>
        </div>
    </div>
</template>
<script>
import { mapState,mapActions } from 'vuex'
import Setting from '@/setting'
import util from '@/libs/util'
export default {
    data() {
        return {
            token: util.local.get(Setting.tokenKey),
        };
    },
    mounted(){
        
    },
    methods: {
        toIndex(){
            this.$refs.nav.jump({
                index: '/index/list',
                title: '首页'
            })
        },
      exit(){
        let href = ''
        const url = location.href
        const host = url.includes('huorantech.cn') ?
          `http://www.occupationlab.com` :
            process.env.NODE_ENV === 'development' ?
              `http://192.168.31.155:8082` :
              `http://121.37.12.51/student`
        let assessmentId = sessionStorage.getItem('assessmentId')
        if (assessmentId != 'null' && assessmentId != null && assessmentId != ''){
          href = `${host}/#/ass/list`
        }else{
          const cid = sessionStorage.getItem('cid')
          href = `${host}/#/station/preview?courseId=${cid}&curriculumName=银行项目`
        }
        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>