.content { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; /* background: linear-gradient(#d3959b, #d3959b, #bfe6ba); */ /* background: url(../../static/background.png); */ } image.cont { width: 750rpx; min-height: 100vh; height: auto; position: relative; height: 100%; position: absolute; z-index: 0; } .content .app-title { z-index: 99; font-size: 60rpx; color: #FFFFFF; border-bottom: 1rpx solid #FFFFFF; } .content form { width: 80%; margin-top: 100rpx; } .content form .uni-form-item { margin-bottom: 20rpx; } .content form .uni-form-item .title { font-size: 30rpx; color: #FFFFFF; } .content form .uni-form-item .uni-input { border: 1rpx solid #FFFFFF; background-color: #FFFFFF; height: 50rpx; padding: 10rpx; border-radius: 10rpx; } .content form .uni-form-item .login { margin-top: 180rpx; font-size: 30rpx; } .input-form { margin-top: 30rpx; } .canvas-content { margin: 0 auto; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; top: 400rpx; padding: 20rpx; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; width: 80%; height: 600rpx; border-radius: 2%; /* box-shadow: 10rpx 10rpx 40rpx #F8F8F8; */ background-size: cover; /* background-clip: padding-box; */ /* background-color: #ffcb3f; */ } .btn { margin: 35rpx auto 22rpx auto; text-align: center; height: 84rpx; width: 95%; line-height: 84rpx; border-radius: 50rpx; color: #FFFFFF; background-color: #7FFFD4; } .btn:active { margin: 35rpx auto 22rpx auto; text-align: center; height: 84rpx; width: 95%; line-height: 84rpx; border-radius: 50rpx; color: #FFFFFF; background-color: #C8C7CC; } .input-font { color: #FFFFFF; padding-top: 10rpx; padding-bottom: 10rpx; margin-top: 25rpx; font-size: 30rpx; width: 100%; border-bottom: 1rpx solid #7FFFD4; } .verify-box { margin-top: 30rpx; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 100%; border-bottom: 1rpx solid #D3D3D3; } .verify-btn { min-width: 100rpx; text-align: center; font-size: 20rpx; color: #007AFF; padding: 10rpx; margin-bottom: 5rpx; border: 1rpx solid #007AFF; border-radius: 40rpx; -webkit-align-self: flex-end; align-self: flex-end; } .verify-btn:active { font-size: 20rpx; min-width: 100rpx; text-align: center; color: #666666; padding: 10rpx; margin-bottom: 5rpx; border: 1rpx solid #666666; border-radius: 40rpx; -webkit-align-self: flex-end; align-self: flex-end; } .canvas-content .title { color: #FFFFFF; font-size: 40rpx; font-weight: bold; } .canvas-content .hint { color: #FFFFFF; font-size: 40rpx; font-weight: bold; } .input-verify { padding-top: 10rpx; padding-bottom: 10rpx; font-size: 30rpx; width: 60%; } .conbox { background: -webkit-linear-gradient( #668B8B,#79CDCD, #7FFFD4); background: linear-gradient( #668B8B,#79CDCD, #7FFFD4); /* background: #FFFFFF; */ width: 750rpx; height: 100vh; overflow-x: hidden; overflow-y: scroll; } .container, image.cont { width: 750rpx; min-height: 100vh; height: auto; position: relative; } image.cont { height: 100%; position: absolute; z-index: 0; } .input-placeholder { color: #FFFFFF; font-size: 25rpx; }