auseft.platform.datav/src/app/routes/data-v/workstation/workstation.component.less

// .workstation-header {
//     width: 100%;widthwidth
//     height: 3rem;heightheight
//     /* 水平宽度占据整个视口宽度 */
//     background-image: url('../../../../assets/dashboard/dashboard_workstation.jpg');background-imagebackground-image
//     background-size: cover;background-sizebackground-size
//     /* 背景图片尺寸适应 */
//     background-position: top;background-positionbackground-position
// }
// .workstation-content {
//     height: 18rem;heightheight
//     padding: 1rem 1.5rem;paddingpadding
//     background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');background-imagebackground-image
//     background-size: cover;background-sizebackground-size
//     /* 背景图片尺寸适应 */
//     background-position: top;background-positionbackground-position
// }

// .workstation-content-title {
//     margin-bottom: 0.5rem;
//     font-size: 18px;
//     font-weight: 600;
//     color: #94DDF3;
// }
@import "../../../..//styles/variables.less";
/* 分页器 */

.ag-header-center .ag-header-group-cell-label, 
.ag-header-center .ag-header-cell-label {
    display: grid;
    justify-content: center;
    color: #000;
    text-align: center;
    background: #000;
}

::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
    color: red !important;
}

//   选中行样式
::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus {
    font-weight: 600;
    color: red;

    .ag-cell-focus {
        border: #74FAFB;
    }

    .ag-grid-button-style {
        color: red;
        border-color: red;
    }
}




::ng-deep .ag-theme-datav {
    --ag-border-color: #74FAFB;
    --ag-foreground-color: #74FAFB;
    // --ag-background-color: #0A1632;
    --ag-header-foreground-color: #74FAFB;
    --ag-header-background-color: #0A1632;
    --ag-odd-row-background-color: #0A1632;
    --ag-header-column-resize-handle-color: rgb(126 46 132);
    --ag-font-size: 12px;
    --ag-font-family: monospace;

    height: 16rem;
    font-weight: 700;
    //竖线颜色
    
    .px2rem(3,border-width);
    &:extend(.ag-theme-material);

    //标题间的 竖线
    ::ng-deep .ag-header-cell-resize {
        --ag-header-column-resize-handle-color: transparent;
    }

    ::ng-deep .ag-header-row {
        .px2rem(13.5,font-size);
        font-weight: 700;
    }

    //外边框去掉圆角
    ::ng-deep .ag-root-wrapper {
        border-radius: 0;
    }
}

/* 设置滚动条的宽度 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
    width: 12em;

}

/* 设置滚动条滑块的样式 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
    margin-left: 40px;
    background-color: #00eff8;

    /* 圆角 */
    border: 2px solid #00eff8;

    /* 滚动条滑块的背景颜色 */


    /* 滚动条滑块的边框 */
}



/* 设置滚动条轨道的样式 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
    background-color: transparent;
    border-color: #00eff8;

    /* 滚动条轨道的背景颜色 */
}

/* 设置滚动条滑块悬浮时的样式 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
    margin-left: 40px;
    background-color: #00eff8;

    /* 滚动条滑块悬浮时的背景颜色 */
}

/* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active {
    background-color: #00eff8;

    /* 滚动条滑块激活时的背景颜色 */
}

//竖向
::ng-deep .ag-body-vertical-scroll-viewport {
    scrollbar-color: auto;
}

//横向
::ng-deep .ag-body-horizontal-scroll-viewport {
    scrollbar-color: auto;
}

/* 设置滚动条的宽度 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
    height: 14em;
    color: #000;
}

/* 设置横向滚动条轨道的样式 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
    background-color: transparent;
    border-color: #00eff8;
}

/* 设置横向滚动条滑块悬浮时的样式 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background-color: #00eff8;
}

/* 设置横向滚动条滑块激活时的样式 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active {
    background-color: #00eff8;
}

/* 设置横向滚动条滑块的颜色 */
::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
    background-color: #00eff8;
}