修改element-plus的主题色css变量

i_am_a_div_日积月累_2025-06-20 16:54

提示：本文仅是记录我修改element-plus等组件库的css变量，

具体【实现主题色切换看这篇】即可

文章目录

1.文件划分

main.js引入

javascript 复制代码 
import "@/style/index.scss"

2.src/style/index.scss入口文件

javascript 复制代码 
@use "./base.scss";
@use "./setting.scss";
@use "element-plus/theme-chalk/src/index.scss";
@use "./yan-page.scss";
@import "./reset-vxetable";
@import "./theme.scss";



// 深色模式手动修改class色(这里记录的就是通过css变量可能会影响多个组件样式，只能通过具体类名修改具体组件样式。或者是主题色渲染出来不是自己想要的，特殊处理下样式)
.dark {
  // 下拉
  .el-select-dropdown__item.is-hovering {
    background-color: var(--my-hover-color);
  }
  .el-select-dropdown__item.is-selected {
    color: #fff;
    background-color: var(--theme-color-primary);
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after {
    background-color: var(--my-light-color);
  }
  .el-select-dropdown__item.is-disabled {
    color: var(--my-disabled-color);
  }

  // 下拉多选
  .el-select__selection .el-tag {
    color: #fff;
    background-color: var(--my-btn-select-bgc); // var(--my-hover-color);
  }
  .el-tag .el-tag__close {
    color: #fff;
  }

  // 树
  .el-tree {
    background: #24435e; // 背景色
    --el-tree-node-hover-bg-color: #2c5272; // hover
  }

  // 单选多选
  .el-radio {
    --el-radio-input-bg-color: var(--my-btn-bgc); // 单选填充色-可选
  }
  .el-checkbox {
    --el-checkbox-bg-color: var(--my-btn-bgc); // 多选填充色-可选
  }
  .el-radio__input.is-disabled + span.el-radio__label,
  .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: var(--my-disabled-color);
  }

  // 弹框
  .el-dialog,
  .el-overlay {
    --el-dialog-bg-color: #2f5779;
    .el-form {
      background-color: #2f5779;
    }
    .wbg {
      background-color: transparent;
    }
  }
  .jg-dialog .el-dialog__header {
    border-bottom-color: var(--my-btn-border-color);
  }
  .jg-dialog .el-dialog__footer {
    border-top-color: var(--my-btn-border-color);
  }

  .el-table__body tr:hover > td {
    background-color: var(--my-btn-bgc) !important;
  }
  .el-table th.el-table__cell {
    background-color: var(--my-btn-bgc); // 表格头背景
  }
  .col_bgc {
    background-color: var(--my-btn-bgc);
    color: #fff;
  }
  .my-drawer .el-drawer__header {
    border-bottom-color: var(--my-btn-border-color);
  }

  // // message
  // .el-message {
  //   --el-color-success-light-9: rgb(28.3, 37.4, 23.8);
  // }

  // 按钮 抛弃生成色 使用UI设计稿
  .el-button--primary.is-link {
    color: var(--my-light-color); // 操作列按钮
  }
  .el-button--primary.is-disabled {
    color: var(--my-disabled-color); // 操作列按钮
  }
  .el-button--primary.is-link:hover,
  .el-button--primary.is-disabled:hover {
    color: var(--my-disabled-color); // 操作列按钮
  }

  // form表单内容
  .el-form-item__content {
    color: #fff;
  }

  // tip
  .el-popper.is-dark {
    color: #fff;
    background: var(--theme-color-primary);
    border: 1px solid var(--theme-color-primary);

    .el-popper__arrow::before {
      border: 1px solid var(--theme-color-primary);
      background: var(--theme-color-primary);
      right: 0;
    }
  }


  //通用修改原黑色与白色标题名称
  .title_name {
    color: #fff !important;
  }
}


// 实现切换主题动画
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2147483646;
}

.dark::view-transition-old(root) {
  z-index: 2147483646;
}

.dark::view-transition-new(root) {
  z-index: 1;
}


// 滚动条设置
::-webkit-scrollbar-track-piece {
  //滚动条凹槽的颜色，还可以设置边框属性
  background-color: var(--my-scrollbar-track-color);
}

::-webkit-scrollbar {
  //滚动条的宽度
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  //滚动条的设置
  background-color: var(--my-scrollbar-color);
  background-clip: padding-box;
  min-height: 10px;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--my-scrollbar-hover-color);
}

