<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/navigation/tk_zuos.png" alt="" style="position:absolute ;top:-2px;left: -2px;">
      <img src="@/assets/navigation/tk_yous.png" alt="" style="position:absolute ;top:-2px;right: -2px;">
      <img src="@/assets/navigation/tk_zuox.png" alt="" style="position:absolute ;bottom:-2px;left: -2px;">
      <img src="@/assets/navigation/tk_youx.png" alt="" style="position:absolute ;bottom:-2px;right: -2px;">
      <img src="@/assets/navigation/tk_gb.png" alt="" style="position:absolute ;top:20px;right: 20px;z-index:9;cursor: pointer;"
      @click="closeChange">
      <div class="tuanchutopbox">
        <img src="@/assets/navigation/tk_zuo.png" alt="">
        <div class="tuanchutoptitle">{{ title }}</div>
        <img src="@/assets/navigation/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>



