<template>
|
<div class="foot-select flex">
|
<div class="desc" @click="show = !show">区域选择</div>
|
<div class="img-triangle" @click="show = !show"></div>
|
<div class="select-areas" v-if="show">
|
<div class="select-area" :class="[item.areaCode == activecode ? 'active' : '']" v-for="(item, index) in areas" :key="index"
|
@click="selectArea(item.areaCode)">
|
{{ item.areaCode }}区
|
</div>
|
<div class="img-area-select-close" @click="show = !show"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getAreaList } from "@/api/area";
|
|
export default {
|
methods: {
|
selectArea(code) {
|
this.show = false;
|
this.$router.push({ path: '/area', query: { code: code } })
|
|
},
|
},
|
async mounted() {
|
const data = await getAreaList();
|
console.log("data", data);
|
this.areas = (data && data.switchAreaInfo) || [];
|
},
|
computed: {
|
activecode() {
|
// console.log('activecode',this.$route)
|
return this.$route.query.code || ''
|
}
|
},
|
data() {
|
return {
|
show: false,
|
areas: [],
|
// areas:[
|
// {name:'1'},
|
// {name:'1'},
|
// {name:'1'},
|
// {name:'1'},
|
// {name:'1'},
|
// {name:'1'},
|
// {name:'1'},
|
// {name:'1'},
|
// {name:'1'},
|
// ]
|
};
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.foot-select {
|
background-image: url("../assets/area/area_select.png");
|
background-size: 100% 100%;
|
width: 104.1rem;
|
height: 6.6rem;
|
position: fixed;
|
bottom: 1rem;
|
/* bottom: -2.5rem; */
|
/* position: absolute; */
|
left: 50%;
|
transform: translate(-50%, 0%);
|
|
.desc {
|
font-size: 2.8rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 6.6rem;
|
margin-left: auto;
|
margin-right: 1rem;
|
cursor: pointer;
|
}
|
|
.img-triangle {
|
margin-right: auto;
|
margin-left: 1rem;
|
background-image: url("../assets/area/area_select_triangle.png");
|
height: 1.8rem;
|
width: 1.8rem;
|
background-size: 100% 100%;
|
margin-top: calc((6.6rem - 1.8rem) / 2);
|
cursor: pointer;
|
}
|
|
.select-areas {
|
position: absolute;
|
width: 70.7rem;
|
height: 15rem;
|
background: rgba(190, 223, 255, 0.93);
|
padding: 1rem;
|
padding-left: 2rem;
|
padding-right: 2rem;
|
display: flex;
|
flex-wrap: wrap;
|
top: -18rem;
|
left: 50%;
|
transform: translate(-50%, 0%);
|
|
.select-area {
|
width: 7.7rem;
|
height: 2.8rem;
|
box-shadow: 0rem 0.3rem 1.9rem 0rem #61a8fc;
|
border-radius: 0.4rem;
|
border: 0.14rem solid #278afa;
|
line-height: 2.8rem;
|
margin: 1rem;
|
font-size: 1.6rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #278afa;
|
cursor: pointer;
|
}
|
|
.select-area.hight,
|
.select-area:hover,
|
.select-area.active {
|
background: #278afa;
|
box-shadow: 0rem 0.3rem 1.9rem 0rem #61a8fc;
|
border-radius: 0.4rem;
|
font-size: 1.6rem;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
|
.img-area-select-close {
|
position: absolute;
|
background-image: url("../assets/area/area_select_close.png");
|
height: 1.6rem;
|
width: 1.6rem;
|
right: 1rem;
|
background-size: 100% 100%;
|
z-index: 2;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
