blindDate/pages/my/basicInformation.vue

<template>
	<view class="content">
		<view class="card">
			<view class="lf-row-between lf-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">个人昵称</text>
				</view>
				<view>
					<input  class="input" placeholder="请输入" />
				</view>
			</view>
			<view class="lf-row-between lf-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">性别</text>
				</view>
				<view>
					<input  class="input" placeholder="请输入" />
				</view>
			</view>
			<view class="lf-row-between lf-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">婚姻状况</text>
				</view>
				<view class="picker-w">
					<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-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">户籍地</text>
				</view>
				<view class="picker-w">
					<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-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">学历</text>
				</view>
				<view class="picker-w">
					<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-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">身高</text>
				</view>
				<view>
					<input  class="input" placeholder="请输入" />
				</view>
			</view>
			<view class="lf-row-between lf-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">体重</text>
				</view>
				<view>
					<input  class="input" placeholder="请输入" />
				</view>
			</view>
			<view class="lf-row-between lf-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">生日</text>
				</view>
				<view class="picker-w">
					<picker mode="date" @change="e => birth_date = e.detail.value">
						<text>{{ birth_date || '请选择' }}</text>
					</picker>
				</view>
			</view>
			<view class="lf-row-between lf-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">属相</text>
				</view>
				<view class="picker-w">
					<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-m-b-30">
				<view>
					<text class="lf-color-primary">*</text>
					<text class="lf-font-28 lf-color-333">星座</text>
				</view>
				<view class="picker-w">
					<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-m-b-30">
				<view>
					<text class="lf-font-28 lf-color-333 lf-m-l-14">外貌</text>
				</view>
				<view class="picker-w">
					<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
						<text>{{ marriage[marriage_index] || '请选择' }}</text>
					</picker>
				</view>
			</view>
			<button class="btn" hover-class="lf-opacity">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				marriage: ['已婚', '未婚'],
				marriage_index: null,
				birth_date: ''
			}
		},
		onLoad(){
			
		},
		methods: {
			getValue(current, event){
				this[current +'_index'] = event.detail.value;
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped="scoped">
	.content{
		padding: 30rpx 32rpx;
		width: 750rpx;
		height: max-content;
		box-sizing: border-box;
		.card{
			width: 686rpx;
			height: max-content;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.input{
				width: 400rpx;
				text-align: right;
			}
			.picker-w{
				width: 400rpx;
				text-align: right;
			}
			.btn{
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				margin-top: 60rpx;
				padding-bottom: 10rpx;
				background: #E21196;
				border-radius: 46rpx;
				color: #FFFFFF;
			}
		}
	}
</style>