优化

src/views/homestead/index.vue

@@ -1,6 +1,46 @@
 <template>
-  <div class="app-container" @touchmove.prevent>
+  <div class="app-container">
     <div class="map_area"></div>
+    <!--列表 定位-->
+    <div class="rightIcon_wrap">
+      <div class="positioning_wrap">
+        <div class="icon"></div>
+      </div>
+      <div class="selectionIcon_wrap">
+        <div class="icon"></div>
+        <div class="text">列表</div>
+      </div>
+    </div>
+    <!--列表拉取详情-->
+    <div class="homesteadList_wrap">
+      <div class="title_m">
+        <div class="more_icon"></div>
+        <div class="name">宅基地列表</div>
+      </div>
+      <div class="main_m">
+        <!--1-->
+        <div class="flex_block">
+          <div class="name_text">孙全礼</div>
+          <div class="square_text">80㎡</div>
+          <div class="operation_mian">
+            <div class="describe yph">已盘活</div>
+          </div>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <div class="name_text">杜永俭</div>
+          <div class="square_text">130㎡</div>
+          <div class="operation_mian">
+            <div class="describe dlzdph">待流转待盘活</div>
+          </div>
+        </div>
+      </div>
+      <div class="footerBtn_wrap">
+        <div class="options active">农房</div>
+        <div class="options">农地</div>
+      </div>
+    </div>
+
     <!--选择地址-->
     <div class="address_wrap">
       <div class="address_item">
@@ -39,6 +79,35 @@
 
     <!--搜索栏目-->
     <div class="searchBar_wrap">
+      <div class="actionBar_wrap">
+        <div class="m_list">
+          <div class="tensile active"><div class="icon"></div></div>
+        </div>
+        <div class="m_list">
+          <div class="positioning">
+            <div class="icon"></div>
+          </div>
+        </div>
+        <div class="m_list">
+          <div class="spacing">
+            <div class="icon"></div>
+          </div>
+        </div>
+        <div class="m_list">
+          <div class="scale">
+            <div class="icon"></div>
+          </div>
+        </div>
+
+        <div class="m_list">
+          <div class="closes gray">
+            <div class="icon"></div>
+          </div>
+        </div>
+        <div class="m_list">
+          <div class="correct"></div>
+        </div>
+      </div>
       <div class="searchBar_area">
         <div class="bar_icon"></div>
         <div class="bar_ipt">
@@ -181,122 +250,237 @@
     <div class="landHomesteadEdit_wrap">
       <div class="content_mian">
         <div class="info_title">录入宗地信息</div>
-        <!--1-->
-        <div class="flex_block">
-          <div class="number_s50 mr50">
-            <div class="title_m">农房编号</div>
-            <div class="input_m">
-              <van-field
-                v-model="message"
-                placeholder="请输入农房编号"
-                class="landHomesteadEdit_input"
-              />
+        <div class="flex_main">
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">农房编号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="农房编号"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">房屋所有人名称</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="房屋所有人名称"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
             </div>
           </div>
-          <div class="number_s50">
-            <div class="title_m">房屋所有人名称</div>
-            <div class="input_m">
-              <van-field
-                v-model="message"
-                placeholder="请输入房屋所有人名称"
-                class="landHomesteadEdit_input"
-              />
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s60 mr50">
+              <div class="title_m">地址</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="地址"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s40">
+              <div class="title_m">农房权属</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="农房权属"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
             </div>
           </div>
-        </div>
-        <!--1-->
-        <div class="flex_block">
-          <div class="number_s60 mr50">
-            <div class="title_m">地址</div>
-            <div class="input_m">
-              <van-field
-                v-model="message"
-                placeholder="请输入地址"
-                class="landHomesteadEdit_input"
-              />
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s35 mr50">
+              <div class="title_m">是否有审批手续</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="审批手续"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+            <div class="number_s35 mr50">
+              <div class="title_m">建筑面积</div>
+              <div class="input_m about">
+                <span class="about_symbol">≈</span>
+                <van-field
+                  v-model="message"
+                  placeholder="建筑面积"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s30">
+              <div class="title_m">现状情况</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="现状情况"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
             </div>
           </div>
