From cf329094ccc03ce13be0660b4fc4ee3cde77f17a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9F=B3=E5=8F=AF?= <1284707383@qq.com>
Date: Tue, 24 Aug 2021 11:15:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98=E6=B3=A8=E5=86=8C=E6=8B=A9?=
 =?UTF-8?q?=E5=81=B6=E8=A6=81=E6=B1=82/=E5=B7=A5=E4=BD=9C=E5=AE=B6?=
 =?UTF-8?q?=E5=BA=AD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                     |  12 +
 pages/register/basicInfo.vue   |   2 +-
 pages/register/chooseMate.vue  | 385 +++++++++++++++++++++++++++++++
 pages/register/perfectInfo.vue |   4 +-
 pages/register/workFamily.vue  | 409 +++++++++++++++++++++++++++++++++
 5 files changed, 809 insertions(+), 3 deletions(-)
 create mode 100644 pages/register/chooseMate.vue
 create mode 100644 pages/register/workFamily.vue

diff --git a/pages.json b/pages.json
index 2d5a137..591e10c 100644
--- a/pages.json
+++ b/pages.json
@@ -29,6 +29,18 @@
 				"navigationBarTitleText": "会员注册-完善信息"
 			}
 		},
+		{
+			"path": "pages/register/chooseMate",
+			"style": {
+				"navigationBarTitleText": "会员注册-择偶条件"
+			}
+		},
+		{
+			"path": "pages/register/workFamily",
+			"style": {
+				"navigationBarTitleText": "会员注册-工作家庭"
+			}
+		},
 		{
 			"path": "pages/upTheWall/upTheWall",
 			"style": {
diff --git a/pages/register/basicInfo.vue b/pages/register/basicInfo.vue
index 58e655b..336c566 100644
--- a/pages/register/basicInfo.vue
+++ b/pages/register/basicInfo.vue
@@ -67,7 +67,7 @@
 				</view>
 			</view>
 			
-			<button class="btn" hover-class="lf-opacity">下一步</button>
+			<button class="btn" hover-class="lf-opacity" @click="$url('/pages/register/perfectInfo')">下一步</button>
 		</view>
 	</view>
 </template>
diff --git a/pages/register/chooseMate.vue b/pages/register/chooseMate.vue
new file mode 100644
index 0000000..259205a
--- /dev/null
+++ b/pages/register/chooseMate.vue
@@ -0,0 +1,385 @@
+<template>
+	<view class="lf-p-30">
+		<view class="up-the-wall">
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>婚史要求</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低身高</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低学历要求</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<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-333">
+					请选择
+				</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>
+			<button class="btn" hover-class="lf-opacity">最后一步</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				marriage: ['已婚', '未婚'],
+				marriage_index: null,
+				birth_date: '',
+				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: []
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			getValue(current, event){
+				this[current +'_index'] = event.detail.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 scoped lang="scss">
+	.perfance-area {
+		background-color: #F5F5F5;
+		width: 560rpx;
+		border-radius: 10rpx;
+		padding: 30rpx;
+	}
+	.up-the-wall {
+		width: 100%;
+		height: max-content;
+		padding: 21rpx 32rpx 21rpx;
+		background-color: white;
+		border-radius: 10rpx;
+	}
+	/deep/.input-placeholder {
+		/* placeholder颜色  */
+		color: #777777;
+		/* placeholder字体大小  */
+		font-size: 28rpx;
+	}
+	.border-register {
+		border-bottom: 1px solid #f5f5f5;
+	}
+	.btn{
+		width: 100%;
+		height: 90rpx;
+		line-height: 90rpx;
+		margin-top: 20rpx;
+		padding-bottom: 10rpx;
+		background: #E21196;
+		border-radius: 46rpx;
+		color: #FFFFFF;
+	}
+	
+	.tag-content {
+		width: 600rpx;
+		flex-wrap: wrap;
+		display: flex;
+		margin-top: 10rpx;
+	}
+	
+	.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-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;
+	}
+	
+	.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>
diff --git a/pages/register/perfectInfo.vue b/pages/register/perfectInfo.vue
index 24cd302..e156aff 100644
--- a/pages/register/perfectInfo.vue
+++ b/pages/register/perfectInfo.vue
@@ -27,7 +27,7 @@
 			
 			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
 				<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 @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-333">
 					请选择
 				</view>
 			</view>
@@ -62,7 +62,7 @@
 					<textarea class="perfance-area" maxlength="200" v-model="contentArea" placeholder="展现自己,也可以说出您的故事~" />
 				</view>
 			</view>
-			<button class="btn" hover-class="lf-opacity">不错,下一步</button>
+			<button class="btn" hover-class="lf-opacity" @click="$url('/pages/register/workFamily')">下一步</button>
 		</view>
 	</view>
 </template>
diff --git a/pages/register/workFamily.vue b/pages/register/workFamily.vue
new file mode 100644
index 0000000..08669ec
--- /dev/null
+++ b/pages/register/workFamily.vue
@@ -0,0 +1,409 @@
+<template>
+	<view class="lf-p-30">
+		<view class="up-the-wall">
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>单位性质</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>所属行业</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>户籍地</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>居住情况</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>住房情况</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>购房情况</view>
+				<view class="lf-font-28 lf-color-333">
+					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
+						<text>{{ marriage[marriage_index] || '请选择' }}</text>
+					</picker>
+				</view>
+			</view>
+			
+			<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
+				<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-333">
+					请选择
+				</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>
+			<button class="btn" hover-class="lf-opacity" @click="$url('/pages/register/chooseMate')">不错,下一步</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				marriage: ['已婚', '未婚'],
+				marriage_index: null,
+				birth_date: '',
+				contentArea: '',
+				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: []
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			getValue(current, event){
+				this[current +'_index'] = event.detail.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 scoped lang="scss">
+	.perfance-area {
+		background-color: #F5F5F5;
+		width: 560rpx;
+		border-radius: 10rpx;
+		padding: 30rpx;
+	}
+	.up-the-wall {
+		width: 100%;
+		height: max-content;
+		padding: 21rpx 32rpx 21rpx;
+		background-color: white;
+		border-radius: 10rpx;
+	}
+	/deep/.input-placeholder {
+		/* placeholder颜色  */
+		color: #777777;
+		/* placeholder字体大小  */
+		font-size: 28rpx;
+	}
+	.border-register {
+		border-bottom: 1px solid #f5f5f5;
+	}
+	.btn{
+		width: 100%;
+		height: 90rpx;
+		line-height: 90rpx;
+		margin-top: 20rpx;
+		padding-bottom: 10rpx;
+		background: #E21196;
+		border-radius: 46rpx;
+		color: #FFFFFF;
+	}
+	
+	.tag-content {
+		width: 600rpx;
+		flex-wrap: wrap;
+		display: flex;
+		margin-top: 10rpx;
+	}
+	
+	.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-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;
+	}
+	
+	.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>