generator-hcy-system/generators/app/templates/src/pages/home/style.less

hcy system layout and pages

.homepage {
    width: 100%;
    height: calc(100vh - 56px);
    padding: 24px;
    // background-image: url('../../../public/master/page/bg.gif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    .head-mes {
        height: 100px;
        background-color: #fff;
        margin-bottom: 16px;
        padding: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        box-shadow: 0 0 5px 5px #f0f0f0;

        .img-photo {
            width: 50px;
            margin-right: 8px;
            border-radius: 50%;
            object-fit: cover;
        }

        .left {
            display: flex;

            .name-mes {
                font-size: 20px;
                margin-bottom: 8px;
            }

            .span {
                color: #00000073;
                font-size: 12px;
            }
        }

        .right {
            text-align: center;

            .titles {
                color: #00000073;
            }

            .number {
                color: #000000d9;
                font-size: 24px;
            }
        }
    }

    .statistics {
        height: 160px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 5px 5px #f0f0f0;
        padding: 24px;

        .titles {
            display: flex;
            justify-content: space-between;
            color: #00000073;
        }

        .number {
            font-size: 36px;
            color: #000000d9;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .ratio {
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
        }
    }

    .home-bottom {
        display: flex;
        margin-top: 16px;

        .left-statistics {
            height: calc(100vh - 400px);
            width: 50%;
            margin-right: 16px;
            background-color: #fff;
            box-shadow: 0 0 5px 5px #f0f0f0;
            padding: 24px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            min-height: 350px;

            p {
                font-size: 18px;
            }

            .proportion {
                width: 50%;
                margin-right: 24px;
            }

            .residue {
                width: 50%;
            }

            .progress {
                height: 95%;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
        }


        .right-statistics {
            height: calc(100vh - 400px);
            width: 50%;

            .navigation {
                background-color: #fff;
                box-shadow: 0 0 5px 5px #f0f0f0;
                border-radius: 4px;
                margin-bottom: 24px;

                .ant-tag {
                    padding: 8px;
                    border-radius: 4px;
                    font-size: 16px;
                    margin-right: 16px;
                }

                .title-begin {
                    padding: 24px 24px 8px;
                    border-bottom: 1px solid rgba(0, 0, 0, 6%);
                }

                .navigation-btn {
                    padding: 24px;
                    height: 130px;
                    overflow: auto;
                }

                .navigation-btn::-webkit-scrollbar {
                    display: none;
                }

            }

            .login-mes {
                background-color: #fff;
                box-shadow: 0 0 5px 5px #f0f0f0;
                border-radius: 4px;
                height: calc(100vh - 605px);
                min-height: 147px;

                .title-begin {
                    padding: 24px 24px 8px;
                    border-bottom: 1px solid rgba(0, 0, 0, 6%);
                }

                .time-line {
                    padding: 24px;
                    overflow: auto;
                    min-height: 94px;
                    height: calc(100vh - 678px);
                }

                .time-line::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
}