<template>
    <div class="flexcenter pop-mask" @click="$emit('close')" v-if="howBoxState">
        <div class="pop how-box shadow radius16" @click.stop="">
            <img class="pop-close" @click.stop="$emit('close')" src="@/assets/img/edit/close-icon.svg" />
            <div class="how-title">如何获取微信二维码？</div>
            <img class="how-img" src="@/assets/img/edit/how-img.svg" />
        </div>
    </div>
</template>

<script>
export default {
    props: ['howBoxState'],
}
</script>

<style lang="less" scoped>
.pop-mask {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.698039215686274);
    z-index: 1000;
}
.pop {
    z-index: 2;
    background-color: #fff;

    .pop-close {
        width: 14px;
        height: 14px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    &.how-box {
        position: relative;
        padding: 40px 45px 40px;

        .how-title {
            font-size: 20px;
            font-weight: 650;
            color: #000;
            margin-bottom: 32px;
            text-align: center;

        }

        .how-img {
            width: 550px;
            height: 584px;
        }
    }

}
</style>