park.vue
3.84 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
<template>
<div>
<div class="banner">
<h1>一键导航 轻松停车</h1>
<h2>One-click navigation for easy parkin</h2>
<div style="width: 1200px;margin: 0 auto;text-align: left">
<img src="../assets/park/code.png" alt="">
</div>
</div>
<div class="section">
<h1>“黄石停车”APP</h1>
<h4>“黄石停车”停车APP融合智能交通、移动互联网、物联网以及电子支付等技术，针对城市“停车难”，帮助车主快速寻找停车位，大大提高停车效率</h4>
<ul class="section-con">
<li>
<img src="../assets/park/nav1.png" alt="">
</li>
<li>
<img src="../assets/park/nav2.png" alt="">
</li>
<li>
<p style="padding: 100px 0 20px">停车一键导航</p>
<ul class="section-list">
<li>目的地附近停车场推荐</li>
<li>快速一键导航停车场</li>
<li>最佳停车路径规划</li>
</ul>
</li>
</ul>
</div>
<div class="section" style="background: #F8F8F8">
<ul class="section-con">
<li>
<p style="padding: 100px 0 20px">在线缴费快速出场</p>
<ul class="section-list">
<li>支持微信、支付宝</li>
<li>多种在线支付方式</li>
<li>提前支付，快速离场</li>
<li>减少通道排队时间</li>
</ul>
</li>
<li>
<img src="../assets/park/pay1.png" alt="">
</li>
<li>
<img src="../assets/park/pay2.png" alt="">
</li>
</ul>
</div>
<div class="section">
<ul class="section-con" style="width: 800px">
<li>
<img src="../assets/park/service1.png" alt="">
</li>
<li>
<img src="../assets/park/service2.png" alt="">
</li>
<li>
<p style="padding: 100px 0 20px">我的服务</p>
<ul class="section-list">
<li>为用户直接提供周边第三方服务入口 </li>
<li>方便用户出行以及获得更多相关服务</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'park'
}
</script>
<style scoped lang="scss">
.banner {
background: url("../assets/park/banner.png") no-repeat;
background-size: 100% 100%;
h1{
width: 1200px;
text-align: left;
padding: 100px 0 30px;
margin: 0 auto;
font-size:65px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(73,73,73,1);
}
h2{
width: 1200px;
text-align: left;
margin: 0 auto 30px;
font-size:18px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(73,73,73,1);
line-height:25px;
letter-spacing:4px;
}
}
.section {
padding: 30px 0;
text-align: center;
h1 {
padding: 0 0 30px 0;
font-size: 38px;
font-weight: 600;
color: rgba(49, 70, 89, 1);
}
h4 {
width: 660px;
margin: 0 auto 30px;
font-size: 16px;
font-weight: 300;
color: rgba(49, 70, 89, 1);
line-height: 32px;
}
}
.section-con {
width: 730px;
margin: 0 auto;
overflow: hidden;
> li {
float: left;
margin-right: 90px;
text-align: left;
&:last-of-type {
margin-right: 0;
}
p {
font-size: 20px;
color: rgba(13, 26, 38, 1);
}
}
}
.section-list {
li {
margin-bottom: 10px;
color: #314659;
position: relative;
padding-left: 15px;
&:before {
content: '';
position: absolute;
width: 6px;
height: 6px;
left: 0;
top: 3px;
border-radius: 50%;
background: rgba(255, 86, 86, 1);
}
}
}
</style>