-          <div class="number_s40">
-            <div class="title_m">农房权属</div>
-            <div class="input_m select">
-              <i class="dropDown_icon"></i>
-              <van-field
-                v-model="message"
-                readonly
-                clickable
-                name="picker"
-                placeholder="选择农房权属"
-                class="landHomesteadEdit_input"
-                @click="showPicker = true"
-              />
-              <van-popup v-model="showPicker" position="bottom">
-                <van-picker
-                  show-toolbar
-                  :columns="columns"
-                  @confirm="onConfirm"
-                  @cancel="showPicker = false"
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">房屋所有权证号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="房屋所有权证号"
+                  class="landHomesteadEdit_input"
                 />
-              </van-popup>
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">土地证号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="土地证号"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
             </div>
           </div>
-        </div>
-        <!--1-->
-        <div class="flex_block">
-          <div class="number_s35 mr50">
-            <div class="title_m">是否有审批手续</div>
-            <div class="input_m select">
-              <i class="dropDown_icon"></i>
-              <van-field
-                v-model="message"
-                readonly
-                clickable
-                name="picker"
-                placeholder="审批手续"
-                class="landHomesteadEdit_input"
-                @click="showPicker = true"
-              />
-              <van-popup v-model="showPicker" position="bottom">
-                <van-picker
-                  show-toolbar
-                  :columns="columns"
-                  @confirm="onConfirm"
-                  @cancel="showPicker = false"
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s35 mr50">
+              <div class="title_m">土地性质</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="土地性质"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s35 mr50">
+              <div class="title_m">土地面积</div>
+              <div class="input_m about">
+                <span class="about_symbol">≈</span>
+                <van-field
+                  v-model="message"
+                  placeholder="土地面积"
+                  class="landHomesteadEdit_input"
                 />
-              </van-popup>
+              </div>
+            </div>
+            <div class="number_s30">
+              <div class="title_m">是否有流转意向</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="是否有流转意向"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
             </div>
           </div>
-          <div class="number_s35 mr50">
-            <div class="title_m">建筑面积</div>
-            <div class="input_m about">
-              <span class="about_symbol">≈</span>
-              <van-field
-                v-model="message"
-                placeholder="建筑面积"
-                class="landHomesteadEdit_input"
-              />
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">租赁人</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="租赁人"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">租赁年限</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="租赁年限"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
             </div>
           </div>
-          <div class="number_s30">
-            <div class="title_m">现状情况</div>
-            <div class="input_m select">
-              <i class="dropDown_icon"></i>
-              <van-field
-                v-model="message"
-                readonly
-                clickable
-                name="picker"
-                placeholder="现状情况"
-                class="landHomesteadEdit_input"
-                @click="showPicker = true"
-              />
-              <van-popup v-model="showPicker" position="bottom">
-                <van-picker
-                  show-toolbar
-                  :columns="columns"
-                  @confirm="onConfirm"
-                  @cancel="showPicker = false"
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s100">
+              <div class="title_m">租赁人</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="租赁人"
+                  class="landHomesteadEdit_input"
                 />
-              </van-popup>
+              </div>
+            </div>
+          </div>
+          <!--2-->
+          <div class="uploadPicturesFlex_block">
+            <div class="title_m">上传图片</div>
+            <div class="main_m">
+              <van-uploader v-model="fileList" multiple :max-count="2" />
             </div>
           </div>
         </div>
@@ -306,6 +490,20 @@
         <div class="save">保存</div>
       </div>
     </div>
