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

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

    ._enter_row1 {
        height: 302px;

        ._row1_item {
            width: 1434px;
            height: 241px;
            // opacity: 0.8;
            background: url('/assets/images/homePage/enter/row1.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        ._row1_item:hover {
            width: 1434px;
            height: 302.6px;
            background: url('/assets/images/homePage/enter/row1-select.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }
    }

    ._enter_row2 {
        height: 427px;
        display: flex;
        width: 100%;
        padding-left: 4%;

        ._row2_item1 {
            width: 454px;
            height: 371px;
            // opacity: 0.8;
            background: url('/assets/images/homePage/enter/row2-1.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            margin-left: 60px;
        }

        ._row2_item1:hover {
            background: url('/assets/images/homePage/enter/row2-1-select.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        ._row2_item2 {
            margin-left: 60px;
            width: 454px;
            height: 371px;
            // opacity: 0.8;
            background: url('/assets/images/homePage/enter/row2-2.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        ._row2_item2:hover {
            background: url('/assets/images/homePage/enter/row2-2-select.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        ._row2_item3 {
            margin-left: 60px;
            width: 454px;
            height: 371px;
            // opacity: 0.8;
            background: url('/assets/images/homePage/enter/row2-3.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        ._row2_item3:hover {
            background: url('/assets/images/homePage/enter/row2-3-select.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }
    }

    ._enter_title {
        position: absolute;
        top: 4%;
        left: 3%;
        width: 575.35px;
        height: 78px;
        background: url('/assets/images/homePage/enter/title.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    ._title {
        width: 100%;
        height: 88px;
        background: url('/assets/images/homePage/bigscreen/top.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    ._exit {
        position: absolute;
        right: 60px;
        top: 38px;
        cursor: pointer;
        color: #C8F0FF;
        display: flex;

        ._icon {
            display: inline-block;
            width: 28px;
            height: 28px;
            background: url('/assets/images/homePage/bigscreen/exit.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-right: 3px;
        }
    }

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

    .homepage-center {
        width: 49.16%;
        height: 89.6%;
        position: absolute;
        bottom: 2.4%;
        left: 25.5%;
        padding-left: 16px;
        padding-right: 16px;
        z-index: 400;

        ._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: 48px;
    }

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

}


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