<!-- 地图镂空弹出框公共组件 -->
<template>
  <div class='DialogVisible' :style="{marginLeft:-width/2+'px'}">
    <!-- <div class="mask">
      <slot name="mask"></slot>
    </div> -->
    <div class="dialog__wrapper" :style="{width:width+'px'}">
      <div class="dialog-header">
        <slot name="header">
          <span class="dialog-title">数据详情</span>
          <button type="button" class="dialog-headerbtn">
            <i class="el-icon el-icon-close"></i>
          </button>
        </slot>
      </div>
      <div class="dialog-body">
        <slot name="inner"></slot>
      </div>
    </div>
    
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props:['width'],
data() {
//这里存放数据
return {
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.DialogVisible{
  position: fixed;
  top: 215px;
  left: 50%;
  overflow: auto;
  margin: 0;
  z-index: 555;
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000000;
  }
  .dialog__wrapper{
    border-radius: 5px;
    // margin: 0 auto 50px;
    // margin-top: 23vh;
    // width: 500px;
    position: relative;
    background: #FFFFFF;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    .dialog-header{
        padding: 20px;
        padding-bottom: 10px;
        background: #F2F2F2;
      .dialog-title{
        line-height: 24px;
        font-size: 18px;
        color: #303133;
      }
      .dialog-headerbtn{
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 16px;
      }
    }
  }
  .dialog-body{
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.animate__zoomOut.DialogVisible{
  display: none;
}
</style>