diff --git a/App.vue b/App.vue
index c22e9b6..77aa792 100644
--- a/App.vue
+++ b/App.vue
@@ -16,7 +16,7 @@
 			...mapActions(['memberLogin','getLoginCode']),
 			...mapMutations(['setVisitChannels']),
 		},
-		 onLaunch:  function(options) {
+		 onLaunch:  async function(options) {
 			uni.getSystemInfo({
 				success: function(e) {
 					// #ifndef MP
@@ -43,9 +43,9 @@
 			let _this = this
        console.log('app',this.user.WeChat_MiniProToken)
 			if (this.user.WeChat_MiniProToken) {
-				this.memberLogin() // 获取用户数据
+				await this.memberLogin() // 获取用户数据
 			} else {
-				this.getLoginCode()
+        await this.getLoginCode()
 			}
 
 			this.setVisitChannels(options.scene)
diff --git a/pages.json b/pages.json
index 17cc2dd..1abd2de 100644
--- a/pages.json
+++ b/pages.json
@@ -93,7 +93,7 @@
                     "style":
                     {
                         "enablePullDownRefresh": true,
-                        "navigationBarTitleText": "结算审批"
+                        "navigationStyle": "custom"
                     }
                 },
                 {
diff --git a/pages/settlementApproval/index.vue b/pages/settlementApproval/index.vue
index fc5d611..9adb486 100644
--- a/pages/settlementApproval/index.vue
+++ b/pages/settlementApproval/index.vue
@@ -1,87 +1,124 @@
 <template>
-  <scroll-view class="main">
-    <view class="topBox">
-      <view class="top">
+  <view class="newMain">
+<!--    :style="{height: menu.bottom + 97 + 'px'}"-->
+    <view class="header" >
+      <view class="arrowBox" :style="{paddingTop: menu.top + 'px',height: menu.height + 'px'}">
+        <image @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>
+
         <picker :value="selectServiceId" :range="selectServiceList" @change="handleChangeService" range-key="label">
-          <span class="service">{{ selectServiceList[selectIndex].label }}</span>
+          <view class="selectServiceBox">
+            <image class="serviceIcon" src="/static/images/settlementApproval/serviceIcon.png"/>
+            <view class="nameBox">
+              <span class="service">{{ selectServiceList[selectIndex].label }}</span>
+              <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
+            </view>
+          </view>
         </picker>
-        <span class="time" @click="handleChangeSelect({id:3})">{{`${$moment(startDate).format('YYYY/MM')}-${$moment(endDate).format('YYYY/MM')}`}}</span>
       </view>
 
+      <view class="timeBox">
+        <picker class="timeSelect" mode="date" fields="month" :value="$moment(startDate).format('YYYY-MM')"
+                :start="'2023-01-01'" :end="end" @change="handleGetStartTime">
+          <span class="monthNumber">{{ startMonth || ''  }}</span>
+          <span class="monthUnit">月</span>
+          <span class="year">/{{ startYear || '' }}</span>
+          <image class="bottomArrow" src="/static/images/settlementApproval/bottomArrow.png"/>
+        </picker>
+        <span style="margin: 0 16rpx">-</span>
+        <picker class="timeSelect" mode="date" fields="month" :value="$moment(endDate).format('YYYY-MM')"
+                :start="'2023-01-01'" :end="end" @change="handleGetStartTime">
+          <span class="monthNumber">{{ endMonth || ''  }}</span>
+          <span class="monthUnit">月</span>
+          <span class="year">/{{ endYear || '' }}</span>
+          <image class="bottomArrow" src="/static/images/settlementApproval/bottomArrow.png"/>
+        </picker>
+      </view>
 
-
-      <view class="topFilterBox">
-        <view class="filterItem" v-for="(item,index) in menuList" :key="index" @click="handleChangeSelect(item)">
-          <view class="imgIcon" :style="selectFilter===item.id ? 'background:#f0f7fe;' : 'background:#f6f7f8;'">
-            <image class="img" :src="item.id===selectFilter?item.active: item.src"/>
+      <view class="TabsBox">
+        <view class="tabItemList">
+          <view :class="selectFilter===4?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:4})">
+            全部
           </view>
-          <view class="filterLabel" :style="selectFilter===item.id ? 'color:#5B96E9' :'color:#808D97'">{{item.name}}
+          <view :class="selectFilter===0?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:0})">
+            待结算
+          </view>
+          <view :class="selectFilter===2?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:2})">
+            审批中
+          </view>
+          <view :class="selectFilter===1?'tabItem selectTabItem':'tabItem'" @click="handleChangeSelect({id:1})">
+            已结算
           </view>
         </view>
+        <view class="otherItem">
+          <image class="filterIcon" src="/static/images/settlementApproval/filter.png"/>
+          类型
+        </view>
       </view>
+
     </view>
 
+      <scroll-view class="contentBox" :scroll-y="true">
+        <view class="dataList">
+          <view class="dataItem" v-for="(item,index) in dataList" :key="index" @click="handleGoDetail(item)" :style="{boxShadow: item.SETTLEMENT_STATE===0 || item.SETTLEMENT_STATE===2?'0 0px 6rpx #f9b297':''}">
+            <div class="content-index">{{index+1}}</div>
+            <view class="itemRow" >
+              <view class="projectName">{{ item.BUSINESSPROJECT_NAME }}</view>
+              <view class="stateName" :style="{color: item.SETTLEMENT_STATE===2?'#FF814FFF':''}">{{ item.SETTLEMENT_STATE===0?'待结算':item.SETTLEMENT_STATE===1?'已结算':item.SETTLEMENT_STATE===2?'审批中':'' }}</view>
+            </view>
+            <view class="itemCenterRow" style="margin: 60rpx 0 20rpx">
+              <view class="value">{{ item.SETTLEMENT_TYPE===1?$util.getMoney(item.REVENUE_AMOUNT):item.SETTLEMENT_TYPE===2?$util.getMoney(item.CURREVENUE_AMOUNT):'' }}</view>
+              <view class="label">{{ item.SETTLEMENT_TYPE===1?'累计营业额':item.SETTLEMENT_TYPE===2?'本月营业额':'' }}</view>
+            </view>
+            <view class="itemRow">
+              <view class="leftName">{{item.CURRENT_PERIOD || ''}}</view>
+              <!--          <view class="rightName">{{ $util.getMoney(item.REVENUE_AMOUNT) }}</view>-->
 
-    <view class="dataList">
-      <view class="dataItem" v-for="(item,index) in dataList" :key="index" @click="handleGoDetail(item)" :style="{boxShadow: item.SETTLEMENT_STATE===0 || item.SETTLEMENT_STATE===2?'0 0px 6rpx #f9b297':''}">
-        <div class="content-index">{{index+1}}</div>
-        <view class="itemRow" >
-          <view class="projectName">{{ item.BUSINESSPROJECT_NAME }}</view>
-          <view class="stateName" :style="{color: item.SETTLEMENT_STATE===2?'#FF814FFF':''}">{{ item.SETTLEMENT_STATE===0?'待结算':item.SETTLEMENT_STATE===1?'已结算':item.SETTLEMENT_STATE===2?'审批中':'' }}</view>
-        </view>
-        <view class="itemCenterRow" style="margin: 60rpx 0 20rpx">
-          <view class="value">{{ item.SETTLEMENT_TYPE===1?$util.getMoney(item.REVENUE_AMOUNT):item.SETTLEMENT_TYPE===2?$util.getMoney(item.CURREVENUE_AMOUNT):'' }}</view>
-          <view class="label">{{ item.SETTLEMENT_TYPE===1?'累计营业额':item.SETTLEMENT_TYPE===2?'本月营业额':'' }}</view>
-        </view>
-        <view class="itemRow">
-          <view class="leftName">{{item.CURRENT_PERIOD || ''}}</view>
-<!--          <view class="rightName">{{ $util.getMoney(item.REVENUE_AMOUNT) }}</view>-->
+              <view class="rightName">{{item.SETTLEMENT_TYPE===1?'年度结算':item.SETTLEMENT_TYPE===2?'月度结算':''}}：{{item.SETTLEMENT_DATE || ''}} </view>
+            </view>
 
-          <view class="rightName">{{item.SETTLEMENT_TYPE===1?'年度结算':item.SETTLEMENT_TYPE===2?'月度结算':''}}：{{item.SETTLEMENT_DATE || ''}} </view>
-        </view>
-
-        <view class="line"></view>
-        <view class="itemRow">
-          <view class="leftName"><span class="radio" style="background: #44bea3"></span>{{ item.MERCHANTS_NAME || '' }}</view>
-          <view class="rightName"></view>
-        </view>
-        <view class="itemRow">
-          <view class="leftName"><span class="radio" style="background: #398EFE"></span>{{item.SERVERPARTSHOP_NAME || ''}}</view>
-        </view>
-      </view>
-    </view>
-    <view class="load-more" v-if="dataList.length>0">
-      <text>{{!isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
-    </view>
-    <UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
-      <view class="uniPopup">
-        <view class="uniPopupTop">
-          <text class="uniPopupTitle">筛选</text>
-          <image @click="closePop" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
-        </view>
-
-        <view class="filterBox">
-          <view class="filterTitle">统计时间</view>
-          <view class="filterTimeBox">
-            <picker class="timeSelect" mode="date" fields="month" :value="$moment(startDate).format('YYYY-MM')" :start="'2023-01-01'" :end="end" @change="handleGetStartTime">{{startDate}}</picker>
-            <span class="timeSelect" style="margin: 0 4rpx">-</span>
-            <picker class="timeSelect" mode="date" fields="month" :value="$moment(endDate).format('YYYY-MM')" :start="start" :end="end" @change="handleGetEndTime">{{endDate}}</picker>
+            <view class="line"></view>
+            <view class="itemRow">
+              <view class="leftName"><span class="radio" style="background: #44bea3"></span>{{ item.MERCHANTS_NAME || '' }}</view>
+              <view class="rightName"></view>
+            </view>
+            <view class="itemRow">
+              <view class="leftName"><span class="radio" style="background: #398EFE"></span>{{item.SERVERPARTSHOP_NAME || ''}}</view>
+            </view>
           </view>
         </view>
-
-        <view class="filterBox" style="margin-top: 48rpx">
-          <view class="filterTitle">结算类型</view>
-          <view class="filterItemList">
-            <view :class="SettlementType===0?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(0)">全部</view>
-            <view :class="SettlementType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(1)">年度</view>
-            <view :class="SettlementType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(2)">月度</view>
-          </view>
+        <view class="load-more" v-if="dataList.length>0">
+          <text>{{!isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
         </view>
+        <UniPop :show="showPop" @hidePopup="closePop" type="bottom" @touchmove.prevent round="true">
+          <view class="uniPopup">
+            <view class="uniPopupTop">
+              <text class="uniPopupTitle">筛选</text>
+              <image @click="closePop" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
+            </view>
 
-        <view class="button" @click="handleSubmit">查询</view>
-      </view>
-    </UniPop>
-  </scroll-view>
+            <view class="filterBox">
+              <view class="filterTitle">统计时间</view>
+              <view class="filterTimeBox">
+                <picker class="timeSelect" mode="date" fields="month" :value="$moment(startDate).format('YYYY-MM')" :start="'2023-01-01'" :end="end" @change="handleGetStartTime">{{startDate}}</picker>
+                <span class="timeSelect" style="margin: 0 4rpx">-</span>
+                <picker class="timeSelect" mode="date" fields="month" :value="$moment(endDate).format('YYYY-MM')" :start="start" :end="end" @change="handleGetEndTime">{{endDate}}</picker>
+              </view>
+            </view>
+
+            <view class="filterBox" style="margin-top: 48rpx">
+              <view class="filterTitle">结算类型</view>
+              <view class="filterItemList">
+                <view :class="SettlementType===0?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(0)">全部</view>
+                <view :class="SettlementType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(1)">年度</view>
+                <view :class="SettlementType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSettlementType(2)">月度</view>
+              </view>
+            </view>
+
+            <view class="button" @click="handleSubmit">查询</view>
+          </view>
+        </UniPop>
+      </scroll-view>
+  </view>
 </template>
 <script>
 import {
@@ -95,28 +132,6 @@ import moment from "moment";
     components: {UniPop},
     data() {
       return {
-        menuList: [
-          { //列表头部菜单选项标签
-            name: '全部',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png',
-            id: 4
-          }, {
-            name: '待结算',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenp.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenpz.png',
-            id: "0,2"
-          }, {
-            name: '已结算',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichl.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichlz.png',
-            id: 1
-          }, {
-            name: '更多筛选',
-            src: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaix.png',
-            active: 'https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shaixz.png',
-            id: 3
-          } ],
         selectFilter: 4,
         dataList: [],
         selectServiceList:[],// 这个用户可以选择的服务区
@@ -124,34 +139,50 @@ import moment from "moment";
         selectServiceId:'',// 选择的服务区
         showPop: false,// 显示更多筛选
         startDate:'',// 开始时间
+        startMonth:'',// 开始时间的月份
+        startYear:'',// 开始时间的年份
         endDate:'',// 结束时间
+        endMonth:'',// 结束时间的月份
+        endYear:'',// 结束时间的年份
         start:'',// 限制的开始时间
         end:'',// 限制的结束时间
         SettlementType: 0,// 结算模式
         PageIndex: 1,// 默认的页数
         isEnd: false,// 判断是否到底了
         useInfo:{},// 用户详情
+        menu:{}
       }
     },
-    computed: { //监听属性 类似于data概念
-      ...mapState({
-        user: (state) => {
-          return state.userData
-        },
-      }),
-    },
+    // computed: { //监听属性 类似于data概念
+    //   ...mapState({
+    //     user: (state) => {
+    //       return state.userData
+    //     },
+    //   }),
+    // },
     async onLoad(){
+      this.menu = uni.getMenuButtonBoundingClientRect()
+      console.log('this.menu',this.menu)
+
+
       let userInfo = uni.getStorageSync('vuex')
       userInfo = JSON.parse(userInfo)
+      console.log('userInfo',userInfo)
       this.useInfo = JSON.parse(JSON.stringify(userInfo))
       console.log('this.useInfo',this.useInfo)
+      console.log('Store.state.userData',Store.state.userData)
 
       await this.getSeverpart()
 
 
       this.startDate = this.$moment().startOf('year').format('YYYY-MM')
+      this.startMonth = this.$moment(this.startDate).format('MM')
+      this.startYear = this.$moment(this.startDate).format('YYYY')
+
+
       this.endDate = this.$moment().subtract(1,'months').format('YYYY-MM')
-      console.log('Store.state.userData',Store.state.userData)
+      this.endMonth = this.$moment(this.endDate).format('MM')
+      this.endYear = this.$moment(this.endDate).format('YYYY')
       // this.selectServiceList = Store.state.userData.serverPartList
       // if(this.selectServiceList[0].value==='424'){
       //   let list = []
@@ -186,9 +217,12 @@ import moment from "moment";
       }
     },
     methods:{
+      // 返回按钮
+      handleBack(){
+        this.$util.toNextRoute('navigateBack',{ delta: 1})
+      },
       // 拿到服务区列表
       async getSeverpart(){
-        console.log('this.user',this.user)
         const req = {
           UserIdEncrypted: this.useInfo.userData.UserIdEncrypted
         }
@@ -277,10 +311,14 @@ import moment from "moment";
       handleGetStartTime(e){
         this.start = e.detail.value
         this.startDate = moment(e.detail.value).format('YYYY-MM')
+        this.startMonth = this.$moment(this.startDate).format('MM')
+        this.startYear = this.$moment(this.startDate).format('YYYY')
       },
       // 改变结束时间
       handleGetEndTime(e){
         this.endDate = moment(e.detail.value).format('YYYY-MM')
+        this.endMonth = this.$moment(this.endDate).format('MM')
+        this.endYear = this.$moment(this.endDate).format('YYYY')
       },
       handleChangeSettlementType(e){
         this.SettlementType = e
@@ -351,164 +389,265 @@ import moment from "moment";
 </script>
 
 <style scoped lang="scss">
-.main{
+.newMain{
   width: 100%;
-  min-height: 100vh;
+  max-height: 100vh;
   box-sizing: border-box;
-  .topBox{
+  background: #F3F3F3;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .header{
     width: 100%;
+    background: linear-gradient( 180deg, #FFF2E8 0%, #FFFFFF 100%);
     box-sizing: border-box;
-    padding: 24rpx 16rpx;
-    background: #fff;
-    .top{
+    padding: 0 32rpx;
+    .arrowBox{
+      width: 100%;
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      margin-bottom: 16rpx;
-      .service{
-        font-size: 24rpx;
-        color: #010101;
-        border-radius: 24rpx;
-        padding: 4rpx 16rpx;
-        background-color: #DEDEDE;
-        text-align: center;
+      .img{
+        width: 48rpx;
+        height: 48rpx;
       }
-      .time{
-        font-size: 24rpx;
-        color: #010101;
-        border-radius: 24rpx;
-        padding: 4rpx 16rpx;
-        background-color: #DEDEDE;
-        text-align: center;
-      }
-    }
-
-    .topFilterBox{
-      width: 100%;
-      display: flex;
-      box-sizing: border-box;
-      .filterItem{
-        width: 25%;
+      .selectServiceBox{
+        margin-left: 16rpx;
         display: flex;
-        flex-direction: column;
         align-items: center;
-        .imgIcon{
-          height: 37px;
-          width: 37px;
-          border-radius: 50%;
-          overflow: hidden;
-          margin-bottom: 16rpx;
-          padding: 9px;
-          box-sizing: border-box;
-
-          .img{
-            width: 100%;
-            height: 100%;
+        .serviceIcon{
+          width: 80rpx;
+          height: 80rpx;
+          position: relative;
+          z-index: 2;
+        }
+        .nameBox{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 600;
+          font-size: 28rpx;
+          color: #160002;
+          line-height: 40rpx;
+          text-align: left;
+          font-style: normal;
+          padding: 12rpx 34rpx 12rpx 48rpx;
+          display: inline-block;
+          border-top-right-radius: 200rpx;
+          border-bottom-right-radius:  200rpx;
+          background: #fff;
+          transform: translateX(-20px);
+          .moreIcon{
+            width: 24rpx;
+            height: 24rpx;
+            margin-left: 14rpx;
           }
         }
-        .filterLabel{
-          font-size: 24rpx;
-          text-align: center;
-          color: #808D97;
+      }
+    }
+    .timeBox{
+      margin-top: 24rpx;
+      display: flex;
+      align-items: center;
+      .timeSelect{
+        display: flex;
+        align-items: center;
+        .monthNumber{
+          font-size: 56rpx;
+          font-weight: bold;
+        }
+        .monthUnit{
+          margin-left: 4rpx;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #242729;
+        }
+        .year{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #786B6C;
+          line-height: 32rpx;
+          text-align: left;
+          font-style: normal;
+          margin-left: 8rpx;
+        }
+        .bottomArrow{
+          width: 32rpx;
+          height: 32rpx;
+          margin-left: 8rpx;
         }
       }
     }
-  }
 
-  .dataList{
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0 24rpx;
-    .dataItem{
+    .TabsBox{
       width: 100%;
+      margin-top: 32rpx;
       box-sizing: border-box;
-      background: #fff;
-      padding: 16rpx;
-      margin: 24rpx 0;
-      border-radius: 8rpx;
-      box-shadow: 0 0px 6rpx #E2E2E2;
-      position: relative;
-      .content-index {
-        width: 42rpx;
-        height: 32rpx;
-        line-height: 32rpx;
-        font-size: 24rpx;
-        color: #fff;
-        text-align: center;
-        background-color: #fb8b56;
-        position: absolute;
-        top: 26rpx;
-        left: -4rpx;
-        box-shadow: 4rpx 4rpx 2rpx 0 rgba(238,112,27,0.5)
-      }
-      .itemRow{
-        width: 100%;
+      display: flex;
+      align-items: center;
+      .tabItemList{
+        width: calc(100% - 192rpx);
         display: flex;
         align-items: center;
         justify-content: space-between;
-        .projectName{
-          width: 60%;
+        height: 62rpx;
+        .tabItem{
+          display: inline-block;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
           font-size: 28rpx;
-          height: 54rpx;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          color: #333333;
-          box-sizing: border-box;
-          padding-left: 40rpx;
+          height: 62rpx;
+          color: #242729;
+          line-height: 40rpx;
+          text-align: left;
+          font-style: normal;
         }
-        .leftName{
-          color: #686868;
-          font-size: 24rpx;
-          .radio{
-            display: inline-block;
-            width: 14rpx;
-            height: 14rpx;
-            border-radius: 14rpx;
-            margin: 0 8px 0 5px;
-          }
-        }
-        .stateName{
+        .selectTabItem{
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 500;
           font-size: 28rpx;
-          color: #999999;
+          color: #FD7F21;
+          line-height: 40rpx;
+          text-align: left;
+          font-style: normal;
+          position: relative;
         }
-        .rightName{
-          color: #686868;
-          font-size: 24rpx;
-          .radio{
-            display: inline-block;
-            width: 14rpx;
-            height: 14rpx;
-            border-radius: 14rpx;
-            margin: 0 8px 0 5px;
-          }
+        .selectTabItem:after{
+          content:'';
+          height: 6rpx;
+          position: absolute;
+          width: 100%;
+          left: 0;bottom: 0;
+          background: #FD7F21;
         }
       }
-      .itemCenterRow{
-        width: 100%;
+      .otherItem{
+        width: 192rpx;
+        height: 62rpx;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #786B6C;
+        line-height: 40rpx;
+        text-align: left;
+        font-style: normal;
+        position: relative;
+        box-sizing: border-box;
+        padding-left: 60rpx;
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        .value{
-          font-size: 16px;
-          font-weight: 600;
-          color: #FF814FFF;
-        }
-        .label{
-          font-size: 12px;
-          color: #999999;
+        .filterIcon{
+          width: 32rpx;
+          height: 32rpx;
+          margin-right: 4rpx;
+          margin-top: 4rpx;
         }
       }
-      .line{
-        height: 2rpx;
-        width: 100%;
-        background-color: #eee;
-        margin-bottom: 18rpx;
-        margin-top: 16rpx;
+      .otherItem:before{
+        content:'';
+        width: 1px;
+        background: #E4E4E4;
+        position: absolute;
+        top: 0;left: 0;
       }
     }
   }
 
+    .contentBox{
+      width: 100%;
+      height: 100%;
+      .dataList{
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 24rpx;
+        .dataItem{
+          width: 100%;
+          box-sizing: border-box;
+          background: #fff;
+          padding: 16rpx;
+          margin: 24rpx 0;
+          border-radius: 8rpx;
+          box-shadow: 0 0px 6rpx #E2E2E2;
+          position: relative;
+          .content-index {
+            width: 42rpx;
+            height: 32rpx;
+            line-height: 32rpx;
+            font-size: 24rpx;
+            color: #fff;
+            text-align: center;
+            background-color: #fb8b56;
+            position: absolute;
+            top: 26rpx;
+            left: -4rpx;
+            box-shadow: 4rpx 4rpx 2rpx 0 rgba(238,112,27,0.5)
+          }
+          .itemRow{
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .projectName{
+              width: 60%;
+              font-size: 28rpx;
+              height: 54rpx;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              color: #333333;
+              box-sizing: border-box;
+              padding-left: 40rpx;
+            }
+            .leftName{
+              color: #686868;
+              font-size: 24rpx;
+              .radio{
+                display: inline-block;
+                width: 14rpx;
+                height: 14rpx;
+                border-radius: 14rpx;
+                margin: 0 8px 0 5px;
+              }
+            }
+            .stateName{
+              font-size: 28rpx;
+              color: #999999;
+            }
+            .rightName{
+              color: #686868;
+              font-size: 24rpx;
+              .radio{
+                display: inline-block;
+                width: 14rpx;
+                height: 14rpx;
+                border-radius: 14rpx;
+                margin: 0 8px 0 5px;
+              }
+            }
+          }
+          .itemCenterRow{
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .value{
+              font-size: 16px;
+              font-weight: 600;
+              color: #FF814FFF;
+            }
+            .label{
+              font-size: 12px;
+              color: #999999;
+            }
+          }
+          .line{
+            height: 2rpx;
+            width: 100%;
+            background-color: #eee;
+            margin-bottom: 18rpx;
+            margin-top: 16rpx;
+          }
+        }
+      }
+    }
   .uniPopup{
     width: 100%;
     height: 400px;
diff --git a/static/images/settlementApproval/bottomArrow.png b/static/images/settlementApproval/bottomArrow.png
new file mode 100644
index 0000000..4250c07
Binary files /dev/null and b/static/images/settlementApproval/bottomArrow.png differ
diff --git a/static/images/settlementApproval/filter.png b/static/images/settlementApproval/filter.png
new file mode 100644
index 0000000..955bfaf
Binary files /dev/null and b/static/images/settlementApproval/filter.png differ
diff --git a/static/images/settlementApproval/pageBg.png b/static/images/settlementApproval/pageBg.png
new file mode 100644
index 0000000..c2a0e72
Binary files /dev/null and b/static/images/settlementApproval/pageBg.png differ
diff --git a/static/images/settlementApproval/serviceIcon.png b/static/images/settlementApproval/serviceIcon.png
new file mode 100644
index 0000000..e53b122
Binary files /dev/null and b/static/images/settlementApproval/serviceIcon.png differ
diff --git a/store/store.js b/store/store.js
index d74f40c..10cf7bf 100644
--- a/store/store.js
+++ b/store/store.js
@@ -75,19 +75,19 @@ const actions = {
 			commit('setUserTodoList', res.Data)
 		})
 	},
-	memberLogin({ dispatch, state,commit},_code) {
+	async memberLogin({ dispatch, state,commit},_code) {
 		let _user = state.userData
 		request.$get('WeChat_Login',{
 		// request.$webGet('WebAPI_Push/WeChat/Login',{
 			WeChat_Code: _code || '',
 
-		}).then(data=>{
+		}).then( async data=>{
 			console.log('memberLogin',data)
 			if (data.Result_Code === 100) {
 				  let user = data.Result_Data
 				  if (user.Membership_Id) {
 					commit('setUser', user)
-					dispatch('updateUser',data.Result_Data)
+					await dispatch('updateUser',data.Result_Data)
 					// _this.addUserBehavior(1002) // 记录用户行为
 				  }else{
 					  commit('setUser', user)