<template>
    <div>
      <div class="banner-wrapper">




        <ul class="widthCommon banner-text">
          <li>
            <div>覆盖城市</div>
            <div>100<span>+</span></div>
          </li>
          <li>
            <div>覆盖城市</div>
            <div>100<span>+</span></div>
          </li>
          <li>
            <div>覆盖城市</div>
            <div>100<span>+</span></div>
          </li>
          <li>
            <div>覆盖城市</div>
            <div>100<span>+</span></div>
          </li>
        </ul>
      </div>
      <div class="widthCommon textCommonPadding">
        <div class="heading-text">我们是谁?</div>
        <div class="des-text">
          公司主营业务面向城市智慧停车、公安交通、公共交通三大领域，为政府、企业、个人提供综合交通信息服务，通过交通规划、方案设计、系统建设、运营和服务，深度整合城市动静态交通数据，构建以物联网、互联网、云计算、大数据、人工智能为核心技术的产品研发、生产、系统建设和维护为一体的城市级动静态交通业务生态服务体系。
        </div>
      </div>

      <div class="bgCommon textCommonPadding">
        <div class="heading-text">为什么选择我们?</div>

      </div>

      <div class="widthCommon textCommonPadding">
        <div class="heading-text">解决方案?</div>
        <ul class="solution-wrapper">
          <li>
            <span>智慧停车整体解决方案</span>
          </li>
          <li>
            <span>城市公安交通整体解决方案</span>
          </li>
          <li>
            <span>城市公共交通整体解决方案</span>
          </li>
        </ul>
      </div>
      <div class="case-wrapper textCommonPadding">
        <div class="heading-text" style="color: #000">经典案例</div>
        <ul class="case-main">
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>

      </div>

      <div class="together-wrapper textCommonPadding">
        <div class="heading-text" style="color: #FFF">解决方案?</div>
        <ul class="together-main">
          <li>
            <p>
              城市级智慧停车领域：
              规划设计、投融资、信息化建设、大数据整合、运营服务等全产业链服务。
            </p>
            <p>特许经营、合资运营</p>
          </li>
          <li>
            <p>
              城市级智慧停车领域：
              信息化建设、大数据整合、运营服务。
            </p>
            <p>
              系统集成加合作运营
            </p>
          </li>
          <li>
            <p>
              城市公安交通、公共交通领域：
              信息化建设，交通大数据整合，辅助政府决策，建设智能化交通信息服务生态体系。
            </p>
            <p>
              政府采购
            </p>
          </li>
        </ul>
      </div>


    </div>
</template>

<script>

export default {
  name: 'index',

  data () {
    return {

    }
  },

}
</script>

<style scoped lang="">
  .banner-wrapper{
    height: 603px;
    background:rgba(0,0,0,.58);
    position: relative;
  }
  .banner-text{
    height: 124px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  .banner-text li{
    flex: 1;
    height: 62px;
    line-height: 62px;
    font-size: 30px;
    color: #FFF;
    text-align: center;
  }
  .solution-wrapper{
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .solution-wrapper li{
    font-size: 18px;
    color: #FFF;
    width: 256px;
    height: 358px;
    position: relative;

  }
  .solution-wrapper li span{
    display: block;
    width: 100%;
    font-size: 18px;
    text-align: center;
    position: absolute;
    bottom: 22px;
  }
  .solution-wrapper li:nth-of-type(1){
    background: url("../../assets/images/home/solution3.png") no-repeat;
    background-size: 100% 100%;
  }
  .solution-wrapper li:nth-of-type(2){
    margin: 0 177px;
    background: url("../../assets/images/home/solution2.png") no-repeat;
    background-size: 100% 100%;
  }
  .solution-wrapper li:nth-of-type(3){
    background: url("../../assets/images/home/solution1.png") no-repeat;
    background-size: 100% 100%;
  }

  .together-wrapper{
    height: 537px;
    background: url("../../assets/images/home/together.png") no-repeat;
    background-size: 100% 100%;
  }
  .together-main{
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  .together-main li{
    padding: 20px;
    width:236px;
    height:325px;
    border:2px solid rgba(255,255,255,1);
    color: #FFF;
    position: relative;
  }
  .together-main li:nth-of-type(2){
    margin: 0 206px;
  }
  .together-main li p:nth-of-type(1){
    font-size: 16px;
  }
  .together-main li p:nth-of-type(2){
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;
  }
  .case-wrapper{
    height: 1300px;
    background: url("../../assets/images/home/case-bg.png") no-repeat;
    background-size:100% 772px;
  }
  .case-main{
    width: 1380px;
    margin: 0 auto;
  }
  .case-main li{
    float: left;
    width: 460px;
    height: 357px;
    background: #0C51C0;
    transition: ALL 0.4s ease-in-out;
  }
  .case-main li:hover{
    transform: scale(1.2);
  }

</style>
