<template>

  <div>

    <router-link tag="div"

     to="/" 

     class="header-ads"

     v-show="showAbs">

      <div class="iconfont ads-icon">&#xe685;</div>

    </router-link>

    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">

      <router-link to="./">

        <div class="iconfont header-fixed-back">&#xe685;</div>

      </router-link>

      景点详情

    </div>

  </div>

</template>

<script>

export default {

  name: "DetailHeader",

  data() {

      return {

          showAbs:true,

          opacityStyle:{

              opacity:0

          }

      }

  },

  methods:{

      handleScrole () {

          const top = document.documentElement.scrollTop

          if(top > 60 ){

              let opacity = top /140

              opacity = opacity > 1 ? 1 : opacity

              this.opacityStyle = {opacity}

              this.showAbs = false

          }else{

              this.showAbs = true

          }

      }

  },

  activated () {

      window.addEventListener('scroll', this.handleScrole)

  }

};

</script>

<style lang="stylus" scoped>

@import "~styles/varibles.styl";

.header-ads

    position absolute

    left .2rem

    top .2rem

    width .8rem

    height .8rem

    line-height .8rem

    text-align center

    border-radius .4rem

    background rgba(0, 0, 0, .8)

    .ads-icon

        font-size .4rem

.header-fixed

    position fixed

    top 0

    left 0

    right 0

    height $headerheight

    line-height $headerheight

    text-align center

    color #fff

    background :$bgcolor

    font-size .32rem

    .header-fixed-back

        position absolute

        top 0

        left 0

        width .64rem

        font-size .4rem

        color #fff

</style>