GovernmentDataResourceCenter/super-screen/client/src/sections/community-safty/containers/style.less

.homepage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url('/assets/images/homepage/communtity/bg.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    padding-top: 5%;

    ._title_text {
        position: absolute;
        top: 0%;
        width: 100%;
        height: 62px;
        font-family: YouSheBiaoTiHei;
        font-size: 48px;
        color: #FFFFFF;
        letter-spacing: 12px;
        z-index: 300;
        display: flex;
        align-items: center;
        justify-content: center;

        ._title_dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-image: linear-gradient(180deg, #FFFFFF 0%, #0d71ef00 100%);
            margin-left: 14px;
            margin-right: 14px;
            border-radius: 4px;
        }

    }

    ._exit {
        position: absolute;
        right: 60px;
        top: 38px;
        cursor: pointer;
        color: #C8F0FF;
        display: flex;
        width: 102px;
        height: 33px;
        background: url('/assets/images/homepage/bigscreen/exit.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-left: 35px;
        align-items: center;
        z-index: 400;
    }

    .homepage-left {
        width: 21.8%;
        height: 84.6%;
        position: absolute;
        top: 10.1%;
        z-index: 300;
    }

    .community-homepage-center {
        width: 93.9%;
        height: 84%;
        position: absolute;
        top: 10.4%;
        left: 58px;
        padding-left: 16px;
        padding-right: 16px;
        z-index: 200;

        ._top {
            margin-top: 5%;
            height: calc(100% - 200px);
            background: url('/assets/images/homepage/bigscreen/centerbg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
    }

    .homepage-left-left {
        left: 58px;
    }

    .homepage-left-right {
        right: 58px;
    }

}


.list {
    list-style: none;
    height: 100%;
}

.list .child {
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(-300px);
    animation: show .5s forwards;
}

.list .child.show {
    animation-delay: 0s !important;
}

.list .child.hide {
    opacity: 1;
    transform: translateX(0);
    animation-name: hide;
    animation-delay: 0s;
}

/*animation-delay*/
.list .child:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}

.list .child:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}

.list .child:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}

.list .child:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}

.list .child:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}

.list .child-right {
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(300px);
    animation: show .5s forwards;
}

.list .child-right.show {
    animation-delay: 0s !important;
}

.list .child-right.hide {
    opacity: 1;
    transform: translateX(0);
    animation-name: hide;
    animation-delay: 0s;
}

/*animation-delay*/
.list .child-right:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}

.list .child-right:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}

.list .child-right:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}

.list .child-right:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}

.list .child-right:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}

.list .child-top {
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(300px);
    animation: show 1s forwards;
}

.list .child-top.show {
    animation-delay: 0s !important;
}

.list .child-top.hide {
    opacity: 1;
    transform: translateY(0);
    animation-name: hide;
    animation-delay: 0s;
}


@keyframes show {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hide {
    to {
        opacity: 0;
        transform: translateX(100px);
        max-height: 0;
        margin: 0;
    }
}

.center-card-title {
    height: 31px;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    margin-top: 5px;

    ._icon_left {
        width: 32px;
        height: 17px;
        background: url('/assets/images/homepage/bigscreen/center-left.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 11px;
        margin-left: 10px;
    }

    ._icon_right {
        width: 32px;
        height: 17px;
        background: url('/assets/images/homepage/bigscreen/center-right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 11px;
        margin-left: 10px;
    }
}

.gis {
    position: absolute;
    width: 100vw;
    height: calc(~"100% - 114px");
    left: 0;
    top: 114px;
    z-index: 0;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.homeTextLeft {
    position: absolute;
    bottom: -18px;
    left: 40%;
    font-family: YouSheBiaoTiHei;
    font-size: 12px;
    color: #ECF7FF;
}


.homeTextRight {
    position: absolute;
    bottom: -18px;
    right: 39.9%;
    font-family: YouSheBiaoTiHei;
    font-size: 12px;
    color: #ECF7FF;
}