Browse Source

feat 弹窗蒙层增加

wangqin
qingzhengli 11 months ago
parent
commit
4695a12a1a
  1. 31
      ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue

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

@ -1,40 +1,23 @@
<template>
<Teleport>
<Transition name="fade">
<div
:class="['mask-layer', { 'none-mask': noneMask }]"
v-if="modelVisible"
>
<BackgroundClip
class="dialog"
<div :class="['mask-layer', { 'none-mask': noneMask }]" 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"
:width="width"
:top="top"
>
ref="DialogContentRef" :width="width" :top="top">
<div class="dialog-title">
<img
class="title-icon"
src="@screen/images/dialog/title-icon.svg"
/>
<img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
<span>{{ title }}</span>
<img
class="icon-close"
@click.stop="modelVisible = false"
src="@screen/images/dialog/icon-close.svg"
/>
<img class="icon-close" @click.stop="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
</div>
<div class="dialog-content">
<slot />
</div>
<img
class="bottom-right"
src="@screen/images/dialog/right-bottom.svg"
/>
<img 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;

Loading…
Cancel
Save