@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/base-var.css

@@ -0,0 +1,1037 @@
+@charset "UTF-8";
+html:root {
+  color-scheme: light;
+  --zjhc-border-radius-base: 6px;
+  --zjhc-border-radius-small: 3px;
+  --zjhc-border-radius-middle: 8px;
+  --zjhc-light-backgound-color: #f7f8fb;
+  --el-primary-opactiy01: rgba(9, 65, 148, 0.1);
+  --el-primary-opactiy05: rgba(9, 65, 148, 0.5);
+  --el-primary-opactiy005: rgba(9, 65, 148, 0.05);
+  --el-primary-opactiy007: rgba(9, 65, 148, 0.07);
+  --el-selected-bg-color: #e7f2fc;
+  --el-table-check-bg: var(--el-selected-bg-color);
+  --el-color-white: #ffffff;
+  --el-color-black: #000000;
+  --el-color-primary-rgb: 9, 65, 148;
+  --el-color-success-rgb: 30, 188, 175;
+  --el-color-warning-rgb: 255, 194, 62;
+  --el-color-danger-rgb: 250, 94, 69;
+  --el-color-error-rgb: 250, 94, 69;
+  --el-color-info-rgb: 144, 147, 153;
+  --el-font-size-base: var(--font-size-s);
+  --el-font-size-large: var(--font-size-m);
+  --el-font-size-extra-large: var(--font-size-xxxl);
+  --el-font-size-medium: var(--font-size-l);
+  --el-font-size-small: var(--font-size-s);
+  --el-font-size-extra-small: var(--font-size-xs);
+  --el-font-size-title: var(--font-size-base);
+  --el-tag-height: var(--font-size-xxxl);
+  --el-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+    sans-serif;
+  --el-font-weight-primary: 500;
+  --el-font-line-height-primary: 24px;
+  --el-index-normal: 1;
+  --el-index-top: 1000;
+  --el-index-popper: 2000;
+  --el-border-radius-base: var(--zjhc-border-radius-small);
+  --el-border-radius-small: var(--zjhc-border-radius-small);
+  --el-border-radius-round: 20px;
+  --el-border-radius-circle: 100%;
+  --el-transition-duration: 0.3s;
+  --el-transition-duration-fast: 0.2s;
+  --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+  --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+  --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+  --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),
+    opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+  --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
+  --el-transition-border: border-color var(--el-transition-duration-fast)
+    var(--el-transition-function-ease-in-out-bezier);
+  --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast)
+    var(--el-transition-function-ease-in-out-bezier);
+  --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+  --el-color-primary: #094194;
+  --el-color-primary-secondary: #00b0f0;
+  --el-color-primary-light-3: #0064c1;
+  --el-color-primary-light-5: #809ec9;
+  --el-color-primary-light-7: #b7d8f5;
+  --el-color-primary-light-8: #cfe5f9;
+  --el-color-primary-light-9: #e5f2f9;
+  --el-color-primary-dark-2: #0c65b2;
+  --el-color-success: #1ebcaf;
+  --el-color-success-light-3: #12ada0;
+  --el-color-success-light-5: #8fded7;
+  --el-color-success-light-7: #bcebe7;
+  --el-color-success-light-8: #d2f2ef;
+  --el-color-success-light-9: #e9f8f7;
+  --el-color-success-dark-2: #18968c;
+  --el-color-warning: #ffc23e;
+  --el-color-warning-light-3: #f4b733;
+  --el-color-warning-light-5: #ffe19f;
+  --el-color-warning-light-7: #ffedc5;
+  --el-color-warning-light-8: #fff3d8;
+  --el-color-warning-light-9: #fff9ec;
+  --el-color-warning-dark-2: #cc9b32;
+  --el-color-danger: #fa5e45;
+  --el-color-danger-light-3: #ed523a;
+  --el-color-danger-light-5: #fdafa2;
+  --el-color-danger-light-7: #fecfc7;
+  --el-color-danger-light-8: #fedfda;
+  --el-color-danger-light-9: #ffefec;
+  --el-color-danger-dark-2: #c84b37;
+  --el-color-error: #fa5e45;
+  --el-color-error-light-3: #ed523a;
+  --el-color-error-light-5: #fdafa2;
+  --el-color-error-light-7: #fecfc7;
+  --el-color-error-light-8: #fedfda;
+  --el-color-error-light-9: #ffefec;
+  --el-color-error-dark-2: #c84b37;
+  --el-color-info: #999999;
+  --el-color-info-light-3: #b2b3b8;
+  --el-color-info-light-5: #c8c9cc;
+  --el-color-info-light-7: #dedfe0;
+  --el-color-info-light-8: #e9e9eb;
+  --el-color-info-light-9: #f4f4f5;
+  --el-color-info-dark-2: #73767a;
+  --el-bg-color: #ffffff;
+  --el-bg-color-page: #fafbfc;
+  --el-bg-color-overlay: #ffffff;
+  --el-text-color-primary: #333333;
+  --el-text-color-regular: #666666;
+  --el-text-color-secondary: #999999;
+  --el-text-color-placeholder: #a8abb2;
+  --el-text-color-disabled: #c0c4cc;
+  --el-border-color: #dcdfe6;
+  --el-border-color-light: #e4e7ed;
+  --el-border-color-lighter: #ebeef5;
+  --el-border-color-extra-light: #f2f6fc;
+  --el-border-color-dark: #d4d7de;
+  --el-border-color-darker: #cdd0d6;
+  --el-fill-color: #f0f2f5;
+  --el-fill-color-light: #f5f7fa;
+  --el-fill-color-lighter: #fafafa;
+  --el-fill-color-extra-light: #fafcff;
+  --el-fill-color-dark: #ebedf0;
+  --el-fill-color-darker: #e6e8eb;
+  --el-fill-color-blank: #ffffff;
+  --el-fill-color-base: #cce6f4;
+  --el-box-shadow: 10px 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-secondary);
+  --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);
+  --el-dialog-border-radius: var(--zjhc-border-radius-middle);
+  --el-dialog-header-divider-color: #eee;
+  --el-message-close-size: 22px;
+  --el-dialog-header-button-bg-color:#f5f5f5;
+  --el-dialog-header-button-bg-hover-color:#eeeeee;
+  --el-table-label-bg-color: #f1f2f7;
+  --el-table-value-bg-color: #f7f8fb;
+  --el-table-sub-label-bg-color: #fef9e5;
+  --el-table-sub-value-bg-color: #fefbef;
+  --el-table-selected-bg: var(--el-selected-bg-color);
+  --el-table-header-bg-color: #f1f2f7;
+  --el-form-required-bg-color: #fef7de;
+  --el-pagination-button-hover-color: #f1f2f7;
+  --el-select-font-size: var(--el-font-size-base);
+}
+
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @param $selector - 需要转换的选择器对象。
+ * @return 返回转换后的选择器字符串。
+ */
+/**
+ * 判断父级选择器是否包含'--'
+ * @param $selector - 需要检查的选择器，可以是列表或字符串。
+ * @returns 如果选择器包含修饰符，则返回 true；否则返回 false。
+ */
+/**
+ * 判断父级选择器是否包含'.is-'
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器。
+ * @return 返回一个布尔值，如果选择器包含状态前缀则为true，否则为false。
+ */
+/**
+ * 判断父级是否包含 ':' （用于判断伪类和伪元素）
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器，函数会将其转换为字符串形式。
+ * @return 返回一个布尔值，如果选择器包含伪类，则返回 true；否则返回 false。
+ */
+/*
+ * 判断父级选择器是否包含`--` `.is-` `:`这三种字符
+ * @param {String} $selector 选择器
+ * @return {String} 如果父级选择器包含以上三种字符中的任意一种，返回true；否则返回false
+*/
+/**
+ * 函数用于将给定列表中的项目连接成一个变量名。
+ * @param $list - 一个包含要连接的字符串的列表。
+ * @return $name - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */
+:root {
+  --zjhc-margin-space-xs: 4px;
+  --zjhc-margin-space-s: 8px;
+  --zjhc-margin-space-m: 12px;
+  --zjhc-margin-space-l: 16px;
+  --zjhc-margin-space-xl: 20px;
+  --zjhc-margin-space-xxl: 24px;
+  --zjhc-padding-space-xs: 5px;
+  --zjhc-padding-space-s: 10px;
+  --zjhc-padding-space-m: 15px;
+  --zjhc-padding-space-l: 20px;
+  --zjhc-padding-space-xl: 25px;
+  --zjhc-padding-space-xxl: 30px;
+}
+
+.zjhc-mb-xs {
+  margin-bottom: var(--zjhc-margin-space-xs);
+}
+
+.zjhc-ml-xs {
+  margin-left: var(--zjhc-margin-space-xs);
+}
+
+.zjhc-mr-xs {
+  margin-right: var(--zjhc-margin-space-xs);
+}
+
+.zjhc-mt-xs {
+  margin-top: var(--zjhc-margin-space-xs);
+}
+
+.zjhc-mv-xs {
+  margin-top: var(--zjhc-margin-space-xs);
+  margin-bottom: var(--zjhc-margin-space-xs);
+}
+
+.zjhc-mh-xs {
+  margin-left: var(--zjhc-margin-space-xs);
+  margin-bottom: var(--zjhc-margin-space-xs);
+}
+
+.zjhc-margin-xs {
+  margin: var(--zjhc-margin-space-xs);
+}
+
+.zjhc-mb-s {
+  margin-bottom: var(--zjhc-margin-space-s);
+}
+
+.zjhc-ml-s {
+  margin-left: var(--zjhc-margin-space-s);
+}
+
+.zjhc-mr-s {
+  margin-right: var(--zjhc-margin-space-s);
+}
+
+.zjhc-mt-s {
+  margin-top: var(--zjhc-margin-space-s);
+}
+
+.zjhc-mv-s {
+  margin-top: var(--zjhc-margin-space-s);
+  margin-bottom: var(--zjhc-margin-space-s);
+}
+
+.zjhc-mh-s {
+  margin-left: var(--zjhc-margin-space-s);
+  margin-bottom: var(--zjhc-margin-space-s);
+}
+
+.zjhc-margin-s {
+  margin: var(--zjhc-margin-space-s);
+}
+
+.zjhc-mb-m {
+  margin-bottom: var(--zjhc-margin-space-m);
+}
+
+.zjhc-ml-m {
+  margin-left: var(--zjhc-margin-space-m);
+}
+
+.zjhc-mr-m {
+  margin-right: var(--zjhc-margin-space-m);
+}
+
+.zjhc-mt-m {
+  margin-top: var(--zjhc-margin-space-m);
+}
+
+.zjhc-mv-m {
+  margin-top: var(--zjhc-margin-space-m);
+  margin-bottom: var(--zjhc-margin-space-m);
+}
+
+.zjhc-mh-m {
+  margin-left: var(--zjhc-margin-space-m);
+  margin-bottom: var(--zjhc-margin-space-m);
+}
+
+.zjhc-margin-m {
+  margin: var(--zjhc-margin-space-m);
+}
+
+.zjhc-mb-l {
+  margin-bottom: var(--zjhc-margin-space-l);
+}
+
+.zjhc-ml-l {
+  margin-left: var(--zjhc-margin-space-l);
+}
+
+.zjhc-mr-l {
+  margin-right: var(--zjhc-margin-space-l);
+}
+
+.zjhc-mt-l {
+  margin-top: var(--zjhc-margin-space-l);
+}
+
+.zjhc-mv-l {
+  margin-top: var(--zjhc-margin-space-l);
+  margin-bottom: var(--zjhc-margin-space-l);
+}
+
+.zjhc-mh-l {
+  margin-left: var(--zjhc-margin-space-l);
+  margin-bottom: var(--zjhc-margin-space-l);
+}
+
+.zjhc-margin-l {
+  margin: var(--zjhc-margin-space-l);
+}
+
+.zjhc-mb-xl {
+  margin-bottom: var(--zjhc-margin-space-xl);
+}
+
+.zjhc-ml-xl {
+  margin-left: var(--zjhc-margin-space-xl);
+}
+
+.zjhc-mr-xl {
+  margin-right: var(--zjhc-margin-space-xl);
+}
+
+.zjhc-mt-xl {
+  margin-top: var(--zjhc-margin-space-xl);
+}
+
+.zjhc-mv-xl {
+  margin-top: var(--zjhc-margin-space-xl);
+  margin-bottom: var(--zjhc-margin-space-xl);
+}
+
+.zjhc-mh-xl {
+  margin-left: var(--zjhc-margin-space-xl);
+  margin-bottom: var(--zjhc-margin-space-xl);
+}
+
+.zjhc-margin-xl {
+  margin: var(--zjhc-margin-space-xl);
+}
+
+.zjhc-mb-xxl {
+  margin-bottom: var(--zjhc-margin-space-xxl);
+}
+
+.zjhc-ml-xxl {
+  margin-left: var(--zjhc-margin-space-xxl);
+}
+
+.zjhc-mr-xxl {
+  margin-right: var(--zjhc-margin-space-xxl);
+}
+
+.zjhc-mt-xxl {
+  margin-top: var(--zjhc-margin-space-xxl);
+}
+
+.zjhc-mv-xxl {
+  margin-top: var(--zjhc-margin-space-xxl);
+  margin-bottom: var(--zjhc-margin-space-xxl);
+}
+
+.zjhc-mh-xxl {
+  margin-left: var(--zjhc-margin-space-xxl);
+  margin-bottom: var(--zjhc-margin-space-xxl);
+}
+
+.zjhc-margin-xxl {
+  margin: var(--zjhc-margin-space-xxl);
+}
+
+.zjhc-pb-xs {
+  padding-bottom: var(--zjhc-padding-space-xs);
+}
+
+.zjhc-pl-xs {
+  padding-left: var(--zjhc-padding-space-xs);
+}
+
+.zjhc-pr-xs {
+  padding-right: var(--zjhc-padding-space-xs);
+}
+
+.zjhc-pt-xs {
+  padding-top: var(--zjhc-padding-space-xs);
+}
+
+.zjhc-pv-xs {
+  padding-top: var(--zjhc-padding-space-xs);
+  padding-bottom: var(--zjhc-padding-space-xs);
+}
+
+.zjhc-ph-xs {
+  padding-left: var(--zjhc-padding-space-xs);
+  padding-right: var(--zjhc-padding-space-xs);
+}
+
+.zjhc-pd-xs {
+  padding: var(--zjhc-padding-space-xs);
+}
+
+.zjhc-pb-s {
+  padding-bottom: var(--zjhc-padding-space-s);
+}
+
+.zjhc-pl-s {
+  padding-left: var(--zjhc-padding-space-s);
+}
+
+.zjhc-pr-s {
+  padding-right: var(--zjhc-padding-space-s);
+}
+
+.zjhc-pt-s {
+  padding-top: var(--zjhc-padding-space-s);
+}
+
+.zjhc-pv-s {
+  padding-top: var(--zjhc-padding-space-s);
+  padding-bottom: var(--zjhc-padding-space-s);
+}
+
+.zjhc-ph-s {
+  padding-left: var(--zjhc-padding-space-s);
+  padding-right: var(--zjhc-padding-space-s);
+}
+
+.zjhc-pd-s {
+  padding: var(--zjhc-padding-space-s);
+}
+
+.zjhc-pb-m {
+  padding-bottom: var(--zjhc-padding-space-m);
+}
+
+.zjhc-pl-m {
+  padding-left: var(--zjhc-padding-space-m);
+}
+
+.zjhc-pr-m {
+  padding-right: var(--zjhc-padding-space-m);
+}
+
+.zjhc-pt-m {
+  padding-top: var(--zjhc-padding-space-m);
+}
+
+.zjhc-pv-m {
+  padding-top: var(--zjhc-padding-space-m);
+  padding-bottom: var(--zjhc-padding-space-m);
+}
+
+.zjhc-ph-m {
+  padding-left: var(--zjhc-padding-space-m);
+  padding-right: var(--zjhc-padding-space-m);
+}
+
+.zjhc-pd-m {
+  padding: var(--zjhc-padding-space-m);
+}
+
+.zjhc-pb-l {
+  padding-bottom: var(--zjhc-padding-space-l);
+}
+
+.zjhc-pl-l {
+  padding-left: var(--zjhc-padding-space-l);
+}
+
+.zjhc-pr-l {
+  padding-right: var(--zjhc-padding-space-l);
+}
+
+.zjhc-pt-l {
+  padding-top: var(--zjhc-padding-space-l);
+}
+
+.zjhc-pv-l {
+  padding-top: var(--zjhc-padding-space-l);
+  padding-bottom: var(--zjhc-padding-space-l);
+}
+
+.zjhc-ph-l {
+  padding-left: var(--zjhc-padding-space-l);
+  padding-right: var(--zjhc-padding-space-l);
+}
+
+.zjhc-pd-l {
+  padding: var(--zjhc-padding-space-l);
+}
+
+.zjhc-pb-xl {
+  padding-bottom: var(--zjhc-padding-space-xl);
+}
+
+.zjhc-pl-xl {
+  padding-left: var(--zjhc-padding-space-xl);
+}
+
+.zjhc-pr-xl {
+  padding-right: var(--zjhc-padding-space-xl);
+}
+
+.zjhc-pt-xl {
+  padding-top: var(--zjhc-padding-space-xl);
+}
+
+.zjhc-pv-xl {
+  padding-top: var(--zjhc-padding-space-xl);
+  padding-bottom: var(--zjhc-padding-space-xl);
+}
+
+.zjhc-ph-xl {
+  padding-left: var(--zjhc-padding-space-xl);
+  padding-right: var(--zjhc-padding-space-xl);
+}
+
+.zjhc-pd-xl {
+  padding: var(--zjhc-padding-space-xl);
+}
+
+.zjhc-pb-xxl {
+  padding-bottom: var(--zjhc-padding-space-xxl);
+}
+
+.zjhc-pl-xxl {
+  padding-left: var(--zjhc-padding-space-xxl);
+}
+
+.zjhc-pr-xxl {
+  padding-right: var(--zjhc-padding-space-xxl);
+}
+
+.zjhc-pt-xxl {
+  padding-top: var(--zjhc-padding-space-xxl);
+}
+
+.zjhc-pv-xxl {
+  padding-top: var(--zjhc-padding-space-xxl);
+  padding-bottom: var(--zjhc-padding-space-xxl);
+}
+
+.zjhc-ph-xxl {
+  padding-left: var(--zjhc-padding-space-xxl);
+  padding-right: var(--zjhc-padding-space-xxl);
+}
+
+.zjhc-pd-xxl {
+  padding: var(--zjhc-padding-space-xxl);
+}
+
+.zjhc-al {
+  text-align: left;
+}
+
+.zjhc-ac {
+  text-align: center;
+}
+
+.zjhc-ar {
+  text-align: right;
+}
+
+html {
+  --font-size-xs: 12px;
+  --font-size-s: 13px;
+  --font-size-base: 14px;
+  --font-size-m: 15px;
+  --font-size-l: 16px;
+  --font-size-xl: 17px;
+  --font-size-xxl: 18px;
+  --font-size-xxxl: 20px;
+}
+
+html:root {
+  --font-size-extra-large: var(--font-size-xxxl);
+  --font-size-large: var(--font-size-xxl);
+  --font-size-medium: var(--font-size-l);
+  --font-size-small: var(--font-size-s);
+  --font-size-extra-small: var(--font-size-xs);
+  --el-height-size-base: 28px;
+  --el-input-height: var(--el-height-size-base);
+  --el-component-size: var(--el-input-height);
+  --el-button--height: var(--el-height-size-base);
+  --el-checkbox-height: var(--el-height-size-base);
+  --el-component-size-small: var(--el-height-size-base);
+  --el-input-clear-icon: var(--font-size-l);
+  --el-button-height-large: 32px;
+  --el-component-size-large: 32px;
+  --el-table-height: var(--font-size-xxl);
+}
+
+html.zjhc-caremode {
+  --font-size-xs: 14px;
+  --font-size-s: 15px;
+  --font-size-base: 16px;
+  --font-size-m: 17px;
+  --font-size-l: 18px;
+  --font-size-xl: 19px;
+  --font-size-xxl: 20px;
+  --font-size-xxxl: 22px;
+  --el-height-size-base: 32px;
+  --el-button-height-large: 34px;
+  --el-component-size-large: 34px;
+}
+
+html:root {
+  --el-alert-bg-color: var(--el-color-error-light-9);
+  --el-alert-border-radius-base: var(--el-border-radius-base);
+  --el-alert-close-customed-font-size: var(--font-size-base);
+  --el-alert-close-font-size: var(--font-size-xxl);
+  --el-alert-description-font-size: var(--font-size-base);
+  --el-alert-icon-large-size: 28px;
+  --el-alert-icon-size: var(--font-size-xxl);
+  --el-alert-padding: 8px 20px;
+  --el-alert-title-font-size: var(--font-size-base);
+  --el-alert-title-with-description-font-size: var(--font-size-l);
+  --el-anchor-active-color: var(--el-color-primary);
+  --el-anchor-bg-color: var(--el-bg-color);
+  --el-anchor-color: var(--el-text-color-secondary);
+  --el-anchor-font-size: var(--el-font-size-base);
+  --el-anchor-line-height: 20px;
+  --el-anchor-marker-bg-color: var(--el-color-primary);
+  --el-anchor-padding-indent: 14px;
+  --el-avatar-bg-color: var(--el-text-color-disabled);
+  --el-avatar-border-radius: var(--el-border-radius-base);
+  --el-avatar-icon-size: 18px;
+  --el-avatar-size: 56px;
+  --el-avatar-size-large: 56px;
+  --el-avatar-size-small: 24px;
+  --el-avatar-text-color: var(--el-color-white);
+  --el-avatar-text-size: 14px;
+  --el-backtop-bg-color: var(--el-bg-color-overlay);
+  --el-backtop-hover-bg-color: var(--el-color-primary);
+  --el-backtop-text-color: var(--el-color-primary);
+  --el-badge-bg-color: var(--el-color-danger);
+  --el-badge-font-size: 12px;
+  --el-badge-padding: 6px;
+  --el-badge-radius: 10px;
+  --el-badge-size: 18px;
+  --el-button-font-weight: var(--el-font-weight-primary);
+  --el-button-border-color: var(--el-border-color);
+  --el-button-bg-color: var(--el-fill-color-blank);
+  --el-button-text-color: var(--el-text-color-regular);
+  --el-button-disabled-text-color: var(--el-disabled-text-color);
+  --el-button-disabled-bg-color: var(--el-fill-color-blank);
+  --el-button-disabled-border-color: var(--el-border-color-light);
+  --el-button-divide-border-color: rgba(255, 255, 255, 0.5);
+  --el-button-hover-text-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-light-9);
+  --el-button-hover-border-color: var(--el-color-primary-light-7);
+  --el-button-active-text-color: var(--el-button-hover-text-color);
+  --el-button-active-border-color: var(--el-color-primary);
+  --el-button-active-bg-color: var(--el-button-hover-bg-color);
+  --el-button-outline-color: var(--el-color-primary-light-5);
+  --el-button-hover-link-text-color: var(--el-color-info);
+  --el-button-active-color: var(--el-text-color-primary);
+  --el-calendar-border: var(
+    --el-table-border,
+    1px solid var(--el-border-color-lighter)
+  );
+  --el-calendar-cell-width: 85px;
+  --el-calendar-header-border-bottom: var(--el-calendar-border);
+  --el-calendar-selected-bg-color: var(--el-selected-bg-color);
+  --el-card-bg-color: var(--el-fill-color-blank);
+  --el-card-border-color: var(--el-border-color-light);
+  --el-card-border-radius: 4px;
+  --el-card-padding: var(--zjhc-padding-space-m);
+  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
+  --el-carousel-arrow-font-size: 12px;
+  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
+  --el-carousel-arrow-size: 36px;
+  --el-carousel-indicator-height: 2px;
+  --el-carousel-indicator-out-color: var(--el-border-color-hover);
+  --el-carousel-indicator-padding-horizontal: 4px;
+  --el-carousel-indicator-padding-vertical: 12px;
+  --el-carousel-indicator-width: 30px;
+  --el-cascader-color-empty: var(--el-text-color-placeholder);
+  --el-cascader-menu-border: solid 1px var(--el-border-color-light);
+  --el-cascader-menu-fill: var(--el-bg-color-overlay);
+  --el-cascader-menu-font-size: var(--el-font-size-base);
+  --el-cascader-menu-radius: var(--el-border-radius-base);
+  --el-cascader-menu-selected-text-color: var(--el-color-primary);
+  --el-cascader-menu-shadow: var(--el-box-shadow-light);
+  --el-cascader-menu-text-color: var(--el-text-color-regular);
+  --el-cascader-node-background-hover: var(--el-fill-color-light);
+  --el-cascader-node-color-disabled: var(--el-text-color-placeholder);
+  --el-cascader-tag-background: var(--el-fill-color);
+  --el-checkbox-bg-color: var(--el-fill-color-blank);
+  --el-checkbox-border-radius: var(--el-border-radius-small);
+  --el-checkbox-button-checked-bg-color: var(--el-color-primary);
+  --el-checkbox-button-checked-border-color: var(--el-color-primary);
+  --el-checkbox-button-checked-text-color: var(--el-color-white);
+  --el-checkbox-checked-bg-color: var(--el-color-primary);
+  --el-checkbox-checked-icon-color: var(--el-color-white);
+  --el-checkbox-checked-input-border-color: var(--el-color-primary);
+  --el-checkbox-checked-text-color: var(--el-color-primary);
+  --el-checkbox-disabled-border-color: var(--el-border-color);
+  --el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
+  --el-checkbox-disabled-checked-input-border-color: var(--el-border-color);
+  --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
+  --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
+  --el-checkbox-disabled-input-fill: var(--el-fill-color-light);
+  --el-checkbox-font-size: var(--el-font-size-base);
+  --el-checkbox-font-weight: var(--el-font-weight-primary);
+  --el-checkbox-height: var(--el-tree-node-content-height);
+  --el-checkbox-input-border: var(--el-border);
+  --el-checkbox-input-border-color-hover: var(--el-color-primary);
+  --el-checkbox-input-height: 14px;
+  --el-checkbox-input-width: 14px;
+  --el-checkbox-text-color: var(--el-text-color-regular);
+  --el-collapse-border-color: var(--el-border-color-lighter);
+  --el-collapse-content-bg-color: var(--el-fill-color-blank);
+  --el-collapse-content-font-size: var(--font-size-s);
+  --el-collapse-content-text-color: var(--el-text-color-primary);
+  --el-collapse-header-bg-color: var(--el-fill-color-blank);
+  --el-collapse-header-font-size: var(--font-size-s);
+  --el-collapse-header-height: 36px;
+  --el-collapse-header-text-color: var(--el-text-color-primary);
+  --el-color-picker-alpha-bg-a: #333333;
+  --el-color-picker-alpha-bg-b: transparent;
+  --el-date-editor-daterange-width: 350px;
+  --el-date-editor-datetimerange-width: 400px;
+  --el-date-editor-monthrange-width: 300px;
+  --el-date-editor-width: var(--el-date-editor-datetimerange-width);
+  --el-datepicker-active-color: var(--el-color-primary);
+  --el-datepicker-border-color: var(--el-disabled-border-color);
+  --el-datepicker-header-text-color: var(--el-text-color-regular);
+  --el-datepicker-hover-text-color: var(--el-color-primary);
+  --el-datepicker-icon-color: var(--el-text-color-primary);
+  --el-datepicker-inner-border-color: var(--el-border-color);
+  --el-datepicker-inrange-bg-color: var(--el-border-color-extra-light);
+  --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light);
+  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-text-color: var(--el-text-color-regular);
+  --el-descriptions-item-bordered-label-background: #f1f2f7;
+  --el-descriptions-table-border: 1px solid var(--el-border-color-lighter);
+  --el-dialog-bg-color: var(--el-bg-color);
+  --el-dialog-border-radius: var(--zjhc-border-radius-middle);
+  --el-dialog-box-shadow: var(--el-box-shadow);
+  --el-dialog-content-font-size: var(--font-size-base);
+  --el-dialog-font-line-height: var(--el-font-line-height-primary);
+  --el-dialog-margin-top: 15vh;
+  --el-dialog-padding-primary: 28px;
+  --el-dialog-header-bottom: 15px;
+  --el-dialog-header-top: 20px;
+  --el-dialog-title-font-size: var(--el-font-size-large);
+  --el-dialog-width: 50%;
+  --el-drawer-bg-color: var(--el-dialog-bg-color, var(--el-bg-color));
+  --el-drawer-padding-primary: var(--el-dialog-padding-primary, 20px);
+  --el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
+  --el-dropdown-menu-index: 10;
+  --el-dropdown-menuItem-hover-color: var(--el-color-primary);
+  --el-dropdown-menuItem-hover-fill: var(--el-color-primary-light-9);
+  --el-empty-bottom-margin-top: 20px;
+  --el-empty-description-margin-top: 20px;
+  --el-empty-fill-color-0: var(--el-color-white);
+  --el-empty-fill-color-1: #fcfcfd;
+  --el-empty-fill-color-2: #f8f9fb;
+  --el-empty-fill-color-3: #f7f8fc;
+  --el-empty-fill-color-4: #eeeff3;
+  --el-empty-fill-color-5: #edeef2;
+  --el-empty-fill-color-6: #e9ebef;
+  --el-empty-fill-color-7: #e5e7e9;
+  --el-empty-fill-color-8: #e0e3e9;
+  --el-empty-fill-color-9: #d5d7de;
+  --el-empty-image-width: 160px;
+  --el-empty-padding: 40px 0;
+  --el-footer-padding: 0 20px;
+  --el-header-height: 60px;
+  --el-header-padding: 0 20px;
+  --el-form-inline-content-width: 220px;
+  --el-form-label-font-size: var(--el-font-size-base);
+  --el-icon-size: 12px;
+  --el-index-normal: 1;
+  --el-index-popper: 2000;
+  --el-index-top: 1000;
+  --el-input-bg-color: var(--el-fill-color-blank);
+  --el-input-border: var(--el-border);
+  --el-input-border-color: var(--el-border-color);
+  --el-input-border-radius: var(--el-border-radius-base);
+  --el-input-clear-hover-color: var(--el-text-color-secondary);
+  --el-input-focus-border: var(--el-color-primary);
+  --el-input-focus-border-color: var(--el-color-primary);
+  --el-input-hover-border: var(--el-border-color-hover);
+  --el-input-hover-border-color: var(--el-border-color-hover);
+  --el-input-icon-color: var(--el-text-color-placeholder);
+  --el-input-inner-height: calc(var(--el-input-height, 24px) - 2px);
+  --el-input-number-controls-height: 11px;
+  --el-input-placeholder-color: var(--el-text-color-placeholder);
+  --el-input-text-color: var(--el-text-color-regular);
+  --el-input-transparent-border: 0 0 0 1px transparent inset;
+  --el-input-width: 100%;
+  --el-link-disabled-text-color: var(--el-color-info-light-5);
+  --el-link-font-size: var(--el-font-size-base);
+  --el-link-font-weight: var(--el-font-weight-primary);
+  --el-link-hover-text-color: var(--el-color-info-light-3);
+  --el-link-text-color: var(--el-color-info);
+  --el-loading-fullscreen-spinner-size: 50px;
+  --el-loading-spinner-size: 42px;
+  --el-main-padding: 0;
+  --el-mention-bg-color: var(--el-bg-color-overlay);
+  --el-mention-border: 1px solid var(--el-border-color-light);
+  --el-mention-font-size: var(--el-font-size-base);
+  --el-mention-footer-padding: 10px;
+  --el-mention-header-padding: 10px;
+  --el-mention-max-height: 174px;
+  --el-mention-option-color: var(--el-text-color-regular);
+  --el-mention-option-disabled-color: var(--el-text-color-placeholder);
+  --el-mention-option-height: var(--el-input-height);
+  --el-mention-option-hover-background: var(--el-fill-color-light);
+  --el-mention-option-loading-color: var(--el-text-color-secondary);
+  --el-mention-option-loading-padding: 10px 0;
+  --el-mention-option-min-width: 100px;
+  --el-mention-option-selected-color: var(--el-color-primary);
+  --el-mention-padding: 6px 0;
+  --el-mention-shadow: var(--el-box-shadow-light);
+  --el-menu-active-color: var(--el-color-primary);
+  --el-menu-base-level-padding: 20px;
+  --el-menu-bg-color: var(--el-fill-color-blank);
+  --el-menu-border-color: var(--el-border-color);
+  --el-menu-horizontal-height: 60px;
+  --el-menu-horizontal-sub-item-height: 36px;
+  --el-menu-hover-bg-color: var(--el-color-primary-light-9);
+  --el-menu-hover-text-color: var(--el-color-primary);
+  --el-menu-icon-width: 24px;
+  --el-menu-item-font-size: var(--el-font-size-base);
+  --el-menu-item-height: 56px;
+  --el-menu-item-hover-fill: var(--el-color-primary-light-9);
+  --el-menu-level-padding: 20px;
+  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
+  --el-menu-text-color: var(--el-text-color-primary);
+  --el-message-bg-color: var(--el-color-primary-light-9);
+  --el-message-border-color: var(--el-color-primary-light-8);
+  --el-message-close-hover-color: var(--el-text-color-secondary);
+  --el-message-close-icon-color: var(--el-text-color-placeholder);
+  --el-message-padding: 8px 15px;
+  --el-message-text-color: var(--el-color-primary);
+  --el-messagebox-border-radius: var(--zjhc-border-radius-middle);
+  --el-messagebox-box-shadow: var(--el-box-shadow);
+  --el-messagebox-color: var(--el-color-error);
+  --el-messagebox-content-color: var(--el-text-color-regular);
+  --el-messagebox-content-font-size: var(--el-font-size-base);
+  --el-messagebox-error-font-size: var(--el-font-size-base);
+  --el-messagebox-font-line-height: var(--el-font-line-height-primary);
+  --el-messagebox-font-size: var(--el-font-size-large);
+  --el-messagebox-padding-primary: 28px;
+  --el-messagebox-header-top: var(--zjhc-padding-space-l);
+  --el-messagebox-header-bottom: var(--zjhc-padding-space-m);
+  --el-messagebox-title-color: var(--el-text-color-primary);
+  --el-messagebox-width: 420px;
+  --el-notification-border-color: var(--el-border-color-lighter);
+  --el-notification-close-color: var(--el-text-color-secondary);
+  --el-notification-close-font-size: var(--el-message-close-size, 16px);
+  --el-notification-close-hover-color: var(--el-text-color-regular);
+  --el-notification-content-color: var(--el-text-color-regular);
+  --el-notification-content-font-size: var(--el-font-size-base);
+  --el-notification-group-margin-left: 8px;
+  --el-notification-group-margin-right: 8px;
+  --el-notification-icon-color: var(--el-color-info);
+  --el-notification-icon-size: 24px;
+  --el-notification-padding: 14px 26px 14px 13px;
+  --el-notification-radius: 8px;
+  --el-notification-shadow: var(--el-box-shadow-light);
+  --el-notification-title-color: var(--el-text-color-primary);
+  --el-notification-title-font-size: var(--font-size-l);
+  --el-notification-width: 330px;
+  --el-pagination-font-size: var(--font-size-s);
+  --el-pagination-bg-color: var(--el-fill-color-blank);
+  --el-pagination-text-color: var(--el-text-color-primary);
+  --el-pagination-border-radius: 3px;
+  --el-pagination-button-color: var(--el-text-color-primary);
+  --el-pagination-button-width: 28px;
+  --el-pagination-button-height: 28px;
+  --el-pagination-button-disabled-color: rgba(102, 102, 102, 0.5);
+  --el-pagination-button-disabled-bg-color: rgba(247, 248, 251, 0.5);
+  --el-pagination-button-bg-color: var(--zjhc-light-backgound-color);
+  --el-pagination-button-hover-color: #f1f2f7;
+  --el-pagination-hover-color: var(--el-color-primary);
+  --el-pagination-font-size-small: 12px;
+  --el-pagination-button-width-small: 24px;
+  --el-pagination-button-height-small: 24px;
+  --el-pagination-button-width-large: 32px;
+  --el-pagination-button-height-large: 32px;
+  --el-pagination-item-gap: 10px;
+  --el-popover-bg-color: var(--el-text-color-primary);
+  --el-popover-border-color: var(--el-text-color-primary);
+  --el-popover-border-radius: 4px;
+  --el-popover-font-size: var(--el-font-size-base);
+  --el-popover-padding: 15px;
+  --el-popover-padding-large: 18px 20px;
+  --el-popover-title-font-size: var(--font-size-l);
+  --el-popover-title-text-color: var(--el-bg-color);
+  --el-popper-border-radius: var(--el-border-radius-base);
+  --el-popup-modal-bg-color: var(--el-color-black);
+  --el-popup-modal-opacity: 0.5;
+  --el-radio-button-checked-bg-color: var(--el-color-primary);
+  --el-radio-button-checked-border-color: var(--el-color-primary);
+  --el-radio-button-checked-text-color: var(--el-color-white);
+  --el-radio-button-disabled-checked-fill: var(--el-border-color-extra-light);
+  --el-radio-font-size: var(--el-font-size-base);
+  --el-radio-font-weight: var(--el-font-weight-primary);
+  --el-radio-input-bg-color: var(--el-fill-color-blank);
+  --el-radio-input-border: var(--el-border);
+  --el-radio-input-border-color: var(--el-border-color);
+  --el-radio-input-border-color-hover: var(--el-color-primary);
+  --el-radio-input-border-radius: var(--el-border-radius-circle);
+  --el-radio-input-height: 14px;
+  --el-radio-input-width: 14px;
+  --el-radio-text-color: var(--el-text-color-regular);
+  --el-rate-disabled-void-color: var(--el-fill-color);
+  --el-rate-fill-color: var(--el-color-warning);
+  --el-rate-font-size: var(--el-font-size-base);
+  --el-rate-height: 20px;
+  --el-rate-icon-margin: 6px;
+  --el-rate-icon-size: 18px;
+  --el-rate-text-color: var(--el-text-color-primary);
+  --el-rate-void-color: var(--el-border-color-darker);
+  --el-result-color: var(--el-color-info);
+  --el-result-extra-margin-top: 30px;
+  --el-result-icon-font-size: 64px;
+  --el-result-padding: 40px 30px;
+  --el-result-subtitle-margin-top: 10px;
+  --el-result-title-font-size: 20px;
+  --el-result-title-margin-top: 20px;
+  --el-scrollbar-bg-color: var(--el-text-color-secondary);
+  --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
+  --el-scrollbar-hover-opacity: 0.5;
+  --el-scrollbar-opacity: 0.3;
+  --el-segmented-bg-color: var(--el-fill-color-light);
+  --el-segmented-color: var(--el-text-color-regular);
+  --el-segmented-item-active-bg-color: var(--el-fill-color-darker);
+  --el-segmented-item-disabled-color: var(--el-text-color-placeholder);
+  --el-segmented-item-hover-bg-color: var(--el-fill-color-dark);
+  --el-segmented-item-hover-color: var(--el-text-color-primary);
+  --el-segmented-item-selected-bg-color: var(--el-color-primary);
+  --el-segmented-item-selected-color: var(--el-color-white);
+  --el-segmented-item-selected-disabled-bg-color: var(
+    --el-color-primary-light-5
+  );
+  --el-segmented-padding: 2px;
+  --el-select-border-color-hover: var(--el-border-color-hover);
+  --el-select-close-hover-color: var(--el-text-color-secondary);
+  --el-select-disabled-border: var(--el-disabled-border-color);
+  --el-select-disabled-color: var(--el-disabled-text-color);
+  --el-select-font-size: var(--el-font-size-base);
+  --el-select-input-color: var(--el-text-color-placeholder);
+  --el-select-input-focus-border-color: var(--el-color-primary);
+  --el-select-input-font-size: var(--font-size-base);
+  --el-select-multiple-input-color: var(--el-text-color-regular);
+  --el-select-width: 100%;
+  --el-skeleton-circle-size: var(--el-avatar-size);
+  --el-skeleton-color: var(--el-fill-color);
+  --el-skeleton-to-color: var(--el-fill-color-darker);
+  --el-slider-main-bg-color: var(--el-color-primary);
+  --el-slider-runway-bg-color: var(--el-border-color-light);
+  --el-slider-stop-bg-color: var(--el-color-white);
+  --el-slider-disabled-color: var(--el-text-color-placeholder);
+  --el-slider-border-radius: 3px;
+  --el-slider-height: 6px;
+  --el-slider-button-size: 20px;
+  --el-slider-button-wrapper-size: 36px;
+  --el-slider-button-wrapper-offset: -15px;
+  --el-statistic-content-color: var(--el-text-color-primary);
+  --el-statistic-content-font-size: var(--el-font-size-extra-large);
+  --el-statistic-content-font-weight: 400;
+  --el-statistic-title-color: var(--el-text-color-regular);
+  --el-statistic-title-font-size: var(--el-font-size-extra-small);
+  --el-statistic-title-font-weight: 400;
+  --el-switch-off-color: var(--el-border-color);
+  --el-switch-on-color: var(--el-color-primary);
+  --el-table-bg-color: var(--el-fill-color-blank);
+  --el-table-border: 1px solid var(--el-table-border-color);
+  --el-table-border-color: var(--el-border-color-lighter);
+  --el-table-current-row-bg-color: var(--el-color-primary-light-9);
+  --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
+  --el-table-fixed-box-shadow: var(--el-box-shadow-light);
+  --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+  --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+  --el-table-header-text-color: var(--el-text-color-regular);
+  --el-table-index: var(--el-index-normal);
+  --el-table-row-hover-bg-color: var(--el-fill-color-light);
+  --el-table-text-color: var(--el-text-color-regular);
+  --el-table-tr-bg-color: var(--el-bg-color);
+  --el-tabs-header-height: 40px;
+  --el-tag-height: var(--font-size-xxxl);
+  --el-tag-bg-color: var(--el-fill-color-blank);
+  --el-tag-border-color: var(--el-color-info-light-5);
+  --el-tag-border-radius: var(--el-border-radius-base);
+  --el-tag-border-radius-rounded: 9999px;
+  --el-tag-font-size: var(--el-font-size-base);
+  --el-tag-hover-color: var(--el-color-info);
+  --el-tag-text-color: var(--el-color-info);
+  --el-text-font-size: var(--el-font-size-extra-small);
+  --el-timeline-node-color: var(--el-border-color-light);
+  --el-timeline-node-size-large: 14px;
+  --el-timeline-node-size-normal: 12px;
+  --el-tooltip-v2-border-color: transparent;
+  --el-tooltip-v2-border-radius: 4px;
+  --el-tooltip-v2-padding: 5px 10px;
+  --el-tour-bg-color: var(--el-color-primary);
+  --el-tour-border-radius: 4px;
+  --el-tour-close-color: #fff;
+  --el-tour-color: var(--el-text-color-primary);
+  --el-tour-font-line-height: var(--el-font-line-height-primary);
+  --el-tour-font-size: var(--font-size-base);
+  --el-tour-padding-primary: 20px;
+  --el-tour-text-color: #fff;
+  --el-tour-title-font-size: var(--font-size-l);
+  --el-tour-title-font-weight: 400;
+  --el-tour-title-text-color: #fff;
+  --el-tour-width: 520px;
+  --el-transfer-border-color: var(--el-border-color-lighter);
+  --el-transfer-border-radius: var(--el-border-radius-base);
+  --el-transfer-filter-height: 32px;
+  --el-transfer-item-height: 30px;
+  --el-transfer-panel-body-height: 278px;
+  --el-transfer-panel-footer-height: 40px;
+  --el-transfer-panel-header-bg-color: var(--el-fill-color-light);
+  --el-transfer-panel-header-height: 40px;
+  --el-transfer-panel-width: 200px;
+  --el-tree-expand-icon-color: var(--el-text-color-placeholder);
+  --el-tree-node-content-height: var(--el-height-size-base);
+  --el-tree-node-hover-bg-color: var(--el-fill-color-light);
+  --el-tree-text-color: var(--el-text-color-regular);
+  --el-upload-dragger-padding-horizontal: 40px;
+  --el-upload-dragger-padding-vertical: 10px;
+  --el-upload-list-picture-card-size: 148px;
+  --el-upload-picture-card-size: 148px;
+}