<template>
    <view class="wallet-mask" v-show="show">
        <view class="wm-content">
            <image 
                class="wc-close" 
                @click="$emit('click:close')" 
                mode="aspect" 
                src="/subpackage/wallet/static/images/close.png"
            ></image>
            <view class="wc-title">{{ title }}</view>
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '提示'
        },
        show: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style lang="scss">
    .wallet-mask{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba($color: #000000, $alpha: .5);
        z-index: 10;
        .wm-content{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding-top: 80upx;
            padding-bottom: 80upx;
            width: 620upx;
            border-radius: 10upx;
            background: #fff;
            .wc-close{
                position: absolute;
                right: 30upx;
                top: 30upx;
                width: 34upx;
                height: 34upx;
            }
            .wc-title{
                text-align: center;
                @include flcw(32upx, 44upx, #333333, 500);
            }
        }
    }
</style>