home.vue 14.5 KB

Edit Raw Blame History

<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper" class="swiper-banner">
      <!-- slides -->
      <swiper-slide class="bannerBG1">
        <div class="contentWidth pos-rel">
          <p>全方位解决方案 全时空可视化</p>
          <p>最懂你、任你停</p>
          <img src="../assets/images/home/banner1-icon.png">
        </div>

      </swiper-slide>
      <swiper-slide class="bannerBG2">
        <div class="contentWidth pos-rel">
          <p>云端saas服务，大并发高可用架构</p>
          <p>为您的数字资产保驾护航 数据全方位呵护</p>
          <img src="../assets/images/home/banner2-icon.png">
        </div>
      </swiper-slide>
      <swiper-slide class="bannerBG3">
        <div class="contentWidth pos-rel">
          <p>物联改变时代 智慧停车 从现在开始</p>
          <p>快速、高效、不停车、不拥堵</p>
          <div class="parkpoint parkpoint1 pos-abs"></div>
          <div class="parkpoint parkpoint2 pos-abs"></div>
          <div class="parkpoint parkpoint3 pos-abs"></div>
          <div class="parkpoint parkpoint4 pos-abs"></div>
          <div class="parkpoint parkpoint5 pos-abs"></div>
          <div class="parkpoint parkpoint6 pos-abs"></div>
          <div class="parkpoint parkpoint7 pos-abs"></div>
        </div>
      </swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--<div class="swiper-button-next" slot="button-next"></div>-->
      <!--<div class="swiper-scrollbar" slot="scrollbar"></div>-->
    </swiper>

    <div class="features">
      <h1>硬件产品</h1>
      <h2>封闭车场+路侧车场+停车诱导+违章抓拍 </h2>
      <div class="features-main displayFlex">
        <ul class="averageFlex deviceall">
          <li><span></span>高清智能芯片、车辆进出场车牌识别快、准、清</li>
          <li><span></span>地磁、视频桩、PDA多级设备联动，路侧车辆入场实时通知</li>
          <li><span></span>多级诱导系统 ,车位、路况信息精准、高清展示、为车主快速'指路'</li>
          <li><span></span>低照度、高防护、成像高清、违章抓拍系统让 违章停车 无所遁形</li>
        </ul>
        <img class="averageFlex" src="../assets/images/home/deviceallnew.png">
      </div>
    </div>
    <div class="features featuresgray">
      <h1>软件产品</h1>
      <h2>任你停+企业云平台+数据分析平台 </h2>
      <div class="features-main displayFlex">
        <img class="averageFlex" src="../assets/images/home/softwareall.png">
        <ul class="averageFlex softall">
          <li><span></span>任你停，车场导航，随停即走，无感支付
          </li>
          <li><span></span>云端服务、精细化运营，业务规则灵活配置
          </li>
          <li><span></span>大数据资产管理、商业运营分析、资产经营决策建议</li>
          <li>
            <div class="fl">
              <img src="../assets/images/home/rnt-app.png">
            </div>
            <div class="fl">
              <img src="../assets/images/home/rnt_ios.png" onclick="window.open('https://itunes.apple.com/cn/app/%E4%BB%BB%E4%BD%A0%E5%81%9C/id1020126552?mt=8')">
              <img src="../assets/images/home/rnt_andoird.png" onclick="window.open('https://a.app.qq.com/o/simple.jsp?pkgname=com.zteits.rnting')">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--新闻动态-->
    <div class="features index-news-section">
      <div class="section-title">
        <h2>新闻动态</h2>
      </div>
      <div class="news-bd">
        <div class="focus swiper-container swiper-container-horizontal" id="swiper-container-news">
        </div>
        <div class="newslist">
          <ul>
            <li v-for="(news,index) in newsLists" :key="index" @click="">
              <p class="pos-rel red-slide"> <a data-href="" title="">{{news.newsTitle}}<span class="pos-abs" style="bottom: 0px;right: 2px;color: rgba(0,0,0,0.3);font-size: 12px">{{news.time}}</span> </a>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'

import {swiper, swiperSlide} from 'vue-awesome-swiper'

