<template>
  <div class="page">
      <v-header-login/>
      <div class="navbig">
        <div class="nav">
          <a href="#tab1">平台简介</a>
          <a href="#tab2">平台愿景及使命</a>
          <a href="#tab3">业务架构</a>
          <a href="#tab4">平台发展历程</a>
        </div>
         <!-- <el-tabs v-model="activeName" center @tab-click="jump" class="tabbox nav">
          <el-tab-pane label="平台简介" name="tab1"></el-tab-pane>
          <el-tab-pane label="平台愿景及使命" name="tab2"></el-tab-pane>
          <el-tab-pane label="业务架构" name="tab3"></el-tab-pane>
          <el-tab-pane label="平台发展历程" name="tab4"></el-tab-pane>
        </el-tabs> -->
        </div>
      <div class="bigbox contenpage header_m_top">
        

        <div class="banner" id="tab1">
          <div class="ban">
              <img :src="ImgServerUrl + 'others/pt/banner.png'" alt="">
          </div>
        
        </div>
        <div class="banner">
          <div class="ban">
              <img id="tab2" :src="ImgServerUrl + 'others/pt/1.png'" alt="">
          </div>
          <div class="ban">
              <img id="tab3" class="mt" :src="ImgServerUrl + 'others/pt/2.png'" alt="">
          </div>
          <div class="ban">
              <img id="tab4" class="mt" :src="ImgServerUrl + 'others/pt/3.png'" alt="">
          </div>
        </div>
        <div class="timebig">
            <div class="time">
                  <img class="mt" :src="ImgServerUrl + 'others/pt/4.png'" alt="">
            </div>
          </div> 
      </div>
      <v-footer-others/>
  </div>
</template>

<script>
import vHeaderLogin from '@/components/HeaderLogin'
import vFooterOthers from '@/components/FooterOthers'
export default {
  name: 'platform',
  data () {
    return {
      activeName:'tab1',
      navItemWidth:50,
      translateX:0

    }
  },
  mounted() {
    // 时间钩子
  },
  methods:{
    // 执行方法
     dataScroll: function (e) {
      // 标签定位
      this.scroll = e.target.scrollTop;
      this.loadSroll();
    },
    loadSroll: function () {
      var self = this;
      var sections = document.getElementsByClassName('do-jump');
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 300) {
          if(i==0){
            this.activeName="base";
          }else if(i==1){
            this.activeName="category"
          }else if(i==2){
            this.activeName="sale"
          }else if(i==3){
            this.activeName="picture"
          }else if(i==4){
            this.activeName="service"
          }
          break;
        }
      }
    },
    jump(e){
      console.log('ee--',e)
      var index=e.index;
      var id=e.name;
      document.getElementById(id).scrollIntoView({block: "center"});
    },
    init(index) {
      var index = index || 0;
      let offsetLeft = this.$refs["navItem"][index].offsetLeft;
      let pWidth = this.$refs["navItem"][index].clientWidth;
      let width = this.$refs["navItemSpan"][index].clientWidth;
      this.navItemWidth = width;
      this.translateX = offsetLeft + (pWidth - width) / 2;
    },
  },
  components:{
    // 传入组件
vHeaderLogin,vFooterOthers
  }
}
</script>

<style lang="scss" scoped>
.page{
  background-color: #fff;
  overflow-x: hidden;
  .header_m_top{
    margin-top: 0px !important; 
    padding-top: 116px;
  }
}
.timebig{
  background-color: #FBFBFB;
  padding: 40px 0;
}
.time{
  width: 1220px;
  // border:1px solid #ccc;
  overflow-x: auto;
  margin: 0 auto;
}
.mt{
  margin-top: 25px;
}
.navbig{
  background-color: #FBFBFB;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  z-index: 999;
   .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: 24%;
      text-align: center;
      &::after{
        display: block;
        content: "";
        position: absolute;
        width: 50px;
        left: 41.5%;
        height: 2px;
        // translate: (-50%,-50%);
        background-color: #FBFBFB;
      }
      &:hover{
        &::after{
          display: block;
          content: "";
          position: absolute;
          width: 50px;
          left: 41%;
          height: 2px;
          background-color: #f60;
        }
      }
    }
    
  }
  >>>.el-tabs__nav-wrap::after{
    background-color: transparent;
  }
  >>>.el-tabs__nav{
    width: 1220px;
    margin: 0 auto;
    text-align: center;
  }
  >>>.el-tabs__item{
    width: 25%;
  }
  >>>.el-tabs__active-bar{
    // width: 50px !important;
    // transform: translateX(115px) !important;
  }
}
 
.banner{
  width: 1220px;
  position: relative;
  margin: 0 auto;
  .ban{
    position: relative;
    margin-left: -350px;
    font-size: 0;
    display: block;
  }
}

</style>
