From 8ebed7f4bbdd02dc96eba3260722517d75adfe21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=9E=E4=B8=9C=E6=97=AD?= <850374051@qq.com>
Date: Mon, 28 Aug 2023 17:34:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=9F=E5=9C=B0=E7=A1=AE=E6=9D=83=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E5=9B=BE=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/contracted/village/map/map.vue | 94 ++++++++++++++++--------
 1 file changed, 64 insertions(+), 30 deletions(-)

diff --git a/src/views/contracted/village/map/map.vue b/src/views/contracted/village/map/map.vue
index 81794a5e..ffb95186 100644
--- a/src/views/contracted/village/map/map.vue
+++ b/src/views/contracted/village/map/map.vue
@@ -19,11 +19,13 @@
           <p class="legend_tt">图例
             <img src="../../../../../static/images/contracted/map_icon_01.png" alt="">
           </p>
-          <div><i></i><p>承包地</p></div>
-          <div><i></i><p>自留地</p></div>
-          <div><i></i><p>机动地</p></div>
-          <div><i></i><p>开荒地</p></div>
-          <div><i></i><p>其他地</p></div>
+          <van-checkbox-group v-model="result">
+            <van-checkbox name="a" shape="square" checked-color="#16e90f"><div><p>承包地</p><i class="i1"></i></div></van-checkbox>
+            <van-checkbox name="b" shape="square" checked-color="#01c6de"><div><p>自留地</p><i class="i2"></i></div></van-checkbox>
+            <van-checkbox name="c" shape="square" checked-color="#eeee00"><div><p>机动地</p><i class="i3"></i></div></van-checkbox>
+            <van-checkbox name="d" shape="square" checked-color="#ee3c3c"><div><p>开荒地</p><i class="i4"></i></div></van-checkbox>
+            <van-checkbox name="e" shape="square" checked-color="#eb8600"><div><p>其他地</p><i class="i5"></i></div></van-checkbox>
+          </van-checkbox-group>
         </div>
         <div class="legend_second" v-if="taskStatus === '2'">
           <p class="legend_tt" id="drawLandPolygon">
@@ -180,6 +182,7 @@
     name: "contractedVillageContractor",
     data() {
       return {
+        result: [],
         form: {},                         // 地块信息表单参数
         map: "",                          // 地图
         mapGeoServerUrl: "",              // geoserver地址
@@ -671,37 +674,68 @@
     background: rgba(255,255,255,.5);
     padding: 2vh;
     border-radius: 10PX;
-    div{
-      display: flex;
-      align-items: center;
+    .van-checkbox{
       margin-top: 2vh;
-      i{
-        display: block;
-        width: 15PX;
-        height: 15PX;
-        border: 1px solid;
-        border-radius: 3PX;
-        margin-right: 10PX;
+      &:nth-child(1){
+        /deep/ .van-checkbox__icon .van-icon{
+          border-color: rgba(22,233,15,1);
+        }
       }
-      &:nth-child(2) i{
-        background: rgba(22,233,15,.7);
-        border-color: rgba(22,233,15,1);
+      &:nth-child(2){
+        /deep/ .van-checkbox__icon .van-icon{
+          border-color: rgba(1,198,222,1);
+        }
       }
-      &:nth-child(3) i{
-        background: rgba(1,198,222,.7);
-        border-color: rgba(1,198,222,1);
+      &:nth-child(3){
+        /deep/ .van-checkbox__icon .van-icon{
+          border-color: rgba(238,238,0,1);
+        }
       }
-      &:nth-child(4) i{
-        background: rgba(238,238,0,.7);
-        border-color: rgba(238,238,0,1);
+      &:nth-child(4){
+        /deep/ .van-checkbox__icon .van-icon{
+          border-color: rgba(238,60,60,1);
+        }
       }
-      &:nth-child(5) i{
-        background: rgba(238,60,60,.7);
-        border-color: rgba(238,60,60,1);
+      &:nth-child(5){
+        /deep/ .van-checkbox__icon .van-icon{
+          border-color: rgba(235,134,0,1);
+        }
       }
-      &:nth-child(6) i{
-        background: rgba(235,134,0,.7);
-        border-color: rgba(235,134,0,1);
+    }
+    .van-checkbox-group {
+      .van-checkbox__label{
+        i{
+          display: block;
+          width: 15PX;
+          height: 15PX;
+          border: 1px solid;
+          border-radius: 3PX;
+          margin-left: 10PX;
+        }
+        .i1{
+          background: rgba(22,233,15,.7);
+          border-color: rgba(22,233,15,1);
+        }
+        .i2{
+          background: rgba(1,198,222,.7);
+          border-color: rgba(1,198,222,1);
+        }
+        .i3{
+          background: rgba(238,238,0,.7);
+          border-color: rgba(238,238,0,1);
+        }
+        .i4{
+          background: rgba(238,60,60,.7);
+          border-color: rgba(238,60,60,1);
+        }
+        .i5{
+          background: rgba(235,134,0,.7);
+          border-color: rgba(235,134,0,1);
+        }
+        div{
+          display: flex;
+          align-items: center;
+        }
       }
     }
   }