newStudent/pages/faceSearch/css/faceSea.scss

.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;
            }
        }
    }
}