diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue index b2925715c..286c2e259 100644 --- a/packages/settings/styles/src/components/inputs/ModalMask.vue +++ b/packages/settings/styles/src/components/inputs/ModalMask.vue @@ -107,11 +107,14 @@ export default { box-sizing: border-box; } .modal-padding { - padding: 14px 20px; + padding: var(--te-styles-modal-mask-padding-y) var(--te-styles-modal-mask-padding-x); } .align-body { - right: 280px; - left: calc(100% - 287px - 280px - 16px); + right: var(--te-styles-modal-mask-right-offset-1); + left: calc( + 100% - var(--te-styles-modal-mask-right-offset-1) - var(--te-styles-modal-mask-right-offset-2) - + var(--te-styles-modal-mask-spacing) + ); } } diff --git a/packages/settings/styles/src/styles/vars.less b/packages/settings/styles/src/styles/vars.less index b470a1e26..e495de598 100644 --- a/packages/settings/styles/src/styles/vars.less +++ b/packages/settings/styles/src/styles/vars.less @@ -68,4 +68,10 @@ // 样式面板-文本 --te-styles-typography-bg-color: var(--te-common-bg-container); --te-styles-typography-bg-color-hover: var(--te-common-bg-gray-hover); + + --te-styles-modal-mask-padding-y: var(--te-base-modal-padding-y); + --te-styles-modal-mask-padding-x: var(--te-base-modal-padding-x); + --te-styles-modal-mask-right-offset-1: var(--te-base-modal-offset-1); + --te-styles-modal-mask-right-offset-2: var(--te-base-modal-offset-2); + --te-styles-modal-mask-spacing: var(--te-base-space-16); } diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index e5f1afee7..ad22b46f4 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -280,6 +280,7 @@ --te-base-space-2: 2px; // 下拉面板距离上部输入框的间距 --te-base-space-6: 6px; // 其他间距-3 --te-base-space-10: 10px; // 其他间距-4 + --te-base-space-16: 16px; /** * 1.3 字号 @@ -322,4 +323,8 @@ * 基础配置 **/ --te-base-min-width: 1280px; + --te-base-modal-offset-1: 287px; + --te-base-modal-offset-2: 280px; + --te-base-modal-padding-y: 14px; + --te-base-modal-padding-x: 20px; }