From f7c89d88df43c97d335a56b6375858a6911d5f39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=9F=B3=E5=8F=AF?= <1284707383@qq.com> Date: Mon, 23 Aug 2021 18:00:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/register/perfectInfo.vue | 294 ++++++++++++++++++++++++++++++++- 1 file changed, 293 insertions(+), 1 deletion(-) diff --git a/pages/register/perfectInfo.vue b/pages/register/perfectInfo.vue index 82014e7..24cd302 100644 --- a/pages/register/perfectInfo.vue +++ b/pages/register/perfectInfo.vue @@ -25,6 +25,34 @@ + + *家庭成员 + + 请选择 + + + + {{item.name}} + + + + + + 请选择你的家庭成员 + + + + {{item.name}} + + + + + 确认选择 + + + + + *内心独白 @@ -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: 46rpx; color: #FFFFFF; } + + .tag-content { + width: 600rpx; + flex-wrap: wrap; + display: flex; + margin-top: 10rpx; + } + + .personal-tag { + margin: 10rpx 4rpx; + width: max-content; + padding: 2rpx 20rpx; + height: 55rpx; + border-radius: 28rpx; + border: 1rpx solid #E21196; + color: #E21196; + font-size: 28rpx; + margin-right: 15rpx; + display: flex; + justify-content: center; + align-items: center; + &:nth-child(5n) { + margin-right: 0; + } + &:nth-child(n + 6) { + margin-top: 20rpx; + } + } + + .tag-content1 { + width: 600rpx; + flex-wrap: wrap; + display: flex; + } + + .personal-tag1 { + width: max-content; + padding: 8rpx 25rpx; + height: 55rpx; + border-radius: 10rpx; + border: 1rpx solid #ccc; + color: #969090; + font-size: 28rpx; + margin-right: 15rpx; + display: flex; + justify-content: center; + align-items: center; + &:nth-child(5n) { + margin-right: 0; + } + &:nth-child(n + 6) { + margin-top: 20rpx; + } + } + + .personal-active { + border: 1rpx solid #E21196!important; + color: #E21196!important; + } + + .personal-special { + border: 1rpx 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: 10rpx!important; + } + .work-btn { + width: 626rpx; + height: 90rpx; + background: #E21196; + border-radius: 45rpx; + color: white; + font-size: 32rpx; + display: flex; + justify-content: center; + text-align: center; + align-items: center; + margin-top: 60rpx; + } + + .work-tag { + height: 100%!important; + } + .work-tag { + width: 686rpx; + height: 215rpx; + background: #FFFFFF; + border-radius: 10rpx; + margin: 30rpx auto; + display: flex; + flex-direction: column; + /* justify-content: space-around; */ + padding: 30rpx; + } + + //窗口 + .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: 2000upx; + background: rgba(0, 0, 0, 0.6); + transition: all 0.3s ease-in-out 0s; + pointer-events: none; + } + + .cu-modal::before { + content: "\200B"; + display: inline-block; + height: 100%; + vertical-align: middle; + } + + .cu-modal.show { + opacity: 1; + transition-duration: 0.3s; + -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: 680upx; + max-width: 100%; + background-color: #f8f8f8; + border-radius: 10upx; + overflow: hidden; + padding: 30rpx; + } + + .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: -1000upx; + } + + .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: 200upx; + border-radius: 0; + margin: initial; + transition-duration: 0.3s; + } + + .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: 100rpx; + margin-right: 0; + min-height: 100rpx; + }