myCars.vue
3.01 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
<template>
<div>
<ul class="carsList">
<li>
<div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
<p >
蒙D12345 <span class="carColor"></span>
</p>
<p class=" check-status">
审核中
</p>
<!--<p class=" pass-status">-->
<!--已认证-->
<!--</p>-->
</div>
<div style="display: flex;justify-content: space-between">
<p>
汽油车
</p>
<p style="color: blue" @click="deleteShowHandle">
解绑车辆
</p>
<!--<p class=" pass-status">-->
<!--已认证-->
<!--</p>-->
</div>
<p class="top-border">
您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务
</p>
<!--<p class="top-border">-->
<!--您已经提交审核申请,请耐心等待-->
<!--</p>-->
<!--<p class="top-border">-->
<!--您可以查看历史停车记录了-->
<!--</p>-->
</li>
<li></li>
<li></li>
</ul>
<div style="padding: 20px 15px">
<x-button type="primary">立即添加</x-button>
</div>
<div class="tipWrap">
<span>温馨提示:</span>
<p>
1、车辆绑定后请提交行驶证进行真实性验证,48小时内反馈审核结果,如自行解绑车牌后,再次重新绑定，需重新审核认证。
</p>
<p>
2、未认证车牌只支持当前停车费和历史欠费记录。
</p>
<p>
3、认证车牌支持查看历史停车记录。
</p>
</div>
<div v-transfer-dom>
<confirm v-model="deleteShow"
:title="提示"
@on-cancel="onCancel"
@on-confirm="onConfirm"
@on-show="onShow"
@on-hide="onHide">
<p style="text-align:center;">是否删除该车辆</p>
</confirm>
</div>
</div>
</template>
<script>
export default {
name: "myCars",
data(){
return {
deleteShow: false
}
},
methods:{
deleteShowHandle(){
this.deleteShow = true
}
}
};
</script>
<style scoped lang="scss">
.carsList {
padding: 0 15px;
font-size: 12px;
> li {
/*height:100px;*/
margin-top: 15px;
padding: 10px;
border-radius: 10px;
box-shadow: 0 1px 3px #ddd;
}
}
.carColor{
width: 28px;
height: 17px;
display: inline-block;
background: url("../../assets/images/myCars/black.png");
background-size: 100% 100%;
vertical-align: middle;
}
.check-status {
padding: 1px 8px;
border: 1px solid #ffbe00;
border-radius: 15px;
color: #ffbe00;
}
.pass-status {
padding: 2px 8px;
border: 1px solid blue;
border-radius: 15px;
color: blue;
}
.top-border {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #ddd;
}
.tipWrap{
padding: 0 15px;
p{
text-indent: 15px;
}
}
</style>