约束选址样式调整

src/views/siteselection/components/fzxz.vue

@@ -82,21 +82,23 @@
         </el-col>
       </el-form-item>
       <el-form-item label="选址约束:">
-        <el-checkbox v-model="ruleForm.useLandType">
+        <div class="xzys">
+          <el-checkbox v-model="ruleForm.useLandType">
             是否与控规用地性质一致</el-checkbox
           >
           <el-checkbox v-model="ruleForm.useMultiple"
             >是否允许选出多个分散地块。</el-checkbox
           >
-        <div v-if="ruleForm.useMultiple">
-          请输入地块间最大距离
-          <el-input
-            v-model.number="ruleForm.multipleDistance"
-            size="mini"
-            type="number"
-            style="width: 30%"
-          ></el-input
-          >米
+          <div v-if="ruleForm.useMultiple">
+            请输入地块间最大距离
+            <el-input
+              v-model.number="ruleForm.multipleDistance"
+              size="mini"
+              type="number"
+              style="width: 30%"
+            ></el-input
+            >米
+          </div>
         </div>
       </el-form-item>
     </el-form>
@@ -154,7 +156,7 @@ export default {
 
   data() {
     return {
-      otherValShow:false,
+      otherValShow: false,
       checkbox_data: 0,
       ruleForm: {
         xzmj: 0,
@@ -165,9 +167,9 @@ export default {
         ydmjbegin: "", //用地面积开始
         ydmjend: "", //用地面积结束
         sjy: "", //数据源
-        useMultiple:false,//是否允许多个分散地块
-        useLandType:false,//是否与控规用地性质一致
-        multipleDistance:0,//多地块最大距离
+        useMultiple: false, //是否允许多个分散地块
+        useLandType: false, //是否与控规用地性质一致
+        multipleDistance: 0, //多地块最大距离
       },
       rules: {
         xzmj: [{ required: true, message: "请填写范围的数据" }],
@@ -240,9 +242,8 @@ export default {
   methods: {
     changeCheckBox(val) {
       console.log(val, "杰卡斯到货时间啊肯定会刷卡机很大");
-      if (val.value==1) {
-        this.otherValShow = true
-        
+      if (val.value == 1) {
+        this.otherValShow = true;
       }
     },
     handleChange(value) {
@@ -300,7 +301,7 @@ export default {
       this.sjyBSM = value;
     },
     submitData() {
-      console.log(this.ruleForm,'this.ruleForm');
+      console.log(this.ruleForm, "this.ruleForm");
       //更新范围
       var _temp = this.$refs.range.getRange();
       // this.ruleForm.xzfw = _temp.xzfw;
@@ -319,10 +320,9 @@ export default {
             sjy: this.sjyBSM, //数据源标识码
             geomId: this.$refs.range.fileDataID,
             yxyz: this.tableData,
-            useMultiple:this.ruleForm.useMultiple,//是否允许多个分散地块
-        useLandType:this.ruleForm.useLandType,//是否与控规用地性质一致
-        multipleDistance:this.ruleForm.multipleDistance,//多地块最大距离
-
+            useMultiple: this.ruleForm.useMultiple, //是否允许多个分散地块
+            useLandType: this.ruleForm.useLandType, //是否与控规用地性质一致
+            multipleDistance: this.ruleForm.multipleDistance, //多地块最大距离
           };
           // console.log(obj, "objobj");
           AddFzxz(obj).then((res) => {
@@ -360,9 +360,9 @@ export default {
         ydmjend: "", //用地面积结束
         sjy: this.options[0].sjymc, //数据源
         xzmj: 0,
-        useMultiple:false,//是否允许多个分散地块
-        useLandType:false,//是否与控规用地性质一致
-        multipleDistance:0,//多地块最大距离
+        useMultiple: false, //是否允许多个分散地块
+        useLandType: false, //是否与控规用地性质一致
+        multipleDistance: 0, //多地块最大距离
       }),
         (this.sjyBSM = this.options[0].value);
       this.tableData = [];
@@ -435,4 +435,13 @@ export default {
 /deep/ .el-checkbox {
   color: #fff;
 }
+.xzys {
+  height: 95px;
+  // background: pink;
+  display: flex;
+  flex-direction: column;
+}
+label {
+  margin-bottom: 0px !important;
+}
 </style>