export default {
  name: 'VHome',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          enabled: true,
          disableOnInteraction: false,
          delay: 3000
        },
      },
      newsLists:[
        {
          "href":"https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ",
          "newsTitle":"【公司要闻】中兴智能交通建设甘肃省周边“一带一路”沿线城市的智慧停车",
          "img":"http://www.zte-its.com/Upload/2019-01/20190107134910953.jpg",
          "time":"2019-01-06"
        },
        {
          "href":"https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw",
          "newsTitle":"【公司要闻】年度盘点丨2018，中兴智能交通铸就辉煌",
          "img":"http://www.zte-its.com/Upload/2019-01/20190107120328342.jpg",
          "time":"2018-12-30"
        },
        {
          "href":"https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ",
          "newsTitle":"【公司要闻】中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号",
          "img":"http://www.zte-its.com/Upload/2019-01/20190114111641907.jpg",
          "time":"2019-01-14"
        },
        {
          "href":"https://mp.weixin.qq.com/s/ilplSVvIBUt0sDtqTgsgbw",
          "newsTitle":"【公司要闻】2018年年底，赤峰智慧停车项目正式上线运营",
          "img":"http://www.zte-its.com/ckfinder/userfiles/images/Snap2(34).jpg",
          "time":"2018-12-26"
        },
        {
          "href":"https://mp.weixin.qq.com/s/j4FJmW-dAMAKK8WBilHSzw",
          "newsTitle":"【公司要闻】中兴智能交通应邀出席“2018第三届中国物联网国际峰会”",
          "img":"http://www.zte-its.com/Upload/2018-05/20180529172415999.jpg",
          "time":"2018-05-15"
        },
        {
          "href":"https://mp.weixin.qq.com/s/Q3V4F0PHm0cS7a-zlXx6OA",
          "newsTitle":"【行业动态】贵州机动车停放收费新规5月起试行 小区停车费由业主大会决定",
          "img":"http://www.zte-its.com/Upload/2018-08/20180808173733771.jpg",
          "time":"2018-04-24"
        },
        {
          "href":"https://mp.weixin.qq.com/s/BEyfUDkfrZqLokZxoKp04Q",
          "newsTitle":"【行业动态】广州停车场条例10月起施行 小区停车收费标准先议价",
          "img":"http://www.zte-its.com/Upload/2018-09/20180918095140370.jpg",
          "time":"2018-04-24"
        },
        {
          "href":"https://mp.weixin.qq.com/s/-ltsBzboxdeCzwz4-nOy0Q",
          "newsTitle":"【行业动态】2018雄安新区停车设备设施投资建设高峰论坛暨博览会隆重召开！",
          "img":"https://mmbiz.qpic.cn/mmbiz_jpg/eRs8EuRTNC1tBsAtYFuuFx3SgKrPpkMYib3bP9kBKnxqcwcosVOUc5iaF4hQ9JkHfZib0SWuANXAuzI8u4vzWgDFA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
          "time":"2018-04-20"
        },
        {
          "href":"https://mp.weixin.qq.com/s/3tWOAvnXl5T78TzBPgWszA",
          "newsTitle":"【行业动态】滴滴发布企业公民报告：让城市交通更智慧 运行更高效",
          "img":"https://mmbiz.qpic.cn/mmbiz_jpg/uWQ5Iz1kD2bHvLt6DEdN4ib00PeTsmxiaTye2BHMuxXSD7Z51HnBicxNc53FeZceD2ZiaJ4Eq4ft9cHY9Uib1CXNzIA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
          "time":"2018-04-20"
        }, {
          "href":"https://mp.weixin.qq.com/s/ZrDwirjt0JTntmcCI5L4Ag",
          "newsTitle":"【行业动态】昆明停车管理新规 力图破解“圈地收费”乱象",
          "img":"http://www.zte-its.com/Upload/2018-05/20180529173902781.jpg",
          "time":"2018-04-20"
        }

      ]
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log('this is current swiper instance object', this.swiper)
    //this.swiper(7, 1000, false)
  }
}
</script>

