You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
4.8 KiB
179 lines
4.8 KiB
<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>
|