diff --git a/pages.json b/pages.json
index 5056103..d17718a 100644
--- a/pages.json
+++ b/pages.json
@@ -78,6 +78,18 @@
 				"navigationBarTitleText": "编辑资料"
 			}
 		},
+		{
+			"path": "pages/my/matePerfance",
+			"style": {
+				"navigationBarTitleText": "择偶要求"
+			}
+		},
+		{
+			"path": "pages/my/workEconomy",
+			"style": {
+				"navigationBarTitleText": "工作经济家庭"
+			}
+		},
 		{
 			"path": "pages/my/welfare",
 			"style": {
@@ -98,12 +110,24 @@
 				"navigationBarTitleText": "关注公众号"
 			}
 		},
+		{
+			"path": "pages/my/contact",
+			"style": {
+				"navigationBarTitleText": "联系"
+			}
+		},
 		{
 			"path": "pages/my/setting",
 			"style": {
 				"navigationBarTitleText": "设置"
 			}
 		},
+		{
+			"path": "pages/my/qzone",
+			"style": {
+				"navigationBarTitleText": "我的动态"
+			}
+		},
 		{
 			"path": "pages/my/memberVip",
 			"style": {
diff --git a/pages/my/contact.vue b/pages/my/contact.vue
new file mode 100644
index 0000000..36cdaac
--- /dev/null
+++ b/pages/my/contact.vue
@@ -0,0 +1,166 @@
+<template>
+	<view>
+		<view class="cu-chat">
+			<view class="cu-info round lf-m-t-30">此小程序是一个半开放的本地陌生人交友相亲平台，请注意文明相亲交友，不违公序良俗!</view>
+			<view class="cu-info round">请谨慎沟通，若收到借款，投资，索要礼物等行为，请马上<text style="color: red;">投诉举报</text>，谨防诈骗，平台求证后会做永久封号处理。</view>
+			<view class="cu-item lf-m-t-40">
+				<view class="cu-avatar radius">
+					<image class="lf-w-100 lf-h-100" src="../../static/logo.png" mode="aspectFill" ></image>
+				</view>
+				<view class="main">
+					<view class="content shadow">
+						<view class="lf-font-32 lf-color-222 lf-p-b-20 lf-w-100 lf-row-center" style="border-bottom: 1rpx solid #F5F5F5;">需要帮你联系吗?</view>
+						<view class="lf-m-t-30 lf-p-b-30" style="border-bottom: 1rpx solid #F5F5F5;">
+							<view class="lf-font-28">温馨提示</view>
+							<view class="lf-font-28">申请对方联系方式将消耗一条红线</view>
+						</view>
+						
+						<view class="lf-row-round lf-w-100 lf-p-t-20">
+							<view class="lf-font-28" style="color: #E21196;">是的</view>
+							<view class="lf-font-28">不了</view>
+						</view>
+					</view>
+				</view>
+				<!-- <view class="date "> 13:23</view> -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+	page{
+	  padding-bottom: 100upx;
+	  background-color: #F5F5F5;
+	}
+</style>
+
+<style lang="scss" scoped="scoped">
+	.cu-chat {
+		display: flex;
+		flex-direction: column;
+	}
+	.cu-chat .cu-item {
+		display: flex;
+		padding: 30upx 30upx 70upx;
+		position: relative;
+	}
+	
+	.cu-chat .cu-item>.cu-avatar {
+		width: 80upx;
+		height: 80upx;
+		border-radius: 50%;
+	}
+	
+	.cu-chat .cu-item>.main {
+		max-width: calc(100% - 200rpx);
+		margin: 0 40upx;
+		display: flex;
+		align-items: center;
+	}
+	
+	.cu-chat .cu-item>image {
+		height: 320upx;
+	}
+	
+	.cu-chat .cu-item>.main .content {
+		padding: 20upx;
+		border-radius: 6upx;
+		display: inline-flex;
+		width: 600rpx;
+		align-items: center;
+		font-size: 30upx;
+		position: relative;
+		min-height: 80upx;
+		line-height: 40upx;
+		text-align: left;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
+		background-color: #ffffff;
+		color: #333333;
+	}
+	
+	.cu-chat .cu-item .date {
+		position: absolute;
+		font-size: 24upx;
+		color: #8799a3;
+		width: calc(100% - 320upx);
+		bottom: 20upx;
+		left: 160upx;
+	}
+	
+	.cu-chat .cu-item .action {
+		padding: 0 30upx;
+		display: flex;
+		align-items: center;
+	}
+	
+	.cu-chat .cu-item>.main .content::after {
+		content: "";
+		top: 27upx;
+		transform: rotate(45deg);
+		position: absolute;
+		z-index: 100;
+		display: inline-block;
+		overflow: hidden;
+		width: 24upx;
+		height: 24upx;
+		left: -12upx;
+		right: initial;
+		background-color: inherit;
+	}
+	
+	.cu-chat .cu-item.self>.main .content::after {
+		left: auto;
+		right: -12upx;
+	}
+	
+	.cu-chat .cu-item>.main .content::before {
+		content: "";
+		top: 30upx;
+		transform: rotate(45deg);
+		position: absolute;
+		z-index: -1;
+		display: inline-block;
+		overflow: hidden;
+		width: 24upx;
+		height: 24upx;
+		left: -12upx;
+		right: initial;
+		background-color: inherit;
+		filter: blur(5upx);
+		opacity: 0.3;
+	}
+	
+	.cu-chat .cu-item>.main .content:not([class*="bg-"])::before {
+		background-color: #333333;
+		opacity: 0.1;
+	}
+	
+	.cu-chat .cu-item.self>.main .content::before {
+		left: auto;
+		right: -12upx;
+	}
+	
+	.cu-chat .cu-item.self {
+		justify-content: flex-end;
+		text-align: right;
+	}
+	
+	.cu-chat .cu-info {
+		display: inline-block;
+		margin: 20upx auto;
+		font-size: 24upx;
+		padding: 8upx 12upx;
+		background-color: rgba(0, 0, 0, 0.2);
+		border-radius: 6upx;
+		color: #ffffff;
+		max-width: 690rpx;
+		line-height: 1.4;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/my/editInfo.vue b/pages/my/editInfo.vue
index c10caa4..44f641b 100644
--- a/pages/my/editInfo.vue
+++ b/pages/my/editInfo.vue
@@ -35,7 +35,7 @@
 		<view class="edit-tag edit-tag1">
 			<view class="lf-row-between lf-w-100 lf-m-b-30">
 				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">工作经济家庭</view>
-				<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
+				<view class="lf-font-28 lf-color-777" @click="$url('/pages/my/workEconomy')">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
 			</view>
 			<view class="lf-color-777 lf-font-28 tag-content">
 				<view class="personal-tag">已购车无贷款</view>
@@ -46,7 +46,7 @@
 		<view class="edit-tag edit-tag1">
 			<view class="lf-row-between lf-w-100 lf-m-b-30">
 				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">择偶要求</view>
-				<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
+				<view class="lf-font-28 lf-color-777" @click="$url('/pages/my/matePerfance')">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
 			</view>
 			<view class="lf-color-777 lf-font-28 tag-content">
 				<view class="personal-tag">未婚</view>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index ed5c812..f8d52e4 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -89,7 +89,7 @@
 					{name: '我的红娘',icon:'github-circle-fill',path: '/pages/my/exclusiveMatch',pic: '../../static/my/red.png'},
 					{name: '实名认证',icon:'email',path: '/pages/my/authentication',pic: '../../static/my/authen.png'},
 					{name: '我的收藏',icon:'qzone',path: '/pages/my/collect',pic: '../../static/my/collect.png'},
-					{name: '我的动态',icon:'moments',pic: '../../static/my/qzone.png'},
+					{name: '我的动态',icon:'moments',path:'/pages/my/qzone',pic: '../../static/my/qzone.png'},
 					{name: '福利中心',icon:'red-packet',path:'/pages/my/welfare',pic: '../../static/my/welhare.png'},
 					{name: '公众号',icon:'google-circle-fill',path:'/pages/my/officialAccount',pic: '../../static/my/public.png'},
 					{name: '联系客服',icon:'kefu-ermai',path: '/pages/my/service',pic: '../../static/my/service.png'},
@@ -158,7 +158,7 @@
 	
 	.head-top-wrap {
 		width: 100%;
-		height: 656rpx;
+		height: 180rpx;
 		/* z-index: -1; */
 		overflow: hidden;
 		position: relative;
@@ -167,7 +167,7 @@
 	.head-top::after {
 		content: '';
 		width: 100%;
-		height: 525rpx;
+		height: 529rpx;
 		position: absolute;
 		left: 0;
 		top: 0;
@@ -178,7 +178,7 @@
 	
 	.tips-wrap {
 		overflow: hidden;
-		height: 656rpx;
+		height: 660rpx;
 		border-radius: 0 586px 586px/0 0 200rpx 200rpx;
 		position: absolute;
 		top: -494rpx;
@@ -186,7 +186,7 @@
 	
 	.tips {
 		width: 686rpx;
-		height: 121rpx;
+		height: 125rpx;
 		background-color: #314177;
 		border-radius: 20rpx;
 		position: relative;
diff --git a/pages/my/matePerfance.vue b/pages/my/matePerfance.vue
new file mode 100644
index 0000000..3d23798
--- /dev/null
+++ b/pages/my/matePerfance.vue
@@ -0,0 +1,140 @@
+<template>
+	<view>
+		<view class="work-tag">
+			<view class="lf-row-between lf-m-b-30">
+				<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>婚史要求</view>
+				
+				<picker mode='selector' @change="getValue('index', $event)" :value="index" :range="array" range-key="name">
+					<view>
+						{{array[index].name}}
+						<u-icon name="arrow-right lf-color-777"></u-icon>
+					</view>
+				</picker>
+				
+			</view>
+			
+			<view class="lf-row-between lf-m-b-30">
+				<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>最低身高</view>
+				
+				<picker mode='selector' @change="getValue('index', $event)" :value="index" :range="array" range-key="name">
+					<view>
+						{{array[index].name}}
+						<u-icon name="arrow-right lf-color-777"></u-icon>
+					</view>
+				</picker>
+			</view>
+			
+			<view class="lf-flex-column lf-m-b-30">
+				<view class="lf-font-28 lf-color-333 lf-m-b-20 lf-row-between">
+					<view><text class="lf-font-28" style="color: #E21196;">*</text>其他要求</view>
+					<view class="lf-m-r-10">{{ contentArea.length }}/200</view>
+				</view>
+				<view>
+					<textarea class="perfance-area" maxlength="200" v-model="contentArea" placeholder="请输入" />
+				</view>
+				
+			</view>
+			
+		
+			<view class="work-btn">
+				保存
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				array: [
+					{name: '6万到8万'},
+					{name: '十万到十二万'},
+				],
+				index: 0,
+				selectname: '',
+				arra1y: [
+					{name: '父亲'},
+					{name: '母亲'},
+				],
+				index1: 1,
+				contentArea: ''
+			}
+		},
+		methods: {
+			getValue(current, e) {
+				// this[name] = e.target.value
+				console.log(e)
+				this[current] = e.target.value
+			}
+		}
+	}
+</script>
+
+<style>
+	page {
+		background-color: #F5F5F5;
+	}
+</style>
+
+<style lang="scss" scoped="scoped">
+	.perfance-area {
+		background-color: #F5F5F5;
+		width: 560rpx;
+		border-radius: 10rpx;
+		padding: 30rpx;
+	}
+	.work-btn {
+		width: 626rpx;
+		height: 90rpx;
+		background: #E21196;
+		border-radius: 45rpx;
+		color: white;
+		font-size: 32rpx;
+		display: flex;
+		justify-content: center;
+		text-align: center;
+		align-items: center;
+		margin-top: 40rpx;
+	}
+	.tag-content {
+		width: 600rpx;
+		flex-wrap: wrap;
+		display: flex;
+	}
+	
+	.personal-tag {
+		width: max-content;
+		padding: 8rpx 25rpx;
+		height: 55rpx;
+		border-radius: 28rpx;
+		border: 1rpx solid #E21196;
+		color: #E21196;
+		font-size: 28rpx;
+		margin-right: 15rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		&:nth-child(4n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 5) {
+			margin-top: 20rpx;
+		}
+	}
+	
+	.work-tag {
+		height: 100%!important;
+	}
+	.work-tag {
+		width: 686rpx;
+		height: 215rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		margin: 30rpx auto;
+		display: flex;
+		flex-direction: column;
+		/* justify-content: space-around; */
+		padding: 30rpx;
+	}
+</style>
diff --git a/pages/my/memberDetails.vue b/pages/my/memberDetails.vue
index 6adee42..9922df9 100644
--- a/pages/my/memberDetails.vue
+++ b/pages/my/memberDetails.vue
@@ -75,7 +75,7 @@
 				</view>
 			</view>
 			<view>
-				<button class="tabbar-btn">联系Ta</button>
+				<button class="tabbar-btn" @click="$url('/pages/my/contact')">联系Ta</button>
 			</view>
 		</view>
 		<!-- #ifdef H5 -->
diff --git a/pages/my/qzone.vue b/pages/my/qzone.vue
new file mode 100644
index 0000000..88698c8
--- /dev/null
+++ b/pages/my/qzone.vue
@@ -0,0 +1,30 @@
+<template>
+	<view>
+		<view class="lf-row-between lf-m-t-40">
+			<view class="lf-font-32 lf-color-222 lf-p-l-30 lf-text-center">7月</view>
+			<view class="lf-row-between lf-p-r-30">
+				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="../../static/logo.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+			</view>
+		</view>
+		<view class="lf-row-between lf-m-t-40">
+			<view class="lf-font-32 lf-color-222 lf-p-l-30 lf-text-center">8月</view>
+			<view class="lf-row-between lf-p-r-30">
+				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="../../static/logo.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style scoped="scoped">
+	.qzone-img {
+		width: 200rpx;
+		height: 200rpx;
+	}
+</style>
diff --git a/pages/my/setting.vue b/pages/my/setting.vue
index 59e0bba..58a48db 100644
--- a/pages/my/setting.vue
+++ b/pages/my/setting.vue
@@ -24,7 +24,7 @@
 					</view>
 				</view>
 				<view>
-					<u-switch v-model="switchVal1"></u-switch>
+					<u-switch v-model="switchVal1" active-color="#E21196" inactive-color="#CCCCCC"></u-switch>
 				</view>
 			</view>
 			<view class="switch-tag">
@@ -37,7 +37,7 @@
 					</view>
 				</view>
 				<view>
-					<u-switch v-model="switchVal2"></u-switch>
+					<u-switch v-model="switchVal2" active-color="#E21196" inactive-color="#CCCCCC"></u-switch>
 				</view>
 			</view>
 			<view class="switch-tag">
@@ -50,7 +50,7 @@
 					</view>
 				</view>
 				<view>
-					<u-switch v-model="switchVal3"></u-switch>
+					<u-switch v-model="switchVal3" active-color="#E21196" inactive-color="#CCCCCC"></u-switch>
 				</view>
 			</view>
 		</view>
diff --git a/pages/my/workEconomy.vue b/pages/my/workEconomy.vue
new file mode 100644
index 0000000..53c1e04
--- /dev/null
+++ b/pages/my/workEconomy.vue
@@ -0,0 +1,356 @@
+<template>
+	<view>
+		<view class="work-tag">
+			<view class="lf-row-between lf-m-b-30">
+				<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>年薪</view>
+				
+				<picker mode='selector' @change="getValue('index', $event)" :value="index" :range="array" range-key="name">
+					<view class="lf-font-28 lf-color-333">
+						{{array[index].name}}
+						<u-icon name="arrow-right lf-color-777"></u-icon>
+					</view>
+				</picker>
+				
+			</view>
+			
+			<view class="lf-row-between lf-m-b-30">
+				<view class="lf-font-28 lf-color-333" style="margin-left: 14rpx;">职务</view>
+				
+				<view>
+					<input type="text" placeholder="请输入" style="text-align: right;" />
+				</view>
+			</view>
+			
+			<view class="lf-row-between lf-m-b-30">
+				<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>家庭成员</view>
+				<view @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-777">
+					请选择
+				</view>
+			</view>
+			<view class="tag-content">
+				<view class="personal-tag" :class="item.hot?'personal-special1':'personal-active1'" v-for="item of chooseList">{{item.name}}</view>
+			</view>
+			
+			<view class="cu-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
+				<view class="cu-dialog">
+					<view class="lf-p-b-30 lf-font-32" style="color: #E21196;">
+						请选择你的家庭成员
+					</view>
+					
+					<view class="tag-content1">
+						<view class="personal-tag1" :class="item.checked?'personal-active':''" :data-value="item.value" v-for="(item,index) of checkbox" @tap.stop="ChooseCheckbox">{{item.name}}</view>
+					</view>
+					
+					<view class="lf-row-center">
+						<view class="work-btn1 work-btn"  @click.stop="makeSure()">
+							确认选择
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="work-btn">
+				保存
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				array: [
+					{name: '6万到8万'},
+					{name: '十万到十二万'},
+				],
+				index: 0,
+				selectname: '',
+				
+				modalName: null,
+				checkbox: [{
+					value: 0,
+					name: '父亲',
+					checked: true,
+					hot: false,
+				}, {
+					value: 1,
+					name: '母亲',
+					checked: true,
+					hot: false,
+				}, {
+					value: 2,
+					name: '哥哥',
+					checked: false,
+					hot: false,
+				}, {
+					value: 3,
+					name: '姐姐',
+					checked: false,
+					hot: false,
+				}, {
+					value: 4,
+					name: '儿子',
+					checked: false,
+					hot: false,
+				}, {
+					value: 5,
+					name: '儿子(离异归对方)',
+					checked: false,
+					hot: true,
+				}],
+				chooseList: []
+			}
+		},
+		methods: {
+			getValue(current, e) {
+				this[current] = e.target.value
+			},
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			hideModal(e) {
+				this.modalName = null
+			},
+			makeSure(e) {
+				this.chooseList = [];
+				this.checkbox.forEach(item => {
+					if(item.checked == true) {
+						this.chooseList.push(item)
+					}
+				});
+				this.modalName = null
+			},
+			ChooseCheckbox(e) {
+				let items = this.checkbox;
+				let values = e.currentTarget.dataset.value;
+				for (let i = 0, lenI = items.length; i < lenI; ++i) {
+					if (items[i].value == values) {
+						items[i].checked = !items[i].checked;
+						break
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	page {
+		background-color: #F5F5F5;
+	}
+</style>
+
+<style lang="scss" scoped="scoped">
+	/deep/.input-placeholder {
+		/* placeholder颜色  */
+		color: #777777;
+		/* placeholder字体大小  */
+		font-size: 28rpx;
+	}
+	
+	.work-btn1 {
+		border-radius: 10rpx!important;
+	}
+	.work-btn {
+		width: 626rpx;
+		height: 90rpx;
+		background: #E21196;
+		border-radius: 45rpx;
+		color: white;
+		font-size: 32rpx;
+		display: flex;
+		justify-content: center;
+		text-align: center;
+		align-items: center;
+		margin-top: 60rpx;
+	}
+	.tag-content {
+		width: 600rpx;
+		flex-wrap: wrap;
+		display: flex;
+	}
+	
+	.personal-tag {
+		margin: 10rpx 4rpx;
+		width: max-content;
+		padding: 2rpx 20rpx;
+		height: 55rpx;
+		border-radius: 28rpx;
+		border: 1rpx solid #E21196;
+		color: #E21196;
+		font-size: 28rpx;
+		margin-right: 15rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		&:nth-child(5n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 6) {
+			margin-top: 20rpx;
+		}
+	}
+	
+	.tag-content1 {
+		width: 600rpx;
+		flex-wrap: wrap;
+		display: flex;
+	}
+	
+	.personal-tag1 {
+		width: max-content;
+		padding: 8rpx 25rpx;
+		height: 55rpx;
+		border-radius: 10rpx;
+		border: 1rpx solid #ccc;
+		color: #969090;
+		font-size: 28rpx;
+		margin-right: 15rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		&:nth-child(5n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 6) {
+			margin-top: 20rpx;
+		}
+	}
+	
+	.personal-active {
+		border: 1rpx solid #E21196!important;
+		color: #E21196!important;
+	}
+	
+	.personal-special {
+		border: 1rpx solid orange!important;
+		color: orange!important;
+	}
+	
+	.personal-active1 {
+		border: none!important;
+		background-color: #E21196!important;
+		color: #fff!important;
+	}
+	
+	.personal-special1 {
+		border: none!important;
+		background-color: orange!important;
+		color: #fff!important;
+	}
+	
+	
+	.work-tag {
+		height: 100%!important;
+	}
+	.work-tag {
+		width: 686rpx;
+		height: 215rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		margin: 30rpx auto;
+		display: flex;
+		flex-direction: column;
+		/* justify-content: space-around; */
+		padding: 30rpx;
+	}
+	
+	//窗口
+	.cu-modal {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 1110;
+		opacity: 0;
+		outline: 0;
+		text-align: center;
+		-ms-transform: scale(1.185);
+		transform: scale(1.185);
+		backface-visibility: hidden;
+		perspective: 2000upx;
+		background: rgba(0, 0, 0, 0.6);
+		transition: all 0.3s ease-in-out 0s;
+		pointer-events: none;
+	}
+	
+	.cu-modal::before {
+		content: "\200B";
+		display: inline-block;
+		height: 100%;
+		vertical-align: middle;
+	}
+	
+	.cu-modal.show {
+		opacity: 1;
+		transition-duration: 0.3s;
+		-ms-transform: scale(1);
+		transform: scale(1);
+		overflow-x: hidden;
+		overflow-y: auto;
+		pointer-events: auto;
+	}
+	
+	.cu-dialog {
+		position: relative;
+		display: inline-block;
+		vertical-align: middle;
+		margin-left: auto;
+		margin-right: auto;
+		width: 680upx;
+		max-width: 100%;
+		background-color: #f8f8f8;
+		border-radius: 10upx;
+		overflow: hidden;
+		padding: 30rpx;
+	}
+	
+	.cu-modal.bottom-modal::before {
+		vertical-align: bottom;
+	}
+	
+	.cu-modal.bottom-modal .cu-dialog {
+		width: 100%;
+		border-radius: 0;
+	}
+	
+	.cu-modal.bottom-modal {
+		margin-bottom: -1000upx;
+	}
+	
+	.cu-modal.bottom-modal.show {
+		margin-bottom: 0;
+	}
+	
+	.cu-modal.drawer-modal {
+		transform: scale(1);
+		display: flex;
+	}
+	
+	.cu-modal.drawer-modal .cu-dialog {
+		height: 100%;
+		min-width: 200upx;
+		border-radius: 0;
+		margin: initial;
+		transition-duration: 0.3s;
+	}
+	
+	.cu-modal.drawer-modal.justify-start .cu-dialog {
+		transform: translateX(-100%);
+	}
+	
+	.cu-modal.drawer-modal.justify-end .cu-dialog {
+		transform: translateX(100%);
+	}
+	
+	.cu-modal.drawer-modal.show .cu-dialog {
+		transform: translateX(0%);
+	}
+	.cu-modal .cu-dialog>.cu-bar:first-child .action{
+	  min-width: 100rpx;
+	  margin-right: 0;
+	  min-height: 100rpx;
+	}
+</style>