119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<script lang="ts">
|
|
export default {
|
|
name: "eldialog", // 公共弹框
|
|
};
|
|
</script>
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: true
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '500px'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
zIndex: {
|
|
type: Number,
|
|
default: null
|
|
},
|
|
elclass: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
});
|
|
const emit = defineEmits(['before-close']);
|
|
function closeChange() {
|
|
emit('before-close', false);
|
|
}
|
|
const isdialog = true
|
|
</script>
|
|
<template>
|
|
<el-dialog v-model="isdialog" :close-on-click-modal="false" :before-close="closeChange" :title="''" append-to-body :width="width" draggable class="newType newTopHeaderType"
|
|
:class="elclass" :z-index="zIndex">
|
|
<img src="@/assets/tankuang/tk_zuos.png" alt="" style="position:absolute ;top:-2px;left: -2px;">
|
|
<img src="@/assets/tankuang/tk_yous.png" alt="" style="position:absolute ;top:-2px;right: -2px;">
|
|
<img src="@/assets/tankuang/tk_zuox.png" alt="" style="position:absolute ;bottom:-2px;left: -2px;">
|
|
<img src="@/assets/tankuang/tk_youx.png" alt="" style="position:absolute ;bottom:-2px;right: -2px;">
|
|
<img src="@/assets/tankuang/gb.png" alt="" style="position:absolute ;top:20px;right: 20px;z-index:9;cursor: pointer;"
|
|
@click="closeChange">
|
|
<div class="tuanchutopbox">
|
|
<img src="@/assets/tankuang/tk_zuo.png" alt="">
|
|
<div class="tuanchutoptitle">{{ title }}</div>
|
|
<img src="@/assets/tankuang/tk_you.png" alt="">
|
|
</div>
|
|
<div style="position: relative;z-index: 20;">
|
|
<slot name="PopFrameContent"></slot>
|
|
</div>
|
|
|
|
</el-dialog>
|
|
</template>
|
|
|
|
|
|
<style>
|
|
.newType{
|
|
position: relative;
|
|
background: #001e55;
|
|
border: 1px solid #008eaa;
|
|
border-radius: 40px;
|
|
/* background-image: url(@/assets/index/xsjk_yl_1.png); */
|
|
/* background-size:100% 100% ; */
|
|
}
|
|
.newType .el-dialog__header{
|
|
position: relative;
|
|
z-index: 1000;
|
|
background: transparent;
|
|
text-align: center;
|
|
margin-top: -20px;
|
|
}
|
|
.newType .el-dialog__headerbtn{
|
|
display: none;
|
|
}
|
|
|
|
.newTopHeaderType .el-dialog__header{
|
|
margin-top: -15px;
|
|
}
|
|
.newType .el-dialog__title{
|
|
color: #fff;
|
|
}
|
|
.newType .el-dialog__body{
|
|
color: #B5D7FF;
|
|
}
|
|
.tuanchutopbox{
|
|
position: absolute;
|
|
top: -20px;
|
|
width: calc(100% - 40px);
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
}
|
|
.tuanchubottombox{
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: calc(100% - 40px);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.tuanchutoptitle{
|
|
height:45px;
|
|
line-height:44px;
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
background:#001e55 ;
|
|
border-top:1px solid rgba(152, 224, 255,0.3);
|
|
border-bottom:1px solid rgba(152, 224, 255,0.3);
|
|
}
|
|
</style>
|
|
|
|
|
|
|