page { height: 100%; } .content { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; background: #fff; font-family: "MicrosoftYaHei"; .cameraField { position: relative; width: 750rpx; height: 1000rpx; background: #6eaff0; overflow: hidden; canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5rpx; z-index: 2; } .hint { position: absolute; top: 45rpx; left: 223rpx; width: 301rpx; height: 72rpx; color: #fff; font-size: 32rpx; background: rgba($color: #000000, $alpha: 0.33); border-radius: 36rpx; text-align: center; line-height: 72rpx; box-sizing: border-box; z-index: 3; image { max-width: 30rpx; max-height: 30rpx; vertical-align: middle; margin-right: 15rpx; margin-bottom: 4rpx; } } .head { position: absolute; bottom: 16%; left: 50%; transform: translateX(-376rpx); width: 750rpx; height: 620rpx; z-index: 3; } } .controlField { width: 750rpx; // height: 334rpx; color: #fff; .control1 { display: flex; justify-content: space-between; width: 550rpx; height: 150rpx; margin: 0 auto; // margin-top: 130rpx; margin-top: 40rpx; .light, .change { max-height: 70rpx; max-width: 70rpx; margin-top: 40rpx; text-align: center; } .take { max-height: 150rpx; max-width: 150rpx; } } .control2 { display: flex; justify-content: space-between; width: 600rpx; height: 150rpx; margin: 0 auto; // margin-top: 130rpx; margin-top: 70rpx; view { width: 170rpx; height: 80rpx; background: #6eaff0; font-size: 32rpx; text-align: center; line-height: 80rpx; border-radius: 10rpx; } } } }