cyzh-SoundOfMusic-H5/pages/index/guide.vue

<template>
	<view>
		<u-image :src="src" mode="widthFix"></u-image>
		<view class="modal" :class="show ? 'show' : ''" @click="show = false">
			<image class="img" src="/static/index/arrow.png"></image>
			<view class="view text-white">
				<view class="flex align-center text-bold margin-bottom" style="font-size: 36upx;">
					<view class="theme-bg-color flex justify-center align-center margin-right" style="width: 60upx;height: 60upx;border-radius: 16upx;">1</view>
					<view class="flex align-center">
						<view>点击右上角</view>
						<image class="margin-lr-sm" src="/static/index/point.png" style="width: 60upx;height: 38upx;"></image>
						<view>按钮</view>
					</view>
				</view>
				<view class="flex align-center text-bold" style="font-size: 36upx;">
					<view class="theme-bg-color flex justify-center align-center margin-right" style="width: 60upx;height: 60upx;border-radius: 16upx;">2</view>
					<view class="flex align-center">
						<view>选择</view>
						<image class="margin-lr-sm" src="/static/index/browser.png" style="width: 48upx;height: 48upx;"></image>
						<view>在浏览器打开</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 120upx;"></view>
		<view class="footer-fixed padding" style="background-color: #ffffff;">
			<button class="cu-btn round theme-bg-color text-white text-bold" style="width: 100%;height: 100upx;font-size: 36upx;" @click="tips">参与打榜活动</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				src: 'https://music.nanyue6688.com/obsfile/445668112f384a8cb2c405dc5d514a79-poster.png'
			}
		},
		methods: {
			tips() {
				if (this.$isWxBrowser()) {
					this.show = true;
				} else {
					uni.reLaunch({
						url: "/pages/activityList/index"
					})
				}
			},
		}
	}
</script>

<style>
	.modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}
	
	.modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
	}
	
	.modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	.img {
		position: fixed;
		top: 20px;
		right: 10px;
		width: 127px;
		height: 184px;
	}
	.view {
		position: fixed;
		top: 230px;
		right: 50upx;
		text-align: center;
		width: 550upx;
		height: 480upx;
	}
</style>