Bonus-AI-LargeScreen/src/assets/styles/updateFace.css

body {
    background-image: url('../images/backimg.png');
    background-size: 100% 100%;
    z-index: -100;
    width: 120rem;
    height: 61rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-height: 61rem;
    max-width: 118rem;
    display: flex;
}

.mainContent {
    display: flex;
    /* background-color: antiquewhite; */
    width: 116rem;
    height: 51rem;
    margin-left: 2.5rem;

}

.boxLevelOne {
    display: flex;
    /* padding-left: .625rem; */
    margin-right: .75rem;

}

.leftBoxLevelOne {
    flex: 3;
    /* background-color: blue; */
    flex-direction: column;

}

.midBoxLevelOne {
    flex: 5;
    position: relative;
    flex-direction: column;

    /* background-color: red; */

}

.rightBoxLevelOne {
    flex: 3;
    /* background-color:yellow ; */
    flex-direction: column;

}

.boxLevelTwo {
    flex: 1;
    /* background-color: hotpink; */
    position: relative;
}

/* 二级标题图片 */
.boxLevelTwoHeaderPic {
    width: 29.0625rem;
    /* 宽度 */
    height: 2.4375rem;
    opacity: .51;
    /* 高度 */
}

.boxLevelTwo {
    border: .0625rem solid rgba(204, 252, 253, 0.3);
    border-radius: .6rem;
}

.midBoxLevelOne {
    border: .0625rem solid rgba(204, 252, 253, 0.3);
    border-radius: 1.5rem;

}

.boxLevelTwoFst {
    margin-bottom: 1rem;

}

.boxLevelTwoText {
    position: absolute;
    top: .6rem;
    left: 2.1rem;
    font-size: 1.125rem;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: .3rem;
}


.faceContentBox {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    position: relative;

}

.faceContentTable {
    width: 100%;
    

}

tbody {
    height: 14.5rem;
    overflow: auto;
    display: block;
    scroll-behavior: smooth;
}

.faceContentRow {
    width: 100%;
    background: linear-gradient(to bottom, rgba(47, 47, 214, .6), rgba(255, 255, 255, .7));
    display: flex;
    height: 2.1rem;
    /* 底部边框为2像素宽的黑色边框 */
}

.faceContentRowPrime {
    background-color: RGBA(13, 31, 75, .8);
    display: flex;
}

.faceContentRowEven {
    background-color: RGBA(6, 19, 48, .9);
    display: flex;

}

.faceContentColume {
    font-size: 1rem;
    padding-top: .3rem;
    padding-bottom: .4rem;
    text-align: center;
    height: 2rem;
    color: #FFFFFF;

}

.faceContentColumeSort {
    /* border: #51AEFE 1px solid; */
    flex: 1
}

.faceContentColumeIPAddr {
    /* border: #55636f 1px solid; */
    text-align: center;
    flex: 2
}

.faceContentColumeDate {
    /* border: #2f6ca2 1px solid; */
    flex: 2
}

.faceContentColumeTime {
    /* border: #530303 1px solid; */
    flex: 1
}

.face3d {

    flex: 4;
    /* background-color: #390b0b; */
}

.backImgCircle {
    margin-left: 13.3rem;
    /* width: 3rem; */
    height: 20rem;

}

.faceBackMain {
    position: absolute;
    top: 4.6875rem;
    height: 14rem;

    left: 19.375rem
}

.face3dSec {
    position: relative;
    flex: 2;
    /* background-color: #af4d4d; */
}

.face3dTrd {
    flex: 3;
    display: flex;
    /* flex-direction: column; */

    /* background-color: #4d8d4d; */
}

.faceLeftTwoBox {
    height: 12.3125rem;
    width: 17.125rem;
    position: absolute;
    /* background-color: #ceb4b4; */
    top: -2.5rem;
    left: 4.375rem;

}

.faceRightTwoBox {
    height: 12.3125rem;
    width: 17.125rem;
    position: absolute;
    /* background-color: #ceb4b4; */
    top: -2.5rem;
    right: 4.375rem;

}

