0e3a2706
 liuqimichale
地图 title
|
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
|
<template>
<div>
<ul class="title-wrap">
<li>
<img src="../assets/img/parkingtotal.svg">
<div>
<p>{{parkingtotal|formatNum}}</p>
<p>停车场总数</p>
</div>
</li>
<li>
<img src="../assets/img/membertotal.svg">
<div>
<p>{{membertotal|formatNum}}</p>
<p>会员总数</p>
</div>
</li>
<li>
<img src="../assets/img/incometotal.svg">
<div>
<p>{{incometotal|formatNum}}</p>
<p>今日收入总数</p>
</div>
</li>
<li>
<img src="../assets/img/ordertotal.svg">
<div>
<p>{{ordertotal|formatNum}}</p>
<p>今日订单数</p>
</div>
</li>
</ul>
|
|
bfcfca75
liuqimichale
办事处
|
33
34
35
36
37
38
39
40
41
|
<ul class="type-wrap">
<li>紧张</li>
<li>正常</li>
<li>空闲</li>
</ul>
<ul class="park-wrap">
<li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li>
</ul>
<div class="flexfm" ></div>
|
|
0e3a2706
liuqimichale
地图 title
|
42
43
44
45
46
47
48
49
50
51
52
|
</div>
</template>
<script>
export default {
name: 'mapsection',
data() {
return {
parkingtotal: '7338',
membertotal: '738',
incometotal: '1156738',
|
|
bfcfca75
liuqimichale
办事处
|
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
|
ordertotal: '6738',
parkList: [
{name:'西局街道办事处12321312312312',id:'1'},
{name:'西局街道办事处',id:'2'},
{name:'西局街道办事处',id:'3'},
{name:'西局街道办事处',id:'4'},
{name:'西局街道办事处',id:'5'},
{name:'西局街道办事处',id:'6'},
{name:'西局街道办事处',id:'7'},
{name:'西局街道办事处',id:'8'},
{name:'西局街道办事处',id:'9'},
{name:'西局街道办事处',id:'10'},
{name:'西局街道办事处',id:'11'},
{name:'西局街道办事处',id:'12'},
],
currentIndex:0
}
},
created() {
},
methods: {
currentPark(item, index) {
console.log(item)
this.currentIndex = index
|
|
0e3a2706
liuqimichale
地图 title
|
79
80
81
82
83
84
85
86
87
88
|
}
}
}
</script>
<style lang="scss" scoped>
.title-wrap{
display: flex;
padding-top: 17px;
padding-bottom: 18px;
|
|
bfcfca75
liuqimichale
办事处
|
89
|
background:rgba(0,45,140,.6);
|
|
0e3a2706
liuqimichale
地图 title
|
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
|
li{
flex: 1;
height: 45px;
text-align: center;
overflow: hidden;
font-size: 0;
img{
display: inline-block;
width: 45px;
height: 45px;
margin-right: 14px;
}
div{
display: inline-block;
vertical-align: top;
text-align: left;
max-width: 100px;
overflow: hidden;
p{
&:nth-of-type(1){
font-size:24px;
font-weight:500;
color:rgba(255,255,255,1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:nth-of-type(2){
font-size:14px;
font-weight:bold;
color:rgba(0,207,254,.7);
margin-top: 7px;
}
}
}
}
}
|
|
bfcfca75
liuqimichale
办事处
|
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
|
.type-wrap{
padding-left: 10px;
position: absolute;
left: 11px;
bottom: 11px;
background-color: rgba(10,52,140,.8);
li{
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
padding-left: 12px;
font-size: 12px;
color:rgba(255,255,255,.7);
background-repeat: no-repeat;
background-position: 0 center;
&:nth-of-type(1){
background-image: url("../assets/img/busy-type.png");
}
&:nth-of-type(2){
background-image: url("../assets/img/nomal-type.png");
}
&:nth-of-type(3){
background-image: url("../assets/img/idle-type.png");
}
}
}
.park-wrap{
width: 120px;
|
|
120cce1d
liuqimichale
办事处
|
156
|
max-height: 124px;
|
|
bfcfca75
liuqimichale
办事处
|
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
position: absolute;
right: 11px;
bottom: 11px;
background-color: #0D3689;
font-size: 12px;
overflow-y: auto;
li{
padding-left: 26px;
height: 20px;
line-height: 20px;
color:rgba(255,255,255,.7);
background-image:url("../assets/img/office-icon.png");
background-repeat: no-repeat;
background-position: 9px center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.current-active{
color:rgba(255,255,255,1);
background-image:url("../assets/img/officeactive-icon.png");
}
}
|
|
0e3a2706
liuqimichale
地图 title
|
181
|
</style>
|
