优化

src/views/sunVillage_info/list_cbfsq.vue

@@ -72,7 +72,8 @@
         </van-tab>
         -->
         <van-tab title="家庭成员">
-          <van-cell v-for="(item, index) in memberList" :key="item.id">
+          <div class="land_main" v-for="(item, index) in memberList" :key="item.id">
+          <van-cell>
             <div class="member_item">
               <div class="item_left">
                 <div class="item_left_tt">
@@ -95,6 +96,7 @@
               <p class="item_right">{{ item.sfgyr }}</p>
             </div>
           </van-cell>
+          </div>
         </van-tab>
 
         <!--<van-tab title="承包合同">
@@ -113,29 +115,34 @@
         </van-tab>-->
 
         <van-tab title="承包地块">
-          <van-cell v-for="(item,index) in landList" :key="item.id">
-            <div class="land_item" >
-              <div class="item_tt">
-                <p>{{ item.dkmc }}</p>
-                <p>{{ item.dkbm }}</p>
-              </div>
-              <div class="item_type">
-                <p>{{ item.htmjm }}亩</p>
-                <!--            <p>{{ item.tdlylx }}</p>-->
-                <p>{{ item.dldj }}</p>
-                <p>{{ item.tdyt }}</p>
-                <p>基本农田:{{ item.sfjbnt }}</p>
-              </div>
-              <div class="item_direction">
-                <!--            <p>{{ item.zjrxm }}指界</p>-->
-                <p>东:{{ item.dkdz }}</p>
-                <p>西:{{ item. dkxz }}</p>
-                <p>南:{{ item.dknz }}</p>
-                <p>北:{{ item.dkbz }}</p>
+          <div class="content_box">
+            <p>地块数：{{dkzs}}</p>
+            <p>总面积：{{dkzmj}}亩</p>
+          </div>
+          <div class="land_main" v-for="(item,index) in landList" :key="item.id">
+            <van-cell>
+              <div class="land_item" >
+                <div class="item_tt">
+                  <p>{{ item.dkmc }}</p>
+                  <p>{{ item.dkbm }}</p>
+                </div>
+                <div class="item_type">
+                  <p>{{ item.htmjm }}亩</p>
+                  <!--            <p>{{ item.tdlylx }}</p>-->
+                  <p>{{ item.dldj }}</p>
+                  <p>{{ item.tdyt }}</p>
+                  <p>基本农田:{{ item.sfjbnt }}</p>
+                </div>
+                <div class="item_direction">
+                  <!--            <p>{{ item.zjrxm }}指界</p>-->
+                  <p>东:{{ item.dkdz }}</p>
+                  <p>西:{{ item. dkxz }}</p>
+                  <p>南:{{ item.dknz }}</p>
+                  <p>北:{{ item.dkbz }}</p>
+                </div>
               </div>
-            </div>
-          </van-cell>
-
+            </van-cell>
+          </div>
         </van-tab>
       </van-tabs>
 <!--      <van-field readonly v-model="form.fbfdcy" label="发包方调查员" placeholder="发包方调查员" input-align="right" :border="false" />-->
@@ -240,6 +247,8 @@
         memberList: [],           // 承包方家庭成员信息
         contractDetail: {},       // 承包合同信息
         landList: [],             // 承包地块列表
+        dkzmj: 0,
+        dkzs: 0,
       };
     },
     created() {
@@ -364,6 +373,15 @@
       },
       getContractedLandList(cbfbm) {
         listContractedLand({cbfbm: cbfbm, translate_dict: 1}).then(response => {
+
+          this.dkzmj = 0;
+          this.dkzs = 0;
+
+          response.rows.map(rr=>{
+            this.dkzmj += rr.htmjm;
+            this.dkzs ++ ;
+          })
+
           this.landList = response.rows;
         });
       },
@@ -445,6 +463,14 @@
     -webkit-transform: scaleY(.5);
     transform: scaleY(.5);
   }
+  .content_box{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.6vh;
+    margin: 1.6vh auto;
+    width: 95%;
+  }
   .signature-footer {
     transform: rotate(90deg);
     width: auto;
@@ -655,11 +681,8 @@
     }
   }
   .member_item{
-    border-radius: 30px;
     background: #fff;
-    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
     padding:25px 32px;
-    margin-bottom: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -708,12 +731,16 @@
       border-radius: 30PX;
     }
   }
-  .land_item{
+  .land_main{
     border-radius: 30px;
+    box-shadow: 0PX 5PX 10PX rgba(63, 68, 75, 0.1);
+    margin:0 auto 20px;
+    overflow: hidden;
+    width: 95%;
+  }
+  .land_item{
     background: #fff;
-    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
     padding:25px 32px;
-    margin-bottom: 20px;
     font-size: 14PX;
     .item_tt{
       display: flex;