diff --git a/pages/index/center.vue b/pages/index/center.vue
index 2ffcbd3..882a72b 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -241,7 +241,7 @@
 			customerServicePopup,
 		},
 		computed: {
-			...mapState(['riceInfo']),
+			...mapState(['userInfo', 'riceInfo']),
 			adList() {
 				let arr = [];
 				if (this.configList?.shop_get_image) {
diff --git a/pages_order/components/progress.vue b/pages_order/components/progress.vue
new file mode 100644
index 0000000..479bee1
--- /dev/null
+++ b/pages_order/components/progress.vue
@@ -0,0 +1,90 @@
+<template>
+  <view class="progress__view">
+    <view class="mark" :style="{ marginLeft: `${percentage}%` }">{{ current }}</view>
+    <view class="progress">
+      <view class="progress-active" :style="{ width: `${percentage}%` }">
+        <view class="progress-active-dot"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    current: {
+      type: Number,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      default: 100,
+    }
+  },
+  computed: {
+    percentage() {
+      return Math.floor(this.current / this.total * 100)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$progress-height: 14rpx;
+
+.progress__view {
+  width: 100%;
+  font-size: 0;
+}
+
+.mark {
+  background-color: $uni-color-light;
+  color: $uni-text-color-inverse;
+  font-size: 18rpx;
+  padding: 0 10rpx;
+  display: inline-block;
+  border-radius: 5rpx;
+
+  transform: translateX(calc(-50% - #{$progress-height} / 2 ));
+  position: relative;
+  margin-bottom: 8rpx;
+
+  &:after {
+    content: ' ';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border: 4rpx solid transparent;
+    border-top-color: $uni-color-light;
+  }
+}
+
+.progress {
+  width: 100%;
+  height: $progress-height;
+  border-radius: 7rpx;
+
+  background-color: #CEE2AA;
+
+  &-active {
+    background-color: $uni-color-light;
+    height: 100%;
+    border-radius: 7rpx;
+
+    position: relative;
+
+    &-dot {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: $progress-height;
+      height: $progress-height;
+      background-color: $uni-fg-color;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages_order/mine/memberCenter.vue b/pages_order/mine/memberCenter.vue
index 90cc64f..5e84e2f 100644
--- a/pages_order/mine/memberCenter.vue
+++ b/pages_order/mine/memberCenter.vue
@@ -1,444 +1,391 @@
 <!-- 会员中心页面 -->
 <template>
-	<view class="member-center">
+	<view class="page">
 		<!-- 导航栏 -->
-		<navbar title="会员中心" leftClick @leftClick="$utils.navigateBack" 
-		bgColor="#000" color="#fff" />
-
-		<!-- 会员卡片 -->
-		<!-- <swiper class="swiper" 
-		circular 
-		:indicator-dots="indicatorDots" 
-		:autoplay="autoplay" 
-		:interval="interval"
-		:duration="duration" :current="current" style="height: 380rpx;">
-			<swiper-item v-for="(item,index) in list" :key="item.id">
-				<view class="member-item">
-					<image :src="item.headImage" mode="widthFix" class="member-image"></image>
-					<view class="member-info">
-						<view class="profile-photo">
-							<image :src="userInfo.headImage" mode="aspectFill" class="pro-img">
-							</image>
-							<view class="open-status">
-								{{ index + 1 == userInfo.role ? '已开通' : '暂未开通'}}
-							</view>
-						</view>
-						<view class="open">
-							累计消费满{{ item.money }}元自动开通
-						</view>
-					</view>
-				</view>
-			</swiper-item>
-		</swiper> -->
-		
-		<view class=""
-		style="width: 100%;height: 150rpx;position: absolute;z-index: -1;background-color: #000;">
-			
-		</view>
-		
-		<uv-swiper 
-		:list="list"
-		previousMargin="60rpx" 
-		nextMargin="60rpx" 
-		circular 
-		:autoplay="false" 
-		radius="20rpx" 
-		indicator 
-		height="290rpx" 
-		bgColor="transparent"
-		keyName="headImage"></uv-swiper>
-
-		<!-- <esc-swiper ref="swiper" :autoplay="true" :circular="true" :current.sync="current" :size="list.length"
-			:plus="2" :width="750" :height="290" :itemWidth="600" :space="30">
-			<esc-swiper-item class="member-item" v-for="(item, idx) in list" :index="idx" :key="item.id">
-				<view class="item" style="width: 100%;height: 100%;">
-					<image :src="item.headImage" mode="widthFix" class="member-image"></image>
-					<view class="member-info">
-						<view class="profile-photo">
-							<image :src="userInfo.headImage" mode="aspectFill" class="pro-img">
-							</image>
-							<view class="open-status">
-								暂未开通
-							</view>
-						</view>
-						<view class="open">
-							累计消费满{{ item.money }}元自动开通
-						</view>
+		<navbar title="会员中心" leftClick @leftClick="$utils.navigateBack" color="#fff" />
+	
+		<view class="content">
+			<view class="flex user">
+				<image class="user-avatar" :src="userInfo.headImage" mode="aspectFill"></image>
+				<view class="user-info">
+					<view class="flex user-name">
+						<text>{{ userInfo.nickName }}</text>
+						<template v-if="role === 'member-personal'">
+							<image class="icon icon-role" src="@/static/image/center/icon-member-personal.png" mode="widthFix"></image>
+						</template>
+						<template v-else-if="role === 'member-business'">
+							<image class="icon icon-role" src="@/static/image/center/icon-member-business.png" mode="widthFix"></image>
+						</template>
 					</view>
-				</view>
-			</esc-swiper-item>
-		</esc-swiper> -->
-
-		<!-- 充值套餐 -->
-		<!-- <view class="top-up-package">
-			<view class="title">
-				充值套餐
-			</view>
-			<view class="set-meal-list">
-				<view v-for="item in cardList" :key="item.id"
-					:class="{'active-set-meal-item' : item.id == userInfo.role }" 
-					class="set-meal-item">
-					<view class="card-tag">
-						限时折扣
-					</view>
-					<view class="card-title">{{ item.title }}</view>
-					<view class="money">
-						<text class="unit">￥</text>{{ item.money }}
+					<view class="user-desc">
+						<template v-if="role">
+							<!-- todo: 换回接口字段 -->
+							<text>{{ `将于${'2026-12-12'} 到期` }}</text>
+						</template>
+						<template v-else>
+							<text>暂未开通会员</text>
+						</template>
 					</view>
 				</view>
 			</view>
-			<view class="member-descript">
-				（不同会员等级商品价格不一样，可以设置给与推荐人佣金。）
+			<view class="consumption" v-if="!role">
+				<!-- todo: 对接接口 -->
+				<progress :current="1000" :total="3800"></progress>
+				<text class="consumption-desc">{{ `累积消费达到${3800}元或直接充值即可成为会员` }}</text>
 			</view>
-		</view> -->
-
-		<!-- 会员权益 -->
-		<view class="member-equity-title">
-			<image :src="configList.vip_qy_image" mode="widthFix" class="eqyity-img"></image>
-		</view>
-		
-		<view class="equity-card-list">
-			<view v-for="(item, index) in list" :key="item.id" class="equity-card">
-				<view class="equity-title">累计消费满{{ item.money }}，将获得{{ item.title }}</view>
-				<view class="equity-descript-list">
-					<!-- <view class="equity-descript-icon">
-						<image :src="item.icon" mode="widthFix" class="equity-descript-img"></image>
-					</view> -->
-					<view class="equity-descript-item">
-						<uv-parse :content="item.details"></uv-parse>
-					</view>
+			<view class="charge">
+				<view class="charge-header">
+					<view class="flex charge-header-title">充值会员</view>
+					<view class="charge-header-mask"></view>
 				</view>
-			</view>
-		</view>
-		
-		<!-- <view class="equity-card-list">
-			<view v-for="(item,index) in equityList" :key="item.id" class="equity-card">
-				<view class="equity-title">{{ item.title }}</view>
-				<view class="equity-descript-list">
-					<view class="equity-descript-icon">
-						<image :src="item.icon" mode="widthFix" class="equity-descript-img"></image>
+				<view class="charge-content">
+					<view class="flex charge-selection">
+						<view class="flex charge-option"
+							v-for="item in chargeOptions"
+							:key="item.id"
+							:class="[selectedChargeId === item.id ? 'is-active' : '']"
+							@click="onSelectCharge(item.id)"
+						>
+							<view class="charge-option-value">
+								<text class="charge-option-unit">¥</text>
+								<text>{{ item.value }}</text>
+							</view>
+						</view>
 					</view>
-					<view v-for="(litem,lindex) in item.list" :key="lindex" class="equity-descript-item">
-						<view class="num">
-							{{ lindex + 1 }}
+					<view class="charge-rights">
+						<view class="flex charge-rights-header">
+							<image class="title" src="../static/memberCenter/title-rights.png" mode="widthFix"></image>
 						</view>
-						<view class="content">
-							{{ litem }}
+						<view class="charge-rights-content">
+							<view class="charge-rights-item"
+								v-for="(item, index) in rights"
+								:key="item"
+							>
+								{{ `${index+1}、${item}` }}
+							</view>
+							<image class="icon" src="../static/memberCenter/icon-rights.png" mode="widthFix"></image>
 						</view>
 					</view>
 				</view>
 			</view>
-		</view> -->
+		</view>
+
+		<view class="flex bar">
+			<view class="flex count">
+				<text>合计：</text>
+				<view class="price">
+					<text class="price-unit">¥</text>
+					<!-- todo: check -->
+					<text>{{ totalPrice }}</text>
+				</view>
+			</view>
+			<view class="btn btn-pay" @click="submit">
+				开通会员
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import mixinsList from '@/mixins/list.js'
+	import progress from '../components/progress.vue'
+
 	import {
 		mapState
 	} from 'vuex'
 
 	export default {
 		name: "MemberCenter",
-		mixins: [mixinsList],
+		components: {
+			progress,
+		},
 		data() {
 			return {
-				cardList: [{
-						id: 1,
-						title: "金卡",
-						money: "39"
-					},
-					{
-						id: 2,
-						title: "银卡",
-						money: "29"
-					},
+        role: 'member-business', // member-personal | member-business | merchant
+				// todo: fetch
+				chargeOptions: [
 					{
-						id: 3,
-						title: "钻石卡",
-						money: "99"
-					}
-				],
-				equityList: [{
-						id: 1,
-						title: "权益1·专属推广码",
-						icon: "/pages_order/static/memberCenter/descript1.png",
-						list: [
-							"购买会员卡或者购物金额满500元！有专属推广码。",
-							"显示直推，间推人员信息及下单佣金明细。"
+						id: '001',
+						value: 800,
+						rights: [
+							'会员享受专属折扣和优惠活动',
+							'会员积分累积与抵扣功能',
+							'成为会员后，得到平台发放的代金券',
 						]
 					},
 					{
-						id: 2,
-						title: "权益2·直推奖励",
-						icon: "/pages_order/static/memberCenter/descript2.png",
-						list: [
-							"通过扫专属推广码进来的用户下单，享受30%的直推奖励！（比例可调）",
-							"显示直推，间推人员信息及下单佣金明细。"
+						id: '002',
+						value: 1800,
+						rights: [
+							'会员享受专属折扣和优惠活动',
+							'会员积分累积与抵扣功能',
+							'成为会员后，得到平台发放的代金券',
 						]
 					},
 					{
-						id: 3,
-						title: "权益3·间推奖励",
-						icon: "/pages_order/static/memberCenter/descript1.png",
-						list: [
-							"下级发展的用户下单，享受20%的间推奖励！（比例可调）",
+						id: '003',
+						value: 2800,
+						rights: [
+							'会员享受专属折扣和优惠活动',
+							'会员积分累积与抵扣功能',
+							'成为会员后，得到平台发放的代金券',
 						]
 					},
-					{
-						id: 4,
-						title: "权益4·会员等级奖励",
-						icon: "/pages_order/static/memberCenter/descript2.png",
-						list: [
-							"银，金，钻不同会员等级，同一个商品分佣比例不一样，等级越高，佣金比例越高！"
-						]
-					}
 				],
-				mixinsListApi: "getRiceVipList",
-				current: 0
+				selectedChargeId: '001'
 			}
-		},
-		methods: {
-
 		},
 		computed: {
-			...mapState(['userInfo'])
+			...mapState(['userInfo']),
+			selectedChargeObj() {
+				return this.chargeOptions.find(item => item.id === this.selectedChargeId)
+			},
+			rights() {
+				return this.selectedChargeObj?.rights || []
+			},
+			totalPrice() {
+				return this.selectedChargeObj?.value || 0
+			}
+		},
+		methods: {
+			onSelectCharge(id) {
+				// todo
+				this.selectedChargeId = id
+			},
+			submit() {
+				// todo: check jump to create order ?
+			}
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
-	.member-center {
+<style scoped lang="scss">
+	$bar-height: 132rpx;
+
+  .page {
+		padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
+		background-color: $uni-fg-color;
+		min-height: 100vh;
+		position: relative;
+    		
+		/deep/ .nav-bar__view {
+			padding-bottom: 413rpx;
+			background-image: linear-gradient(#84A73F, #D8FF8F);
+		}
+  }
+
+	.content {
+		position: absolute;
+		top: 175rpx;
+		width: 100vw;
+		z-index: 999;
+	}
 
-		//会员卡片
-		.member-image {
-			width: 100%;
-			height: auto;
+	.user {
+		align-items: flex-start;
+		color: $uni-text-color-inverse;
+		font-size: 22rpx;
+		margin: 0 18rpx;
+
+		&-avatar {
+			width: 147rpx;
+			height: 147rpx;
+			margin-right: 8rpx;
 		}
 
-		.member-info {
-			position: absolute;
-			bottom: 40rpx;
-			left: 0rpx;
-			display: flex;
-			justify-content: space-between;
-			padding: 0rpx 40rpx;
-			box-sizing: border-box;
-			width: 100%;
+		&-info {
+			flex: 1;
+		}
 
-			.profile-photo {
-				display: flex;
-				justify-content: center;
-				align-items: center;
+		&-name {
+			font-size: 32rpx;
+			margin-top: 16rpx;
 
-				.pro-img {
-					width: 60rpx;
-					height: 60rpx;
-					border-radius: 50%;
-				}
+			justify-content: flex-start;
+
+			.icon {
+				height: auto;
 
-				.open-status {
-					color: #F8A95F;
-					border: 1px solid #F8A95F;
-					border-radius: 30rpx;
-					padding: 7rpx 20rpx;
-					margin-left: 10rpx;
+				&-role {
+					width: 138rpx;
 				}
 			}
+		}
 
-			.open {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				background: #F8A95F;
-				color: white;
-				border-radius: 30rpx;
-				padding: 7rpx 20rpx;
-			}
+		&-desc {
+			margin-top: 26rpx;
+		}
+	}
+
+	.consumption {
+		margin: 0 28rpx;
+
+		&-desc {
+			color: $uni-text-color-inverse;
+			font-size: 22rpx;
+			margin-top: 1rpx;
 		}
+	}
 
-		// 充值套餐
-		.top-up-package {
-			padding: 0rpx 20rpx;
-			box-sizing: border-box;
+	.charge {
+		background-color: $uni-fg-color;
+		border-top-left-radius: 18rpx;
+		border-top-right-radius: 18rpx;
+		margin-top: 45rpx;
 
-			.title {
-				font-size: 36rpx;
-				font-weight: bold;
-				margin-top: 30rpx;
-			}
+		&-header {
+			$header-height: 90rpx;
 
-			.set-meal-list {
-				display: flex;
-				flex-wrap: wrap;
-				margin-top: 20rpx;
-
-				.set-meal-item {
-					position: relative;
-					width: 30%;
-					margin-right: calc(9% / 2);
-					border-radius: 10rpx;
-					overflow: hidden;
-					box-sizing: border-box;
-					background: white;
-					margin-bottom: 20rpx;
-					padding: 40rpx;
-
-					&:nth-child(3n) {
-						margin-right: 0rpx;
-					}
-
-					.card-tag {
-						position: absolute;
-						left: 0;
-						top: 0;
-						background: #FF9633;
-						border-bottom-right-radius: 10rpx;
-						color: white;
-						padding: 5rpx 10rpx;
-						font-size: 20rpx;
-					}
-
-					.card-title {
-						text-align: center;
-						font-size: 38rpx;
-						font-weight: bold;
-					}
-
-					.money {
-						color: #FF9633;
-						font-size: 30rpx;
-						text-align: center;
-
-						.unit {}
-					}
-				}
+			height: $header-height;
+			position: relative;
 
-				.active-set-meal-item {
-					border: 2rpx solid #FF9633;
-					background: #FFF5EB;
-				}
+			&-title {
+				width: calc(50% + 25rpx);
+				height: 100%;
+				color: $uni-text-color-inverse;
+				font-size: 28rpx;
+				background-image: linear-gradient(#84A73F, #D8FF8F);
+				box-sizing: border-box;
+				border-top-left-radius: 18rpx;
+				border-bottom-right-radius: 90rpx;
 			}
-
-			.member-descript {
-				font-size: 24rpx;
-				color: #333333;
-				text-align: center;
+			
+			&-mask {
+				$marsk-width: 50rpx;
+
+				position: absolute;
+				top: 0;
+				right: 50%;
+				transform: translateX(25rpx);
+				// height: 100%;
+				// width: 70rpx;
+				width: 0;
+				height: 0;
+				border-top: calc(#{$header-height}/2) solid transparent;
+				border-left: calc(#{$marsk-width}/2) solid transparent;
+				border-bottom: calc(#{$header-height}/2) solid $uni-fg-color;
+				border-right: calc(#{$marsk-width}/2) solid $uni-fg-color;
 			}
 		}
 
-		// 会员权益
-		.member-equity-title {
-			margin: 30rpx 0rpx;
-			padding: 0rpx 20rpx;
+		&-content {
+			padding: 57rpx 14rpx;
+		}
+
+		&-selection {
+			justify-content: space-between;
+			font-size: 0;
+		}
+
+		&-option {
+			width: 230rpx;
+			height: 248rpx;
 			box-sizing: border-box;
+			background-color: #F5F5F5;
+			border: 3rpx solid #C7C7C7;
+			border-radius: 16rpx;
+			box-shadow: 0rpx 3rpx 6rpx 0rpx #eef3e3; 
+			color: #999999;
+
+			&-value {
+				font-size: 61rpx;
+			}
+
+			&-unit {
+				font-size: 34rpx;
+				margin-right: 6rpx;
+			}
 
-			.eqyity-img {
-				width: 240rpx;
+			&.is-active {
+				background-color: rgba($color: #E9FFC3, $alpha: 0.74);
+				border-color: $uni-color-light;
+				color: #F64041;
 			}
 		}
 
-		.equity-card-list {
-			padding: 0rpx 20rpx;
-			box-sizing: border-box;
+		&-rights {
+			margin-top: 67rpx;
 
-			.equity-card {
-				background: white;
-				border-radius: 10rpx;
-				margin-bottom: 40rpx;
-				padding: 20rpx;
-				box-sizing: border-box;
+			&-header {
+				.title {
+					width: 202rpx;
+					height: auto;
+				}
+			}
 
-				.equity-title {
-					color: #F18F09;
-					font-size: 28rpx;
-					font-weight: bold;
+			&-content {
+				margin-top: 31rpx;
+				background-color: rgba($color: #E2FFAE, $alpha: 0.71);
+				border-radius: 16rpx;
+				padding: 29rpx 30rpx;
+				width: 100%;
+				min-height: 500rpx;
+				box-sizing: border-box;
+				position: relative;
+
+				.icon {
+					position: absolute;
+					top: 23rpx;
+					right: 11rpx;
+					width: 131rpx;
+					height: auto;
 				}
+			}
+
+			&-item {
+				margin-top: 26rpx;
+				color: $uni-color-light;
+				font-size: 28rpx;
+			}
+		}
+	}
+	
+	// 下单
+	.bar {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		left: 0;
+		width: 100vw;
+		height: $bar-height;
+		padding-bottom: env(safe-area-inset-bottom);
+		background-color: $uni-fg-color;
+		
+		.count {
+			flex: 1;
+			color: #000000;
+			font-size: 28rpx;
+			margin-left: 48rpx;
 
-				.equity-descript-list {
-					position: relative;
-
-					.equity-descript-icon {
-						.equity-descript-img {
-							width: 150rpx;
-						}
-					}
-
-					.equity-descript-item {
-						position: relative;
-						background: #FDF9EF;
-						border-radius: 10rpx;
-						border: 1px solid #F7C47B;
-						margin: 20rpx 0rpx;
-						padding: 20rpx;
-						box-sizing: border-box;
-						color: #BA7E2B;
-						font-size: 24rpx;
-
-						.num {
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							position: absolute;
-							top: -15rpx;
-							left: -15rpx;
-							width: 30rpx;
-							height: 30rpx;
-							border-radius: 50%;
-							background: #F18F09;
-							border: 2px solid #F8CB8E;
-							box-sizing: border-box;
-							color: white;
-							font-size: 24rpx;
-						}
-					}
+			justify-content: flex-start;
+
+			.price {
+				color: #FF2A2A;
+				font-size: 30rpx;
+
+				&-unit {
+					font-size: 18rpx;
 				}
+			}
+		}
 
-				// &:nth-child(1) {
-				// 	.equity-descript-list {
-				// 		display: flex;
-				// 		justify-content: space-between;
-				// 		flex-wrap: wrap;
-
-				// 		.equity-descript-icon {
-				// 			position: absolute;
-				// 			bottom: 100%;
-				// 			right: 0rpx;
-				// 			z-index: 200;
-				// 		}
-
-				// 		.equity-descript-item {
-				// 			width: 49%;
-				// 		}
-				// 	}
-				// }
-
-				// &:nth-child(2) {
-				// 	.equity-descript-icon {
-				// 		position: absolute;
-				// 		bottom: -10%;
-				// 		right: 0rpx;
-				// 		z-index: 200;
-				// 	}
-
-				// 	.equity-descript-item {
-				// 		&:nth-child(3) {
-				// 			width: calc(100% - 160rpx);
-				// 			margin-right: 10rpx;
-				// 		}
-				// 	}
-				// }
-
-				// &:nth-child(3),
-				// &:nth-child(4) {
-				// 	.equity-descript-icon {
-				// 		position: absolute;
-				// 		bottom: 100%;
-				// 		right: 0rpx;
-				// 		z-index: 200;
-				// 	}
-				// }
+		.btn {
+			border: none;
+			line-height: 1;
+			background-color: transparent;
+			padding: 0;
+			width: auto;
+			height: auto;
+			margin: 0;
+
+			&-pay {
+				margin-right: 41rpx;
+				padding: 24rpx 137rpx;
+				color: $uni-text-color-inverse;
+				font-size: 28rpx;
+				border-radius: 44rpx;
+				background-image: linear-gradient(to right, #84A73F, #D8FF8F);
 			}
+
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/pages_order/mine/partner.vue b/pages_order/mine/partner.vue
index 25919fb..2d6d702 100644
--- a/pages_order/mine/partner.vue
+++ b/pages_order/mine/partner.vue
@@ -1,77 +1,88 @@
-<!-- 合伙人页面 -->
 <template>
-	<view class="partner">
+	<view class="page">
 		<!-- 导航栏 -->
-		<navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
-
-		<!-- 合伙人信息 -->
-		<view class="partner-info-bg">
-			<view class="partner-info">
-				<view class="profile-photo">
-					<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
-				</view>
-
-				<view class="performance-information">
-					<view class="user-info-base">
-						<view class="username">{{ userInfo.phone }}</view>
-						<view class="user-tag">{{ userRole[userInfo.isPay] }}</view>
+		<navbar title="我的团队" leftClick @leftClick="$utils.navigateBack" color="#fff" />
+	
+		<view class="card flex info">
+			<image class="avatar" :src="userInfo.headImage" mode="aspectFill"></image>
+			<view class="right">
+				<view class="phone">{{ userInfo.phone }}</view>
+				<view class="flex account">
+					<view class="count">
+						<view><text class="count-unit">¥</text>{{ riceInfo.canWithdraw }}</view>
+						<view class="count-desc">推广佣金</view>
 					</view>
+					<button plain class="btn" @click="$utils.navigateTo('/pages_order/mine/withdraw')">去提现</button>
+				</view>
+			</view>
+		</view>
 
-					<view class="live-performance">
-						<view class="live-performance-money">
-							<view class="live-tag">
-								直推及间推业绩
-							</view>
-							<view class="money">
-								<text class="unit">￥</text>{{ riceInfo.canWithdraw }}
-							</view>
-						</view>
-						<view class="withdraw">
-							<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="btn">
-								去提现
+		<view class="list">
+			<view class="list-header">
+				<!-- todo: check -->
+				<view class="list-header-title">
+					<text>直推用户<text class="sub">（1人）</text></text>
+					<view class="list-header-title-line"></view>
+				</view>
+				<!-- <view class="tabs">
+					<uv-tabs :activeStyle="{ color : '#DC2828' }" lineColor="#DC2828" :list="tabList"
+						@click="handleTabEvent"></uv-tabs>
+				</view> -->
+			</view>
+			<view class="list-content">
+				<template v-if="list.length">
+					<view class="card flex list-item" v-for="item in list" :key="item.id">
+						<view class="left flex">
+							<image class="avatar" :src="item.headImage" mode="aspectFill"></image>
+							<view class="detail">
+								<view class="row name">{{ item.nickName }}</view>
+								<view class="row">{{ `下单时间：${item.createTime}` }}</view>
+								<!-- todo: 对接接口字段 -->
+								<view class="row">{{ `${item.projectNmae}：${item.projectPrice}` }}</view>
 							</view>
 						</view>
+						<view class="commission">{{ `+${item.commission}` }}</view>
 					</view>
-				</view>
+				</template>
+				<template v-else>
+					<uv-empty mode="list"></uv-empty>
+				</template>
 			</view>
 		</view>
 
-		<view class="tabs">
-			<uv-tabs :activeStyle="{ color : '#DC2828' }" lineColor="#DC2828" :list="tabList"
-				@click="handleTabEvent"></uv-tabs>
-		</view>
+		<template v-if="false">
 
-		<!-- 列表 -->
-		<view class="brokerage-list">
-			<view v-for="item in list" :key="item.id" class="brokerage-item">
-				<view class="brokerage-user">
-					<image :src="item.headImage" mode="aspectFill" class="pro-img"></image>
-					<view class="name-time">
-						<view class="name">
-							{{ item.nickName }}
-						</view>
-						<!-- <view class="time">
-							已加入平台{{ daysBetweenDates(item.createTime,new Date().toString())}}天
-						</view> -->
-						<view class="time">
-							加入时间{{ item.createTime }}天
+			<!-- 列表 -->
+			<view class="brokerage-list">
+				<view v-for="item in list" :key="item.id" class="brokerage-item">
+					<view class="brokerage-user">
+						<image :src="item.headImage" mode="aspectFill" class="pro-img"></image>
+						<view class="name-time">
+							<view class="name">
+								{{ item.nickName }}
+							</view>
+							<!-- <view class="time">
+								已加入平台{{ daysBetweenDates(item.createTime,new Date().toString())}}天
+							</view> -->
+							<view class="time">
+								加入时间{{ item.createTime }}天
+							</view>
 						</view>
 					</view>
-				</view>
 
-				<view class="brokerage-money">
-					<view class="order-money">
-						下单量: <text>{{ item.orderNum }}</text>
-					</view>
-					<text>|</text>
-					<view class="money">
-						佣金:<text>{{ item.commission }}元</text>
+					<view class="brokerage-money">
+						<view class="order-money">
+							下单量: <text>{{ item.orderNum }}</text>
+						</view>
+						<text>|</text>
+						<view class="money">
+							佣金:<text>{{ item.commission }}元</text>
+						</view>
 					</view>
 				</view>
+				
 			</view>
-			
-			<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
-		</view>
+		</template>
 
 	</view>
 </template>
@@ -131,6 +142,151 @@
 </script>
 
 <style lang="scss" scoped>
+	.page {
+		background-color: #F5F5F5;
+		min-height: 100vh;
+		position: relative;
+    		
+		/deep/ .nav-bar__view {
+			padding-bottom: 324rpx;
+			background-image: linear-gradient(#84A73F, #D8FF8F);
+		}
+  }
+
+	.info {
+		position: absolute;
+		z-index: 999;
+    transform: translateY(calc(-100% - 27rpx));
+
+		box-sizing: border-box;
+		width: calc(100% - 13rpx*2);
+		padding: 0 33rpx 0 20rpx;
+		margin: 0 13rpx;
+		align-items: flex-start;
+
+		.avatar {
+			width: 145rpx;
+			height: 145rpx;
+			margin: 46rpx 20rpx 26rpx 0;
+		}
+
+		.phone {
+			color: #000000;
+			font-size: 28rpx;
+		}
+
+		.account {
+			border-top: 1rpx dashed #707070;
+			align-items: flex-start;
+			justify-content: space-between;
+			padding: 23rpx 7rpx 15rpx 26rpx;
+
+			.count {
+				color: #FF2A2A;
+				font-size: 32rpx;
+				font-weight: 700;
+				
+				&-unit {
+					font-size: 15rpx;
+				}
+
+				&-desc {
+					color: #666666;
+					font-size: 22rpx;
+					margin-top: 9rpx;
+					margin-left: 2rpx;
+				}
+			}
+
+			.btn {
+				display: inline-block;
+				padding: 14rpx 47rpx;
+				color: $uni-text-color-inverse;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				border-radius: 34rpx;
+				border: none;
+				background-image: linear-gradient(to right, #84A73F, #D8FF8F);
+			}
+		}
+
+		.right {
+			flex: 1;
+			padding-top: 52rpx;
+		}
+	}
+
+	.list {
+		&-header {
+			background-color: $uni-fg-color;
+			padding: 0 48rpx;
+
+			&-title {
+				color: #000000;
+				font-size: 28rpx;
+				padding: 33rpx 0 17rpx 0;
+
+				position: relative;
+
+				.sub {
+					color: #84A73F;
+					font-size: 22rpx;
+				}
+				
+				&-line {
+					position: absolute;
+					left: 6rpx;
+					bottom: 0;
+
+					width: 92rpx;
+					height: 5rpx;
+					border-radius: 3rpx;
+					background-image: linear-gradient(to right, #84A73F, #D8FF8F);
+				}
+			}
+		}
+		
+		&-content {
+			padding: 7rpx 13rpx;
+
+			.left {
+				flex: 1;
+			}
+		}
+
+		&-item {
+			margin-top: 8rpx;
+			padding: 0 40rpx 0 18rpx;
+
+			.avatar {
+				width: 82rpx;
+				height: 82rpx;
+				border-radius: 50%;
+			}
+			
+			.detail {
+				flex: 1;
+				margin: 9rpx 0 7rpx 13rpx;
+				color: #999999;
+				font-size: 18rpx;
+			}
+
+			.row + .row {
+				margin-top: 4rpx;
+			}
+
+			.name {
+				color: #000000;
+				font-size: 26rpx;
+			}
+
+			.commission {
+				color: #FF2A2A;
+				font-size: 22rpx;
+			}
+		}
+	}
+	
 	.partner {
 
 		// 合伙人信息
diff --git a/pages_order/static/memberCenter/descript1.png b/pages_order/static/memberCenter/descript1.png
deleted file mode 100644
index 731d1fd..0000000
Binary files a/pages_order/static/memberCenter/descript1.png and /dev/null differ
diff --git a/pages_order/static/memberCenter/descript2.png b/pages_order/static/memberCenter/descript2.png
deleted file mode 100644
index c6e56fa..0000000
Binary files a/pages_order/static/memberCenter/descript2.png and /dev/null differ
diff --git a/pages_order/static/memberCenter/icon-rights.png b/pages_order/static/memberCenter/icon-rights.png
new file mode 100644
index 0000000..d003ca1
Binary files /dev/null and b/pages_order/static/memberCenter/icon-rights.png differ
diff --git a/pages_order/static/memberCenter/title-rights.png b/pages_order/static/memberCenter/title-rights.png
new file mode 100644
index 0000000..8245303
Binary files /dev/null and b/pages_order/static/memberCenter/title-rights.png differ