diff --git a/src/assets/less/index.less b/src/assets/less/index.less index 2af5130..dc4ada8 100644 --- a/src/assets/less/index.less +++ b/src/assets/less/index.less @@ -106,7 +106,12 @@ html, body, #app { } .ant-modal-mask { - background-color: rgba(0, 0, 0, 0.65) !important; + background-color: #00000073 !important; +} + +/* 为其他所有的 .ant-modal-mask 设置透明背景 */ +.ant-modal-mask.no-mask { + background-color: transparent !important; } // 下拉框样式-start @@ -200,6 +205,7 @@ html, body, #app { //Modal .dialog.light { background-color: #f3f5ff; + border: 1px solid #f3f5ff; .police-con { color: var(--tableFontColor); diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index 4258dab..4dcf2e0 100644 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -6,6 +6,7 @@ :width="props.width" :maskClosable="true" @cancel="handleCancel" + destroy-on-close > @@ -39,6 +40,11 @@ border: 1px solid #0a50a0; background-color: #00152b; padding-bottom: 0; + min-height: 300px; + box-shadow: + 0 3px 6px -4px #0000001f, + 0 6px 16px #00000014, + 0 9px 28px 8px #0000000d; .ant-modal-title { position: relative; diff --git a/src/views/components/dialogHooks.ts b/src/views/components/dialogHooks.ts index 3bab307..e93245e 100644 --- a/src/views/components/dialogHooks.ts +++ b/src/views/components/dialogHooks.ts @@ -1,10 +1,21 @@ import { ref } from 'vue'; +export function dealMaskStyle() { + const maskList = document.getElementsByClassName('ant-modal-mask') as HTMLCollectionOf; + let visibleMasks = Array.from(maskList).filter((item) => item.style.display !== 'none'); + if (visibleMasks.length > 1) { + for (let i = 1; i < visibleMasks.length; i++) { + visibleMasks[i].classList.add('no-mask'); + } + } +} + export function useDialog({ title } = {}) { const visible = ref(false); function openDialog() { visible.value = true; + dealMaskStyle(); } function closeDialog() {