<template>
  <div class="page">
        <v-header-login/>
        <div class="contenpage header_m_top">
          <div class="banner">
            <div class="ban">
                <img :src="ImgServerUrl + 'others/ashop/banner.png'" alt="">
            </div>
          </div>
           <div :class="{'navbig':true,'isFixed':alinkBarFixed}" id="alinkBar">
              <div class="nav">
                <a href="#tab1">门店形象展示</a>
                <a href="#tab2">开店支持政策</a>
                <a href="#tab3">开店流程</a>
              </div>
            </div>
            <div class="contbig">
            <div class="cont" id="tab1">
              <div class="tit1">门店形象展示</div>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="美式风格" name="first">
                  <div class="">
                    <img :src="ImgServerUrl + 'others/ashop/1.png'" alt="">
                  </div>
                </el-tab-pane>
                <el-tab-pane label="欧式风格" name="second">
                  <div class="">
                    <img :src="ImgServerUrl + 'others/ashop/2.png'" alt="">
                  </div>
                </el-tab-pane>
                <el-tab-pane label="现代风格" name="third">
                  <div class="">
                    <img :src="ImgServerUrl + 'others/ashop/3.png'" alt="">
                  </div>
                </el-tab-pane>
                <el-tab-pane label="中式风格" name="fourth">
                  <div class="">
                    <img :src="ImgServerUrl + 'others/ashop/4.png'" alt="">
                  </div>
                </el-tab-pane>
              </el-tabs>
        
            </div>
            </div>
        
         
            <div class="mt contbig" id="tab2">
              <div class="cont" >
                <div class="tit2">
                  <div class="tit">
                      <!-- <img :src="ImgServerUrl + 'others/ashop/text2.png'" alt=""> -->
                      开店支持政策
                  </div>
                  <div class="">
                      <img :src="ImgServerUrl + 'others/ashop/kai.png'" alt="">
                    </div>
                </div>
              </div>
            </div>
            <div class="contbig mt" id="tab3">
              <div class="banner">
                <div class="ban">
                    <img :src="ImgServerUrl + 'others/ashop/liu.png'" alt="">
                </div>
              </div>
           
            </div>
        </div>
     <v-footer-others/>
  </div>
</template>

<script>
import vHeaderLogin from '@/components/HeaderLogin'
import vFooterOthers from '@/components/FooterOthers'
export default {
  name: 'ashop',
  data () {
    return {
      activeName:'first',
      alinkBarFixed:false
    }
  },
  mounted() {
    // 时间钩子
    window.addEventListener('scroll', this.handleScroll)
  },
  methods:{
    // 执行方法
    handleClick(){

    },
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#alinkBar').offsetTop
      //顶部高度为70px
        if (scrollTop > offsetTop-70) {
          this.alinkBarFixed = true;
        }else{
          this.alinkBarFixed = false
        } 
        // if(offsetTop==70) {
        //   this.alinkBarFixed = false
        // }
      // console.log(scrollTop,offsetTop,offsetTop-70)
    },
  },
  components:{
    // 传入组件
      vHeaderLogin,vFooterOthers
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
}
</script>

<style lang="scss" scoped>
.isFixed{
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  z-index: 999;
}
.tit2{
  .tit{
    font-size: 20px;
    padding: 20px 0;
  }
}
.banner{
  width: 1220px;
  position: relative;
  margin: 0 auto;
  background-color: #fff;
  .ban{
    position: relative;
    margin-left: -350px;
    display: block;
    font-size: 0;
  }
}
.page{
  background-color: #fff;
  overflow: hidden;
  .contenpage{
    width: 100%;
    margin: 0 auto;
  }
  .mt{
    margin-top: 25px;
  }
  >>>.el-tabs__nav{
    float: right;
  }
  .contbig{
    background-color: #FBFBFB;
  }
  .cont{
       width: 1230px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 30px 0;

    .tit1{
      position: absolute;
      top: 40px;
      left: 0;
      font-size: 20px;
    }
  }
  .div_perch{
    height: 46px;
  }
  .navbig{
  background-color: #f5f5f5;
}
  .nav{
    width: 1220px;
    margin: 0 auto;
    overflow: hidden;
    a{
      display: inline-block;
      color: #333;
      height: 58px;
      line-height: 58px;
      border-bottom: 2px solid #FBFBFB;
      position: relative;
      font-size: 16px;
      width: 33%;
      text-align: center;
      &::after{
        display: block;
        content: "";
        position: absolute;
        width: 50px;
        left: 44%;
        height: 2px;
        // translate: (-50%,-50%);
        background-color: #FBFBFB;
      }
      &:hover{
        &::after{
          display: block;
          content: "";
          position: absolute;
          width: 50px;
          left: 44%;
          height: 2px;
          background-color: #f60;
        }
      }
    }
    
  }
}
</style>
