mobile_h5/card/components/my-guide/my-guide.vue

<template>
	<uni-popup ref="popup" :mask-click="false" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
		<view class="body">
			<view class="content content-bg" :style="getGuideStyle('bg')">
				<view class="mask uni-column" :style="getGuideStyle('mask')">
					<view class="btnBox uni-column">
						<button v-if="guideSn < guide.length-1" class="btn btnNext" @click="btnNext"></button>
						<button v-if="guideSn == guide.length-1" class="btn btnReplay" @click="btnReplay"></button>
						<button v-if="guideSn == guide.length-1" class="btn btnClose" @click="btnClose"></button>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "my-guide",
		emits: ['popup-close'],
		data() {
			return {
				isOpen: false,
				guideSn: 0,
				guide: [
					{
						bg: "static/help/guide1_bg.png",
						mask: "static/help/guide1_1.png"
					},
					{
						bg: "static/help/guide1_bg.png",
						mask: "static/help/guide1_2.png"
					},
					{
						bg: "static/help/guide1_bg.png",
						mask: "static/help/guide1_3.png"
					},
					{
						bg: "static/help/guide1_bg.png",
						mask: "static/help/guide1_4.png"
					},
					{
						bg: "static/help/guide1_bg.png",
						mask: "static/help/guide1_5.png"
					},
				]
			};
		},
		methods: {
			getGuideStyle(item) {
				const bgurl = this.guide[this.guideSn][item]
				return `background-image: url("${bgurl}")`;
			},
			btnNext() {
				if (this.guideSn < this.guide.length-1) {
					this.guideSn++;
				}
			},
			btnReplay() {
				this.guideSn = 0;
			},
			btnClose() {
				this.popupClose();
			},
			popupOpen() {
				this.$refs.popup.open();
				this.isOpen = true;
			},
			popupClose() {
				this.$refs.popup.close();
				this.guideSn = 0;
				this.isOpen = false;
				this.$emit('popup-close');
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: #000000;
	}

	.content-bg {
		/* background: url('../../static/help/guide1_bg.png'); */
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: center;
		background-size: contain;
	}

	.mask {
		position: relative;
		width: 100%;
		height: 100%;
		/* background: url('../../static/help/guide1_4.png'); */
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: center;
		background-size: contain;
	}

	.btnBox {
		position: absolute;
		left: 16%;
		bottom: 13.6%;
	}

	.btn {
		width: 200rpx;
		height: 60rpx;
		margin-top: 20px;
	}

	.btnNext {
		background: url('../../static/help/btn_next.png') no-repeat center;
		background-size: contain;
	}

	.btnReplay {
		background: url('../../static/help/btn_replay.png') no-repeat center;
		background-size: contain;
	}

	.btnClose {
		background: url('../../static/help/btn_close.png') no-repeat center;
		background-size: contain;
	}
</style>