<template>
    <div>
      <div class="width" style="padding: 50px 0;">
        <p style="font-size: 18px;text-align: center;margin-bottom: 20px;">城市级智慧停车管理解决方案</p>
        <ul class="overHidden">
          <li class="fl">
            <img src="../../../assets/images/solution/solution1.png" width="447px" height="278px">
          </li>
          <li class="fl" style="width: 392px;margin-left: 166px;">
            <p style="font-size: 18px;padding: 40px 0;">城市级智慧停车静态数据中心</p>
            <p style="font-size: 14px;line-height: 20px">深度刻画城市级停车面貌，挖掘城市停车治理问题，提供数据以及决策支撑，有效提升城市停车治理效率，减少城市核心区道路拥堵，提高城市交通治理水平。</p>
          </li>
        </ul>
      </div>
      <div class="bgCommon" style="padding: 50px 0">
        <div class="width">
          <ul class="overHidden">

            <li class="fl" style="width: 392px;">
              <p style="font-size: 18px;padding: 40px 0;">城市级智慧停车管理云平台</p>
              <p style="font-size: 14px;line-height: 20px">推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题。</p>
            </li>
            <li class="fl" style="margin-left: 166px;">
              <img src="../../../assets/images/solution/solution2.png" width="447px" height="278px">
            </li>
          </ul>
        </div>
      </div>

      <div class="width" style="padding: 50px 0">
        <ul class="overHidden">
          <li class="fl" style="">
            <img src="../../../assets/images/solution/solution3.png" width="447px" height="278px">
          </li>

          <li class="fl" style="width: 392px;margin-left: 166px;">
            <p style="font-size: 18px;padding: 40px 0;">路内停车管理</p>
            <p style="font-size: 14px;line-height: 20px">实时采集路侧车位状态，精确记录停车时长，后台实时监管，有效杜绝跑冒滴漏。</p>
          </li>

        </ul>
      </div>

      <div class="bgCommon" style="padding: 50px 0">
        <div class="width">
          <ul class="overHidden">

            <li class="fl" style="width: 392px;">
              <p style="font-size: 18px;padding: 40px 0;">封闭式停车无人值守管理</p>
              <p style="font-size: 14px;line-height: 20px">无人值守，降低人工运营成本，提高车场收益。。</p>
            </li>
            <li class="fl" style="margin-left: 166px;">
              <img src="../../../assets/images/solution/solution4.png" width="447px" height="278px">
            </li>
          </ul>
        </div>
      </div>

      <div class="width" style="padding: 50px 0">
        <ul class="overHidden">
          <li class="fl" style="">
            <img src="../../../assets/images/solution/solution5.png" width="447px" height="278px">
          </li>

          <li class="fl" style="width: 392px;margin-left: 166px;">
            <p style="font-size: 18px;padding: 40px 0;">城市停车诱导系统</p>
            <p style="font-size: 14px;line-height: 20px">实时交通路况展示（红、黄、绿），停车场剩余泊位实时更新，城市停车三级诱导，减少停车时长，提高停车效率，缓解局部交通微循环，减少拥堵。</p>
          </li>

        </ul>
      </div>


      <div class="bgCommon" style="padding: 50px 0">
        <div class="width">
          <ul class="overHidden">
            <li class="fl" style="width: 392px;">
              <div style="font-size: 24px;margin-bottom: 34px;"> 面向车主</div>
              <ul class="tab-swiper">
                <li v-for="(i, index) in tabData" :key="index"
                  :class="{active: currentIndex==index}"
                >
                  {{i}}
                </li>
              </ul>

              <transition-group tag="ul" name="slide-left" class="tabCon" mode="out-in">
                  <li v-for="(item, index) in tabCon" :key="item.mainTitle" v-show="currentIndex==index">
                    <div>
                      {{item.mainTitle}}
                    </div>
                    <div>
                      {{item.subTitle}}
                    </div>
                  </li>
              </transition-group>

            </li>

            <li class="fl" style="margin-left: 166px;">

              <transition-group tag="ul" mode="out-in" class="img-wrapper" name="slide-left">
                <li  v-for="(item, index) in imgCon" :key="item.id" v-if="currentIndex==index">
                  <img :src="item.name" alt="">
                </li>
              </transition-group>
            </li>
          </ul>
        </div>
      </div>





    </div>
