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.
102 lines
2.7 KiB
102 lines
2.7 KiB
<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>
|