front-end/mobile-code/src/components/module/app-share-mask.vue

<template>
	<div class="app-share-mask">
		<div class="share-mask" v-if="show" :class="[show ? 'share-mask-show' : '']">
			<div class="share-content">
				<div class="share-img">
					<img :src="`${constant.imgUrl}/retail/interest/shou.png`" alt mode="widthFix" />
				</div>
				<div class="share-text">
					<div>点此右上角</div>
					<div>{{ text }}</div>
				</div>
			</div>
			<div class="share-btn">
                <button class="button-com default" @tap.stop="handleClick">知道了</button>
            </div>
		</div>
		<div class="tui-alert-mask" :class="[show ? 'tui-alert-mask-show' : '']"></div>
	</div>
</template>

<script>
export default {
	name: 'app-share-mask',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		text: {
			type: String,
			default: '分享即可邀请'
		}
	},
	data() {
		return {
			constant: this.$constant
		}
	},
	methods: {
		handleClick() {
			if (!this.show) return
			this.$emit('click')
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-share-mask {
		.share-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 998;
			opacity: 0;
			color: #fff;
			.share-content {
                width: 100%;
                text-align: right;
				.share-img {
					width: 90px;
                    margin: 26px 128px 36px auto;
				}
				.share-text {
					width: 210px;
					font-size: 34px;
					text-align: center;
                    margin: 0 80px 36px auto;
				}
			}
			.share-btn {
                @include disFlex(center, center);
                margin-top: 200px;
                .button-com {
				    width: 340px;
				    padding-top: 32px;
                    padding-bottom: 32px;
                    margin: 0 auto;
                    font-size: 32px;
                }
			}
		}
		.share-mask-show {
			// transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
		.tui-alert-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 996;
			transition: all 0.3s ease-in-out;
			opacity: 0;
			visibility: hidden;
		}
		.tui-alert-mask-show {
			visibility: visible;
			opacity: 1;
		}
	}
</style>