// 右下角小方块
::-webkit-scrollbar-corner {
  background-color: transparent;
}

3.src/style/theme.scss主题色切换维护

javascript 复制代码 
/** element内置暗黑主题 */
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

// 可以进行一些样式的覆盖
html {
  --my-scrollbar-track-color: #f8f8f8; // 滚动条凹槽颜色
  --my-scrollbar-color: #dddddd; // 滚动条颜色
  --my-scrollbar-hover-color: #bbb; // 滚动条hover颜色

  // 替换色
  --my-link-color: #11716f; // 链接颜色
  --my-link-color2: #00706b; // 链接颜色
  --my-link-color3: #007d7b; // 顶部导航色
  --my-link-active: #0fa081; // 顶部导航选中色
  --my-primary-checkout: #007d7b; // 切换主题色
  --my-333-color: #333;
  --my-eff3f8-color: #eff3f8;
  --my-flow-color: #f2f0f0; // 页面自定义颜色
}

html.dark {
  --my-main-bgc: #253d52; // 页面背景色
  --my-btn-bgc: #234a6b; // 按钮背景色、表头、灰色区、tab多页签颜色\ 单选多选填充色
  --my-btn-select-bgc: #0084cb; // 选中背景色
  --my-btn-disabled-bgc: #3d5366; // 单选、多选、输入框等组件禁用背景色
  --my-disabled-color: #8d9095; // #617586; // 禁用文本颜色
  --my-btn-border-color: #347cbb; // 按钮边框色\弹框边框色
  --my-light-color: #65c9ff; // 高亮文本颜色、链接颜色
  --my-placeholder-color: #8cbce3; // placeholder
  --my-hover-color: #5c9dd5; // 自己hover
  --my-select-bgc: #2a699e; // 下拉框背景色
  --my-table-light-color: rgba(35, 74, 107, 0.4); // 表格斑马线

  --my-scrollbar-track-color: transparent; // 滚动条凹槽颜色
  --my-scrollbar-color: #234a6b; // 滚动条颜色
  --my-scrollbar-hover-color: var(--my-btn-select-bgc); // 滚动条hover颜色

  // 基本状态色
  --theme-color-primary: #0084cb;
  --theme-color-success: #60c888;
  --theme-color-warning: #d7bf0a;
  --theme-color-danger: #f56c6c;
  --theme-color-error: #cd7b00;
  --theme-color-info: #909399;

  .wbg {
    background-color: var(--my-main-bgc);
  }

  .theme_div {
    background-color: #1fff;
  }

  // 差异化样式

  // 替换色
  --my-link-color: var(--my-light-color); // 链接颜色
  --my-link-color2: var(--my-light-color); // 链接颜色
  --my-link-color3: var(--my-main-bgc); // 顶部导航色
  --my-link-active: var(--my-btn-select-bgc); // 顶部导航选中色
  --my-primary-checkout: var(--theme-color-primary); // 切换主题色
  --my-333-color: #fff;
  --my-eff3f8-color: var(--my-main-bgc);
  --my-flow-color: var(--my-btn-bgc); // 页面自定义颜色
}

@import "./element-dark.scss";
@import "./vxe-ui-dark.scss";

4.src/style/_color-utils.scss动态生成element-plus的scss变量

javascript 复制代码 
@use "sass:color";

// 增强版颜色混合函数
@function adjust-hover($base, $percentage: 10%) {
  @if type-of($base) == "string" and str-index($base, "var(") {
    @return unquote("color-mix(in srgb, #{$base} 90%, white 10%)");
  }
  @return color.mix(white, $base, $percentage);
}

@function adjust-active($base, $percentage: 20%) {
  @if type-of($base) == "string" and str-index($base, "var(") {
    @return unquote("color-mix(in srgb, #{$base} 80%, black 20%)");
  }
  @return color.mix(black, $base, $percentage);
}

