62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<Transition>
|
||
|
|
<div class="address" v-if="props.choseArea">
|
||
|
|
<div class="address-li" @click="choseTownFn(1)" v-for="( item, index ) in 10 ">泸县</div>
|
||
|
|
</div>
|
||
|
|
</Transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineProps, defineEmits } from "vue"
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
const router = useRouter()
|
||
|
|
const emit = defineEmits(['offAreaList'])
|
||
|
|
const props = defineProps({
|
||
|
|
choseArea: Boolean,
|
||
|
|
})
|
||
|
|
|
||
|
|
// 选额镇
|
||
|
|
const choseTownFn = (id) => {
|
||
|
|
props.choseArea = false
|
||
|
|
emit('offAreaList')
|
||
|
|
router.replace('/townDetail?id=' + id)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.address {
|
||
|
|
left: 1vw;
|
||
|
|
top: 18px;
|
||
|
|
position: absolute;
|
||
|
|
width: 8vw;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
</style>
|