EpicSoul/components/ShareGuide.vue

<template>
    <view v-if="modelValue" class="share-guide-mask" @click="closeGuide">
        <view class="guide-content">
            <image class="share-tips" src="https://des.dayunyuanjian.cn/epicSoul/share-tips.png" mode=""></image>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            modelValue: this.value
        };
    },
    watch: {
        value(newVal) {
            this.modelValue = newVal;
        }
    },
    methods: {
        closeGuide() {
            this.$emit('input', false);
            this.$emit('close');
        }
    }
};
</script>

<style>
.share-guide-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.guide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100rpx;
    padding-right: 60rpx;
}
.share-tips{
    width: 450rpx;
}
</style>