.wrap { width: 100%; margin: 0 auto; background: #ffffff; .certify-header { background: #f8f8f8; width: 100%; .certify-logo { width: 100%; margin: 0 auto; padding: 10px 0; .logo { width: 180px; padding-top: 60px; float: left; margin-left: 4%; position: relative; overflow: hidden; img { position: absolute; top: 0; right: 0; height: 60px; } } .certify-text { width: 80%; float: left; line-height: 60px; font-size: 24px; margin-left: 20px; .text { border-left: 1px solid #999999; } .alink { float: right; font-size: 14px; line-height: 60px; a { color: #333; padding: 0 8px; border-left: 1px solid #999999; &:first-child { border: none; } } } span { padding-left: 20px; } } } } .certify-content { min-height: 300px; margin-bottom: 100px; .certify-step { width: 880px; height: 60px; margin: 40px auto; border-radius: 8px; background: #c1c1c1; overflow: hidden; >div { width: 150px; height: 60px; display: table; color: #fff; float: left; padding: 0 22px 0 10px; >div { vertical-align: middle; display: table-cell; font-size: 15px; } &:first-child { padding-left: 6px; } &:last-child { width: 130px; background-image: none; } >i { margin-top: 17px; display: inline-block; height: 26px; width: 26px; border-radius: 50%; background: #fff; overflow: hidden; text-align: center; line-height: 26px; font-size: 20px; font-style: normal; } } .step-done { background: #ff6500; background-image: url(../../../image/scd.png); background-repeat: no-repeat; background-position-x: right; background-size: 22px; >i { color: #ff6500; } } .step-doing { background: #ff8a33; background-image: url(../../../image/trd.png); background-repeat: no-repeat; background-position-x: right; background-size: 22px; >i { color: #ff8a33; } } .step-off { background: #ff6500; background-image: url(../../../image/fst.png); background-repeat: no-repeat; background-position-x: right; background-size: 22px; >i { color: #ff6500; } } .step-none { background: #c1c1c1; background-image: url(../../../image/none.png); background-repeat: no-repeat; background-position-x: right; background-size: 22px; >i { color: #c1c1c1; } } .step-last { background: #c1c1c1; width: 130px; >i { color: #c1c1c1; } } } .certify-form-box { width: 600px; margin: 0 auto; .certify-form { #address { select { height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; margin-right: 6px; } } .ant-form-explain { span { line-height: 26px; } } .ant-form-extra { width: 560px; } .idCard-text { display: inline-block; width: 150px; margin-right: 20px; text-align: center; } .idcard-img { >.idcard-imgbox { height: 120px; padding-top: 120px; position: relative; img { height: 120px; position: absolute; top: 0; left: 0; border: 1px solid #c9c9c9; border-radius: 6px; } } } .getVcode { height: 32px; width: 100%; padding-top: 32px; position: relative; overflow: hidden; img { position: absolute; top: 0; left: 0; width: 100%; height: 32px; } } .set-submit { min-width: 100px; } .exit { width: 160px; margin-left: 20px; color: #fff; background: #ff6500; border: none; } .ant-form-item-label { >label { &:before { content: '' } } } .certify-title { font-size: 20px; } .fromItem-postfix { position: absolute; margin-left: 10px; right: -36px; } } .certify-result-box { .certify-title { font-size: 20px; } .certify-result-state { position: relative; padding-left: 46px; margin: 20px auto; width: 400px; i { color: #58a3ff; text-align: center; line-height: 40px; font-size: 33px; position: absolute; top: 6px; left: 0; } p { line-height: 40px; } button { margin-top: 10px; } } } .avatar-uploader, .avatar-uploader-trigger, .avatar { width: 150px; height: 150px; } .avatar-uploader { display: block; padding: 1px; border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; img { position: absolute; top: -1px; left: -1px; height: 150px; } // float: left; margin-right: 20px; } .avatar-uploader-trigger { display: table-cell; vertical-align: middle; font-size: 28px; color: #999; } } } .footer { position: fixed; width: 100%; bottom: 0; padding: 10px 0; text-align: center; background: #f0f0f0; p { line-height: 24px; } } }