solutionSelect0.vue
8.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<template>
<div>
<div class="widthCommon" style="padding: 50px 0">
<p style="font-size: 18px;text-align: center;margin-bottom: 20px;">城市级智慧停车管理解决方案</p>
<ul class="overHidden">
<li class="fl">
<img src="../../../assets/images/solution/solution1.png" width="447px" height="278px">
</li>
<li class="fl" style="width: 392px;margin-left: 166px;">
<p style="font-size: 18px;padding: 40px 0;">城市级智慧停车静态数据中心</p>
<p style="font-size: 14px;line-height: 20px">深度刻画城市级停车面貌，挖掘城市停车治理问题，提供数据以及决策支撑，有效提升城市停车治理效率，减少城市核心区道路拥堵，提高城市交通治理水平。</p>
</li>
</ul>
</div>
<div class="bgCommon" style="padding: 50px 0">
<div class="widthCommon">
<ul class="overHidden">
<li class="fl" style="width: 392px;">
<p style="font-size: 18px;padding: 40px 0;">城市级智慧停车管理云平台</p>
<p style="font-size: 14px;line-height: 20px">推进停车位资源优化配置，实现城市停车标准化、精细化管理，盘活停车泊位存量，优化泊位增量，规范停车秩序，解决停车难题。</p>
</li>
<li class="fl" style="margin-left: 166px;">
<img src="../../../assets/images/solution/solution2.png" width="447px" height="278px">
</li>
</ul>
</div>
</div>
<div class="widthCommon" style="padding: 50px 0">
<ul class="overHidden">
<li class="fl" style="">
<img src="../../../assets/images/solution/solution3.png" width="447px" height="278px">
</li>
<li class="fl" style="width: 392px;margin-left: 166px;">
<p style="font-size: 18px;padding: 40px 0;">路内停车管理</p>
<p style="font-size: 14px;line-height: 20px">实时采集路侧车位状态，精确记录停车时长，后台实时监管，有效杜绝跑冒滴漏。</p>
</li>
</ul>
</div>
<div class="bgCommon" style="padding: 50px 0">
<div class="widthCommon">
<ul class="overHidden">
<li class="fl" style="width: 392px;">
<p style="font-size: 18px;padding: 40px 0;">封闭式停车无人值守管理</p>
<p style="font-size: 14px;line-height: 20px">无人值守，降低人工运营成本，提高车场收益。。</p>
</li>
<li class="fl" style="margin-left: 166px;">
<img src="../../../assets/images/solution/solution4.png" width="447px" height="278px">
</li>
</ul>
</div>
</div>
<div class="widthCommon" style="padding: 50px 0">
<ul class="overHidden">
<li class="fl" style="">
<img src="../../../assets/images/solution/solution5.png" width="447px" height="278px">
</li>
<li class="fl" style="width: 392px;margin-left: 166px;">
<p style="font-size: 18px;padding: 40px 0;">城市停车诱导系统</p>
<p style="font-size: 14px;line-height: 20px">实时交通路况展示（红、黄、绿），停车场剩余泊位实时更新，城市停车三级诱导，减少停车时长，提高停车效率，缓解局部交通微循环，减少拥堵。</p>
</li>
</ul>
</div>
<div class="bgCommon" style="padding: 50px 0">
<div class="widthCommon">
<ul class="overHidden">
<li class="fl" style="width: 392px;">
<div style="font-size: 24px;margin-bottom: 34px;"> 面向车主</div>
<ul class="tab-swiper">
<li v-for="(i, index) in tabData" :key="index"
:class="{active: currentIndex==index}"
>
{{i}}
</li>
</ul>
<transition-group tag="ul" name="slide-left" class="tabCon" mode="out-in">
<li v-for="(item, index) in tabCon" :key="item.mainTitle" v-show="currentIndex==index">
<div>
{{item.mainTitle}}
</div>
<div>
{{item.subTitle}}
</div>
</li>
</transition-group>
</li>
<li class="fl" style="margin-left: 166px;">
<transition-group tag="ul" mode="out-in" class="img-wrapper" name="slide-left">
<li v-for="(item, index) in imgCon" :key="item.id" v-if="currentIndex==index">
<img :src="item.name" alt="">
</li>
</transition-group>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import iphone0 from '../../../assets/images/solution/iphone0.png'
import iphone1 from '../../../assets/images/solution/iphone1.png'
import iphone2 from '../../../assets/images/solution/iphone2.png'
import iphone3 from '../../../assets/images/solution/iphone3.png'
export default {
name: 'solutionSelect0',
data(){
return{
tabData:[
'一键导航','在线缴费','车位共享','周边服务'
],
tabCon:[
{
mainTitle:'停车一键导航',
subTitle:'目的地附近停车场推荐，快速一键导航停车场，最佳停车路径规划。'
},
{
mainTitle:'在线缴费快速出场',
subTitle:'支持微信、支付宝等多种在线支付方式，提前支付，快速离场，减少通道排队时间。'
},
{
mainTitle:'个人车位共享',
subTitle:'个人车位出租与共享，提高车位利用率，增加车主个人收入，盘活泊位存量。'
},
{
mainTitle:'周边服务',
subTitle:'为用户直接提供周边第三方服务入口，方便用户出行以及获得更多相关服务。'
},
],
imgCon:[
{
name:iphone0,
id:0
},
{
name:iphone1,
id:1
},
{
name:iphone2,
id:2
},
{
name:iphone3,
id:3
},
],
currentIndex: 0,
timer:''
}
},
mounted() {
this.timer = setInterval(this.get, 3000)
},
methods:{
get() {
this.currentIndex ++
if(this.currentIndex == 4){
this.currentIndex = 0
}
}
}
}
</script>
<style scoped lang="scss">
.tab-swiper{
width: 318px;
display: flex;
border-bottom: 1px solid rgba(190,190,190,1);
justify-content: space-between;
}
.tab-swiper>li{
width: 64px;
height: 100px;
padding-top: 76px;
cursor: pointer;
&:nth-of-type(1){
background: url("../../../assets/images/solution/nav.png") no-repeat;
background-size: 64px 64px;
&.active{
background: url("../../../assets/images/solution/navactive.png") no-repeat;
background-size: 64px 64px;
color: #1251B8;
}
}
&:nth-of-type(2){
background: url("../../../assets/images/solution/pay.png") no-repeat;
background-size: 64px 64px;
&.active{
background: url("../../../assets/images/solution/payactive.png") no-repeat;
background-size: 64px 64px;
color: #1251B8;
}
}
&:nth-of-type(3){
background: url("../../../assets/images/solution/share.png") no-repeat;
background-size: 64px 64px;
&.active{
background: url("../../../assets/images/solution/shareactive.png") no-repeat;
background-size: 64px 64px;
color: #1251B8;
}
}
&:nth-of-type(4){
background: url("../../../assets/images/solution/service.png") no-repeat;
background-size: 64px 64px;
&.active{
background: url("../../../assets/images/solution/serviceactive.png") no-repeat;
background-size: 64px 64px;
color: #1251B8;
}
}
}
.tab-swiper>li:nth-of-type(1).active{
}
.tab-swiper>li:nth-of-type(2).active{
color: #1251B8;
}
.tab-swiper>li:nth-of-type(3).active{
color: #1251B8;
}
.tab-swiper>li:nth-of-type(4).active{
color: #1251B8;
}
.tabCon{
width:318px ;
height: 140px;
overflow: hidden;
}
.tabCon li{
float: left;
div:nth-of-type(1){
font-size: 18px;
padding: 45px 0 16px;
}
}
.slide-left-enter-active{
transition: all .3s ease-in-out;
}
.slide-left-leave-active{
transition: all .3s ease-in-out;
}
.slide-left-enter {
transform: translateX(500px);
opacity: 0;
}
.slide-left-leave-to{
transform: translateX(-500px);
opacity: 0;
}
.img-wrapper{
width: 208px;
height: 391px;
overflow: hidden;
}
.img-wrapper li{
img{
width: 100%;
height: 100%;
}
}
</style>