fx66/src/components/proxyBanner.vue

<template>
  <div class="proxy-banner" :class="{'fixed':isFixed}">
    <div class="banner-inner clearfix">
      <button class="apply">申请代理</button>
      <p class="hot-line">热线电话：4001-566-899</p>
    </div>
  </div>
</template>

<script>
    export default {
      name: "proxyBanner",
      data(){
          return{
            isFixed:false,
          }
      },
      mounted(){
        window.addEventListener('scroll',this.scrollListener)
      },
      methods:{
        scrollListener(e){
          this.isFixed=window.pageYOffset>800;
          // console.log(window.pageYOffset);
        }
      }

    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  .proxy-banner{
    position: absolute;
    top:800px;
    width: 100%;
    height: 100px;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: space-between;
    &.fixed{

      position: fixed;
      z-index: 9;
      top: auto;
      bottom:0;
    }

    & .banner-inner{
      /*float: left;*/
      margin: 0 auto;
      & .apply{
        float: left;
        font-size: 18px;
        color: #ffffff;
        border: none;
        width: 140px;
        height: 40px;
        margin-top: 30px;
        background-color: @primaryBlue;
        border-radius: 20px;
      }
      & .hot-line{
        float: left;
        margin-left: 120px;
        line-height: 100px;
        font-size: 25px;
        color: #ffffff;
      }

    }
  }
</style>