for_client/src/styles/app/main.scss

html, body, #app {
    height: 100%;
    background-color: #F1F5F8;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* 滚动条凹槽的颜色，还可以设置边框属性 */
    &::-webkit-scrollbar-track-piece {
        background-color: #f8f8f8;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
    /* 滚动条的宽度 */
    &::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }
    /* 滚动条的设置 */
    &::-webkit-scrollbar-thumb {
        background-color: #ddd;
        background-clip: padding-box;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
    /* 滚动条鼠标移上去 */
    &::-webkit-scrollbar-thumb:hover {
        background-color: #bbb;
    }
}

.us-se-no {
    user-select: none;
}

.lr-dialog-footer {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .left {
        .el-button + .el-button {
            margin-left: 10px;
        }
    }
}

.hc-flex-column {
    display: flex;
    flex-direction: column;
}

.hc-sticky-box {
    position: sticky;
    z-index: 99;
    top: 0;
}

.pover-menu-list {
    position: relative;
    .list-item {
        position: relative;
        border-radius: 5px;
        padding: 10px 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: color 0.3s, background-color 0.3s;
        .text {
            flex: auto;
            margin-left: 0;
            margin-right: 20px;
        }
        i {
            font-size: 22px;
        }
        &:hover {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-7);
        }
    }
}

#toolPanel, #optionPanel {
    border-radius: 5px;
    box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.15);
}

.el-radio-group .el-radio {
    margin-right: 10px;
}

.bg-card-main {
    background-color: var(--hc-bg-color);
}

.hc-list-box {
    position: relative;
    .item {
        position: relative;
        display: flex;
        align-items: center;
        .label {
            flex: 1;
        }
        &.item {
            margin-top: 15px;
        }
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter-from {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.hc-page-layout-box {
    display: flex;
    position: relative;
    height: 100%;
    .hc-layout-left-box {
        width: 382px;
        position: relative;
        background: #f1f5f8;
        border-radius: 10px;
        margin-right: 24px;
        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
        .horizontal-drag-line {
            position: absolute;
            right: 0;
            top: 0;
            width: 4px;
            height: 100%;
            user-select: none;
            cursor: col-resize;
            background-color: #00000000;
        }
        .hc-project-box {
            position: relative;
            padding: 15px 24px;
            display: flex;
            align-items: flex-start;
            border-bottom: 1px solid #E9E9E9;
            .hc-project-icon-box {
                font-size: 30px;
                color: var(--el-color-primary);
            }
            .project-name-box {
                flex: auto;
                position: relative;
                overflow: hidden;
                .project-alias {
                    color: var(--el-color-primary);
                }
                .project-name {
                    margin-top: 6px;
                    color: #838791;
                }
            }
        }
        .hc-tree-box {
            position: relative;
            padding: 15px 20px;
            height: calc(100% - 80px);
        }
        .hc-tree-search-box {
            position: relative;
            padding: 15px 20px;
            height: calc(100% - 187px);
            .hc-search-tree-val {
                position: relative;
                margin-bottom: 24px;
            }
            .hc-tree-scrollbar {
                position: relative;
                height: calc(100% - 68px);
            }
        }
        &.menu {
            width: 240px;
            .hc-menu-header-box {
                position: relative;
                padding: 15px 18px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #E9E9E9;
                .name {
                    flex: auto;
                    position: relative;
                }
            }
            .hc-menu-contents-box {
                position: relative;
                //padding: 15px 18px;
                height: calc(100% - 60px);
            }
        }
    }
    .hc-page-content-box {
        flex: 1;
        position: relative;
    }
}

.hc-page-box {
    position: relative;
    height: 100%;
}
.z-9999 {
    z-index: 9999 !important;
}

//分割的样式
.gutter {
    background-color: #f1f5f8;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: row-resize;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}