<template>
  <div>
    <commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner>
    <div class="tab-wrapper">
      <ul class="tab-main widthCommon">
        <li
          v-for="(item, index) in tabData"
          :key="item"
          @click="changeTab(index,item)"
          :class="{tabActive:currentIndex==index}"
        >{{item}}
        </li>
      </ul>
    </div>
    <div class="bread">
      <div class=" widthCommon">
        您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 产品中心 -> {{name}}
      </div>
    </div>


    <div class="widthCommon anchor" style="text-align: center;margin-bottom: 53px">
      <p style="font-size: 18px">公司简介</p>
      <p style="font-size: 18px;padding: 22px 0 41px">COMPANY INTRODUCTION</p>
      <p style="font-size: 14px;line-height: 24px;">

        中兴智能交通股份有限公司成立于2000年4月，是致力于智能交通领域的专业公司，是中国首批从事智能交通（
        公司的主营业务面向城市交通（公安交通、公共交通、智慧停车），城际交通（高速公路和铁路）和综合交通信息服务领域，为城市公安交通、公共交通、智慧停车、高速公路和轨道交通五大综合交通运输领域提供交通规划、方案设计、系统建设、运营和服务，构建以智能交通核心技术的产品研发、生产、系统建设和维护为一体的动静态交通业务生态服务体系。为客户提供个性化的智能交通解决方案和技术服务。同时公司在以智慧停车产品的研发、生产、销售和服务为基础的静态交通服务的基础上，为用户提供
      </p>
    </div>
    <div class="widthCommon anchor" style="height: 400px;">2</div>
    <div class="bgCommon">
      <div class="widthCommon anchor" style="height: 400px;">3</div>
    </div>
    <div class="widthCommon anchor" style="height: 300px;">4</div>
    <div class="widthCommon anchor" style="height: 300px;">5</div>

  </div>
</template>

<script>
import commonBanner from '@/components/commonBanner'

export default {
  name: 'index',
  components: {
    commonBanner
  },
  data() {
    return {
      tabData: [
        '公司简介', '发展历程', '企业文化', '资质认证', '荣誉证书'
      ],
      currentIndex: 0,
      tabView: 'selectTab0',
      name: '',
      scroll: ''
    }
  },
  mounted() {
    this.name = this.tabData[0]
  },
  methods: {
    dataScroll: function () {
      this.scroll =  document.documentElement.scrollTop || document.body.scrollTop
    },
    changeTab: function (index, item) {
      console.log(index)
      this.currentIndex = index
      this.tabView = 'selectTab' + index
      this.name = item

      // 对应锚点
      let jump = document.getElementsByClassName('anchor')
      let total = jump[index].offsetTop
      document.documentElement.scrollTop = total //firefox
      document.body.scrollTop = total //chrome
      window.pageYOffset = total

    },

  }

}
</script>

<style scoped lang="scss">


</style>
