空境界

<template>
    <div>

        <div class="mask full-page">
            <div class="mask-background"> </div>
            <div class="mask-slot">
                <slot />
            </div>
        </div>
    </div>

</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({
    components: {}
})
export class Mask extends Vue {}
export default Mask;
Vue.component("mask", Mask);
</script>

<style lang="scss" scoped>
.mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 9999;
    width: 100%;
}

.mask.full-page {
    z-index: 9999;
    position: fixed;
}

.mask .mask-background {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background: #000;
    opacity: 0.5;
}

.mask-slot {
    width: 80%;
}
</style>