@bg: #f2f7fb;
@siderBar: #2a3f54; // 侧边栏底色

body {
    background-color: @bg !important;
}

.app {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .sider {
        width: 200px;
        background: @siderBar;
        flex-shrink: 0;
        flex-grow: 0;
        height: 100%;
        color: #fff;

        .logo {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 22px;
        }

        :global {
            .ant-menu-item,
            .ant-menu-inline .ant-menu-submenu-title {
                font-size: 14px;
            }

            .ant-menu-inline {
                border-right: 0;
                background: @siderBar;
                color: #fff;
                font-size: 14px;

                .ant-menu-item,
                .ant-menu-submenu-title {
                    margin: 0 !important;
                    transition: none !important;
                }

                .ant-menu-item {
                    > a {
                        color: #fff;

                        &::before {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background-color: transparent;
                            content: '';
                        }

                        span,
                        i {
                            position: relative;
                        }
                    }

                    &:hover {
                        background: @bg;

                        > a {
                            color: #333;
                        }
                    }
                }

                .ant-menu-submenu-title {
                    .ant-menu-submenu-arrow::before,
                    .ant-menu-submenu-arrow::after {
                        background: #fff;
                    }

                    &:hover {
                        color: #333;
                        background: @bg;

                        .ant-menu-submenu-arrow::before,
                        .ant-menu-submenu-arrow::after {
                            background: #333;
                        }
                    }
                }

                .ant-menu-item::after {
                    border-right: 0;
                }
            }

            .ant-menu-item-selected {
                background-color: transparent !important;

                > a {
                    color: #fff;
                }
            }

            .nav-selected {
                &::before {
                    background-color: @bg !important;
                }

                color: #333 !important;
            }
        }
    }

    .section {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        .head {
            position: fixed;
            // width: 100%;
            right: 0;
            left: 200px;
            height: 60px;
            line-height: 60px;
            background: #fff;
            color: #333;
            box-shadow: 0 2px 4px 0 rgba(43, 43, 43, 0.1);
            z-index: 100;
            display: flex;
            justify-content: space-between;

            .collapse {
                margin-left: 20px;
                font-size: 16px;
            }

            .user {
                margin-right: 20px;

                .name {
                    padding-right: 12px;
                }
            }
        }
    }

    .content {
        padding: 20px 20px 80px 20px;
        width: 100%;
        height: auto;
        margin-top: 60px;
    }
}