.box{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } .tab{ width: 85%; display: flex; justify-content: space-between; height: 75rpx; margin-top: 20rpx; border-radius: 30rpx; overflow: hidden; } .tab view{ width: 49.9%; display: flex; align-items: center; justify-content: center; background: #ccc; color: white; font-size: 28rpx; } .box .tab .active{ background: #18D5B9; } .box .ma{ width: 90%; display: flex; flex-direction: column; margin: 0 auto; padding-top: 80rpx; } .box .ma .view{ width:690rpx; height:90rpx; background:rgba(255,255,255,1); box-shadow:0px 0px 4rpx 0px rgba(222,222,222,1); border-radius:10rpx; display: flex; align-items: center; justify-content: space-around; margin-top: 35rpx; } .box .ma .view .btn{ width:90rpx; height:47rpx; background:rgba(229,229,229,1); border-radius:10rpx; font-size:24rpx; font-family:PingFang SC; color:rgba(136,136,136,1); display: flex; align-items: center; justify-content: center; } .box .ma input{ width: 70%; border-bottom: 1rpx solid gray; height: 60rpx; line-height: 60rpx; font-size: 26rpx; } .btm{ width:420rpx; height:88rpx; background:rgba(24,213,185,1); box-shadow:0px 8rpx 13rpx 0px rgba(100,239,218,1); border-radius:44rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; color: white; margin-top: 200rpx; } .logo{ width: 100%; display: flex; flex-direction: column; align-items: center; position: fixed; font-size: 22rpx; bottom: 30rpx; color: #999; } .scanCode{ width:420rpx; height:88rpx; background:linear-gradient(163deg,rgba(255,139,102,1) 0%,rgba(254,87,34,1) 100%); border-radius:44rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; color: white; margin-top: 150rpx; }