@ -25,6 +25,34 @@
< / 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-font-28" style = "color: #E21196;" > * < / text > 家庭成员 < / view >
< view @tap ="showModal" data -target = " ChooseModal " class = "lf-font-28 lf-color-777" >
请选择
< / view >
< / view >
< view class = "tag-content" >
< view class = "personal-tag" :class ="item.hot?'personal-special1':'personal-active1'" v-for ="item of chooseList" > {{ item.name }} < / view >
< / view >
< view class = "cu-modal" :class ="modalName=='ChooseModal'?'show':''" @tap ="hideModal" >
< view class = "cu-dialog" >
< view class = "lf-p-b-30 lf-font-32" style = "color: #E21196;" >
请选择你的家庭成员
< / view >
< view class = "tag-content1" >
< view class = "personal-tag1" :class ="item.checked?'personal-active':''" :data-value ="item.value" v-for ="(item,index) of checkbox" @tap.stop="ChooseCheckbox" > {{ item.name }} < / view >
< / view >
< view class = "lf-row-center" >
< view class = "work-btn1 work-btn" @click.stop ="makeSure()" >
确认选择
< / view >
< / view >
< / 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 >
@ -46,7 +74,40 @@
marriage : [ '已婚' , '未婚' ] ,
marriage_index : null ,
birth_date : '' ,
contentArea : ''
contentArea : '' ,
modalName : null ,
checkbox : [ {
value : 0 ,
name : '父亲' ,
checked : true ,
hot : false ,
} , {
value : 1 ,
name : '母亲' ,
checked : true ,
hot : false ,
} , {
value : 2 ,
name : '哥哥' ,
checked : false ,
hot : false ,
} , {
value : 3 ,
name : '姐姐' ,
checked : false ,
hot : false ,
} , {
value : 4 ,
name : '儿子' ,
checked : false ,
hot : false ,
} , {
value : 5 ,
name : '儿子(离异归对方)' ,
checked : false ,
hot : true ,
} ] ,
chooseList : [ ]
}
} ,
onLoad ( ) {
@ -55,6 +116,31 @@
methods : {
getValue ( current , event ) {
this [ current + '_index' ] = event . detail . value ;
} ,
showModal ( e ) {
this . modalName = e . currentTarget . dataset . target
} ,
hideModal ( e ) {
this . modalName = null
} ,
makeSure ( e ) {
this . chooseList = [ ] ;
this . checkbox . forEach ( item => {
if ( item . checked == true ) {
this . chooseList . push ( item )
}
} ) ;
this . modalName = null
} ,
ChooseCheckbox ( e ) {
let items = this . checkbox ;
let values = e . currentTarget . dataset . value ;
for ( let i = 0 , lenI = items . length ; i < lenI ; ++ i ) {
if ( items [ i ] . value == values ) {
items [ i ] . checked = ! items [ i ] . checked ;
break
}
}
}
}
}
@ -99,4 +185,210 @@
border - radius : 46 rpx ;
color : # FFFFFF ;
}
. tag - content {
width : 600 rpx ;
flex - wrap : wrap ;
display : flex ;
margin - top : 10 rpx ;
}
. personal - tag {
margin : 10 rpx 4 rpx ;
width : max - content ;
padding : 2 rpx 20 rpx ;
height : 55 rpx ;
border - radius : 28 rpx ;
border : 1 rpx solid # E21196 ;
color : # E21196 ;
font - size : 28 rpx ;
margin - right : 15 rpx ;
display : flex ;
justify - content : center ;
align - items : center ;
& : nth - child ( 5 n ) {
margin - right : 0 ;
}
& : nth - child ( n + 6 ) {
margin - top : 20 rpx ;
}
}
. tag - content1 {
width : 600 rpx ;
flex - wrap : wrap ;
display : flex ;
}
. personal - tag1 {
width : max - content ;
padding : 8 rpx 25 rpx ;
height : 55 rpx ;
border - radius : 10 rpx ;
border : 1 rpx solid # ccc ;
color : # 969090 ;
font - size : 28 rpx ;
margin - right : 15 rpx ;
display : flex ;
justify - content : center ;
align - items : center ;
& : nth - child ( 5 n ) {
margin - right : 0 ;
}
& : nth - child ( n + 6 ) {
margin - top : 20 rpx ;
}
}
. personal - active {
border : 1 rpx solid # E21196 ! important ;
color : # E21196 ! important ;
}
. personal - special {
border : 1 rpx solid orange ! important ;
color : orange ! important ;
}
. personal - active1 {
border : none ! important ;
background - color : # E21196 ! important ;
color : # fff ! important ;
}
. personal - special1 {
border : none ! important ;
background - color : orange ! important ;
color : # fff ! important ;
}
. work - btn1 {
border - radius : 10 rpx ! important ;
}
. work - btn {
width : 626 rpx ;
height : 90 rpx ;
background : # E21196 ;
border - radius : 45 rpx ;
color : white ;
font - size : 32 rpx ;
display : flex ;
justify - content : center ;
text - align : center ;
align - items : center ;
margin - top : 60 rpx ;
}
. work - tag {
height : 100 % ! important ;
}
. work - tag {
width : 686 rpx ;
height : 215 rpx ;
background : # FFFFFF ;
border - radius : 10 rpx ;
margin : 30 rpx auto ;
display : flex ;
flex - direction : column ;
/* justify-content: space-around; */
padding : 30 rpx ;
}
/ / 窗 口
. cu - modal {
position : fixed ;
top : 0 ;
right : 0 ;
bottom : 0 ;
left : 0 ;
z - index : 1110 ;
opacity : 0 ;
outline : 0 ;
text - align : center ;
- ms - transform : scale ( 1.185 ) ;
transform : scale ( 1.185 ) ;
backface - visibility : hidden ;
perspective : 2000 upx ;
background : rgba ( 0 , 0 , 0 , 0.6 ) ;
transition : all 0.3 s ease - in - out 0 s ;
pointer - events : none ;
}
. cu - modal : : before {
content : "\200B" ;
display : inline - block ;
height : 100 % ;
vertical - align : middle ;
}
. cu - modal . show {
opacity : 1 ;
transition - duration : 0.3 s ;
- ms - transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
overflow - x : hidden ;
overflow - y : auto ;
pointer - events : auto ;
}
. cu - dialog {
position : relative ;
display : inline - block ;
vertical - align : middle ;
margin - left : auto ;
margin - right : auto ;
width : 680 upx ;
max - width : 100 % ;
background - color : # f8f8f8 ;
border - radius : 10 upx ;
overflow : hidden ;
padding : 30 rpx ;
}
. cu - modal . bottom - modal : : before {
vertical - align : bottom ;
}
. cu - modal . bottom - modal . cu - dialog {
width : 100 % ;
border - radius : 0 ;
}
. cu - modal . bottom - modal {
margin - bottom : - 1000 upx ;
}
. cu - modal . bottom - modal . show {
margin - bottom : 0 ;
}
. cu - modal . drawer - modal {
transform : scale ( 1 ) ;
display : flex ;
}
. cu - modal . drawer - modal . cu - dialog {
height : 100 % ;
min - width : 200 upx ;
border - radius : 0 ;
margin : initial ;
transition - duration : 0.3 s ;
}
. cu - modal . drawer - modal . justify - start . cu - dialog {
transform : translateX ( - 100 % ) ;
}
. cu - modal . drawer - modal . justify - end . cu - dialog {
transform : translateX ( 100 % ) ;
}
. cu - modal . drawer - modal . show . cu - dialog {
transform : translateX ( 0 % ) ;
}
. cu - modal . cu - dialog > . cu - bar : first - child . action {
min - width : 100 rpx ;
margin - right : 0 ;
min - height : 100 rpx ;
}
< / style >
