Merge branch 'master' of http://116.255.223.226:3000/zhangzl/nsgk_mobile

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地址
@@ -674,37 +677,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;
+        }
       }
     }
   }