@mixin generate-color-variants($name, $base-color) {
  --el-color-#{$name}: #{$base-color};
  --el-color-#{$name}-light-3: #{adjust-hover($base-color, 30%)};
  --el-color-#{$name}-light-5: #{adjust-hover($base-color, 50%)};
  --el-color-#{$name}-light-7: #{adjust-hover($base-color, 70%)};
  --el-color-#{$name}-light-8: #{adjust-active($base-color, 50%)};
  // --el-color-#{$name}-light-9: #{adjust-active($base-color, 90%)}; // 按照Ui样式手动书写
  --el-color-#{$name}-dark-2: #{adjust-active($base-color, 20%)};

  // 专门为按钮添加的hover变量
  --el-button-#{$name}-hover-bg-color: #{adjust-hover($base-color)};
  --el-button-#{$name}-active-bg-color: #{adjust-active($base-color)};
}

5.src/style/element.scss 默认element-plus的light主题色

javascript 复制代码 
// index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": #007d7b
    ),
    "success": (
      "base": #8bc34a
    ),
    "warning": (
      "base": #ffc107
    ),
    "danger": (
      "base": #f56c6c
    ),
    "error": (
      "base": #ff5722
    ),
    "info": (
      "base": #909399
    )
  )
);

6.src/style/element-dark.scss深色的element-plus主题色

注释掉的css最好别打开，可能这一个变量影响多个组件样式

javascript 复制代码 
/** element内置暗黑主题 */
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

@use "./color-utils" as color;

