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;
         z-index: 2;
         overflow: hidden;
         canvas{
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%; 
             border-radius: 5rpx;
             z-index: 3;
         }

         .hint {
             position: absolute;
             top: 45rpx;
             left: 223rpx;
             width: 301rpx;
             height: 72rpx;
             color: #fff;
             font-size: 32rpx;
             background: rgba($color: #000000, $alpha: .33);
             border-radius: 36rpx;
             text-align: center;
             line-height: 72rpx;
             box-sizing: border-box;
             z-index: 4;

             image {
                 max-width: 30rpx;
                 max-height: 30rpx;
                 vertical-align: middle;
                 margin-right: 15rpx;
                 margin-bottom: 4rpx;
             }
         }

         .uploading {
             display: flex;
             position: absolute;
             top: 251rpx;
             left: 244rpx;
             flex-direction: column;
             justify-content: space-around;
             width: 263rpx;
             height: 296rpx;
             font-size: 24rpx;
             border-radius: 10rpx;
             background: rgba($color: #000000, $alpha: .33);
             box-sizing: border-box;
             z-index: 4;

             image {
                 max-width: 60rpx;
                 max-height: 60rpx;
                 text-align: center;
                 margin-left: 102rpx;
                 margin-top: 40rpx;
                 animation: myMove 2s linear infinite normal;

                 @keyframes myMove {
                     0% {
                         transform: rotate(0deg);
                     }

                     25% {
                         transform: rotate(90deg);
                     }

                     50% {
                         transform: rotate(180deg);
                     }

                     75% {
                         transform: rotate(270deg);
                     }

                     100% {
                         transform: rotate(360deg);
                     }
                 }
             }

             text {
                 margin-bottom: 30rpx;
                 color: #fff;
                 text-align: center;
             }
         }

         .head {
             position: absolute;
             bottom: 16%;
             left: 50%;
             transform: translateX(-376rpx);
             width: 750rpx;
             height: 620rpx;
            
             z-index: 5;
         }
     }

     .controlField {
         width: 750rpx;
        //  height: 447rpx;
         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;
             }
         }
     }
 }