add
This commit is contained in:
parent
b681fc0a82
commit
864fd4fe88
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="area-list">
|
||||
<div v-for="(item, index) in options" :key="index" :class="{ act: actIndex == index }" @click="handChose(index)"> {{
|
||||
item.label }} </div>
|
||||
</div>
|
||||
<div class="town-list">
|
||||
<div class="town-list-li" v-for="(item,index) in townLists" :key="index">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { apigetTownLists } from "@/api.js"
|
||||
// 镇列表
|
||||
const options = reactive([
|
||||
{
|
||||
value: '510502',
|
||||
label: '江阳区',
|
||||
},
|
||||
{
|
||||
value: '510503',
|
||||
label: '纳溪区',
|
||||
},
|
||||
{
|
||||
value: '510504',
|
||||
label: '龙马潭区',
|
||||
},
|
||||
{
|
||||
value: '510521',
|
||||
label: '泸县',
|
||||
},
|
||||
{
|
||||
value: '510522',
|
||||
label: '合江县 ',
|
||||
},
|
||||
{
|
||||
value: '510524',
|
||||
label: '叙永县 ',
|
||||
}, {
|
||||
value: '510525',
|
||||
label: '古蔺县 ',
|
||||
},
|
||||
])
|
||||
const actIndex = ref(0)
|
||||
const townLists = ref([])
|
||||
|
||||
// 选择区/县
|
||||
const handChose = (index) => {
|
||||
actIndex.value = index
|
||||
getTownListsFn(options[index].value)
|
||||
}
|
||||
|
||||
const getTownListsFn = async (area_code = 510502) => {
|
||||
let res = await apigetTownLists({ area_code })
|
||||
townLists.value = res.data
|
||||
}
|
||||
|
||||
getTownListsFn()
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 998.3px;
|
||||
height: 445.74px;
|
||||
background-image: url('/static/img/area/bg.png');
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
padding: 17px 20px;
|
||||
|
||||
.area-list {
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
color: #9AADC4;
|
||||
font-family: FZCYJ;
|
||||
cursor: pointer;
|
||||
padding:0 80px;
|
||||
|
||||
}
|
||||
|
||||
.act {
|
||||
font-size: 28px;
|
||||
color: white;
|
||||
transition: 0.4s;
|
||||
|
||||
}
|
||||
|
||||
.town-list {
|
||||
height: 290px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 40px;
|
||||
padding: 0 50px;
|
||||
.town-list-li{
|
||||
font-size: 18px;
|
||||
color: #E4EFF5;
|
||||
background-image: url('/static/img/area/townbg.png');
|
||||
height: 46.52px;
|
||||
background-size: 100% 100%;
|
||||
width: 270px;
|
||||
text-align: center;
|
||||
line-height: 46.52px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.town-list::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
.town-list::-webkit-scrollbar-track {
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #084D89;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="text-align: center;">伤感情</div>
|
||||
<!-- <div style="text-align: center;">伤感情</div>
|
||||
<el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
|
@ -12,7 +12,21 @@
|
|||
<button @click="sendFn('backHome', { name: '泸县' }), townCode = ''">返回首页</button>
|
||||
<button @click="sendFn('detail', { name: item.title,id:item.id })" v-for="item in landList"> {{ item.title }}</button>
|
||||
|
||||
<p>地块</p>
|
||||
<p>地块</p> -->
|
||||
<div class="content">
|
||||
<div class="hexagon"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="area" @click="flag = !flag">
|
||||
<div class="area-top">
|
||||
<div class="town">江陽區</div>
|
||||
<div class="town">江陽區</div>
|
||||
</div>
|
||||
<div class="area-bottom"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup scoped>
|
||||
import { ref, reactive } from "vue"
|
||||
|
|
@ -113,8 +127,70 @@ const sendFn = (event, data = '') => {
|
|||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
button {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
.content{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// background-color: white;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
width: 100px;
|
||||
height: 55px;
|
||||
background-color: #f00;
|
||||
position: relative;
|
||||
margin: 50px;
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
.hexagon:before,
|
||||
.hexagon:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.hexagon:before {
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
.hexagon:after {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
|
||||
|
||||
.area {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 558px;
|
||||
|
||||
.area-top {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.town {
|
||||
background-image: url('/static/img/tradeScreen/areaA.png');
|
||||
background-size: 100% 100%;
|
||||
width: 160.12px;
|
||||
height: 30.94px;
|
||||
text-align: center;
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area-bottom {
|
||||
background-image: url('/static/img/tradeScreen/areaB.png');
|
||||
width: 558px;
|
||||
height: 57px;
|
||||
background-size: 100% 100%;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +1,24 @@
|
|||
<template>
|
||||
<div style="height: 100vh;">
|
||||
<div class="menu">
|
||||
<!-- <img src="/static/img/tradeScreen/SY.png" alt=""> -->
|
||||
<!-- <img src="" alt=""> -->
|
||||
<!-- <el-image style="width: 10px; height: 10px" src="/static/img/tradeScreen/SY.png" :fit="fit" /> -->
|
||||
<div class="menu" v-if="flag">
|
||||
<div class="menu-li sy"></div>
|
||||
<div class="menu-li sc"></div>
|
||||
<div class="menu-li sc"></div>
|
||||
<div class="menu-li sc"></div>
|
||||
<div class="menu-li sc"></div>
|
||||
</div>
|
||||
<div class="area">
|
||||
<!-- <span>江陽區</span>
|
||||
<span>那成接納</span> -->
|
||||
<div v-if="!flag">
|
||||
<areaChose></areaChose>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="area" @click="flag=!flag">
|
||||
<div class="area-top">
|
||||
<div class="town">江陽區</div>
|
||||
<div class="town">江陽區</div>
|
||||
</div>
|
||||
<div class="area-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -46,6 +45,7 @@
|
|||
import { ref, reactive } from "vue"
|
||||
import { sendMsg } from "@/api.js"
|
||||
import axios from "axios"
|
||||
import areaChose from "@/view/components/areaChose.vue"
|
||||
|
||||
const options = [
|
||||
{
|
||||
|
|
@ -77,11 +77,16 @@ const options = [
|
|||
},
|
||||
]
|
||||
|
||||
const toArea=()=>{
|
||||
|
||||
}
|
||||
|
||||
|
||||
const townOptions = []
|
||||
|
||||
const areaCode = ref('510521')
|
||||
const townCode = ref("")
|
||||
|
||||
const flag=ref(true)
|
||||
|
||||
|
||||
const changeArea = (e) => {
|
||||
|
|
@ -134,7 +139,7 @@ const sendFn = (event, data = '') => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -162,9 +167,11 @@ const sendFn = (event, data = '') => {
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 558px;
|
||||
|
||||
.area-top {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.town {
|
||||
background-image: url('/static/img/tradeScreen/areaA.png');
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -185,4 +192,6 @@ const sendFn = (event, data = '') => {
|
|||
background-size: 100% 100%;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue