diff --git a/src/sass/AppSpecialPeople/add.vue b/src/sass/AppSpecialPeople/add.vue index e015856c..0529b74d 100644 --- a/src/sass/AppSpecialPeople/add.vue +++ b/src/sass/AppSpecialPeople/add.vue @@ -1,8 +1,171 @@ @@ -16,42 +179,24 @@ export default { data() { return { value: '', - forms: { - type: '', - areaId: '', - selectIndex: '', - files: [] - }, - selectType: false, - marriageType: false, - healthType: false, - disableRank: false, - selectShow: false, - list: [], - marriageList: [], - healthList: [], - disableList: [], - rankList: [ - { - text: '一级', - value: 0 - }, - { - text: '二级', - value: 1 - }, - { - text: '三级', - value: 2 - }, - { - text: '综合', - value: 2 - } - ], - + form: { + type: [], + name: '', + idNum: '', + sex: [], + birthday: '', + phone: '', + address: '', + grid: '', + income: '', + marStatus: [], + healthStatus: [], + disableType: [], + disableRank: [] + } } }, + onLoad() {}, onShow() { @@ -66,6 +211,176 @@ export default { .add { height: 100%; + .form-item { + padding-left: 32px; + + .form-item__checkbox { + width: 100%; + div { + width: 90%; + height: 90px; + line-height: 100px; + margin-bottom: 24px; + text-align: center; + background: #FFFFFF; + border-radius: 16px; + color: #333333; + font-size: 28px; + border: 1px solid #CCCCCC; + + &.active { + background: #4181FF; + color: #fff; + border-color: #4181FF; + } + } + } + + .form-item__radio { + display: flex; + align-items: center; + flex-wrap: wrap; + + div { + width: 212px; + height: 90px; + line-height: 90px; + margin-right: 16px; + margin-bottom: 8px; + text-align: center; + background: #FFFFFF; + border-radius: 16px; + color: #333333; + font-size: 28px; + border: 1px solid #CCCCCC; + + &:nth-of-type(3n) { + margin-right: 0; + } + + &.active { + background: #4181FF; + color: #fff; + border-color: #4181FF; + } + } + } + + .ai-area__wrapper { + display: flex; + align-items: center; + padding-left: 100px; + + span { + color: #333; + font-size: 30px; + } + + i { + color: #999; + font-size: 30px; + } + + image { + width: 16px; + height: 8px; + } + } + + .form-item__wrapper { + display: flex; + align-items: center; + justify-content: space-between; + height: 90px; + padding-right: 28px; + border-bottom: 1px solid #DDDDDD; + + input { + flex: 1; + height: 100%; + text-align: right; + color: #333; + padding-right: 10px; + } + + .form-item__right { + display: flex; + align-items: center; + font-size: 32px; + + .select { + ._i { + padding-left: 100px; + } + } + + span { + max-width: 400px; + margin-right: 8px; + color: #333333; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + i { + margin-right: 8px; + color: #999999; + } + } + } + + &:last-child { + .form-item__wrapper { + border-bottom: none; + } + } + + .form-item__title { + display: flex; + align-items: center; + + i { + font-size: 32px; + color: #FF4466; + } + + span { + font-size: 28px; + color: #999999; + } + + h2 { + padding: 0 4px; + font-weight: 400; + font-size: 32px; + color: #333333; + } + } + + + &.form-item__imgs, &.form-item__textarea { + .form-item__wrapper { + display: block; + height: auto; + padding-bottom: 32px; + } + + textarea { + width: 100%; + height: 90px; + } + + .form-item__title { + padding: 32px 0; + } + + .form-item__right { + padding-left: 18px; + } + } + } + .btn { position: fixed; bottom: 0;