/* pages/fnSubscribeDocument/fnSubscribeDocument.wxss */ @import "../../utils/areaSelector/selector.wxss"; page { background: white } .subscribeDocument { background: white; position: relative; z-index: 1; } .tip { background: #ffd5dd; height: 45px; font-size: 12px; line-height: 45px; text-align: center; color: #ee7289; font-weight: normal } .topBar { width: 73px; margin-left: 50%; transform: translateX(-50%); margin-top: 10px; display: flex; flex-direction: row; } .topBar-left { width: 44px; height: 3px; background: #ffd5dd; border-radius: 50px 0px 0px 50px; } .topBar-right { width: 44px; height: 3px; background: #ffd5dd; border-radius: 0px 50px 50px 0px; margin-left: 3px; } .lightHight { background: #f4879b; } .title { position: relative; margin-top: 27px; margin-left: 15px; margin-bottom: 20.5px; height: 15px; align-items: center; } .title image { position: absolute; width: 15px; height: 15px; margin-top: 0px; } .title text { position: absolute; margin-left: 20px; font: medium; font-size: 15px; color: #ee7289; line-height: 15px; margin-top: 0px; } .input { position: relative; display: flex; align-items: center; justify-content: flex-start; height: 44px; border-radius: 5px; margin-top: 9px; margin-left: 15px; margin-right: 15px; border-radius: 10px; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom left,#FFB4B4,#FF8EA9); background-origin: border-box; background-clip: content-box, border-box; border-radius: 20px; } /* 必填*/ .mustFillIn { background-color: #fff; } /* 必填*/ .prohibit { background-color: #ececec; } /*填写类别的红色title的设置 min-width属性保障了不会被换行*/ .input text { font-size: 13px; color: #ee7289; margin-left: 15px; min-width: 58px; } .input input { position: absolute; font-size: 14px; color: #5e5e5e; left: 85px; height: 44px } .input_dele { height: 10px; width: 10px; position: absolute; right: 15px; } .input-placeholder { color: #979797 } .next { width: 670upx; height: 100rpx; background: linear-gradient(135deg, #FFB4B4 0%, #FF8EA9 100%); border-radius: 20rpx 20rpx 20rpx 20rpx; opacity: 1; font-size: 34rpx; font-weight: 500; color: #FFFFFF; margin: 34rpx; line-height: 64rpx; } .blankbottom { height: 55px; } .nationality { width: 50%; margin-right: 0rpx; } .national { width: 50%; margin-left: 5px; } /*国籍民族*/ .nationalityNational { display: flex; flex-direction: row; align-items: center; } .picker { min-height: 44px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .picker__text { position: absolute; left: 85px; top: 0; font-size: 14px; color: #979797; line-height: 44px; right: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .picker__right { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; } .add_picker { position: absolute; left: 85px; top: 0px; right: 35px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; } .add_picker__text { font-size: 14px; color: #979797; line-height: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .add_picker__btn { position: absolute; top: 28px; right: -30px; font-size: 10px; color: #417dcc; } .address { height: 89px; } .address text { position: absolute; top: 13px; } .address__picker__right { position: absolute; right: 15px; top: 20%; transform: translateY(-50%); width: 12px; height: 12px; } /*当前详细地址*/ .address__input { top: 45px; left: 0px; right: 0px; border-top: 1px solid #f4879b; } /*---------------------------------三级联动布局----------------------------*/ .addr-body { position: relative; box-sizing: border-box; overflow: hidden; } .input-long { width: 79%; } .inline-block { display: inline-block; } .addr-body, .form { height: 100%; box-sizing: border-box; overflow: hidden; } .top-sec { margin: 8px 0; background: white; border-bottom: 1rpx solid #e5e5e5; } .input-wrapper { height: 58px; padding: 0 17px; box-sizing: border-box; line-height: 58px; font-size: 15px; border-bottom: 1rpx solid #f2f2f2; } .top-sec .input-wrapper .input-title { vertical-align: top; display: inline-block; width: 21%; } .top-sec .input-wrapper input { vertical-align: top; display: inline-block; height: 58px; line-height: 58px; } .area-wrapper { display: inline-block; width: 79%; text-align: right; } .bottom-sec { padding: 0 17px; box-sizing: border-box; border-bottom: 1rpx solid #e5e5e5; border-top: 1rpx solid #e5e5e5; background: white; } .check-box { position: relative; padding-left: 25px; } .check-box:before, .active:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); } .active:after { left: 4px; width: 6px; height: 6px; background-color: #2fa7e0; border-radius: 50%; } .check-box:before { left: 0; width: 12px; height: 12px; border: 1px solid #2fa7e0; border-radius: 50%; } .bottom-sec .input-wrapper { padding: 0; } .add-address { position: absolute; bottom: 0; left: 0; width: 100%; } .address-btn { color: white; background-color: #2fa7e0; } .set-area-wrapper { top: 0; left: 0; height: 100%; width: 100%; position: fixed; z-index: 4; } .area-mask { height: 100%; width: 100%; position: absolute; z-index: 3; background-color: rgba(0, 0, 0, 0.6); } .white-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: white; opacity: 1; color: black; z-index: 1000; } .white-bg .top-option { position: absolute; top: 0; right: 0; height: 40px; width: 100%; font-size: 16px; color: #2fa7e0; z-index: 10000; opacity: 1; background: white; } .ok, .cancel { position: absolute; top: 0; height: 40px; line-height: 40px; width: 50%; } .cancel { left: 12px; text-align: left; } .ok { right: 12px; text-align: right; } .tongshang { position: absolute; top: 58px; left: 15px; font-size: 12px; } .checkbox-sty { position: relative; display: flex; align-items: center; justify-content: flex-start; margin-top: 9px; margin-left: 15px; margin-right: 15px; }