blindDate/pages/register/perfectInfo.vue

<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 lf-row-between">
					<input  class="input" placeholder="请输入" style="text-align: right;" />
					<text class="lf-m-l-10">cm</text>
				</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">性格特征(选填)</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-flex-column lf-m-b-30 lf-p-t-30">
				<view class="lf-font-28 lf-color-333 lf-m-b-20 lf-row-between">
					<view><text class="lf-font-28 lf-color-primary">*</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>
			<button class="btn" hover-class="lf-opacity">不错,下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				marriage: ['已婚', '未婚'],
				marriage_index: null,
				birth_date: '',
				contentArea: ''
			}
		},
		onLoad(){
			
		},
		methods: {
			getValue(current, event){
				this[current +'_index'] = event.detail.value;
			}
		}
	}
</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: 60rpx;
		padding-bottom: 10rpx;
		background: #E21196;
		border-radius: 46rpx;
		color: #FFFFFF;
	}
</style>