5G-Loading-Bay-Web/src/views/dashboard/DeviceStatus.scss

.device-status-wrap {
  height: 813px;
  background-image: url("@/assets/deviceStatus/device_status_bg.png");
  background-size: 100% 100%;
  background-position: bottom;
  background-repeat: no-repeat;
}
.device-status-content-box {
  .el-scrollbar__view {
    background: transparent !important;
    height: 600px;
  }
  .el-table__inner-wrapper {
    background-color: transparent !important;
  }
  .el-table__body-wrapper,
  .el-scrollbar__wrap,
  .el-scrollbar {
    background: transparent !important;
  }
  .device-status-tag {
    width: 78px;
    height: 24px;
    border-radius: 14px;
    border: 1px solid #52c41a;
    color: #52c41a;
    display: flex;
    align-items: center;
    justify-content: center;

    .dot {
      display: inline-block;
      margin-right: 8px;
      width: 8px;
      height: 8px;
      background: #52c41a;
      border-radius: 50%;
    }
  }
  .device-status-tag-online{
 @extend .device-status-tag;
  }
  .device-status-tag-outline {
    @extend .device-status-tag;
    border: 1px solid #999999;
    color: #999999;
    .dot {
      background: #999999;
    }
  }
  .device-status-tag-error {
    @extend .device-status-tag;
    border: 1px solid #e80d0d;
    color: #e80d0d;
    .dot {
      background: #e80d0d;
    }
  }
}