From f9d469cefbd1cfa7ba8c92d591a18a38e1a682f6 Mon Sep 17 00:00:00 2001
From: hbao <ao@dubbo,vip>
Date: Fri, 18 Feb 2022 19:06:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/homesteadSurvey/list.vue | 686 +++++++++++++++++++++++++++--
 1 file changed, 656 insertions(+), 30 deletions(-)

diff --git a/src/views/homesteadSurvey/list.vue b/src/views/homesteadSurvey/list.vue
index a67cc7c5..6e26e0fc 100644
--- a/src/views/homesteadSurvey/list.vue
+++ b/src/views/homesteadSurvey/list.vue
@@ -368,6 +368,53 @@
     </div>
     <div v-if="activeBtn==4">
         <div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
+      <!--图层-->
+      <div class="rightZoom_wrap">
+        <div class="amplification" @click="selectionPushMap">图层</div>
+      </div>
+      <!--放大缩小-->
+      <div class="mapZoom_wrap">
+        <div class="qtMap" @click="">全图</div>
+        <div class="clMap" @click="">测量</div>
+        <div class="hcMap" @click="">核查</div>
+        <div class="htMap" @click="" id="htMapAll">绘图</div>
+        <div class="dwMap" @click="" id="dwMapAll">定位</div>
+      </div>
+
+      <!--列表拉取详情-->
+      <div class="homesteadList_wrap" v-show="homesteadListStatus">
+        <div class="main_m">
+          <div class="title_m">
+            <div class="more_icon" @click="homesteadListShrink"></div>
+            <div class="name">筛选列表</div>
+          </div>
+          <div class="noInfo_data">
+            <div class="checkbox">
+              <!-- 全选与不全选模块 -->
+              <div class="thead-checkbox" @click="checkClick">
+                <input type="checkbox" class="checkall">全选
+              </div>
+              <!-- 小复选框选 -->
+              <div class="item-list-checkbox">
+                <div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>
+                <div class="item-checkbox"  @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>
+                <div class="item-checkbox"  @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+<!--      &lt;!&ndash;列表 定位&ndash;&gt;-->
+<!--      <div class="rightIcon_wrap">-->
+<!--        &lt;!&ndash; <div class="positioning_wrap">-->
+<!--          <div class="icon"></div>-->
+<!--        </div> &ndash;&gt;-->
+<!--        <div class="selectionIcon_wrap" @click="selectionPush">-->
+<!--          <div class="icon"></div>-->
+<!--          <div class="text">列表</div>-->
+<!--        </div>-->
+<!--      </div>-->
+      <van-overlay :show="selectionIconShow" @click="homesteadListShrink" />
     </div>
     <van-popup v-model="show1" style="height:100%;width:100%;">
       <div class="bannerBg">
@@ -800,11 +847,13 @@
 
 <script>
     import { currentLocation,} from "@/api/homestead/index";
-    import {listZjdzd} from "@/api/homesteadSurvey/zjdzd";
+    import {listZjdzd,getQueryLand} from "@/api/homesteadSurvey/zjdzd";
     import {listShyqr} from "@/api/homesteadSurvey/shyqr";
     import {listSuyqr,updateSuyqr,addSuyqr} from "@/api/homesteadSurvey/suyqr";
     import {listZrz,getZrzZjdDmList} from "@/api/homesteadSurvey/zrz";
     import {listFsss,getFsssZjdDmList} from "@/api/homesteadSurvey/fsss";
+    import { listTown, getTown } from "@/api/homesteadSurvey/town";
+    import { listVillage} from "@/api/homesteadSurvey/village";
     import $ from "jquery";
     export default {
       name: "homesteadList",
@@ -871,6 +920,14 @@
           mapFsssData:{},
           mapHaDataValue:false,
           mapHasDateStatus: 0, //0附属设施  1自然幢  2宅基地
+          selectionIconShow:false,
+          homesteadListStatus:false,
+          //地图绘制状态
+          draw: {
+            drawMapPolygon: false, //绘制地图
+          },
+          mapTownList: null,
+          mapVillageList: null,
           //地图使用 --end
         };
       },
