<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>


