page { background: #f7f7f7; height: 100%; } .icon { color:#ffffff; } .logo { background-color: #0083F5; width: 100%; height: 60vw; display: flex; justify-content: center; align-items: center; border-radius: 0px 0px 50px 50px; .img { width: 25%; height: 25vw; image { width: 100%; border-radius: 16rpx; } } } .form { width: 90%; margin-left: 5%; border-radius: 8px; font-size: 30upx; position: absolute; background-color: #FFFFFF; top: 375rpx; .username, .password, .code { width: calc(100% - 90upx); height: 90upx; display: flex; align-items: center; background-color: rgba($color: #ffffff, $alpha: 0.1); border-bottom: 1px solid #f6f6f6; padding: 0 45upx; margin-bottom: 26upx; margin-top: 30px; input { width: 60%; height: 50upx; font-size: 16px; color: #333333; font-weight: blod; padding-left: 10px; } } .btn { color: #FFFFFF; background-color: #0083f5; width: 90%; margin-left: 5%; margin-top: 80rpx; margin-bottom: 50rpx; height: 90rpx; display: flex; justify-content: center; align-items: center; border-radius: 45rpx; font-size: 40rpx; } } .re { .username{ position: relative; .get-code{ position: absolute; height: 90upx; display: flex; align-items: center; justify-content: center; right: 0; padding: 0 40upx; z-index: 3; &:after { content: " "; width: 1upx; height: 50upx; // background-color: #333333; position: absolute; z-index: 3; margin-right: 100%; left: 0; top: 20upx; } } } .res { display: flex; justify-content: center; align-items: center; height: 100upx; color: rgba($color: #ffffff, $alpha: 0.8); } }