@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/loading.css

@@ -0,0 +1,86 @@
+@charset "UTF-8";
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @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 - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */
+.zjhc-loading-parent--relative {
+  position: relative !important;
+}
+
+.zjhc-loading-parent--hidden {
+  overflow: hidden !important;
+}
+
+.zjhc-loading-mask {
+  position: absolute;
+  z-index: 2000;
+  background-color: var(--el-mask-color);
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity var(--el-transition-duration);
+}
+.zjhc-loading-mask.is-fullscreen {
+  position: fixed;
+}
+.zjhc-loading-mask.is-fullscreen .zjhc-loading-spinner {
+  margin-top: calc((0px - var(--el-loading-fullscreen-spinner-size)) / 2);
+}
+.zjhc-loading-mask.is-fullscreen .zjhc-loading-spinner .circular {
+  height: var(--el-loading-fullscreen-spinner-size);
+  width: var(--elloading-fullscreen-spinner-size);
+}
+
+.zjhc-loading-spinner {
+  top: 50%;
+  margin-top: calc((0px - var(--el-loading-spinner-size)) / 2);
+  width: 100%;
+  text-align: center;
+  position: absolute;
+}
+.zjhc-loading-spinner .circular {
+  display: inline;
+  height: var(--el-loading-fullscreen-spinner-size);
+  width: var(--el-loading-fullscreen-spinner-size);
+}
+.zjhc-loading-spinner .zjhc-loading-text {
+  color: var(--el-color-primary);
+  margin: 3px 0;
+  font-size: 14px;
+}
+.zjhc-loading-spinner i {
+  color: var(--el-color-primary);
+}
+
+.zjhc-loading-fade-enter-from,
+.zjhc-loading-fade-leave-to {
+  opacity: 0;
+}

package/theme-chalk/page.css

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @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 - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */
+.zjhc-page__container {
+  background-color: var(--zjhc-page-container-bg-color);
+}

package/theme-chalk/pub-class.css

@@ -0,0 +1,417 @@
+@charset "UTF-8";
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @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;
+}

package/theme-chalk/reset.css

@@ -0,0 +1,152 @@
+@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);
+}