@@ -1081,22 +1138,32 @@
         onConfirm(){},
         onSubmit(){},
         mapShow() {
-          listZjdzd().then((response) => {
+          //镇边界获取
+          listTown().then(response => {
             if (response.code == 200) {
-              this.mapTheGeomZjdId = response.rows;
-              // listZrz().then((response) => {
-              //   if (response.code == 200) {
-              //     this.mapTheGeomZrzId = response.rows;
-              //   }
-              //   listFsss().then((response) => {
-              //     if (response.code == 200) {
-              //       this.mapTheGeomFsssId = response.rows;
-              //     }
-              setTimeout(() => {
-                this.GetMapsInit();
-              }, 500);
-              //     });
-              //   });
+              this.mapTownList = response.rows;
+              //村边界获取
+              listVillage(this.queryParams).then(response => {
+                this.mapVillageList = response.rows;
+                listZjdzd().then((response) => {
+                  if (response.code == 200) {
+                    this.mapTheGeomZjdId= response.rows;
+                    listZrz().then((response) => {
+                      if (response.code == 200) {
+                        this.mapTheGeomZrzId = response.rows;
+                        listFsss().then((response) => {
+                          if (response.code == 200) {
+                            this.mapTheGeomFsssId = response.rows;
+                          }
+                          setTimeout(() => {
+                            this.GetMapsInit();
+                          }, 300);
+                        });
+                      }
+                    });
+                  }
+                });
+              });
             }
           });
         },
@@ -1144,9 +1211,135 @@
               maxZoom: 18.3, //地图放大限制
             }),
           });
-          console.log(map);
           //判断当前账套是否有数据
           var mapTalkAbout = true;
