5G-Loading-Bay-Web/src/styles/element-plus.scss

// 覆盖 ElementPlus 的主色变量

// $--color-primary: #ff6600; // 设置主色为橙色
// $--el-color-primary: red;
/* 自定义 Element Plus 变量 */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #2de6ff,
    ),
  ),
  $select-dropdown: (
    "background-color": red,
  )
  // $el-pagination: (
//   --el-pagination-button-height-small: 24px;
// )
);


/* 引入 Element Plus 样式 */
@use "element-plus/theme-chalk/src/index.scss" as *;


.el-button.is-text:not(.is-disabled):hover {
  background-color: transparent;
}

.el-button.is-text:not(.is-disabled):hover {
  background-color: transparent;
}

.el-button:hover {
  color: white;
  background-color: transparent;
  outline: none;
}

/* 表格 */
.ds_table {
  position: relative;
}
/* 分页栏 */
.fixed_pagination {
  // width: calc(100% - 136px);
  // background-color: white;
  // z-index: 9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  right: 0;
  bottom: 0;
  padding: 28px 20px;
}
.noneFixed_pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 0;
}
.el-select--small .el-select__wrapper {
  min-height: 28px;
  line-height: 24px;
}
.el-pagination {
  button {
    background-color: transparent;
    color: white;
  }
  button:disabled,
  button.is-disabled {
    background-color: transparent;
  }

  .el-pagination--small .btn-prev,
  .el-pagination--small .btn-next,
  .el-pagination--small .el-pager li {
    height: 28px;
    line-height: 28px;
    min-width: 28px;
  }
  .el-select__placeholder {
    color: white;
  }
  .el-select--small .el-select__wrapper {
    width: 92px;
  }
  .el-select--small .el-select__wrapper {
    padding: 2px 15px;
  }
  .el-pagination__jump {
    color: white;
    .el-input {
      width: 40px;
      height: 28px;
    }
    .el-input__wrapper {
      background-color: transparent;

      .el-input__inner {
        color: white;
        line-height: 24px;
      }
    }
  }
}
.el-pager li {
  background-color: transparent;
  color: white;
}

/* 下拉选择 */
.custom-select {
  width: 150px;
  .el-select__selected-item {
    color: white; /* 文字颜色 */
  }
  .el-select__wrapper {
    background: rgba(74, 126, 191, 0.1); /* 下拉框背景色 */
    border: 1px solid transparent; /* 边框 */
    color: white; /* 文字颜色 */
    height: 32px;
    box-shadow: none;

    &::placeholder {
      color: rgba(255, 255, 255, 0.6); /* 占位符颜色 */
    }
  }
  .el-select__wrapper {
    min-height: 32px;
    line-height: 32px;
  }
  .el-select__arrow {
    color: rgba(255, 255, 255, 0.6); /* 下拉箭头颜色 */
  }
  &:hover .el-select__inner {
    border-color: transparent; /* 悬停边框颜色 */
  }
}

.custom-select {
  background-color: #032b5c; /* 自定义背景色 */
  border: none; /* 可选：去掉边框 */
}

/* 修改下拉菜单背景色 */
.el-select-dropdown {
  background-color: #032b5c; /* 下拉菜单背景 */
  border: none; /* 可选：去掉下拉框边框 */
  border: 1px solid #032b5c;
  box-shadow: none; /* 可选：去掉阴影 */
}
/* 修改普通选项文字颜色 */
.el-select-dropdown__item {
  color: white; /* 下拉选项文字颜色 */
}

.el-select-dropdown__item.is-hovering {
  background-color: #2de6ff;
  color: white;
}

/* table */
.el-table {
  // background-color: transparent;
}
.table_action_box {
  .el-button {
    padding: 0;
  }
}

.el-table--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
  background-color: transparent !important;
}

/* 分页 */
.el-pagination {
  .el-pagination__total {
    color: white;
  }
  .el-select {
    background-color: transparent; /* 自定义背景色 */
    border: none; /* 可选：去掉边框 */
  }
  .el-select__wrapper {
    background-color: transparent;
  }
}

/* 按钮 */
.basic-btn {
  height: 32px;
  width: 76px;
  margin: 0;
  &.el-button {
    margin-left: 0;
  }
}

.query-btn {
  background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%);
  border: 1px solid #42a5f5;
  border-radius: 2px;
  color: white;
  margin-left: 0;
  & .icon {
    width: 14px;
    height: 14px;
    background-image: url("@/assets/common/search_icon.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}

.reset-btn {
  background: transparent;
  border-radius: 2px;
  border: 1px solid #088bd6;
  color: white;
  box-shadow: none;
  & .icon {
    width: 14px;
    height: 14px;
    background-image: url("@/assets/common/reset_icon.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}