fx66/src/components/Top.vue

<template>
  <div :class="'top'+' '+topchange">
    <div class="wrap">
      <div class="logo">
        <img :src="scrolled?src2:src1" alt="" class="fl">
      </div>
      <ul class="nav fl ">
        <li :class="{'active':index}" @click="goApply('')">
          <span>首页</span></li>
        <li :class="{'active':apply}" @click="goApply('apply')">
          <span>申请经纪商</span>
          <i class="hot">HOT</i>
        </li>
      </ul>
      <ul class="fr nav user" v-show="logined">
        <li><i class="iconfont icon-user"></i>{{username}}</li>
        <li @click="exit()"><i class="iconfont icon-tuichu"></i>退出</li>
      </ul>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Top',
  data () {
    return {
      scrolled: false,
      topchange: 'topone',
      src1: '../../static/images/mainLogo.png',
      src2: '../../static/images/logo2.png',
      index: true,
      apply: false,
      // username:''
    }
  },
  computed: {
    logined () {
      return this.$store.state.logined
    },
    username () {
      return this.$store.state.loginedUser.username
    }

  },
  methods: {
    goApply: function (route) {
      if (route == 'apply') {
        if(this.logined){
          this.$router.push('/' + route)
          this.apply = true
          this.index = false
          this.topchange = 'toptwo'
          this.scrolled = true
        }else{
          this.$notify({
            title: '提示',
            message: '请先登录',
            type: 'warning'
          })
        }
      } else {
        this.$router.push('/' + route)
        this.apply = false
        this.index = true
      }
    },
    handleScroll () {
      if (this.$route.path == '/apply') {
        this.topchange = 'toptwo'
        this.scrolled = true
      } else {
        if (window.scrollY > 0) {
          this.topchange = 'toptwo'
          this.scrolled = true
        } else {
          this.topchange = 'topone'
          this.scrolled = false
        }
      }
    },
    exit: function () {
      this.$store.dispatch('logout')
      localStorage.removeItem('userInfo')
      this.notify('退出成功','success')
    },
    notify(mes,type) {
      this.$notify({
        title: '提示',
        message: mes,
        type: type
      })
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    if (this.$route.path == '/apply') {
      this.apply = true
      this.index = false
      this.topchange = 'toptwo'
      this.scrolled = true
    } else {
      this.apply = false
      this.index = true
    }
  },
  computed:{
    logined(){
      return this.$store.state.logined
    },
    username(){
      return this.$store.state.loginedUser.username
    }

  }
}
</script>

<style scoped>
  .top {
    height: 75px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }

  .topone {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;

  }

  .toptwo {
    background-color: #fff;
    color: #000;
    position: fixed;
    top: 0;

  .active {
    color: #fff;
    background-color: #1a6fa6;
  }

  }
  .logo {
    float: left;
    width: 98px;
    line-height: 75px;
    height: 75px;
    margin-right: 55px;
    display: flex;
    align-items: center;
  }

  .logo > img {
    width: 100%;
  }

  .nav li {
    float: left;
    width: 118px;
    line-height: 75px;
    font-size: 14px;
    position: relative;
  }

  .nav li:hover {
    cursor: pointer;
  }

  .topone .active {
    background-color: #fff;
    color: #1a6fa6;;
  }

  .hot {
    position: absolute;
    background-color: #ff4e00;
    color: #fff;
    display: block;
    width: 38px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    border-radius: 2px;
    top: 8px;
    right: 0;
  }

  .hot:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 30%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 14px solid #ff4e00;
    margin-bottom: -8px;
    transform: rotate(30deg);
  }
  .user{
  li{
    text-align: right;
    width: auto;
  }
  li:nth-child(2){
    margin-left: 30px;
  }
    i{
      font-size: 20px;
    }
  }

</style>