<template>
    <view 
        :style="{
            display: show ? 'block' : 'none',
        }"
        class="act-end"
        @touchstart.stop="stopTouch"
        @touchmove.stop="stopTouch"
    >
        <view class="act-end__pop c-font-normal">
            <view>
                <view v-for="(t, ti) in endText" :key="ti">{{ t }}</view>
            </view>
        </view>
        <image
            src="https://medactivity.cdn.bcebos.com/common/end-box.png"
            class="act-end__img"
            mode="widthFix"
        />
    </view>
</template>

<script>
/**
 * @file 运营活动结束组件
 * @author wangying51
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
    },
    data() {
        return {
        };
    },
    props: {
        /**
         * 展示活动结束蒙层
         */
        show: {
            type: Boolean,
            default: true
        },
        /**
         * 展示活动结束蒙层
         */
        endText: {
            type: Array,
            default: () => [
                '你来晚啦',
                '活动已结束'
            ]
        }
    },
    methods: {
        stopTouch() {
            return false;
        }
    }
};
</script>
<style lang="less" scoped>
.act-end {
    position: fixed;
    z-index: 295;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    overflow: hidden;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
    }
    &__pop {
        position: relative;
        z-index: 2;
        width: 73vw;
        height: 25vw;
        background-color: #fff;
        border-radius: .1rem;
        color: #666;
        text-align: center;
        margin: 60vh auto 0;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        
    }
    &__img {
        width: 28vw;
        position: absolute;
        top: 72vw;
        left: 36vw;
        z-index: 1;
    }
}
</style>
