home

liuqimichale
1 parent 829e17e2
Showing 7 changed files with 144 additions and 55 deletions
webintroduce/src/assets/css/reset.css
webintroduce/src/assets/images/home/deviceallnew.png
webintroduce/src/assets/images/home/rnt-app.png
webintroduce/src/assets/images/home/rnt_andoird.png
webintroduce/src/assets/images/home/rnt_ios.png
webintroduce/src/assets/images/home/softwareall.png
webintroduce/src/views/home.vue
@@ -136,6 +136,9 @@ table {
 .displayFlex{
   display: flex;
 }
+.averageFlex{
+  flex:1
+}
  
  
 .contentWidth{
@@ -4,7 +4,7 @@
       <!-- slides -->
       <swiper-slide class="bannerBG1">
         <div class="contentWidth pos-rel">
-          <p>全方位解决方案  全时空可视化</p>
+          <p>全方位解决方案 全时空可视化</p>
           <p>最懂你、任你停</p>
           <img src="../assets/images/home/banner1-icon.png">
         </div>
@@ -37,6 +37,43 @@
       <!--<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>
 </template>
  
@@ -56,9 +93,9 @@ export default {
       swiperOption: {
         pagination: {
           el: ".swiper-pagination",
-          clickable:true
+          clickable: true
         },
-        autoplay:{
+        autoplay: {
           enabled: true,
           disableOnInteraction: false,
           delay: 3000
@@ -84,126 +121,110 @@ export default {
   .swiper-banner {
     height: 540px;
   }
-  /*.swiper-pagination {*/
-    /*height: .23rem;*/
-    /*font-family: PingFangSC-Regular;*/
-    /*font-size: .156rem;*/
-    /*color: #fff;*/
-    /*letter-spacing: 0;*/
-    /*line-height: .12rem;*/
-    /*bottom: 0;*/
-  /*}*/
-  /*.swiper-pagination-bullet {*/
-    /*background: #fff;*/
-    /*opacity: 0.8;*/
-    /*height: 0.08rem;*/
-    /*border-radius: 0.06rem;*/
-    /*width: 0.08rem;*/
-    /*transition: all 0.2s; //可设置缓慢变化*/
-  /*}*/
-  /*.swiper-pagination-bullet-active {*/
-    /*width: 30px;*/
-  /*}*/
-  .bannerBG1{
+
+  .bannerBG1 {
     background: url("../assets/images/home/bannerBg1.png") no-repeat;
     background-size: 100% 100%;
     text-align: left;
     color: #fff;
-    p:nth-of-type(1){
+    p:nth-of-type(1) {
       padding-top: 168px;
-      margin: 0 0   25px 0;
+      margin: 0 0 25px 0;
       font-size: 44px;
     }
-    p:nth-of-type(2){
+    p:nth-of-type(2) {
       font-size: 24px;
     }
-    img{
+    img {
       position: absolute;
       right: 0;
-      top:20px;
+      top: 20px;
     }
   }
-  .bannerBG2{
+
+  .bannerBG2 {
     background: url("../assets/images/home/bannerBg2.png") no-repeat;
     background-size: 100% 100%;
     text-align: left;
     color: #fff;
-    p:nth-of-type(1){
+    p:nth-of-type(1) {
       padding-top: 168px;
-      margin: 0 0   25px 0;
+      margin: 0 0 25px 0;
       font-size: 44px;
     }
-    p:nth-of-type(2){
+    p:nth-of-type(2) {
       font-size: 24px;
     }
-    img{
+    img {
       position: absolute;
       right: 0;
-      top:20px;
+      top: 20px;
     }
   }
-  .bannerBG3{
+
+  .bannerBG3 {
     background: url("../assets/images/home/bannerBg3.png") no-repeat;
     background-size: 100% 100%;
     text-align: left;
     color: #fff;
-    p:nth-of-type(1){
+    p:nth-of-type(1) {
       padding-top: 168px;
-      margin: 0 0   25px 0;
+      margin: 0 0 25px 0;
       font-size: 44px;
     }
-    p:nth-of-type(2){
+    p:nth-of-type(2) {
       font-size: 24px;
     }
-    .parkpoint{
+    .parkpoint {
       width: 25px;
       height: 39px;
     }
-    .parkpoint1{
+    .parkpoint1 {
       background: url("../assets/images/home/blue.png") no-repeat;
       left: 100px;
-      top:50px;
+      top: 50px;
       animation: pointMove 3S infinite;
     }
-    .parkpoint2{
+    .parkpoint2 {
       background: url("../assets/images/home/blue.png") no-repeat;
       left: 900px;
-      top:150px;
+      top: 150px;
       animation: pointMove 3S infinite;
     }
-    .parkpoint3{
+    .parkpoint3 {
       background: url("../assets/images/home/green.png") no-repeat;
       left: 700px;
-      top:250px;
+      top: 250px;
       animation: pointMove 3S infinite;
     }
-    .parkpoint4{
+    .parkpoint4 {
       background: url("../assets/images/home/green.png") no-repeat;
       left: 470px;
-      top:350px;
+      top: 350px;
       animation: pointMove 3S infinite;
     }
-    .parkpoint5{
+    .parkpoint5 {
       background: url("../assets/images/home/blue.png") no-repeat;
       right: 70px;
-      top:400px;
+      top: 400px;
       animation: pointMove 3S infinite;
     }
-    .parkpoint6{
+    .parkpoint6 {
       background: url("../assets/images/home/blue.png") no-repeat;
       right: 70px;
-      bottom:50px;
+      bottom: 50px;
       animation: pointMove 3S infinite;
     }
  
-    .parkpoint4{
+    .parkpoint7 {
       background: url("../assets/images/home/green.png") no-repeat;
       left: 70px;
-      bottom:350px;
+      bottom: 350px;
       animation: pointMove 3S infinite;
     }
  
   }
+
   @keyframes pointMove {
     0% {
       opacity: 0;
@@ -213,10 +234,75 @@ export default {
       opacity: 1;
       transform: scale(1);
     }
-    100%{
+    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%;
+      }
+    }
+  }
 </style>