3 changed files with 189 additions and 4 deletions
@ -0,0 +1,179 @@ |
|||
<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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue