阳光村务：明细账表头锁定

src/views/sunVillage_info/detailed_ledger.vue

@@ -26,6 +26,7 @@
             </div>
         </div>
         <!--内容-->
+      <div style="width: 100vw;overflow-y: scroll;padding: 11px 0 0 11px;">
         <div class="center_box">
             <div class="vocher_name">
                 <van-row class="head_m">
@@ -38,34 +39,29 @@
                     </van-col>
                     <van-col :span="10" class="credential_m">凭证字</van-col>
                 </van-row>
-                <van-row class="vocher_mTitle" v-for="(item,index) in tableList" :key="index">
-                    <van-col :span="7">{{item.month}}</van-col>
-                    <van-col :span="7">{{item.day}}</van-col>
-                    <van-col :span="10">
-                        <div class="pz_tx" @click="subjectNameFun(item.voucherWordNum,item.voucherId)">{{item.voucherWordNum}}</div>
-                    </van-col>
+                <van-row class="head_m_s">
+                  <van-col :span="9">摘要</van-col>
+                  <van-col :span="4">借方</van-col>
+                  <van-col :span="4">贷方</van-col>
+                  <van-col :span="3">方向</van-col>
+                  <van-col :span="4">余额</van-col>
                 </van-row>
-                <!-- <van-row class="vocher_mTitle">
-                    <van-col :span="7">09</van-col>
-                    <van-col :span="7">09</van-col>
-                    <van-col :span="10">
-                        <div class="pz_tx">记-06</div>
-                    </van-col>
-                </van-row> -->
 
             </div>
             <div class="vocher_content">
                 <div class="vocher_cmain">
-                    <van-row class="head_m">
-                        <van-col :span="9">摘要</van-col>
-                        <van-col :span="4">借方</van-col>
-                        <van-col :span="4">贷方</van-col>
-                        <van-col :span="3">方向</van-col>
-                        <van-col :span="4">余额</van-col>
-                    </van-row>
 
+                  <div style="width: 30%;">
+                    <van-row class="vocher_mTitle" v-for="(item,index) in tableList" :key="index">
+                      <van-col :span="7">{{item.month}}</van-col>
+                      <van-col :span="7">{{item.day}}</van-col>
+                      <van-col :span="10">
+                        <div class="pz_tx" @click="subjectNameFun(item.voucherWordNum,item.voucherId)">{{item.voucherWordNum}}</div>
+                      </van-col>
+                    </van-row>
+                  </div>
                     <div class="content_m">
-                        <van-row  v-for="(item,index) in tableList" :key="index">
+                        <van-row  class="content_m_b" v-for="(item,index) in tableList" :key="index">
                             <van-col :span="9" class="zy">
                                 <span>{{item.voucherSummary}}</span>
                             </van-col>
@@ -87,7 +83,7 @@
                 </div>
             </div>
         </div>
-
+      </div>
         <!--开始日期-->
         <van-action-sheet v-model="dateObj.startVisbile" duration="0.2" >
             <van-datetime-picker
@@ -474,18 +470,36 @@ export default {
         }
    }
    .center_box{
-    margin-left: 22px;
-    display: flex;
-    margin-top: 22px;
+    /*margin-left: 22px;*/
+    /*margin-top: 22px;*/
     background: #fff;
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
+     width: 1605px;
     .vocher_name{
-        width: 405px;
+        width: 1605px;
+        display: flex;
+        .head_m_s{
+          flex: 1;
+          .van-col{
+            height: 110px;
+            font-size: 30px;
+            color: #2facfe;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: 1px solid #bfbfbf;
+            &:last-child{
+              border-right: 0;
+            }
+          }
+
+        }
         .head_m{
             height: 110px;
             background: #2facfe;
             border-radius: 8px;
+            width: 30%;
             .year_m{
                 border-right: 1px solid #fff;
                 .year_text{
@@ -556,7 +570,10 @@ export default {
         display: -webkit-box;
         -webkit-overflow-scrolling: touch;
         .vocher_cmain{
-            width: 1200px;
+            width: 1605px;
+            display: flex;
+            height: 66vh;
+            overflow-y: scroll;
             .head_m{
                 .van-col{
                     height: 110px;
@@ -572,15 +589,33 @@ export default {
                 }
 
             }
+            .vocher_mTitle{
+              background: #d7e8f3;
+              .van-col{
+                height: 84px;
+                font-size: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-right: 1px solid #fff;
+                .pz_tx{
+                  color: #278dff;
+                  padding-bottom: 8px;
+                  border-bottom: 1px solid #278dff;
+                }
+              }
+              &:nth-child(2n-1){
+                background: #e3f4ff;
+              }
+            }
             .content_m{
-
-                .van-row{
-
+              flex: 1;
+              .van-row{
                     &:nth-child(2n-1){
                         background: #e9e9e9;
                     }
                 }
-                .van-col{
+              .van-col{
                     height: 84px;
                     font-size: 30px;
                     padding:0 22px;