提示：本文僅是記錄我修改element-plus等組件庫的css變量，

具體【實現主題色切換看這篇】即可

---

1.文件劃分

main.js引入

import "@/style/index.scss"

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

@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主題色切換維護

/** 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變量

@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主題色

// 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最好別打開，可能這一個變量影響多個組件樣式

/** 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的主題色

// 修改樣式變量
$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主題色

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 基礎樣式

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通用類名

.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通用變量

$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 頁面樣式

@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;}
}