client-app/style/data-fill/index.scoped.scss

page {
    background: #FAFBFE;
    height: 100%;
    overflow: hidden;
}
.hc-search-bar {
    position: relative;
}
.hc-page-body {
    position: relative;
    display: flex;
    height: calc(100vh - 176rpx - (var(--window-bottom) + 0.3125rem) - (var(--status-bar-height) + 0.3125rem));
    overflow: hidden;
    .hc-page-menu {
        height: 100%;
        width: 260rpx;
        background-color: #f3f5f8;
        border-right: 1px solid #ececed;
        .hc-page-menu-item {
            padding: 20rpx;
            font-size: 28rpx;
            color: #415058;
            &.cur {
                background-color: #544e80;
                color: #FFFFFF;
            }
        }
    }
    .hc-page-data {
        height: 100%;
        flex: 1;
        .hc-page-data-item {
            padding: 20rpx 24rpx;
            font-size: 28rpx;
            color: #4f4f4f;
            font-weight: bold;
            &.cur {
                color: #4095E5;
            }
        }
    }

    .fold-tree-node {
        position: relative;
        padding: 20rpx 16rpx;
        margin: 20rpx;
        border-radius: 10rpx;
        background: white;
        .node-title {
            color: #4F4F4F;
            font-size: 27rpx;
            &.blue {
                color: var(--primary-color);
            }
            .icon {
                font-size: 40rpx;
                margin-right: 10rpx;
                width: 40rpx;
            }
        }
        &.current {
            opacity: 1;
            background-color: rgba(180, 253, 255, .44);
            box-shadow: 0 4rpx 12rpx 0 rgba(122, 122, 122, .34);
            transform-origin: 350rpx 550rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-name: foldTreeNodeCurrentZoomIn;
            animation-fill-mode: backwards;
            .node-title {
                color: #EE5B20;
            }
        }
        .node-child {
            position: relative;
            padding-left: 40rpx;
            .node-title {
                color: #4F4F4F;
                margin-top: 22rpx;
            }
        }
    }
}


@keyframes foldTreeNodeCurrentZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}