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

@font-face {
    font-family: 'FZSTK';
    src: url('../fonts/FZSTK.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DIN-Regular';
    src: url('../fonts/DIN-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 设置body的背景图片，宽度，高度，外边距，内边距，边框 */
body {
    background-image: url('../images/backimg.png');
    z-index: -100;
    width: 1920px;
    /* 设置宽度为1920像素 */
    height: 1080px;
    /* 设置高度为1080像素 */
    margin: 0;
    /* 取消默认的外边距 */
    padding: 0;
    /* 取消默认的内边距 */
    box-sizing: border-box;
    /* 让元素的宽度和高度包括内边距和边框 */
    background-size: 100% 100%;
    max-height: 64rem;

}

/* 设置head_pic_container的背景图片，宽度，高度，外边距，内边距，边框 */
.head_pic_container {
    position: relative;
    width: 100%;
    height: 9.125rem;
    position: relative;
    /* background-color: #c09292; */
    background-image: url('../images/headerPic.png');
    z-index: 1;
    background-size: 100% 100%;
}

/* 设置#main_title的绝对定位 */
#main_title {
    position: absolute;
    /* 设置#main_title的上边距为8% */
    top: 8%;
    /* 设置#main_title的左边距为45.8% */
    left: 44.8%;
    /* 设置#main_title的宽度为14rem */
    width: 14rem;
    /* 设置#main_title的高度为3.1875rem */
    height: 3.1875rem;
    /* 设置#main_title的字体为YouSheBiaoTiHei */
    font-family: YouSheBiaoTiHei;
    /* 设置#main_title的字体粗细为400 */
    font-weight: 800;
    /* 设置#main_title的字体大小为2.625rem */
    font-size: 2.625rem;
    /* 设置#main_title的字体颜色为#FFFFFF */
    /* color: #FFFFFF; */
    /* 设置#main_title的行高为3.1875rem */
    line-height: 3.1875rem;
    /* 设置#main_title的文本阴影为0rem .125rem .5rem rgba(10, 35, 81, 0.9) */
    /* text-shadow: 0rem .125rem .5rem rgba(10, 35, 81, 0.9); */
    /* 设置#main_title的字体样式为斜体 */
    font-style: italic;
    /* 设置#main_title的背景为线性渐变，从0度开始，到#F0FDFF结束，占0.4150390625% */
    /* background: linear-gradient(0deg, #F0FDFF 0.4150390625%, #FFFFFF 37.158203125%, #51AEFE 100%); */
    /* 设置#main_title的背景裁剪为文本 */
    -webkit-background-clip: text;
    background: linear-gradient(0deg, #5AB6FE, #fff);
    background-clip: text;
    /* -webkit-background-clip: text; */
    /* color: transparent; */
    /* 设置#main_title的文本填充颜色为透明 */
    -webkit-text-fill-color: transparent;
}

/* 设置headerDate的定位，字体大小，粗细，底部和右边距，背景色和字体颜色 */
#headerDate {
    position: absolute;
    font-size: 1rem;
    font-weight: bold;
    top: 1.3rem;
    right: 2.5rem;
    font-family: DIN-Regular;
    /* 字体 */
    /* background-color: blanchedalmond; */
    color: #f6f6f6;
}

/* 设置lefticon的定位，宽度和高度 */
.lefticon {
    position: absolute;
    width: 2rem;
    height: 2rem;
}

/* 页面上方的样式自此结束 */
.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;
}