hfysite/components/public/pop.vue

<template>
<div
    class="pop-box"
    v-if="show"
>
  <div
      class="pop-mask"
      v-if="mask"
  ></div>

  <div class="pop-content">
    <slot/>
  </div>

</div>
</template>

<script>
export default {
  name: "pop",
  props:{
    mask:{
      default: true
    },
    loading:{
      default: false
    },
    show:{
      default: false
    }
  },
  data(){
    return {
    }
  }
}
</script>

<style scoped>
  .pop-box{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

  }
  .pop-mask{
    background-color: #000;
    opacity: 0.3;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .pop-content{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>