80 lines
1.3 KiB
Vue
80 lines
1.3 KiB
Vue
|
<script lang="ts">
|
||
|
|
export default {
|
||
|
|
name: "seccmsdialog", // 公共弹框
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script setup lang="ts">
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: '500px'
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: String,
|
||
|
|
default: '500px'
|
||
|
|
},
|
||
|
|
zIndex: {
|
||
|
|
type: Number,
|
||
|
|
default: 2000
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
const emit = defineEmits(['before-close']);
|
||
|
|
function closeChange() {
|
||
|
|
emit('before-close', false);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="PopFramebg" :style="{'z-index':zIndex}">
|
||
|
|
<div class="PopFramebgColor" v-drag :style="{'width':width,'height':height}" >
|
||
|
|
<div class="PopFramebgTitle">{{ props.title }}</div>
|
||
|
|
<div @click="closeChange" class="closePopFramebg">关闭</div>
|
||
|
|
<slot name="PopFrameContent"></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.PopFramebg{
|
||
|
|
position:fixed;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
background:rgba(0,0,0,0.5);
|
||
|
|
height:100vh;
|
||
|
|
width:100vw;
|
||
|
|
z-index:2000;
|
||
|
|
}
|
||
|
|
.PopFramebgColor{
|
||
|
|
width: 1180px;
|
||
|
|
background: url(@/assets/newimg/xsjk_yl_1.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2023;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
right: 0px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
.PopFramebgTitle{
|
||
|
|
width:100%;
|
||
|
|
color:#fff;
|
||
|
|
text-align:center;
|
||
|
|
font-size:16px;
|
||
|
|
}
|
||
|
|
.closePopFramebg {
|
||
|
|
position:absolute;
|
||
|
|
right:10px;
|
||
|
|
top:30px;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|