<template>
  <div class="operat-guide">
    <img   src="../../../../static/images/guide/guide1.jpg" />
    <img @click="toTop" class="top-img" src="../../../../static/images/guide/top.jpg" />
    <div class="containner">
      <div class="tab-wrap">
        <a  href="#nav-system-introduce" class="active">系统介绍</a>
        <a  href="#nav-work">日常工作</a>
        <a  href="#nav-project">客户项目</a>
        <a  href="#nav-report">APP, Sales报表</a>
      </div>
    </div>
    <div id="nav-system-introduce">
      <img src="../../../../static/images/guide/guide3.jpg" />
    </div>
    <div id="nav-work">
      <img src="../../../../static/images/guide/guide4.jpg" />
      <img src="../../../../static/images/guide/guide5.jpg" />
      <img src="../../../../static/images/guide/guide6.jpg" />
      <img src="../../../../static/images/guide/guide7.jpg" />
      <img src="../../../../static/images/guide/guide8.jpg" />
      <img src="../../../../static/images/guide/guide9.jpg" />
      <img src="../../../../static/images/guide/guide10.jpg" />
      <img src="../../../../static/images/guide/guide11.jpg" />
      <img src="../../../../static/images/guide/guide12.jpg" />
      <img src="../../../../static/images/guide/guide13.jpg" />
    </div>
    <div id="nav-project">
      <img src="../../../../static/images/guide/guide14.jpg" />
      <img src="../../../../static/images/guide/guide15.jpg" />
      <img src="../../../../static/images/guide/guide16.jpg" />
      <img src="../../../../static/images/guide/guide17.jpg" />
      <img src="../../../../static/images/guide/guide18.jpg" />
      <img src="../../../../static/images/guide/guide19.jpg" />
    </div>
    <div id="nav-report">
      <img src="../../../../static/images/guide/guide20.jpg" />
      <img src="../../../../static/images/guide/guide21.jpg" />
      <img src="../../../../static/images/guide/guide22.jpg" />
    </div>
    <img src="../../../../static/images/guide/guide23.jpg" />
  </div>
</template>

<script>
  window.onload = function(){
  let guide = document.querySelector('.operat-guide');
    guide.addEventListener('scroll', function(){
        let wst = guide.scrollTop; //滚动滚动距离的值
        let a = document.querySelectorAll('a');
        let systemTop = document.querySelector('#nav-system-introduce').offsetTop;
        let workTop = document.querySelector('#nav-work').offsetTop;
        let projectTop = document.querySelector('#nav-project').offsetTop;
        let reportTop = document.querySelector('#nav-report').offsetTop;
        if( systemTop < wst && wst < workTop ){
          removeClass(a);
          a[0].classList.add('active');
        }else if( workTop <= wst && wst < projectTop ){
          removeClass(a);
          a[1].classList.add('active');
        }else if( projectTop <= wst && wst < reportTop ){
          removeClass(a);
          a[2].classList.add('active');
        } else if( reportTop <= wst  ){
          removeClass(a);
          a[3].classList.add('active');
        } else {
          removeClass(a);
          a[0].classList.add('active');
        }

    })
    function  removeClass(a){
      a.forEach(item=>{
          item.classList.remove('active');
      })
    }

  }
  export default{
    name: 'operat-guide',
    created(){

    },
    methods:{
      toTop(){
        document.querySelector('.operat-guide').scrollTop = 0;
      }
    },
    deta(){
      return{

      }
    }
  }
</script>

<style scoped lang="scss">
.operat-guide{
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;

  .top-img{
    position: fixed;
    right: 30px;
    bottom: 20%;
    width: 50px;
    cursor: pointer;
  }
  .containner{
    margin: 0 auto;
    width: 80%;
    max-width: 1200px;
    position: sticky;
    top: 0;

    .tab-wrap{
      margin-top: 15px;
      display: flex;
      height: 50px;
      line-height: 50px;
      background-color: #f4f4f5;
      font-size: 18px;
      a {
        flex: 1;
        text-align: center;
        text-decoration: none;
        color: #333;
        border-radius: 4px;
        &:hover{
          background-color: #5DAAFF;
          color: #fff;
          font-weight: bold;
        }
      }
      .active{
        background-color: #0077FA;
        color: #fff;
        font-weight: bold;
      }
    }
  }

  img{
    width: 100%;
  }

}
</style>
