BJ_web_developers / zxznweb

<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>
        <ul class="chose-wrap widthCommon">
          <li>
            <div class="sign1 sign">
              <p>智能交通行业优势</p>
              <p>公司在智能交通行业已经耕耘了19个年头，行业经验丰富，在动静态交通的结合方面优势尤为突出。</p>
            </div>
            <div class="sign2 sign">
              <p>综合服务体系优势</p>
              <p>规划设计、投融资、信息化建设、大数据整合、运营服务等 全产业链服务。</p>
            </div>
            <div class="sign3 sign">
              <p>商业模式创新优势</p>
              <p>技术+投资+运营+产业服务结合的商业模式属于行业首创。</p>
            </div>
          </li>

          <li>

          </li>
          <li>
            <div class="sign4 sign">
              <p>技术研发优势</p>
              <p>公司拥有北京、无锡、青岛三大研发基地，核心产品覆盖城市公安交通、公共交通、智慧停车三大领域，自主知识产权及专利达200余项。</p>
            </div>
            <div class="sign5 sign">
              <p>停车治理经验优势</p>
              <p>在多个城市级停车项目中，形成了一套完善的城市停车治理体系和运营管理体系。</p>
            </div>
            <div class="sign6 sign">
              <p>战略合作策略优势</p>
              <p>公司响应国家“一带一路”倡议，签订对外战略合作协议，引进国外先进的城市停车治理理念。</p>
            </div>
          </li>
        </ul>

      </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>
            <img src="../../assets/images/home/case1.png" alt="">
          </li>
          <li>
            <p>丹阳项目</p>
            <div>
              <span>总投资1.47亿元人民币</span>
              <span>15年停车位、数据中心特许经营权</span>
              <span>智慧城市总体建设（占股18%）</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/home/case2.png" alt="">
          </li>
          <li>
            <p>赤峰项目</p>
            <div>
              <span> 总投资10亿元人民币</span>
              <span>25年停车位收入特许经营权</span>
              <span>总计可接入车位规模3~4万个</span>
              <span>所有政府的公共停车位资源</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/home/case3.png" alt="">
          </li>
          <li>
            <p>扬中</p>
            <div>
              <span>总投资3500万元人民币20年停车位</span>
              <span>特许经营权总计可接入车位1万个</span>
            </div>
          </li>

          <li>
            <img src="../../assets/images/home/case4.png" alt="">
          </li>
          <li>
            <p>秦皇岛智能交通项目</p>
            <div>
              <span>建设总规模达7000余万，建设涵盖“一个中心、九个子系统”，秦皇岛重点警卫保障的有力支撑。</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/home/case5.png" alt="">
          </li>
          <li>
            <p>黄石市智慧停车建设项目</p>
            <div>
              <span>总投资 5300万元</span>
              <span>建设内容涵盖指挥中心、路内、路外停车场建设以及主、次干路停车诱导建设，可接入停车泊位数量近1万个。</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/home/case6.png" alt="">
          </li>
          <li>
            <p>重庆市万盛智慧交通项目</p>
            <div>
              <span>涵盖公交智能调度、路政执法、智慧公路、公共交通行业监管、公共交通辅助决策分析等，实现城市级综合智慧交通大数据应用。</span>
            </div>
          </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>

      <ul class="link-wrapper textCommonPadding">
        <li>
          <div>关于我们</div>
          <p>公司简介</p>
          <p>公司沿革</p>
          <p>企业文化</p>
          <p>荣誉证书</p>
          <p>资质认证</p>
        </li>
        <li>
          <div>新闻中心</div>
          <p>公司要闻</p>
          <p>行业动态</p>
          <p>技术前沿</p>
          <p>团队活动</p>
        </li>
        <li>
          <div>解决方案</div>
          <p>智慧停车</p>
          <p>公安交通</p>
          <p>公共交通</p>
        </li>
        <li>
          <div>产品介绍</div>
          <p>智慧停车</p>
          <p>公共交通</p>
          <p>公共交通</p>
        </li>
        <li>
          <div>经典案例</div>
          <p>智慧停车</p>
          <p>公共交通</p>
          <p>公共交通</p>
        </li>
      </ul>





    </div>
</template>

<script>

export default {
  name: 'index',

  data () {
    return {

    }
  },

}
</script>

<style scoped lang="scss">
  .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: 1600px;
    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;
    transition: ALL 0.4s ease-in-out;
    background: #FFF;
    font-size: 20px;
    color: #333;
  }
  .case-main li img{
    width: 100%;
    height: 100%;
  }
  .case-main li p{
    padding: 60px 0 50px 50px;
    font-size: 30px;
  }
  .case-main li div{
    padding-left: 50px;
    padding-right: 20px;
    font-size: 20px;
  }
  .case-main li div span{
    display: block;
    margin-bottom: 20px;
  }
  .case-main li:hover{
    transform: scale(1.2);
  }
  .chose-wrap{
    overflow: hidden;

  }
  .chose-wrap li{
    float: left;
  }
  .chose-wrap li:nth-of-type(2){
    width: 451px;
    height: 325px;
    margin: 0 20px;
    background: url("../../assets/images/home/chose.png") no-repeat;
    background-size: 100% 100%;
  }
  .sign1{
    background: url("../../assets/images/home/sign1.png") no-repeat;
    background-size: 58px 58px;
  }
  .sign2{
    margin: 50px 0;
    background: url("../../assets/images/home/sign2.png") no-repeat;
    background-size: 58px 58px;
  }
  .sign3{
    background: url("../../assets/images/home/sign3.png") no-repeat;
    background-size: 58px 58px;
  }
  .sign4{
    background: url("../../assets/images/home/sign4.png") no-repeat;
    background-size: 58px 58px;
  }
  .sign5{
    margin: 50px 0;
    background: url("../../assets/images/home/sign5.png") no-repeat;
    background-size: 58px 58px;
  }
  .sign6{
    background: url("../../assets/images/home/sign6.png") no-repeat;
    background-size: 58px 58px;
  }
  .sign{
    width: 400px;
    padding-left: 60px;
    color: #333;
    min-height: 60px;
  }
  .sign p:nth-of-type(1){
    padding-bottom: 20px;
    font-size: 14px;
  }
  .sign p:nth-of-type(2){
    font-size: 12px;
  }
  .link-wrapper{
    display: flex;
    justify-content: center;
  }
  .link-wrapper li{
    margin-right: 150px;
  }
  .link-wrapper li:last-of-type{
    margin-right: 0;
  }
  .link-wrapper li div{
    font-size: 16px;
    color: #333;
  }
  .link-wrapper li  p{
    margin-top: 10px;
    font-size: 12px;
  }

</style>