BJ_web_developers / zxznweb

  <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 v-show="flag">
        <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月，是致力于智能交通领域的专业公司，是中国首批从事智能交通（
            公司的主营业务面向城市交通（公安交通、公共交通、智慧停车），城际交通（高速公路和铁路）和综合交通信息服务领域，为城市公安交通、公共交通、智慧停车、高速公路和轨道交通五大综合交通运输领域提供交通规划、方案设计、系统建设、运营和服务，构建以智能交通核心技术的产品研发、生产、系统建设和维护为一体的动静态交通业务生态服务体系。为客户提供个性化的智能交通解决方案和技术服务。同时公司在以智慧停车产品的研发、生产、销售和服务为基础的静态交通服务的基础上，为用户提供

            "
            互联网+智慧停车
            "的"O2O"运营服务。公司着力于整合动态交通和静态交通的信息数据资源，通过云计算技术和物联网技术，为客户提供全方位的交通管理与综合交通信息服务。

            公司秉承

            构建绿色交通，享受安全便利出行

            的使命，致力于为客户创造更大价值，矢志成为

            智能交通领域的领跑者

          </p>
        </div>
        <div class="widthCommon anchor" style="height: 400px;">2</div>
        <div class="cultrue-bg">
          <div class="widthCommon anchor cultrue-con" style="height: 590px;">

          </div>

        </div>

        <div class=" anchor" style="padding: 67px 0;text-align: center;font-size: 18px;">
          <p>资质认证</p>
          <p style="padding: 22px 92px">COMPANY INTRODUCTION</p>
          <ul class="natural-list">
            <li>
              <img src="../../assets/images/about/natural1.png" alt="">
              <p>高新技术企业</p>
            </li>
            <li>
              <img src="../../assets/images/about/natural2.png" alt="">
              <p>安防工程企业资质一级</p>
            </li>
            <li>
              <img src="../../assets/images/about/natural3.png" alt="">
              <p>安全生产许可证</p>
            </li>
            <li>
              <img src="../../assets/images/about/natural4.png" alt="">
              <p>质量管理体系认证（ISO9001）</p>
            </li>
          </ul>
        </div>
  

      </div>

  
      <div v-show="!flag" class="widthCommon">
        <p style="font-size: 18px;text-align: center">荣誉证书</p>
        <p style="font-size: 18px;margin: 22px 0 49px;text-align: center">COMPANY INTRODUCTION</p>
        <ul class=" honour-wrapper">
          <li v-for="i in 15" :key="i">
            <img src="../../assets/images/about/honour.png" alt="">
            <p>2018中国城市无人化停车十大创新方案</p>

          </li>
        </ul>

      </div>

    </div>

  </template>
  
  <script>

  import commonBanner from '@/components/commonBanner'

  export default {

    name: 'index',

    components: {

      commonBanner
    },

    data() {
      return {
        tabData: [
          '公司简介', '发展历程', '企业文化', '资质认证', '荣誉证书'

        ],

        currentIndex: 0,
        tabView: 'selectTab0',
        name: '',

        scroll: '',
        flag: true

      }
    },

    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

        if (index == 4) {
          this.flag = false
          return
        } else {
          this.flag = true
          // 对应锚点
          this.$nextTick(function () {
            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">

    .cultrue-bg {
      padding-top: 200px;
      background: url("../../assets/images/about/culture.png") no-repeat;
      background-size: 100% 100%;
    }
  
    .cultrue-con {

      width: 1360px;

      margin: 0 auto;

      height: 369px;
      background: url("../../assets/images/about/cultrue-con.png") no-repeat;
      background-size: 1360px 369px;
    }

  
    .natural-list {

      display: flex;
      justify-content: center;
    }

  
    .natural-list li {
      margin-right: 64px;
      img {
        width: 272px;
        height: 172px;
        margin-bottom: 38px;
      }
    }
  
    .honour-wrapper {
      overflow: hidden;
      font-size: 12px;
      text-align: center;
      margin-bottom: 20px;
      li{
        float: left;
        margin: 0 72px 20px 0 ;
        img{
          width: 282px;
          height: 178px;
          margin-bottom: 20px;
        }
        &:nth-of-type(4n+0){
          margin-right: 0;
        }
      }

    }

  </style>