</template>

<script>
import iphone0 from '../../../assets/images/solution/iphone0.png'
import iphone1 from '../../../assets/images/solution/iphone1.png'
import iphone2 from '../../../assets/images/solution/iphone2.png'
import iphone3 from '../../../assets/images/solution/iphone3.png'

export default {
  name: 'solutionSelect0',
  data(){
    return{
      tabData:[
        '一键导航','在线缴费','车位共享','周边服务'
      ],
      tabCon:[
        {
          mainTitle:'停车一键导航',
          subTitle:'目的地附近停车场推荐，快速一键导航停车场，最佳停车路径规划。'
        },
        {
          mainTitle:'在线缴费快速出场',
          subTitle:'支持微信、支付宝等多种在线支付方式，提前支付，快速离场，减少通道排队时间。'
        },
        {
          mainTitle:'个人车位共享',
          subTitle:'个人车位出租与共享，提高车位利用率，增加车主个人收入，盘活泊位存量。'
        },
        {
          mainTitle:'周边服务',
          subTitle:'为用户直接提供周边第三方服务入口，方便用户出行以及获得更多相关服务。'
        },
      ],
      imgCon:[
        {
          name:iphone0,
          id:0
        },
        {
          name:iphone1,
          id:1
        },
        {
          name:iphone2,
          id:2
        },
        {
          name:iphone3,
          id:3
        },
      ],
      currentIndex: 0,
      timer:''
    }
  },
  mounted() {
    this.timer = setInterval(this.get, 3000)
  },
  methods:{
    get() {
      this.currentIndex ++
      if(this.currentIndex == 4){
        this.currentIndex = 0
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }


}
</script>

<style scoped lang="scss">
  .width{
    width: 1200px;
    margin: 0 auto;
  }
.tab-swiper{
  width: 318px;
  display: flex;
  border-bottom: 1px solid rgba(190,190,190,1);
  justify-content: space-between;
}
.tab-swiper>li{
  width: 64px;
  height: 100px;
  padding-top: 76px;
  cursor: pointer;

  &:nth-of-type(1){
    background: url("../../../assets/images/solution/nav.png") no-repeat;
    background-size: 64px 64px;
    &.active{
      background: url("../../../assets/images/solution/navactive.png") no-repeat;
      background-size: 64px 64px;
      color: #1251B8;
    }
  }
  &:nth-of-type(2){
    background: url("../../../assets/images/solution/pay.png") no-repeat;
    background-size: 64px 64px;
    &.active{
      background: url("../../../assets/images/solution/payactive.png") no-repeat;
      background-size: 64px 64px;
      color: #1251B8;
    }
  }
  &:nth-of-type(3){
    background: url("../../../assets/images/solution/share.png") no-repeat;
    background-size: 64px 64px;
    &.active{
      background: url("../../../assets/images/solution/shareactive.png") no-repeat;
      background-size: 64px 64px;
      color: #1251B8;
    }
  }
  &:nth-of-type(4){
    background: url("../../../assets/images/solution/service.png") no-repeat;
    background-size: 64px 64px;
    &.active{
      background: url("../../../assets/images/solution/serviceactive.png") no-repeat;
      background-size: 64px 64px;
      color: #1251B8;
    }
  }
}
.tab-swiper>li:nth-of-type(1).active{

}
.tab-swiper>li:nth-of-type(2).active{
  color: #1251B8;
}
.tab-swiper>li:nth-of-type(3).active{
  color: #1251B8;
}
.tab-swiper>li:nth-of-type(4).active{
  color: #1251B8;
}
  .tabCon{
    width:318px ;
    height: 140px;
    overflow: hidden;
  }
  .tabCon li{
    float: left;
    div:nth-of-type(1){
      font-size: 18px;
      padding: 45px 0 16px;
    }
  }

  .slide-left-enter-active{
    transition: all .3s ease-in-out;
  }
  .slide-left-leave-active{
    transition: all .3s ease-in-out;
  }
  .slide-left-enter {
    transform: translateX(500px);
    opacity: 0;
  }
.slide-left-leave-to{
  transform: translateX(-500px);
  opacity: 0;
}
  .img-wrapper{
    width: 208px;
    height: 391px;
    overflow: hidden;
  }
.img-wrapper li{
  img{
    width: 100%;
    height: 100%;
  }
}

</style>
