// 覆盖 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; } }