diff --git a/webintroduce/src/assets/css/reset.css b/webintroduce/src/assets/css/reset.css index 72f2c43..1b52346 100644 --- a/webintroduce/src/assets/css/reset.css +++ b/webintroduce/src/assets/css/reset.css @@ -136,6 +136,9 @@ table { .displayFlex{ display: flex; } +.averageFlex{ + flex:1 +} .contentWidth{ diff --git a/webintroduce/src/assets/images/home/deviceallnew.png b/webintroduce/src/assets/images/home/deviceallnew.png new file mode 100644 index 0000000..ca5c30a --- /dev/null +++ b/webintroduce/src/assets/images/home/deviceallnew.png diff --git a/webintroduce/src/assets/images/home/rnt-app.png b/webintroduce/src/assets/images/home/rnt-app.png new file mode 100644 index 0000000..aaa72df --- /dev/null +++ b/webintroduce/src/assets/images/home/rnt-app.png diff --git a/webintroduce/src/assets/images/home/rnt_andoird.png b/webintroduce/src/assets/images/home/rnt_andoird.png new file mode 100644 index 0000000..b118107 --- /dev/null +++ b/webintroduce/src/assets/images/home/rnt_andoird.png diff --git a/webintroduce/src/assets/images/home/rnt_ios.png b/webintroduce/src/assets/images/home/rnt_ios.png new file mode 100644 index 0000000..280c0d0 --- /dev/null +++ b/webintroduce/src/assets/images/home/rnt_ios.png diff --git a/webintroduce/src/assets/images/home/softwareall.png b/webintroduce/src/assets/images/home/softwareall.png new file mode 100644 index 0000000..89a4d5d --- /dev/null +++ b/webintroduce/src/assets/images/home/softwareall.png diff --git a/webintroduce/src/views/home.vue b/webintroduce/src/views/home.vue index d30c717..ff8454f 100644 --- a/webintroduce/src/views/home.vue +++ b/webintroduce/src/views/home.vue @@ -4,7 +4,7 @@
-

全方位解决方案 全时空可视化

+

全方位解决方案 全时空可视化

最懂你、任你停

@@ -37,6 +37,43 @@ + +
+

硬件产品

+

封闭车场+路侧车场+停车诱导+违章抓拍

+
+
    +
  • 高清智能芯片、车辆进出场车牌识别快、准、清
    • +
  • 地磁、视频桩、PDA多级设备联动，路侧车辆入场实时通知
    • +
  • 多级诱导系统 ,车位、路况信息精准、高清展示、为车主快速'指路'
    • +
  • 低照度、高防护、成像高清、违章抓拍系统让 违章停车 无所遁形
    • +
+ +
+
+
+

软件产品

+

任你停+企业云平台+数据分析平台

+
+ +
    +
  • 任你停，车场导航，随停即走，无感支付 +
    • +
  • 云端服务、精细化运营，业务规则灵活配置 +
    • +
  • 大数据资产管理、商业运营分析、资产经营决策建议
    • +
  • +
    + +
    +
    + + +
    +
    • +
+
+
@@ -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%; + } + } + }