From 864fd4fe8886307f723b20c31355257f3e397bef Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Thu, 22 Feb 2024 23:01:05 +0800
Subject: [PATCH] add

---
 src/view/components/areaChose.vue | 131 ++++++++++++++++++++++++++++++
 src/view/plantScreen/index.vue    |  90 ++++++++++++++++++--
 src/view/tradeScreen/index.vue    |  39 +++++----
 3 files changed, 238 insertions(+), 22 deletions(-)

diff --git a/src/view/components/areaChose.vue b/src/view/components/areaChose.vue
index e69de29..940a71b 100644
--- a/src/view/components/areaChose.vue
+++ b/src/view/components/areaChose.vue
@@ -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>
\ No newline at end of file
diff --git a/src/view/plantScreen/index.vue b/src/view/plantScreen/index.vue
index c268f01..b35124b 100644
--- a/src/view/plantScreen/index.vue
+++ b/src/view/plantScreen/index.vue
@@ -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"
@@ -92,13 +106,13 @@ const getTownList = () => {
         })
 }
 
-const landList=ref([])
+const landList = ref([])
 const getLandList = async () => {
     let res = await landListApi({
         areaCode: areaCode.value,
         streetCode: townCode.value
     })
-    landList.value=res.data.list
+    landList.value = res.data.list
 
 
 
@@ -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>
\ No newline at end of file
diff --git a/src/view/tradeScreen/index.vue b/src/view/tradeScreen/index.vue
index 9116e4b..8bbd4cf 100644
--- a/src/view/tradeScreen/index.vue
+++ b/src/view/tradeScreen/index.vue
@@ -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-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 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 v-if="!flag">
+                <areaChose></areaChose>
+            </div>
         </div>
-        <div class="area">
-            <!-- <span>江陽區</span>
-            <span>那成接納</span> -->
+
+        <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>
\ No newline at end of file