Fx66/src/components/FixLine.vue

<template>
  <div class="fl-ctnr" v-show="state||isbanner">
    <button class="btn btn-fl" @click='goapply'>申请经纪商</button>
    <span class="phoneNum">热线电话：+86 173 5471 8363</span>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        state:false
      }
    },
    props:["isbanner"],
    mounted(){
      this.$nextTick(()=>{
        window.addEventListener("scroll",this.fixchangge);
      });
    },
    methods:{
      fixchangge(){
        if (document.documentElement.scrollTop>=800) {
          this.state=true;
        }else{
          this.state=false;
        }
      },
      goapply(){
        this.$router.push({path:"/applyAgent"})
      }
    }
  }
</script>
<style scoped>
  .fl-ctnr{
    height: 100px;
    width: 100%;
    background: rgba(0,0,0,.5);
    line-height: 100px;
    color: #fff;
    .btn-fl{
      color: #fff;
      background: #1a6fa6;
      border-radius: 20px;
      margin-right: 60px;
      font-size: 18px;
      font-weight: 700;
    }
    .phoneNum{
      font-size: 25px;
      font-weight: 700;
    }
  }
</style>