101 lines
1.5 KiB
Vue
101 lines
1.5 KiB
Vue
|
<script setup>
|
||
|
|
import { defineProps, defineEmits, ref } from "vue"
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
const router = useRouter()
|
||
|
|
const emit = defineEmits(['offAreaList'])
|
||
|
|
const props = defineProps({
|
||
|
|
choseArea: Boolean,
|
||
|
|
})
|
||
|
|
|
||
|
|
const list = ref([
|
||
|
|
{
|
||
|
|
name: '泸县'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '江阳'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '龙马潭'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '通滩'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '纳溪'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '合面'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '叙永'
|
||
|
|
},
|
||
|
|
])
|
||
|
|
|
||
|
|
// 选镇
|
||
|
|
const choseTownFn = (item) => {
|
||
|
|
emit('offAreaList', item);
|
||
|
|
props.choseArea = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<transition name="fade">
|
||
|
|
<div class="address" v-if="props.choseArea">
|
||
|
|
<div
|
||
|
|
class="address-li"
|
||
|
|
@click="choseTownFn(item)"
|
||
|
|
v-for="(item, index) in list"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
{{ item.name }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.address {
|
||
|
|
left: 1vw;
|
||
|
|
top: 18px;
|
||
|
|
position: absolute;
|
||
|
|
width: 10vw;
|
||
|
|
height: 18vh;
|
||
|
|
background-color: #001e32;
|
||
|
|
color: #c7dbe3;
|
||
|
|
z-index: 9999;
|
||
|
|
overflow-y: auto;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 5px;
|
||
|
|
|
||
|
|
.address-li {
|
||
|
|
padding: 2px 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
border-bottom: 0.1px solid #0e293c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.address::-webkit-scrollbar {
|
||
|
|
width: 10px;
|
||
|
|
background-color: #153041;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address::-webkit-scrollbar-track {
|
||
|
|
background-color: #153041;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background-color: #4ab9d0;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-enter-active,
|
||
|
|
.fade-leave-active {
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
}
|
||
|
|
.fade-enter,
|
||
|
|
.fade-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
</style>
|