<style scoped lang="scss">
  .swiper-banner {
    height: 540px;
  }

  .bannerBG1 {
    background: url("../assets/images/home/bannerBg1.png") no-repeat;
    background-size: 100% 100%;
    text-align: left;
    color: #fff;
    p:nth-of-type(1) {
      padding-top: 168px;
      margin: 0 0 25px 0;
      font-size: 44px;
    }
    p:nth-of-type(2) {
      font-size: 24px;
    }
    img {
      position: absolute;
      right: 0;
      top: 20px;
    }
  }

  .bannerBG2 {
    background: url("../assets/images/home/bannerBg2.png") no-repeat;
    background-size: 100% 100%;
    text-align: left;
    color: #fff;
    p:nth-of-type(1) {
      padding-top: 168px;
      margin: 0 0 25px 0;
      font-size: 44px;
    }
    p:nth-of-type(2) {
      font-size: 24px;
    }
    img {
      position: absolute;
      right: 0;
      top: 20px;
    }
  }

  .bannerBG3 {
    background: url("../assets/images/home/bannerBg3.png") no-repeat;
    background-size: 100% 100%;
    text-align: left;
    color: #fff;
    p:nth-of-type(1) {
      padding-top: 168px;
      margin: 0 0 25px 0;
      font-size: 44px;
    }
    p:nth-of-type(2) {
      font-size: 24px;
    }
    .parkpoint {
      width: 25px;
      height: 39px;
    }
    .parkpoint1 {
      background: url("../assets/images/home/blue.png") no-repeat;
      left: 100px;
      top: 50px;
      animation: pointMove 3S infinite;
    }
    .parkpoint2 {
      background: url("../assets/images/home/blue.png") no-repeat;
      left: 900px;
      top: 150px;
      animation: pointMove 3S infinite;
    }
    .parkpoint3 {
      background: url("../assets/images/home/green.png") no-repeat;
      left: 700px;
      top: 250px;
      animation: pointMove 3S infinite;
    }
    .parkpoint4 {
      background: url("../assets/images/home/green.png") no-repeat;
      left: 470px;
      top: 350px;
      animation: pointMove 3S infinite;
    }
    .parkpoint5 {
      background: url("../assets/images/home/blue.png") no-repeat;
      right: 70px;
      top: 400px;
      animation: pointMove 3S infinite;
    }
    .parkpoint6 {
      background: url("../assets/images/home/blue.png") no-repeat;
      right: 70px;
      bottom: 50px;
      animation: pointMove 3S infinite;
    }

    .parkpoint7 {
      background: url("../assets/images/home/green.png") no-repeat;
      left: 70px;
      bottom: 350px;
      animation: pointMove 3S infinite;
    }

  }

  @keyframes pointMove {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0);
    }
  }

  .features {
    padding: 36px 0;

    h1 {
      font-size: 36px;
      padding-bottom: 15px;
    }
    h2 {
      font-size: 20px;
      padding-bottom: 30px;
    }
  }

  .featuresgray {
    background: $baseGrayBg;
  }

  .features-main {
    width: 1200px;
    margin: 0 auto;
  }

  .deviceall {
    padding-top: 120px;
    font-size: 18px;
    text-align: left;
    li {
      padding-left: 20px;
      line-height: 50px;
      position: relative;
      &:before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0px;
        top: 50%;
        margin-top: -7px;
        background: rgba(66, 160, 251, 1);
        border-radius: 50%;
      }
    }
  }

  .softall {
    padding-top: 20px;
    font-size: 18px;
    text-align: left;
    li {
      padding-left: 20px;
      line-height: 40px;
      position: relative;
      &:before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0px;
        top: 50%;
        margin-top: -7px;
        background: rgba(66, 160, 251, 1);
        border-radius: 50%;
      }
    }
  }

  /*news */
  .section-title{
    text-align: center;
    margin-bottom: 20px;
    padding: 0 190px;
  }
  .section-title h2{
    font-size:36px;
    font-weight: 500;
    text-transform:uppercase;
    padding-bottom:15px;
    position:relative;
  }

  /*news 新闻中心*/
  .index-news-section .news-bd{
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
  }
  .index-news-section .focus {
    width: 476px !important;
    height: 289px !important;
    float: left;
    position: relative;
  }
  .index-news-section .newslist {
    width: 715px;
    float: left;
    margin-bottom: 10px;
  }
  .index-news-section .newslist ul {
    padding: 15px 0;
    overflow: hidden;
    list-style: initial;
    color: #797979;
  }
  .index-news-section .newslist li {
    width: 326px;
    height: 45px;
    line-height: 22px;
    float: left;
    margin-left: 30px;
    list-style: none;
    text-align: left;
  }
  .index-news-section .newslist li {
    margin-bottom: 10px;
    background-image: url(../assets/images/point.png);
    background-repeat: no-repeat;
    background-position: 5px 7px;
  }
  .index-news-section .newslist li p {
    padding-left: 10px;
    margin-left: 8px;
    height: 44px;
  }
  .newslist li a{
    color: rgba(0,0,0,.6);
    display: block;
  }
  .pos-rel{
    position: relative;
  }
  .pos-abs{
    position: absolute;
  }
  /*轮播 */
  .news_a {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 272px;
  }
  .news_title {
    display: block;
    position: absolute;
    bottom: 0;
    padding: 10px;
    width: 100%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    border-radius: 0 0 5px 5px;
    text-align: left;
  }
  .news_title p {
    margin: 0;
    width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .news_a img {
    width: 100%;
    height: 272px;
  }
  .pagination{
    position: absolute;
    z-index: 20;
    right: 10px;
    bottom: 10px;
    margin: 0;
    height: 20px;
  }
  .news-pagination{
    right: 0px !important;
    bottom: 30px !important;
    width: 120px !important;
    margin-left: 340px;
  }
  .news-pagination .swiper-pagination-bullet{
    width:28px;
    height:4px;
    background:rgba(255,255,255,1);
    opacity: 0.5;
    border-radius:0;
  }
  .news-pagination .swiper-pagination-bullet-active{
    background:rgba(255,255,255,1);
    opacity: 1 !important;
  }
  .red-slide{
    cursor: pointer;
  }
</style>