.faceLeftTwoBox {
    position: absolute;
    top: -2.5rem;
    left: 4.375rem;
}

.faceLeftTwoCircle {
    width: 75%;
    position: absolute;
    top: 1.5rem;
    right: 1.5625rem;
    height: 10.0625rem;
    /* width: 10.0625rem; */
}


.faceLeftTwo {
    position: absolute;
    top: 3.125rem;
    right: 5.625rem;
    height: 4.9375rem;
    width: 4.5625rem;
    animation: moveandflash 4s infinite alternate;
    transform: translateY(0) translateZ(0rem);
}

.faceRightTwo {
    position: absolute;
    top: 3.125rem;
    right: 5.625rem;
    height: 4.9375rem;
    width: 4.5625rem;
    animation: moveandflash 4s infinite alternate;
    transform: translateY(0) translateZ(0rem);
}

@keyframes moveandflash {
    0% {
        transform: translateY(0) translateZ(0rem);
    }

    10% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    20% {
        transform: translateY(0rem) translateZ(0rem);
    }

    30% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    43% {
        opacity: 1;
        transform: translateY(-0.8125rem) translateZ(1.25rem);
    }
    45% {
        opacity: 0;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    46% {
        opacity: 1;
        transform: translateY(-0.875rem) translateZ(1.25rem);
    }
    47% {
        opacity: .6;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    48% {
        opacity: .9;
        transform: translateY(-0.75rem) translateZ(1.25rem);
    }
    49% {
        opacity: .2;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    50% {
        opacity: 1;
        transform: translateY(-0.875rem) translateZ(1.25rem);
    }
    51% {
        opacity: .2;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    52% {
        opacity: .9;
        transform: translateY(-0.75rem) translateZ(1.25rem);
    }
    53% {
        opacity: .6;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    54% {
        opacity: 1;
        transform: translateY(-0.875rem) translateZ(1.25rem);
    }
    55% {
        opacity: 0;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    57% {
        opacity: 1;
        transform: translateY(-0.8125rem) translateZ(1.25rem);
    }
    70% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }
    80% {
        transform: translateY(0) translateZ(0rem);
    }

    90% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    100% {
        transform: translateY(0) translateZ(0rem);
    }
}

.faceLeftThreePic {
    position: relative;
    flex: 2;
    /* background-color: #55636f; */
}

.faceLeftThreeCard {
    flex: 5;
    position: relative;
    /* background-color: #1579d1; */

}


.text {
    position: absolute;
    margin-left: 1.875rem;
    color: #ffffff;
    z-index: 3;
}

.faceThree {

    position: absolute;
    left: 1.1875rem;
    /* opacity: .5; */
    z-index: 1;

}

.smallImg2 {
    position: absolute;
    width: 40%;
    height: 60%;
    top: 3.125rem;
    left: 3.125rem;
    border: #51AEFE .0625rem solid;
}

.smallImg1 {
    position: absolute;
    width: 40%;
    height: 60%;
    top: 3.125rem;
    right: 3.125rem;
    border: #51AEFE .0625rem solid;
}

.nameBox {
    top: 3.125rem;
    left: 2.8125rem;

    position: absolute;
    font-size: .875rem;
    color: #ffffff;
}

.SexBox {
    top: 6.875rem;
    left: 2.8125rem;

    position: absolute;
    font-size: .875rem;
    color: #ffffff;
}

.nameBox2 {
    top: 3.125rem;
    right: 5rem;

    position: absolute;
    font-size: .875rem;
    color: #ffffff;
}

.SexBox2 {
    top: 6.875rem;
    right: 5.625rem;

    position: absolute;
    font-size: .875rem;
    color: #ffffff;
}

.myEcharts {
    width: 90%;
    height: 90%;
    margin-left: 5%;
    /* background-color: #51AEFE; */
}

.resultHeader {
    width: 100%;
    height: 3.0625rem;
}