diff --git a/components/navigation/navigationBar.vue b/components/navigation/navigationBar.vue
new file mode 100644
index 0000000..cd18f28
--- /dev/null
+++ b/components/navigation/navigationBar.vue
@@ -0,0 +1,129 @@
+<template>
+	<!-- header -->
+	<view :style="{ backgroundColor, paddingTop: homeHeaderPaddingTop + 'px' }" class="navigationBar"
+		:class="{leftTitle: leftTitle}">
+		<template v-if="leftTitle">
+			<view class="navigationBarTitle" :style="{ color: titleColor }">
+				{{ title ? title : '' }}
+			</view>
+		</template>
+		<template v-else>
+			<view class="navigationBarBack" @click="back">
+				<slot name="back">
+					<uni-icons size="24" type="left" :color="titleColor"></uni-icons>
+				</slot>
+			</view>
+			<view class="navigationBarTitle" :style="{ color: titleColor }">
+				{{ title }}
+			</view>
+			<view v-if="showClear" @click="clearNoReadFun" class="navigationBarIcon" :style="{ color: titleColor }">
+				<image src="@/static/images/clear.png" mode="" class="clear-icon"></image>
+			</view>
+		</template>
+		<view class="navigationBarBackExtra">
+			<slot name="extra">
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/* 计算标题位置 */
+	import {
+		getWXStatusHeight
+	} from "@/utils/common.js";
+
+	export default {
+		props: {
+			backgroundColor: {
+				type: String,
+				default: '#317DFA'
+			},
+			title: String,
+			titleColor: {
+				type: String,
+				default: '#fff'
+			},
+			leftTitle: {
+				type: Boolean,
+				default: false
+			},
+			showClear: {
+				type: Boolean,
+				default: false
+			}
+		},
+		mounted() {
+			// #ifdef MP
+			const {
+				barHeight,
+				barTop,
+				menuButtonLeft
+			} = getWXStatusHeight()
+			console.log('barHeight, barTop, menuButtonLeft: ', barHeight, barTop, menuButtonLeft);
+			this.homeHeaderPaddingTop = barTop || 0
+			this.homeHeaderMenuHeight = barHeight
+			this.homeHeaderMenuLeft = menuButtonLeft - 6
+			// #endif
+		},
+		data() {
+			return {
+				// #ifdef MP
+				homeHeaderPaddingTop: 0,
+				homeHeaderMenuHeight: 0,
+				homeHeaderMenuLeft: 0,
+				// #endif
+				// #ifdef APP || H5
+				homeHeaderPaddingTop: 20,
+				homeHeaderMenuHeight: 50,
+				homeHeaderMenuLeft: 0
+				// #endif
+			}
+		},
+		methods: {
+			back() {
+				uni.navigateBack()
+			},
+			clearNoReadFun() {
+				this.$emit('clearNoRead')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.navigationBar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&.leftTitle {
+			justify-content: start;
+			padding-left: 28rpx;
+		}
+
+		.navigationBarBack {
+			position: absolute;
+			left: 20rpx;
+		}
+
+		.navigationBarBackExtra {
+			position: absolute;
+			right: 20rpx;
+		}
+
+		.navigationBarTitle {
+			font-size: 36rpx;
+		}
+
+		.navigationBarIcon {
+			display: flex;
+		}
+
+		.clear-icon {
+			width: 40rpx;
+			height: 40rpx;
+			border-radius: 50%;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 2064e8b..035df00 100644
--- a/manifest.json
+++ b/manifest.json
@@ -41,9 +41,9 @@
     },
     "quickapp" : {},
     "mp-weixin" : {
-		"optimization":{
-			"subPackages":true
-		},
+        "optimization" : {
+            "subPackages" : true
+        },
         "appid" : "wxd8ef44a8268672e4",
         "setting" : {
             "urlCheck" : false,
@@ -51,9 +51,6 @@
             "minified" : true,
             "postcss" : true
         },
-        "optimization" : {
-            "subPackages" : true
-        },
         "usingComponents" : true
     },
     "vueVersion" : "2",
diff --git a/pages.json b/pages.json
index 499cc96..2afa0cb 100644
--- a/pages.json
+++ b/pages.json
@@ -1,129 +1,40 @@
 {
 	"pages": [{
-			"path": "pages/index",
-			"style": {
-				"navigationBarTitleText": "首页",
-				"navigationStyle": "custom"
+		"path": "pages/index",
+		"style": {
+			"navigationBarTitleText": "首页",
+			"navigationStyle": "custom",
+			"componentPlaceholder": {
+				"mine-index": "view",
+				"notice-index": "view",
+				"subscribe": "view"
 			}
-		}, {
-			"path": "pages/login",
-			"style": {
-				"navigationBarTitleText": "登录"
-			}
-		}, {
-			"path": "pages/register",
-			"style": {
-				"navigationBarTitleText": "注册"
-			}
-		}, {
-			"path": "pages/work/index",
-			"style": {
-				"navigationBarTitleText": "工作台"
-			}
-		}, {
-			"path": "pages/work/my-notice",
-			"style": {
-				"navigationBarTitleText": "我的通告"
-			}
-		}, {
-			"path": "pages/mine/index",
-			"style": {
-				"navigationBarTitleText": "我的"
-			}
-		}, {
-			"path": "pages/mine/avatar/index",
-			"style": {
-				"navigationBarTitleText": "修改头像"
-			}
-		}, {
-			"path": "pages/mine/info/index",
-			"style": {
-				"navigationBarTitleText": "个人信息"
-			}
-		}, {
-			"path": "pages/mine/info/edit",
-			"style": {
-				"navigationBarTitleText": "编辑资料"
-			}
-		}, {
-			"path": "pages/mine/pwd/index",
-			"style": {
-				"navigationBarTitleText": "修改密码"
-			}
-		}, {
-			"path": "pages/mine/setting/index",
-			"style": {
-				"navigationBarTitleText": "应用设置"
-			}
-		}, {
-			"path": "pages/mine/help/index",
-			"style": {
-				"navigationBarTitleText": "常见问题"
-			}
-		}, {
-			"path": "pages/mine/about/index",
-			"style": {
-				"navigationBarTitleText": "关于我们"
-			}
-		}, {
-			"path": "pages/common/webview/index",
+		}
+	}, {
+		"path": "pages/login",
+		"style": {
+			"navigationBarTitleText": "登录"
+		}
+	}],
+	"subPackages": [{
+		"root": "pages/common",
+		"pages": [{
+			"path": "webview/index",
 			"style": {
 				"navigationBarTitleText": "浏览网页"
 			}
 		}, {
-			"path": "pages/common/textview/index",
+			"path": "textview/index",
 			"style": {
 				"navigationBarTitleText": "浏览文本"
 			}
 		}, {
-			"path": "pages/common/richview/index",
+			"path": "richview/index",
 			"style": {
 				"navigationBarTitleText": "浏览富文本"
 			}
-		},
-		{
-			"path": "pages/components/index",
-			"style": {
-				"navigationBarTitleText": "通告首页"
-			}
-		}, {
-			"path": "pages/components/notice-item",
-			"style": {
-				"navigationBarTitleText": "通告组件"
-			}
-		},
-		{
-			"path": "pages/components/subscribe",
-			"style": {
-				"navigationBarTitleText": "订阅"
-			}
-		},
-		{
-			"path": "pages/mine/card/my-card",
-			"style": {
-				"navigationBarTitleText": "我的名片"
-			}
-		},
-		{
-			"path": "pages/mine/card/card-detail",
-			"style": {
-				"navigationBarTitleText": "编辑名片"
-			}
-		},
-		{
-			"path": "pages/mine/addr/addr-list",
-			"style": {
-				"navigationBarTitleText": "收货地址"
-			}
-		},
-		{
-			"path": "pages/mine/addr/addr-detail",
-			"style": {
-				"navigationBarTitleText": "编辑地址"
-			}
-		}
-	],
-	"subPackages": [{
+		}]
+	}, {
 		"root": "pages/notice",
 		"pages": [{
 				"path": "detail",
@@ -138,6 +49,63 @@
 				}
 			}
 		]
+	}, {
+		"root": "pages/components",
+		"pages": [{
+			"path": "notice-index",
+			"style": {
+				"navigationBarTitleText": "通告首页"
+			}
+		}, {
+			"path": "notice-item",
+			"style": {
+				"navigationBarTitleText": "通告组件"
+			}
+		}, {
+			"path": "subscribe",
+			"style": {
+				"navigationBarTitleText": "订阅"
+			}
+		}]
+	}, {
+		"root": "pages/mine",
+		"pages": [{
+				"path": "mine-index",
+				"style": {
+					"navigationBarTitleText": "个人中心"
+				}
+			}, {
+				"path": "card/my-card",
+				"style": {
+					"navigationBarTitleText": "我的名片"
+				}
+			},
+			{
+				"path": "card/card-detail",
+				"style": {
+					"navigationBarTitleText": "编辑名片"
+				}
+			},
+			{
+				"path": "addr/addr-list",
+				"style": {
+					"navigationBarTitleText": "收货地址"
+				}
+			},
+			{
+				"path": "addr/addr-detail",
+				"style": {
+					"navigationBarTitleText": "编辑地址"
+				}
+			},
+			{
+				"path": "member/member-card",
+				"style": {
+					"navigationBarTitleText": "会员中心",
+					"navigationStyle": "custom"
+				}
+			}
+		]
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/components/index.vue b/pages/components/notice-index.vue
similarity index 100%
rename from pages/components/index.vue
rename to pages/components/notice-index.vue
diff --git a/pages/index.vue b/pages/index.vue
index dc65730..391b000 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,7 @@
 			<!-- 通告列表页 -->
 			<notice-index v-show="'home'==menuCode"></notice-index>
 			<mine-index v-show="'my'==menuCode"></mine-index>
-			<subscribe-vue v-show="'dingyue'==menuCode"></subscribe-vue>
+			<subscribe v-show="'dingyue'==menuCode"></subscribe>
 		</view>
 		<tabBarVue :menuCode="menuCode" ref="tarBar" @changeMenu="changeMenu"></tabBarVue>
 	</view>
@@ -13,14 +13,14 @@
 
 <script>
 	import tabBarVue from '@/components/tabbar/tabBar.vue'
-	import noticeIndex from '@/pages/components/index.vue'
-	import subscribeVue from '@/pages/components/subscribe.vue'
-	import mineIndex from '@/pages/mine/index.vue'
+	import noticeIndex from '@/pages/components/notice-index.vue'
+	import subscribe from '@/pages/components/subscribe.vue'
+	import mineIndex from '@/pages/mine/mine-index.vue'
 	export default {
 		components: {
 			tabBarVue,
 			noticeIndex,
-			subscribeVue,
+			subscribe,
 			mineIndex
 		},
 		data() {
diff --git a/pages/mine/addr/addr-detail.vue b/pages/mine/addr/addr-detail.vue
index 67132ec..dcc4d02 100644
--- a/pages/mine/addr/addr-detail.vue
+++ b/pages/mine/addr/addr-detail.vue
@@ -60,16 +60,16 @@
 				}],
 				dataTree: [{
 					text: "山东省",
-					value: "山东省",
+					value: "1",
 					children: [{
 							text: "济南市",
-							value: "济南市",
+							value: "2",
 							children: [{
 									text: "历城区",
-									value: "历城区",
+									value: "3",
 									children: [{
 											text: "华山街道",
-											value: "华山街道"
+											value: "4"
 										},
 										{
 											text: "东风街道",
diff --git a/pages/mine/member/member-card.vue b/pages/mine/member/member-card.vue
new file mode 100644
index 0000000..c15d805
--- /dev/null
+++ b/pages/mine/member/member-card.vue
@@ -0,0 +1,258 @@
+<template>
+	<view class="member-card-box">
+		<navigation-bar-vue title="会员中心" background-color="#262626" title-color="#FFFFFF"></navigation-bar-vue>
+		<view class="main-body">
+			<!-- 会员卡展示区 -->
+			<view class="vip-box">
+				<view class="dl-menu-box">
+					<view v-for="(item,index) in memberCardList" @click="itemClick(index)" class="dl-menu"
+						:class="item.id==chooseCardId?'dl-menu click':'dl-menu'">
+						<!-- 这里的图标要换成动态配置的 -->
+						<image src="@/static/mine/huang.png" mode="aspectFit"></image>
+						{{item.cardName}}
+					</view>
+				</view>
+				<!-- 会员卡详情 -->
+				<view class="card-detail-box">
+					<view class="price-box">
+						<view class="price-item">
+							<view>年付会员</view>
+							<view><text>¥</text>228</view>
+							<view>折合0.82</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 权益展示区 -->
+			<view class="rights-box">
+				<view class="rights-item title">
+					<view class="title-left">会员权益</view>
+					<view class="value-item" v-for="(item,index) in cardList">{{item.name}}</view>
+				</view>
+				<view class="rights-item item-bg" v-for="(item,index) in rightsList">
+					<view class="title-left">{{item.name}}</view>
+					<view :class="[i==cardList.length-1?'value-item yellow-bg':'value-item']"
+						v-for="(card,i) in cardList">
+						<view v-if="'02'==item.rightsType">
+							<!-- 数量限制 -->
+							<text v-if="0==item.cardRights[card.id]">无限</text>
+							<text v-else>{{item.cardRights[card.id]}}条</text>
+						</view>
+						<view v-else-if="'01'==item.rightsType">
+							<!-- 是否支持 -->
+							<text v-if="0==item.cardRights[card.id]">-</text>
+							<view v-else>
+								<uni-icons v-if="i==cardList.length-1" color="#3A3A38" type="checkmarkempty"
+									size="18"></uni-icons>
+								<uni-icons v-else color="#E8CEAD" type="checkmarkempty" size="18"></uni-icons>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="rights-item item-bg">
+					<view class="title-left">每日报名上限</view>
+					<view class="value-item">20条</view>
+					<view class="value-item">无限</view>
+					<view class="value-item yellow-bg">无限</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import navigationBarVue from '@/components/navigation/navigationBar.vue';
+	export default {
+		components: {
+			navigationBarVue
+		},
+		data() {
+			return {
+				//当前选中的会员卡ID
+				chooseCardIndex: 0,
+				// 会员卡数组
+				memberCardList: [{
+					id: "1",
+					cardName: "箐英会员",
+					image: "",
+					monthPrice: 28,
+					quarterPrice: 78,
+					yearPrice: 228,
+					dayPrice: 0.82
+				}, {
+					id: "2",
+					cardName: "钻石会员",
+					image: "",
+					monthPrice: 28,
+					quarterPrice: 78,
+					yearPrice: 228,
+					dayPrice: 0.82
+				}],
+				//权益对比的数组
+				cardList: [{
+					id: '1',
+					name: '非会员'
+				}, {
+					id: '2',
+					name: '箐英'
+				}, {
+					id: '3',
+					name: '钻石'
+				}],
+				rightsList: [{
+					name: "每日解锁通告上限",
+					// 权益类型  01-是否支持  |  02-数量限制
+					rightsType: '02',
+					cardRights: {
+						"1": 20,
+						"2": 0,
+						"3": 0
+					}
+				}, {
+					name: "高奖励&最新通告",
+					// 权益类型  01-是否支持  |  02-数量限制
+					rightsType: '01',
+					cardRights: {
+						"1": 0,
+						"2": 1,
+						"3": 1
+					}
+				}]
+			}
+		},
+		methods: {
+			/**
+			 * 菜单点击
+			 * @param {Object} index
+			 */
+			itemClick(index) {
+				this.chooseCardIndex = index
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.member-card-box {
+		width: 100%;
+		color: #363636;
+		font-size: 29rpx;
+		background-color: #262626;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+
+		.main-body {
+			width: 100%;
+			min-height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 57rpx);
+			padding: 20rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: flex-start;
+
+			.vip-box {
+				width: 100%;
+				flex-direction: column;
+				align-items: center;
+				justify-content: flex-start;
+				padding-bottom: 20rpx;
+
+				.dl-menu-box {
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					width: 100%;
+					color: #888888;
+					padding-top: 20rpx;
+
+					.dl-menu {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 30rpx;
+						margin: 0 20rpx;
+						padding-bottom: 15rpx;
+						text-align: center;
+
+						image {
+							width: 38rpx;
+							height: 38rpx;
+							margin-right: 5rpx;
+						}
+					}
+
+					.click {
+						color: white;
+						font-weight: bold;
+						border-bottom: 2px solid white;
+					}
+				}
+
+				.card-detail-box {
+					width: 100%;
+					margin-top: 20rpx;
+					padding: 30rpx 20rpx 30rpx 20rpx;
+					border-radius: 20rpx;
+					border: 1rpx solid #96948C;
+					background-color: #1A1A1A;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+
+			.rights-box {
+				width: 100%;
+				padding: 0 20rpx 30rpx 20rpx;
+				border-radius: 20rpx;
+				border: 1rpx solid #96948C;
+				background-color: #363636;
+				color: #E8CEAD;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+
+				.rights-item {
+					width: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.title-left {
+						width: 260rpx;
+						padding: 20rpx 0 20rpx 20rpx;
+					}
+
+					.value-item {
+						flex: 1;
+						text-align: center;
+						padding: 20rpx;
+					}
+				}
+
+				.title {
+					font-weight: bold;
+				}
+
+				.item-bg {
+					font-size: 24rpx;
+					background-color: #42403E;
+					border-radius: 15rpx;
+					margin-bottom: 20rpx;
+
+					.yellow-bg {
+						background-color: #F3D2A6;
+						border-radius: 0 15rpx 15rpx 0;
+						color: #3A3A38;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/mine/index.vue b/pages/mine/mine-index.vue
similarity index 98%
rename from pages/mine/index.vue
rename to pages/mine/mine-index.vue
index 7551996..3b56728 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/mine-index.vue
@@ -27,7 +27,7 @@
 				</view>
 			</view>
 			<!-- 会员开通 -->
-			<view class="dl-member-box">
+			<view class="dl-member-box" @click="goMemberCard()">
 				<view class="dl-left">
 					<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
 					<text>开通会员 解锁更多权益</text>
@@ -164,6 +164,9 @@
 			goMyAddr() {
 				this.$tab.navigateTo('/pages/mine/addr/addr-list')
 			},
+			goMemberCard() {
+				this.$tab.navigateTo('/pages/mine/member/member-card')
+			}
 		}
 	}
 </script>
diff --git a/static/mine/hot.png b/static/mine/hot.png
new file mode 100644
index 0000000..66a7ecb
Binary files /dev/null and b/static/mine/hot.png differ
diff --git a/static/mine/huang.png b/static/mine/huang.png
new file mode 100644
index 0000000..2f792f5
Binary files /dev/null and b/static/mine/huang.png differ
diff --git a/static/mine/zuan.png b/static/mine/zuan.png
new file mode 100644
index 0000000..aad3a34
Binary files /dev/null and b/static/mine/zuan.png differ
diff --git a/utils/common.js b/utils/common.js
index a00f9c7..6abd5b2 100644
--- a/utils/common.js
+++ b/utils/common.js
@@ -7,6 +7,29 @@ import {
 } from '@/utils/auth'
 import constant from '@/utils/constant'
 
+export function getWXStatusHeight() {
+	// #ifdef MP-WEIXIN
+	// 获取距上
+	const barTop = wx.getSystemInfoSync().statusBarHeight
+	// 获取胶囊按钮位置信息
+	const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
+	// 获取导航栏高度
+	const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2
+	let barWidth = menuButtonInfo.width
+	console.log('menuButtonInfo', menuButtonInfo)
+	let barLeftPosition = 375 - menuButtonInfo.right + menuButtonInfo.width
+	let menuButtonLeft = menuButtonInfo.left
+	let menuButtonRight = menuButtonInfo.right
+	return {
+		barHeight,
+		barTop,
+		barWidth,
+		barLeftPosition,
+		menuButtonLeft,
+		menuButtonRight
+	}
+	// #endif
+}
 /**
  * 判断某用户是否有某权益
  * @param {Object} code 权益code