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
    }
  },
  computed:{
    logined(){
     return this.$store.state.logined
    },
    username(){
      return this.$store.state.loginedUser.username
    }

  },
  methods: {
    goApply: function (route) {
      this.$router.push('/' + route);
      if(route == 'apply'){
        this.apply = true;
        this.index = false;
        this.topchange = 'toptwo'
        this.scrolled = true;
      }
      else{
        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');
}
  },
  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;
    }
  }
}
</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>