html.dark {
  // Element Plus 主色
  --el-color-primary: var(--theme-color-primary);
  --el-color-success: var(--theme-color-success);
  --el-color-warning: var(--theme-color-warning);
  --el-color-danger: var(--theme-color-danger);
  --el-color-error: var(--theme-color-error);
  --el-color-info: var(--theme-color-info);

  // 动态生成颜色
  @include color.generate-color-variants("primary", #0084cb);
  @include color.generate-color-variants("success", #60c888);
  @include color.generate-color-variants("warning", #d7bf0a);
  @include color.generate-color-variants("danger", #f56c6c);
  @include color.generate-color-variants("error", #cd7b00);
  @include color.generate-color-variants("info", #909399);

  --el-color-primary-light-9: rgba(43, 128, 185, 0.1);
  --el-color-success-light-9: rgba(96, 200, 136, 0.1);
  --el-color-warning-light-9: rgba(255, 153, 0, 0.1);
  --el-color-danger-light-9: rgba(245, 108, 108, 0.1);
  --el-color-error-light-9: rgba(226, 201, 60, 0.1);
  --el-color-info-light-9: rgba(153, 153, 153, 0.1);

  // --el-fill-color-blank: var(--my-btn-bgc); // 表单输入框、下拉、时间等填充色-可选

  --el-fill-color-light: var(--my-btn-disabled-bgc); // 单选填充色-禁用
  --el-border-color-extra-light: var(--my-btn-disabled-bgc); // 多选填充色-禁用
  --el-border-color: var(--my-btn-border-color); // 边框色

  --el-bg-color: var(--my-main-bgc); // 诸多组件背景色
  --el-text-color-primary: #fff; // 主文字颜色
  // --el-bg-color-page: #f1ff;
  // --el-text-color-regular: #f1ff;
  // --el-text-color-secondary: #f1ff;
  --el-input-focus-border-color: var(--el-color-primary); // 表单组件聚焦边框色
  --el-border-color-hover: var(--my-hover-color); // 表单组件hover边框色
  --el-input-clear-hover-color: var(--my-hover-color); // 表单组件删除按钮hover色
  --el-text-color-placeholder: var(--my-placeholder-color); // 表单组件placeholder
  --el-bg-color-overlay: var(--my-select-bgc); // 表单组件背景色
  --el-text-color-regular: #fff; // 表单组件文字颜色

  // --el-input-text-color: red;
  // --el-text-color-disabled: #f1ff;
  // --el-border-color: #f1ff;
  --el-border-color-light: var(--my-btn-border-color);
  --el-mask-color: rgba(34, 54, 72, 0.9); // 主背景0.9透明度
  --el-text-color-secondary: #fff; // 表头文本色
  --el-border-color-lighter: var(--my-btn-border-color); // 时间选择器周边框
  // --el-border-color-extra-light: #f1ff;
  // --el-border-color-dark: #f1ff;
  // --el-border-color-darker: #f1ff;
  // --el-fill-color: #f1ff;
  // --el-fill-color-light: #f1ff;
  --el-fill-color-lighter: var(--my-table-light-color); // 表格斑马线
  // --el-fill-color-extra-light: #f1ff;
  // --el-fill-color-dark: #f1ff;
  // --el-fill-color-darker: #f1ff;
  // --el-fill-color-blank: #f1ff;
  // --el-box-shadow: "0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)";
  --el-box-shadow-light: "0px 0px 12px rgba(0, 0, 0, 0.12)";
  // --el-box-shadow-lighter: "0px 0px 6px rgba(0, 0, 0, 0.12)";
  // --el-box-shadow-dark: "0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16)";
  // --el-disabled-bg-color: "var(--el-fill-color-light)";
  // --el-disabled-text-color: "var(--el-text-color-placeholder)";
  // --el-disabled-border-color: "var(--el-border-color-light)";
  // --el-overlay-color: "rgba(0, 0, 0, 0.8)";
  // --el-overlay-color-light: "rgba(0, 0, 0, 0.7)";
  // --el-overlay-color-lighter: "rgba(0, 0, 0, 0.5)";
  // --el-mask-color: "rgba(255, 255, 255, 0.9)";
  // --el-mask-color-extra-light: "rgba(255, 255, 255, 0.3)";
  // --el-border-width: "1px";
  // --el-border-style: "solid";
  // --el-border-color-hover: "var(--el-text-color-disabled)";
  // --el-border: "var(--el-border-width) var(--el-border-style) var(--el-border-color)";
  // --el-svg-monochrome-grey: "var(--el-border-color)";


}

7.src/style/reset-vxetable.scss默认vxetable的主题色

javascript 复制代码 
// 修改样式变量
$vxe-font-size: 14px;
$vxe-font-color: #666;
$vxe-ui-font-primary-color: #007d7b;
$vxe-ui-font-primary-color-light: #007d7b50;
$vxe-table-font-color: $vxe-font-color;
$vxe-table-border-color: #e8eaec;
$vxe-table-border-radius: 7px;
$vxe-table-header-background-color: #f9fcfc;
$vxe-table-row-striped-background-color: #007d7b07;
$vxe-ui-font-primary-color: #007d7b;

@import "vxe-table/styles/index.scss"; // 结合上方修改vxe-table样式变量

.vxe-cell {
  .el-button {
    font-size: var(--el-font-size-small);
  }
}

// 灰色类名 设置rowClassName
// 表头
.header-cell-class-name-gray {
  background-color: #f8f8f9 !important;
  .vxe-cell--title {
    color: #333333;
    font-size: 14px;
  }
}
// 表格斑马色
.row-class-name-gray:nth-child(2n + 1) {
  background-color: #ffffff !important;
}
.row-class-name-gray:nth-child(2n) {
  background-color: #fafafa !important;
}
// 表格hover
.row-class-name-gray:hover {
  background-color: #f1fbfb !important;
}
// 表格文本颜色
.row-class-name-gray {
  .vxe-cell--label {
    color: #333333;
    font-size: 14px;
  }
}
// hover样式
.row--hover {
  background: rgba(0, 157, 133, 0.1) !important;
}

// 公共表格link样式
.my-link {
  color: $vxe-ui-font-primary-color !important;
  cursor: pointer;
}
// 有弹框的数字link样式
.num-link {
  color: $vxe-ui-font-primary-color !important;
  cursor: pointer;
  text-decoration: underline;
}

.vxe-table--header {
  margin: 0;

  // colgroup {
  //   col {
  //     width: auto !important;
  //   }
  // }
}
.vxe-cell {
  .is--disabled {
    .vxe-table-icon-checkbox-unchecked:before {
      background-color: #f3f6f9;
    }
  }
}
// 工具按钮背景色
.vxe-toolbar-custom-target {
  background: #007d7b !important;
  i {
    color: #fff;
  }
}
.vxe-table-icon-custom-column:before {
  // content: ;
}
:root {
  --vxe-ui-font-color: #606266;
  --vxe-ui-font-primary-color: #007d7b !important;
  --vxe-ui-font-primary-lighten-color: #007d7b !important;
  --vxe-ui-font-primary-darken-color: #007d7b !important;
}

.vxe-footer--row {
  background-color: #f0f8f8;
}

// 报表管理的通用表头
.group_table {
  thead {
    tr:first-child {
      height: 54px;
      .vxe-cell--title {
        // color: red;
        font-size: 16px;
      }
    }
  }
}

.vxe-table .vxe-sort--asc-btn:hover,
.vxe-table .vxe-sort--desc-btn:hover {
  color: var(--my-hover-color) !important;
}

8.src/style/vxe-ui-dark.scss深色的vxetable主题色

javascript 复制代码 
html.dark {
  // vxe-table
  // --vxe-primary-color: #20496e ; // vxe的主题色
  --vxe-ui-font-primary-color: var(--theme-color-primary) !important; // vxe主题颜色
  // --vxe-ui-font-primary-tinge-color: #d4d5d7; // 活动颜色
  --vxe-ui-status-success-color: var(--theme-color-success) !important;
  --vxe-ui-status-info-color: var(--theme-color-info) !important;
  --vxe-ui-status-warning-color: var(--theme-color-warning) !important;
  --vxe-ui-status-error-color: var(--theme-color-danger) !important;
  --vxe-ui-layout-background-color: var(--my-main-bgc) !important;
  --vxe-ui-input-border-color: var(--my-btn-border-color) !important; // 多选
  --vxe-ui-table-row-hover-background-color: var(--my-main-bgc) !important;

  --vxe-ui-font-primary-lighten-color: var(--theme-color-primary) !important; // 松开颜色
  --vxe-ui-font-primary-darken-color: var(--theme-color-primary) !important; // 按下颜色
  --vxe-ui-font-primary-disabled-color: var(--my-btn-bgc) !important; // 工具栏禁用颜色-选中
  --vxe-ui-font-disabled-color: var(--my-disabled-color) !important; // 工具栏禁用文本颜色-未选
  --vxe-ui-input-disabled-color: var(--my-btn-disabled-bgc) !important; // 工具栏多选禁用颜色-未选

  --vxe-ui-tooltip-dark-background-color: var(--theme-color-primary) !important; // tip背景色

  --vxe-ui-table-column-icon-border-color: #fff !important; // 表格列排序图标边框颜色
  // --vxe-ui-table-column-icon-background-color: var(--my-btn-disabled-bgc) !important; // 表格列排序图标背景颜色
  // --vxe-ui-table-column-icon-color: var(--my-btn-disabled-bgc) !important; // 表格列排序图标颜色
  // --vxe-ui-table-column-icon-hover-color: var(--my-hover-color) !important; // 表格列排序图标hover颜色

  --vxe-ui-table-header-background-color: var(--my-btn-bgc); // 表格头背景
  --vxe-ui-table-row-striped-background-color: var(--my-table-light-color); // 表格行背景
  --vxe-ui-font-color: #ffffff; // 表格字体颜
  .vxe-toolbar-custom-target {
    background-color: var(--theme-color-primary) !important;
  }
  .row--hover {
    background: var(--my-btn-bgc) !important;
  }
  .vxe-cell .is--disabled .vxe-table-icon-checkbox-unchecked:before {
    background-color: var(--my-btn-disabled-bgc) !important; // 列表多选框禁用
  }
  .vxe-header--column .vxe-resizable.is--line:before {
    background-color: var(--my-select-bgc); // 表格列拖拽线
  }
  .vxe-footer--row {
    background-color: var(--my-btn-bgc);
  }
}

9.src/style/base.scss 基础样式

javascript 复制代码 
body,
button,
input,
select,
textarea {
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

body {
  font-size: 14px;
  line-height: 1.5;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
th,
td,
p,
blockquote,
pre,
form,
fieldset,
legend,
input,
button,
textarea,
article,
aside,
footer,
header,
hgroup,
nav,
section,
menu {
  margin: 0;
  padding: 0;
  // -webkit-text-size-adjust: 100%;
  // -moz-osx-font-smoothing: grayscale;
  // -webkit-font-smoothing: antialiased;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

em,
i {
  font-style: normal;
}

li {
  list-style: none;
}

img {
  border: none;
  user-select: none;
}

input,
img {
  vertical-align: middle;
}

a,
input,
textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  // -webkit-font-smoothing: antialiased;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none;
  margin: 0;
}

article,
aside,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

.card-body {
  flex: 1 0 0 !important;
}

.flex {
  flex: 1 0 0;
}

.search-area {
  .el-input {
    width: 180px;
  }
  .el-select {
    width: 180px;
  }
}

10.src/style/setting.scss通用类名

javascript 复制代码 
.scroll {
  overflow: hidden;
  overflow-y: auto !important;
}

.page-view {
  height: 100%;
  width: 100%;
  // overflow: hidden;
}

.wbg {
  background: var(--my-main-bgc, #fff);
}

.pall {
  padding: 16px 16px;
}

.pr {
  padding-right: 16px;
}

.pl {
  padding-left: 16px;
}

.pt {
  padding-top: 16px;
}

.pb {
  padding-bottom: 16px;
}

.mr {
  margin-right: 16px;
}

.ml {
  margin-left: 16px;
}

.mt {
  margin-top: 16px;
}

.mb {
  margin-bottom: 16px;
}

.m0 {
  margin: 0;
}

.ball {
  border: 1px solid #e9e9e9;
}

.bt {
  border-top: 1px solid #e9e9e9;
}

.bb {
  border-bottom: 1px solid #e9e9e9;
}

.bl {
  border-left: 1px solid #e9e9e9;

  &-green {
    // border-left: 4px solid @primary-color !important;
  }

  &-red {
    // border-left: 4px solid @error-color !important;
  }
}

.br {
  border-right: 1px solid #e9e9e9;
}

.radius {
  // border-radius: @border-radius-base;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.align-center {
  align-items: center !important;
}

.align-end {
  align-items: flex-end !important;
}

.align-top {
  align-items: flex-start !important;
}

.text-center {
  text-align: center;
}

.flex {
  flex: 1;
  position: relative;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-shrink {
  flex-shrink: 0;
}

.grid {
  display: grid;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// 标题 有标志
.basic-title {
  font-size: 16px;
  // font-weight: 500;
  color: var(--my-333-color);
  position: relative;
  padding-left: 16px;
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &::before {
    content: " ";
    display: block;
    width: 4px;
    height: 16px;
    background: var(--my-primary-checkout);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
  }
}

// 无标志
.basic-title-no-color {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  position: relative;
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
}

// 省略号
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.ellipsis-2 {
  display: -webkit-box; /* 老版本语法 */
  -webkit-box-orient: vertical; /* 排列方向 */
  -webkit-line-clamp: 2; /* 限制行数 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 省略符号 */
  word-break: break-all; /* 允许单词断行 */

  /* 新版语法（推荐） */
  display: -webkit-box;
  line-clamp: 2;
  box-orient: vertical;
}

// 自动换行
.word-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;

  .cell {
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

// 禁止换行
.nowrap {
  white-space: nowrap;
}

// 光标 手
.cursor {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.overflow {
  overflow: hidden;
}

.required {
  white-space: nowrap;
  // position: relative;

  &::before {
    content: "*";
    font-size: 14px;
    // color: red;
    // position: absolute;
    // top: 50%;
    // margin-top: -7px;
    // left: -12px;
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-family: SimSun, sans-serif;
    line-height: 1;
  }
}

// 空状态
.isEmpty {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

// table上的搜索条件
.search-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;

  &-title {
    height: 32px;
    white-space: nowrap;
    line-height: 32px;
    margin-right: 10px;
  }
}

// 没有padding的 弹窗、card
.no-padding {
  .ant-modal-body {
    padding: 0 !important;
  }
  .ant-card-body {
    padding: 0 !important;
  }
}

// 有标题 但是标题下边没有边框的card
.no-border-card {
  .ant-card-head {
    border: none;
    &-title {
      padding: 12px 0 !important;
      font-weight: 500;
      font-size: 15px;
    }
  }
  .ant-card-body {
    padding: 0 16px 12px !important;
  }

  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.09);
  // border-radius: @border-radius-base;
}

.no-content-tab {
  height: auto !important;
  .ant-tabs-content {
    height: 0px;
    display: none !important;
  }
}

.click-right-card {
  position: relative;
  .ant-card-head {
    position: absolute;
    left: 0;
    right: 0;
  }
  .ant-card-body {
    padding: 12px 16px !important;
  }
}

// 通用阴影
.shadow {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.09);
}

// 通用鼠标滑过阴影效果
.hover {
  &:hover {
    transition: 0.3s;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.09);
  }
}

// 编辑、删除按钮hover
.view-change-btn-class:hover {
  color: #168a84 !important;
}
.delete-btn-class {
  color: red;
  cursor: pointer;
}
.delete-btn-class:hover {
  opacity: 0.7 !important;
}

.btn-primary-hover:hover {
  background-color: #e8f3f3 !important;
}

.el-space {
  gap: 0 !important;

  .el-input {
    width: 180px;
  }

  .el-select {
    width: 180px;
  }

  &__item {
    margin-right: 16px;

    &:last-child {
      margin: 0 !important;
    }
  }
}

.jg-message-box {
  padding: 24px 32px !important;
  .el-message-box__header {
    padding-top: 8px !important;
    padding-left: 38px !important;
    color: #333;
    font-weight: 500;
  }
  .el-message-box__title {
    font-size: var(--el-font-size-medium);
  }
  .el-message-box__close {
    display: none;
  }
  .el-message-box__status {
    position: absolute;
    top: -36px;

    &.el-icon {
      font-size: 24px;
    }
  }
  .el-message-box__message {
    padding-left: 38px;
  }
  .el-message-box__btns {
    padding-top: 16px;
  }
}

.pl0 {
  padding-left: 0 !important;
}
.pr0 {
  padding-right: 0 !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pall0 {
  padding: 0 !important;
}

// 光标 手
.cursor_ {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: underline;
}
.green {
  color: var(--my-link-color3);
}
.bs {
  box-sizing: border-box;
}

@keyframes highlight-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

11.src/style/variable.scss通用变量

javascript 复制代码 
$primary-color: #007d7b; // 全局主色
$primary-color-10: #007d7b10; // 全局主色
$primary-color-20: #007d7b20; // 全局主色
$primary-color-50: #007d7b50; // 全局主色
$primary-color-80: #007d7b50; // 全局主色
$link-color: #007d7b; // 链接色
$success-color: rgba(139, 195, 74, 1); // 成功色
$bgc-blue: rgba(43, 128, 185, 1); //背景色-蓝色
$bgc-blue-5: rgba(43, 128, 185, 0.05); // 背景色-蓝色
$bgc-green: rgba(59, 181, 160, 1); // 背景色-绿色
$bgc-green-5: rgba(59, 181, 160, 0.05); // 背景色-绿色
$bgc-yellow-green: rgba(96, 200, 137, 1); // 背景色-草绿色
$bgc-yellow: rgba(241, 196, 14, 1); // 背景色-黄色
$bgc-yellow-5: rgba(241, 196, 14, 0.05); // 警告色
$bgc-yellow-green-5: rgba(96, 200, 137, 0.05); // 背景色-草绿色
$warning-color: #ffc107; // 警告色
$error-color: #ff5722; // 错误色
$font-size-base: 14px; // 主字号
$heading-color: rgba(0, 0, 0, 0.85); // 标题色
$text-color: rgba(0, 0, 0, 0.65); // 主文本色
$text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
$disabled-color: rgba(0, 0, 0, 0.25); // 失效色
$border-radius-base: 7px; // 组件/浮层圆角
$border-color-base: #d9d9d9; // 边框色
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

// 边距相关啊
$space-size: 16px;

12.src/style/yan-page.scss 页面样式

javascript 复制代码 
@use "./variable.scss" as *;
.container {
  flex: 1;
  background: var(--my-main-bgc, #fff);
  box-sizing: border-box;
  padding: $space-size;
  overflow: hidden;
  .title-box {
    height: 14px;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    user-select: none;
    margin-bottom: $space-size;
  }
  .action-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .el-form {
      flex-shrink: unset;
      .el-form-item {
        min-width: 200px;
        margin-right: 16px;
        margin-bottom: $space-size;
        .el-select {
          width: 100% !important;
        }
        &:last-child {
          // min-width: 132px;
          margin-right: 0;
        }
      }
    }
    .el-dropdown {
      flex-shrink: 0;
    }
    .button-group {
      flex-shrink: 0;
      margin-bottom: $space-size;
    }
  }
  .table-box {
    flex: 1;
    box-sizing: border-box;
    margin-bottom: $space-size;
    overflow: hidden;
  }
  .pagination-box {
    height: 32px;
  }
}
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解03KGG转MP3工具|非KGM文件|解密音频04扣子空间的使用教程与大模型技术思考05DeepSeek各版本说明与优缺点分析06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07基于单片机的智能环境监测系统08零代码入门 | Coze——让大模型接入自己的数据库09YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】10💁‍♀️Coze官方插件不够用？手把手教你自己造（白嫖）