auseft.platform.datav/src/app/routes/data-v/second1/second1.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;
// }

/* 分页器 */

.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: 17rem;
    font-weight: 700;
    //竖线颜色
    border-width: 3px;
    &:extend(.ag-theme-material);

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

    ::ng-deep .ag-header-row {
        font-size: 14px;
        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;
}

/* button-component.component.css */
.button-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background-color: #2c3e50; // 你可以根据需要调整颜色
  }
  
  .lock-button, .standard-button, .highlighted-button {
    margin: 5px;
    padding: 10px 15px;
    font-size: 20px;
    color: white;
    border: none;
  }
  
  .lock-button {
    background-color: transparent;
  }
  
  .standard-button {
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: rgb(107 236 246 / 100%);
    text-align: center;
    background-color: rgb(33 48 105 / 100%);
    border-radius: 3px;
  }
  
  .highlighted-button {
    background-color: #3498db; // 你可以根据需要调整颜色
    border-radius: 10px;
  }
  
  .fa-lock {
    margin-right: 5px;
  }

  .logo{
    width: 65px;
    // height: ;
  }

  .car-status-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-image: url("/assets/car-status-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  
  .row {
    display: flex;
    align-items: stretch; /* 保持相同高度 */
    justify-content: space-between; /* 子组件间平均分布 */
    margin-bottom: 20px; /* 每行之间的间距 */
  }
  
  .image-container {
    display: flex;
    flex: 1; /* 三个子元素均匀分布 */
    align-items: center; /* 图片居中 */
    justify-content: center; /* 图片居中 */
    margin: 0 10px; /* 子组件之间的间距 */
  }
  
  .image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持图片的宽高比 */
  }
  
  .info-container {
    display: flex;
    // flex: 1; /* 同样的，让信息容器也占据等同的空间 */
    flex-direction: column;
    justify-content: space-around;
    margin: 0 10px;
  }

  .model-container{
    display: flex;
    flex: 1; /* 同样的，让信息容器也占据等同的空间 */
    flex-direction: column;
    justify-content: space-around;
    margin: 0 10px;
  }
  
  
  .info-button {
    margin: 5px 0;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #007bff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  }