feat 弹窗蒙层增加

ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue

@@ -1,40 +1,23 @@
 <template>
   <Teleport>
     <Transition name="fade">
-      <div
+      <div :class="['mask-layer', { 'none-mask': noneMask }]" v-if="modelVisible">
-        :class="['mask-layer', { 'none-mask': noneMask }]"
+        <BackgroundClip class="dialog"
-        v-if="modelVisible"
-      >
-        <BackgroundClip
-          class="dialog"
           clipPath="polygon(calc(100% - var(--clip-width)) 0, 100% var(--clip-width), 100% 100%, var(--clip-width) 100%, 0 calc(100% - var(--clip-width)), 0 0)"
           borderColor="linear-gradient(180deg, rgba(78, 174, 204, .9), rgba(78, 174, 204, 0))"
           bgColor="linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%)"
-          ref="DialogContentRef"
+          ref="DialogContentRef" :width="width" :top="top">
-          :width="width"
-          :top="top"
-        >
           <div class="dialog-title">
-            <img
+            <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
-              class="title-icon"
-              src="@screen/images/dialog/title-icon.svg"
-            />
             <span>{{ title }}</span>
-            <img
+            <img class="icon-close" @click.stop="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
-              class="icon-close"
-              @click.stop="modelVisible = false"
-              src="@screen/images/dialog/icon-close.svg"
-            />
           </div>
 
           <div class="dialog-content">
             <slot />
           </div>
 
-          <img
+          <img class="bottom-right" src="@screen/images/dialog/right-bottom.svg" />
-            class="bottom-right"
-            src="@screen/images/dialog/right-bottom.svg"
-          />
 
           <div class="footer" v-if="$slots.footer">
             <slot name="footer"></slot>
@@ -130,7 +113,7 @@ export default {
   height: 100%;
   background: rgba(0, 0, 0, 0.36);
   border-radius: 0px 0px 0px 0px;
-  z-index: 100;
+  z-index: 1100;
   // display: flex;
   // align-items: center;
   // justify-content: center;
@@ -224,7 +207,7 @@ export default {
     padding: 0 27px;
 
     ::v-deep {
-      > div {
+      >div {
         min-width: 96px;
       }
     }