+          //获取镇界线----start
+          if(this.mapTownList.length >0){
+            for (var i = 0; this.mapTownList.length > i; i++) {
+              if (this.mapTownList[i] != null && this.mapTownList[i].theGeom != null && this.mapTownList[i].theGeom != "") {
+                mapTalkAbout =false;
+                this.mapTownList[i].createBy = 'mapTownList';
+                var theGeomLine= this.mapTownList[i].theGeom.replaceAll("MultiPolygon","LineString");
+                theGeomLine = theGeomLine.replaceAll("[[[[","[[");
+                theGeomLine = theGeomLine.replaceAll("]]]]","]]");
+                hc_land = new ol.layer.Vector({
+                  title: "add Layer",
+                  source: new ol.source.Vector({
+                    projection: projection,
+                    features: new ol.format.GeoJSON().readFeatures("{\n" +
+                      "    \"type\": \"Feature\",\n" +
+                      "    \"geometry\":" + theGeomLine + ",    \"properties\":" + JSON.stringify(this.mapTownList[i]) + "}"),
+                  }),
+                  style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                      //矢量图层填充颜色，以及透明度
+                      color: "#AE57A4",
+                    }),
+                    stroke: new ol.style.Stroke({
+                      //边界样式
+                      color: "#FF0000",
+                      width: 3,
+                    }),
+                    // text: new ol.style.Text({
+                    //   text: this.mapTownList[i].xzqmc,
+                    //   font: '30px sans-serif',
+                    //   textAlign: "center",
+                    //   textBaseline: "middle",
+                    //   //font: 'verdana',
+                    //   fill: new ol.style.Fill({
+                    //     color: "#ff0000"
+                    //   }),
+                    //   // backgroundFill: new ol.style.Fill({
+                    //   //   color: "#ff0000"
+                    //   // }),
+                    //   font: "30px sans-serif",
+                    //   stroke: new ol.style.Stroke({
+                    //     color: "#ffffff"
+                    //     // width: 3
+                    //   }),
+                    //   offsetX: parseInt(0, 10),
+                    //   offsetY: parseInt(0, 10),
+                    //   placement: "line", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
+                    //   overflow: false //超出面的部分不显示
+                    //}),
+                  }),
+                });
+                map.addLayer(hc_land);
+                //console.log(hc_land.values_.source.featuresRtree_.rbush_.data);
+                var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
+                var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
+                var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
+                var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
+                // //定位查询位置
+                var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
+                // console.log(center);
+                map.getView().animate({
+                  // 只设置需要的属性即可
+                  center: center, // 中心点
+                  zoom: 9.8, // 缩放级别
+                  rotation: undefined, // 缩放完成view视图旋转弧度
+                  duration: 1000, // 缩放持续时间，默认不需要设置
+                });
+              }
+            }
+          }
+          //获取镇界线----end
+          //获取村界线----start
+          if(this.mapVillageList.length >0){
+            for (var i = 0; this.mapVillageList.length > i; i++) {
+              if (this.mapVillageList[i] != null && this.mapVillageList[i].theGeom != null && this.mapVillageList[i].theGeom != "") {
+                mapTalkAbout =false;
+                this.mapVillageList[i].createBy = 'mapVillageList';
+                var theGeomLine= this.mapVillageList[i].theGeom.replaceAll("MultiPolygon","LineString");
+                theGeomLine = theGeomLine.replaceAll("[[[[","[[");
+                theGeomLine = theGeomLine.replaceAll("]]]]","]]");
+                hc_land = new ol.layer.Vector({
+                  title: "add Layer",
+                  source: new ol.source.Vector({
+                    projection: projection,
+                    features: new ol.format.GeoJSON().readFeatures("{\n" +
+                      "    \"type\": \"Feature\",\n" +
+                      "    \"geometry\":" + theGeomLine + ",    \"properties\":" + JSON.stringify(this.mapVillageList[i]) + "}"),
+                  }),
+                  style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                      //矢量图层填充颜色，以及透明度
+                      color: "#AE57A4",
+                    }),
+                    stroke: new ol.style.Stroke({
+                      //边界样式
+                      color: "#ff00ff",
+                      width: 3,
+                    }),
+                    // text: new ol.style.Text({
+                    //   text: this.mapVillageList[i].dcmj,
+                    //   font: '30px sans-serif',
+                    //   textAlign: "center",
+                    //   textBaseline: "middle",
+                    //   //font: 'verdana',
+                    //   fill: new ol.style.Fill({
+                    //     color: "#ff00ff"
+                    //   }),
+                    //   // backgroundFill: new ol.style.Fill({
+                    //   //   color: "#ff0000"
+                    //   // }),
+                    //   font: "30px sans-serif",
+                    //   stroke: new ol.style.Stroke({
+                    //     color: "#ffffff"
+                    //     // width: 3
+                    //   }),
+                    //   offsetX: parseInt(0, 10),
+                    //   offsetY: parseInt(0, 10),
+                    //   placement: "line", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
+                    //   overflow: false //超出面的部分不显示
+                    // }),
+                  }),
+                });
+                map.addLayer(hc_land);
+              }
+            }
+          }
+          // //获取村界线----end
           //宅基地定位开始 ---------start
           if(this.mapTheGeomZjdId.length >0) {
             for (var i = 0; this.mapTheGeomZjdId.length > i; i++) {
@@ -1257,7 +1450,6 @@
 
                 //附属设施定位开始 ---------start
                 getFsssZjdDmList(this.mapTheGeomZjdId[i].zjddm).then((response) => {
-                  console.log(response);
                   if (response.code == 200) {
                     this.mapTheGeomFsssId = response.data;
                     if(this.mapTheGeomFsssId.length >0) {
@@ -1312,6 +1504,103 @@
           }
           //宅基地定位结束 ---------end
 
+          //定位当前位置 ------start
+          $("#dwMapAll").on("click", function () {
+            var Zb;
+            var latitude;
+            var longitude;
+            var vector_drawing;
+            //开始定位当前位置
+            navigator.geolocation.getCurrentPosition(function(position) {
+              latitude = position.coords.latitude;// 获取纬度
+              longitude = position.coords.longitude;// 获取经度
+            });
+            if(latitude !=null && longitude !=null && latitude !="" && longitude !=""){
+              Zb = [longitude,latitude];
+            }else {
+              Zb =[115.452752, 31.789033];
+            }
+            //矢量标注样式设置函数，设置image为图标ol.style.Icon
+            function createLabelStyle() {
+              return new ol.style.Style({
+                image: new ol.style.Icon({
+                  //设置图标偏移
+                  anchor: [0.5, 1],
+                  //标注样式的起点位置
+                  anchorOrigin: "top-right",
+                  //X方向单位：分数
+                  anchorXUnits: "fraction",
+                  //Y方向单位：像素
+                  anchorYUnits: "pixels",
+                  //偏移起点位置的方向
+                  offsetOrigin: "top-right",
+                  //透明度
+                  opacity: 0.9,
+                  //图片路径
+                  src: require("../../assets/images/housesteadSurvey/mark.png"),
+                }),
+                text: new ol.style.Text({
+                  textAlign: "center", //位置
+                  textBaseline: "middle", //基准线
+                  font: "normal 12px 微软雅黑", //文字样式
+                  //text: "标注点", //文本内容
+                  fill: new ol.style.Fill({
+                    //文本填充样式（即文字颜色)
+                    color: "#ff0000",
+                  }),
+                }),
+                zIndex: 9999,
+              });
+            }
+            var newcenterFeature = new ol.Feature({
+              geometry: new ol.geom.Point(ol.proj.fromLonLat(Zb)), //几何信息
+              name: "标注点",
+            });
+            var sourceMapLook = new ol.source.Vector({wrapX: false});
+            vector_drawing = new ol.layer.Vector({
+              source: sourceMapLook,
+            });
+            map.addLayer(vector_drawing);
+            newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
+            sourceMapLook.addFeature(newcenterFeature);
+            map.getView().animate({
+              // 只设置需要的属性即可
+              center: ol.proj.fromLonLat(Zb), // 中心点
+              zoom: 17.8, // 缩放级别
+              rotation: undefined, // 缩放完成view视图旋转弧度
+              duration: 1000, // 缩放持续时间，默认不需要设置
+            });
+          });
+          //定位当前位置 ------end
+          var drawing;
+          var draw;
+          //开始绘制图层- -----start
+          $("#htMapAll").on("click", function () {
+            //that.closeMoule = null;
+            map.removeInteraction(draw);
+            //var source = new ol.source.Vector({wrapX: false});
+            drawing = new ol.layer.Vector({
+              source: new ol.source.Vector(),
+            });
+            map.addLayer(drawing);
+
+            function addInteraction() {
+              draw = new ol.interaction.Draw({
+                source: drawing.getSource(),
+                type: "Polygon"
+              });
+              draw.on('drawend', function (evt) {
+                var feature = evt.feature;
+                var geometry = feature.getGeometry();
+                var coordinate = geometry.getCoordinates();
+                that.closeMoule = coordinate;
+              });
+              map.addInteraction(draw);
+            }
+            addInteraction();
+          });
+          //开始绘制图层- -----end
+
           //点击查询详细信息
           map.on("singleclick", function (evt) {
             let feature = map.forEachFeatureAtPixel(
@@ -1681,34 +1970,114 @@
             });
           }
         },
+
+        /*右侧列表 --展开收缩*/
+        selectionPushMap() {
+          this.selectionIconShow = true;
+          this.homesteadListStatus = true;
+          $(".homesteadList_wrap").animate(
+            {
+              right: "0",
+            },
+            300
+          );
+        },
+        homesteadListShrink() {
+          this.selectionIconShow = false;
+          $(".homesteadList_wrap").animate(
+            {
+              right: "-300px",
+            },
+            300
+          );
+          setTimeout(() => {
+            this.homesteadListStatus = false;
+          }, 300);
+        },
+        checkClick(res){
+          // 1、全选与不全选模块
+          $(".checkall").change(function() {
+            // console.log($(this).prop("checked"));输出全选按钮的选中状态
+            $(".item-list-checkbox .checkitem").prop("checked", $(this).prop("checked"));
+            if($(this).prop("checked")){
+
+            }else {
+
+            }
+          });
+          // 2、小复选框模块
+          $(".checkitem").change(function() {
+            if ($(".checkitem:checked").length === $(".checkitem").length) {
+              $(".checkall").prop("checked", true);
+            } else {
+              $(".checkall").prop("checked", false);
+            }
+          })
+        },
+        //绘制多边形地图
+        drawMapPolygonFun() {
+          let drawMapPolygon = this.draw.drawMapPolygon;
+          if (drawMapPolygon == false) {
+            if (this.coordinateList == "") {
+              this.$set(this.draw, "drawMapPolygon", true);
+              $("#drawPolygon").trigger("click");
+            } else {
+              this.$dialog
+                .confirm({
+                  title: "提示",
+                  message: "是否重新绘制画图",
+                })
+                .then(() => {
+                  // on confirm
+                  this.coordinateList = "";
+                  this.$set(this.draw, "drawMapPolygon", true);
+                  $("#drawPolygon").trigger("click");
+                })
+                .catch(() => {
+                  // on cancel
+                });
+            }
+          } else {
+            $("#drawRemove").trigger("click");
+            this.$set(this.draw, "drawMapPolygon", false);
+          }
+        },
+        guidProduct(){
+          return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0,
+              v = c == 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+          });
+        },
       }
     }
 </script>
 