+    <!--农地农房选择-->
+    <div class="farmlandEditSwitch_wrap">
+      <div class="mains">
+        <div class="close_btn"></div>
+        <div class="farmhouse">
+          <div class="icons"></div>
+          <p class="names">农房</p>
+        </div>
+        <div class="farmland">
+          <div class="icons"></div>
+          <p class="names">农地</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -317,6 +515,7 @@ export default {
       message: "",
       showPicker: false,
       columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
+      fileList: [],
     };
   },
   mounted() {},
@@ -333,6 +532,138 @@ export default {
   width: 100vw;
   height: 100vh;
   position: relative;
+  .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: 0;
+    top: 20px;
+    bottom: 160px;
+    width: 536px;
+    background: #fff;
+    z-index: 999;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+
+    flex-direction: column;
+
+    .title_m {
+      color: #333;
+      line-height: 36px;
+      padding: 20px 40px 32px;
+      .name {
+        font-size: 40px;
+        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: 0 40px;
+      // height: 300px;
+      flex: 1;
+      .flex_block {
+        height: 70px;
+        display: flex;
+        // justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        .name_text {
+          font-size: 34px;
+          flex: 1;
+        }
+        .square_text {
+          font-size: 34px;
+          flex: 0.8;
+        }
+        .operation_mian {
+          flex: 0 0 150px;
+          .describe {
+            font-size: 20px;
+            padding: 6px 12px;
+            float: right;
+            color: #fff;
+            &.yph {
+              background: #3cbf5b;
+              border-radius: 30px;
+            }
+          }
+        }
+      }
+    }
+    .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;
+        }
+      }
+    }
+  }
   .map_area {
     width: 100vw;
     height: 100vh;
@@ -403,8 +734,8 @@ export default {
     }
   }
   .searchBar_wrap {
-    display: none;
-    // display: flex;
+    // display: none;
+    display: flex;
     position: fixed;
     bottom: 0;
     left: 0;
@@ -413,6 +744,117 @@ export default {
     background: #fff;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
+    .actionBar_wrap {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      background: #fff;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      .m_list {
+        flex: 1;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+
+        .tensile,
+        .positioning,
+        .spacing,
+        .scale {
+          width: 76px;
+          height: 72px;
+          background: #ffffff;
+          border-radius: 8px;
+          box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
+          .icon {
+            width: 76px;
+            height: 72px;
+          }
+          &.active {
+            background: #333;
+            &.tensile {
+              .icon {
+                background: url("../../assets/images/homestead/operation/tensile_active.png")
+                  center center no-repeat;
+                background-size: 38px 50px;
+              }
+            }
+            &.positioning {
+              .icon {
+                background: url("../../assets/images/homestead/operation/positioning_active.png")
+                  center center no-repeat;
+                background-size: 38px 48px;
+              }
+            }
+            &.spacing {
+              .icon {
+                background: url("../../assets/images/homestead/operation/spacing_active.png")
+                  center center no-repeat;
+                background-size: 46px 46px;
+              }
+            }
+            &.scale {
+              .icon {
+                background: url("../../assets/images/homestead/operation/scale_active.png")
+                  center center no-repeat;
+                background-size: 48px 48px;
+              }
+            }
+          }
+        }
+        .tensile {
+          .icon {
+            background: url("../../assets/images/homestead/operation/tensile.png")
+              center center no-repeat;
+            background-size: 38px 50px;
+          }
+        }
+        .positioning {
+          .icon {
+            background: url("../../assets/images/homestead/operation/positioning.png")
+              center center no-repeat;
+            background-size: 38px 48px;
+          }
+        }
+        .spacing {
+          .icon {
+            background: url("../../assets/images/homestead/operation/spacing.png")
+              center center no-repeat;
+            background-size: 46px 46px;
+          }
+        }
+        .scale {
+          .icon {
+            background: url("../../assets/images/homestead/operation/scale.png")
+              center center no-repeat;
+            background-size: 48px 48px;
+          }
+        }
+        .closes {
+          background: url("../../assets/images/homestead/searchBar_close.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: 72px;
+          height: 72px;
+          &.gray {
+            background: url("../../assets/images/homestead/searchBar_close_gray.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .correct {
+          background: url("../../assets/images/homestead/searchBar_save.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: 72px;
+          height: 72px;
+        }
+      }
+    }
     .searchBar_area {
       flex: 1;
       height: 80px;
@@ -690,7 +1132,8 @@ export default {
     }
   }
   .landHomesteadEdit_wrap {
-    display: flex;
+    display: none;
+    // display: flex;
     position: absolute;
     left: 0;
     bottom: 0;
@@ -700,7 +1143,7 @@ export default {
     .content_mian {
       flex: 1;
       margin: 0 16px;
-      padding: 28px 40px 28px 40px;
+      padding: 28px 25px 28px 40px;
       background: #fff;
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;
@@ -714,6 +1157,11 @@ export default {
         align-items: center; /*  子元素相对父元素垂直居中 */
         color: #333;
       }
+      .flex_main {
+        height: 890px;
+        padding-right: 15px;
+        overflow-y: auto;
+      }
       .flex_block {
         height: 100px;
         margin-bottom: 20px;
@@ -723,6 +1171,12 @@ export default {
           float: left;
           flex-direction: column;
         }
+        .number_s100 {
+          width: 100%;
+          float: left;
+          display: flex;
+          flex-direction: column;
+        }
         .number_s60 {
           // flex: 0.6;
           width: 60%;
@@ -805,6 +1259,20 @@ export default {
           padding-right: 50px;
         }
       }
+      .uploadPicturesFlex_block {
+        .title_m {
+          font-size: 28px;
+          flex: 0 0 50px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          word-break: break-all;
+          align-items: center; /*  子元素相对父元素垂直居中 */
+          margin-bottom: 20px;
+        }
+        .main_m {
+        }
+      }
     }
     .footer_main {
       flex: 0 0 120px;
@@ -830,6 +1298,89 @@ export default {
       }
     }
   }
+  .farmlandEditSwitch_wrap {
+    display: none;
+    width: 100vw;
+    height: 100vh;
+    background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png")
+      no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1001;
+    .mains {
+      width: 544px;
+      height: 480px;
+      background: #fff;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: -272px 0 0 -240px;
+      z-index: 1002;
+      border-radius: 30px;
+      padding: 0 30px;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      .close_btn {
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        background: url("../../assets/images/homestead/farmlandEditSwitch_close.png")
+          no-repeat;
+        background-size: 100% 100%;
+        right: 40px;
+        top: 40px;
+      }
+      .farmhouse {
+        flex: 1;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+      .farmland {
+        flex: 1;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+      .farmhouse,
+      .farmland {
+        flex-direction: column;
+        .icons {
+          width: 146px;
+          height: 146px;
+          margin-bottom: 14px;
+        }
+        .names {
+          font-size: 40px;
+          color: #3cbf5b;
+        }
+      }
+      .farmhouse {
+        .icons {
+          background: url("../../assets/images/homestead/nf.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .farmland {
+        .icons {
+          background: url("../../assets/images/homestead/nd.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      // <div class="farmhouse">
+      //     <div class="icons"></div>
+      //     <p class="names">农房</p>
+      //   </div>
+      //   <div class="farmland">
+      //     <div class="icons"></div>
+      //     <p class="names">农地</p>
+      //   </div>
+    }
+  }
 }
 
 ::-webkit-scrollbar {
@@ -837,23 +1388,23 @@ export default {
 }
 
 ::-webkit-scrollbar:vertical {
-  width: 8px;
-  border-radius: 8px;
+  width: 10px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar:horizontal {
-  height: 8px;
-  border-radius: 8px;
+  height: 10px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #9f9f9f;
-  border-radius: 8px;
-  border: 1px solid #ffffff;
+  background-color: #eee;
+  border-radius: 10px;
+  border: 3px solid #ffffff;
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 8px;
+  border-radius: 10px;
   background-color: #ffffff;
 }
 </style>