/*
    此方法用于pc端预览移动端效果
    使用方法:
    <preview v-if="isPreview" @getHideMask="isPreview = false" @getShowMask="true">
        <div slot="content"></div>
    </preview>
*/
<template>
    <div class="wrapper" @click="getHideMask">
        <div class="mobile-box" :style="{backgroundImage: `url(${getFileHost('/Common/iphone-bg.png', 1)})`}">
            <div class="notice-info" @click.stop="getShowMask">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>
<script>
import { getFileHost } from '@/assets/utils/host.js'
export default {
    name: 'Preview',
    data () {
        return {
            getFileHost
        }
    },
    methods: {
        getHideMask () {
            this.$emit('getHideMask')
        },
        getShowMask () {
            this.$emit('getShowMask')
        }
    }
}
</script>
<style lang="less" scoped>

.wrapper{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 9999;
    padding: 10px;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    .mobile-box{
        width: 356px;
        height: 726px;
        .notice-info{
            white-space: pre-wrap;
            width: 315px;
            height: 553px;
            background: #fff;
            margin: auto;
            margin-top: 90px;
            padding: 15px;
            overflow-y: scroll;
            display:block;
            word-break: break-all;
            word-wrap: break-word;
        }
    }
}

</style>