-<style  scoped>
+<style  scoped lang="scss">
 
-  >>> .bannerBg{
+  .bannerBg{
     width: 100%;
     color:#fff;
     padding:10px;
     background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
+
   }
->>> .van-hairline--bottom::after {
-       border-bottom-width: 0;
-     }
-  >>> .activeBtn{
+  .van-hairline--bottom::after {
+    border-bottom-width: 0;
+  }
+  .activeBtn{
     flex:1;background:#fff;height:50px;border-radius:25px;margin:10px;color:#7AC943;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
   }
->>> .disactiveBtn{
-  flex:1;background:rgba(255,255,255,.4);height:50px;border-radius:25px;margin:10px;color:#fff;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
-}
-  >>> .van-cell__label{
+  .disactiveBtn{
+    flex:1;background:rgba(255,255,255,.4);height:50px;border-radius:25px;margin:10px;color:#fff;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
+  }
+  .van-cell__label{
     color: #969799;
     font-size: 12px;
     line-height: 20px;
     margin:0
   }
-  >>>.map_area {
+  .map_area {
     width: 50vw;
     height: 50vh;
     z-index:1;
@@ -1717,7 +2086,264 @@
     left: 0;
     top: 0;
   }
-  >>> .van-field__label{
+  .van-field__label{
     width:50%;
   }
+  .rightZoom_wrap {
+    position: absolute;
+    right: 16px;
+    top: 35%;
+    width: 66px;
+    margin-top: -200px;
+    background: #fff;
+    margin-bottom: 16px;
+    border-radius: 10px;
+    height: 60px;
+    .amplification {
+      height: 50px;
+      width: 74px;
+    }
+    .amplification {
+      background: url("../../assets/images/housesteadSurvey/tool1.png") center center no-repeat;
+      font-size: 18px;
+      padding-top: 35px;
+      text-align: center;
+    }
+  }
+  .mapZoom_wrap {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    width: 66px;
+    margin-top: -200px;
+    background: #fff;
+    margin-bottom: 16px;
+    border-radius: 10px;
+    height: 300px;
+
+    .qtMap {
+      height: 50px;
+      width: 74px;
+    }
+
+    .qtMap {
+      background: url("../../assets/images/housesteadSurvey/tool2.png") center center no-repeat;
+      font-size: 18px;
+      padding-top: 35px;
+      text-align: center;
+    }
+
+    .clMap {
+      background: url("../../assets/images/housesteadSurvey/tool3.png") center center no-repeat;
+      font-size: 18px;
+      padding-top: 35px;
+      text-align: center;
+    }
+
+    .hcMap {
+      background: url("../../assets/images/housesteadSurvey/tool4.png") center center no-repeat;
+      font-size: 18px;
+      padding-top: 35px;
+      text-align: center;
+    }
+
+    .htMap {
+      background: url("../../assets/images/housesteadSurvey/tool5.png") center center no-repeat;
+      font-size: 18px;
+      padding-top: 35px;
+      text-align: center;
+    }
+
+    .dwMap {
+      background: url("../../assets/images/housesteadSurvey/tool6.png") center center no-repeat;
+      font-size: 18px;
+      padding-top: 35px;
+      text-align: center;
+    }
+  }
+  .rightIcon_wrap {
+    position: absolute;
+    right: 16px;
+    bottom: 160px;
+    .selectionIcon_wrap {
+      width: 74px;
+      background: #fff;
+      border-radius: 10px;
+      padding: 14px 0;
+
+      .icon {
+        width: 38px;
+        height: 38px;
+        background: url("../../assets/images/homestead/selection_icon.png")
+        no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto 4px;
+      }
+      .text {
+        font-size: 24px;
+        text-align: center;
+      }
+    }
+    .positioning_wrap {
+      width: 74px;
+      background: #fff;
+      margin-bottom: 16px;
+      border-radius: 10px;
+      height: 74px;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中*/
+      .icon {
+        width: 38px;
+        height: 38px;
+        background: url("../../assets/images/homestead/positioning_icon.png")
+        no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto;
+      }
+    }
+  }
+  .homesteadList_wrap {
+    // display: none;
+    display: flex;
+    position: absolute;
+    right: -200px;
+    top: 0px;
+    bottom: 0px;
+    width: 300px;
+    background: #fff;
+    z-index: 999;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+
+    flex-direction: column;
+    .noInfo_data {
+      font-size: 28px;
+      text-align: center;
+      height: 300px;
+      line-height: 300px;
+      color: #666;
+    }
+    .title_m {
+      color: #333;
+      line-height: 36px;
+      padding: 20px 40px 22px;
+      .name {
+        font-size: 36px;
+        line-height: 42px;
+        height: 42px;
+      }
+      .more_icon {
+        width: 38px;
+        height: 38px;
+        background: url("../../assets/images/homestead/selectionNext_icon.png")
+        no-repeat;
+        float: right;
+        margin-top: 2px;
+      }
+    }
+
+    .main_m {
+      overflow-y: auto;
+      padding: 10px 0;
+      // height: 300px;
+      flex: 1;
+      .flex_block {
+        height: 70px;
+        display: flex;
+        // justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        padding: 0 40px;
+        &.active {
+          box-shadow: 0px 0px 10px rgba(24, 45, 51, 0.5);
+        }
+        .name_text {
+          font-size: 28px;
+          flex: 0.5;
+          overflow: hidden; /*超出部分隐藏*/
+          white-space: nowrap; /*不换行*/
+          text-overflow: ellipsis; /*超出部分文字以...显示*/
+        }
+        .square_text {
+          font-size: 28px;
+          flex: 0.4;
+        }
+        .operation_mian {
+          flex: 0 0 150px;
+
+          .describe {
+            font-size: 20px;
+            padding: 6px 5px;
+            float: right;
+            color: #fff;
+            border-radius: 30px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 150px;
+            &.yph {
+              background: #b026ff;
+            }
+            &.dlzdph {
+              background: #ff6f36;
+            }
+            &.ylz {
+              background: #7fff4c;
+            }
+            &.dlz {
+              background: rgb(255, 232, 76);
+            }
+            &.ylzdph {
+              background: #ff7dd0;
+            }
+            &.zy {
+              background: rgb(100, 30, 100);
+            }
+            &.xz {
+              background: rgb(60, 100, 180);
+            }
+            &.chdb {
+              background: #fe0303;
+            }
+          }
+        }
+      }
+    }
+    .footerBtn_wrap {
+      flex: 0 0 90px;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+
+      .options {
+        flex: 1;
+        font-size: 38px;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        height: 90px;
+        &:first-child {
+          border-bottom-left-radius: 15px;
+        }
+        &.active {
+          background: #3cbf5b;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .checkbox {
+    width: 200px;
+    margin: 30px auto;
+  }
+
+  .thead-checkbox {
+    background-color: lightgray;
+  }
+
+  .item-checkbox {
+    border: 1px solid darkgray;
+  }
+
 </style>