BJ_web_developers / zxznweb

  <template>

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

          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide swiper1"></div>

              <div class="swiper-slide swiper2">2</div>

            </div>

          </div>
  
  
          <ul class="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>

  import Swiper from 'swiper';

  export default {

    name: 'index',
  
    data () {
      return {
  
      }
    },

    mounted(){
      new Swiper ('.swiper-container', {
  

        //自动轮播
        autoplay: {
          delay: 5000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        //开启循环模式
        loop: true

      })
    }

  }
  </script>
  

  <style scoped lang="scss">

    .banner-wrapper{

      height: 603px;

      position: relative;
    }

    .swiper-container{
      height: 540px;
    }
    .swiper1{
      background: url("../../assets/images/home/banner1.png") no-repeat;
      background-size: 100% 100%;
    }

    .banner-text{

      width: 100%;

      height: 124px;

      position: absolute;

      z-index: 1;

      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;

      justify-content: center;
      background:rgba(0,0,0,.58);

    }
    .banner-text li{

      width: 350px;

      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>