.requirements-container { width: 1100px; padding-top: 50px; padding-bottom: 80px; background: #ffffff; border-radius: 8px; } .requirements-title { text-align: center; height: 40px; font-size: 28px; font-weight: 500; color: #0b121a; line-height: 40px; } .requirements-step-container { width: 462px; margin-left: auto; margin-right: auto; margin-top: 40px; display: flex; height: 80px; } .requirements-step { flex: 1; height: 32px; position: relative; &:nth-last-child(1) { flex: 0; } } .requirements-step-status { height: 32px; position: relative; } .requirements-step-icon { position: relative; z-index: 5; width: 32px; height: 32px; background: #ebeced; border-radius: 100%; transition: all .3s; &.success { background: url("~@/assets/img/account/step_cur.png") no-repeat 50% 50%; background-size: 32px auto; } &.wait { background: #ebeced; } &.process { background: #45c47a; } } .requirements-step-line { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; background: #ebeced; transition: all .3s; &.success { background: #d0f2de; } &.wait { background: #ebeced; } &.process { background: #d0f2de; } } .requirements-step-tips { position: absolute; margin-top: 14px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #828c99; line-height: 20px; transform: translateX(-50%); left: 50%; top: 46px; white-space: nowrap; } .requirements-type-submit { text-align: center; margin-top: 80px; }