...
|
...
|
@@ -2,7 +2,7 @@ |
|
|
<div class="address-select-component">
|
|
|
<div class="address-select-box">
|
|
|
<div class="component-title">
|
|
|
<span class="title">所在地区</span>
|
|
|
<span class="title">选择地区</span>
|
|
|
<span class="icon-close close" @click="closeAddBox"></span>
|
|
|
</div>
|
|
|
|
...
|
...
|
@@ -35,6 +35,7 @@ |
|
|
<li
|
|
|
v-for="(pprovince, index) in provinces"
|
|
|
:key="index"
|
|
|
:class="{active: pprovince.id === province.id}"
|
|
|
@click="switchAddress(pprovince.id, pprovince.caption)"
|
|
|
>
|
|
|
{{pprovince.caption}}
|
...
|
...
|
@@ -45,6 +46,7 @@ |
|
|
<li
|
|
|
v-for="(pcity, index) in citys"
|
|
|
:key="index"
|
|
|
:class="{active: pcity.id === city.id}"
|
|
|
@click="switchAddress(pcity.id, pcity.caption)"
|
|
|
>
|
|
|
{{pcity.caption}}
|
...
|
...
|
@@ -55,6 +57,7 @@ |
|
|
<li
|
|
|
v-for="(parea, index) in areas"
|
|
|
:key="index"
|
|
|
:class="{active: parea.id === area.id}"
|
|
|
@click="switchAddress(parea.id, parea.caption)"
|
|
|
>
|
|
|
{{parea.caption}}
|
...
|
...
|
@@ -65,6 +68,7 @@ |
|
|
<li
|
|
|
v-for="(pstreet, index) in streets"
|
|
|
:key="index"
|
|
|
:class="{active: pstreet.id === street.id}"
|
|
|
@click="switchAddress(pstreet.id, pstreet.caption)"
|
|
|
>
|
|
|
{{pstreet.caption}}
|
...
|
...
|
@@ -417,9 +421,10 @@ export default { |
|
|
|
|
|
.component-title {
|
|
|
text-align: center;
|
|
|
line-height: 80px;
|
|
|
font-size: 32px;
|
|
|
color: #ccc;
|
|
|
line-height: 88px;
|
|
|
font-size: 34px;
|
|
|
font-weight: bold;
|
|
|
color: #000;
|
|
|
padding: 0 30px;
|
|
|
|
|
|
.close {
|
...
|
...
|
@@ -429,26 +434,26 @@ export default { |
|
|
.icon-close {
|
|
|
height: 40px;
|
|
|
width: 40px;
|
|
|
margin-top: 20px;
|
|
|
margin-top: 24px;
|
|
|
background: url("~statics/image/address/close.png");
|
|
|
background-size: cover;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.head-address-ul {
|
|
|
margin: 0 0 0 30px;
|
|
|
padding: 0;
|
|
|
margin: 0 0 0 30px;
|
|
|
list-style: none;
|
|
|
overflow: hidden;
|
|
|
background-color: white;
|
|
|
font-size: 24px;
|
|
|
color: #444;
|
|
|
font-size: 28px;
|
|
|
color: #999;
|
|
|
|
|
|
li {
|
|
|
display: block;
|
|
|
float: left;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
height: 60px;
|
|
|
font-size: 28px;
|
|
|
line-height: 60px;
|
|
|
position: relative;
|
|
|
margin-right: 70px;
|
|
|
}
|
...
|
...
|
@@ -458,13 +463,12 @@ export default { |
|
|
}
|
|
|
|
|
|
.head-address-li {
|
|
|
color: #f23030;
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
.head-address-li:after {
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
border-bottom: 2px solid #f23030;
|
|
|
border-bottom: 4px solid #000;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
...
|
...
|
@@ -472,24 +476,12 @@ export default { |
|
|
}
|
|
|
}
|
|
|
|
|
|
.head-address-ul:after {
|
|
|
content: "";
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
position: absolute;
|
|
|
border-bottom: 1px solid #e3e5e9;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
transform: scaleY(0.5);
|
|
|
-webkit-transform: scaleY(0.5);
|
|
|
}
|
|
|
|
|
|
.address-container {
|
|
|
margin: 0;
|
|
|
overflow: hidden;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
border-top: solid 1px #ccc;
|
|
|
border-top: solid 1px #eee;
|
|
|
|
|
|
.address-content {
|
|
|
transform: translate(0, 0) translateZ(0);
|
...
|
...
|
@@ -503,8 +495,8 @@ export default { |
|
|
list-style: none;
|
|
|
height: 100%;
|
|
|
overflow: auto;
|
|
|
font-size: 24px;
|
|
|
color: #232326;
|
|
|
font-size: 28px;
|
|
|
color: #999;
|
|
|
justify-content: center;
|
|
|
|
|
|
li {
|
...
|
...
|
@@ -516,6 +508,12 @@ export default { |
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&.active {
|
|
|
font-size: 36px;
|
|
|
color: #000;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.icon-check {
|
|
|
display: inline-block;
|
|
|
margin-left: 18px;
|
...
|
...
|
@@ -526,17 +524,6 @@ export default { |
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
li:after {
|
|
|
content: "";
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
transform: scaleY(0.5);
|
|
|
-webkit-transform: scaleY(0.5);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
...
|
...
|
|