ProAdvanced/pages/platform-page/guide/guide-level-scroll.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack()" @clickRight="onNavUpdateDevice()" title="关卡指导"
			color="#000000" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>
		</uni-nav-bar>

		<view v-for="(item,index) in levelList" :key="index" class="mask-bg-07 ">
			<view class="flex flex-direction level-mid position-relative">
				<view style="height: 278rpx;width: 750rpx;" class="position-relative">
					<view class="position-absolute-center flex">
						<image style="width: 442rpx;height: 278rpx;"
							src="../../../static/common/subNVue/guide/level-game-title@2x.png"></image>
					</view>
					<view class="position-absolute-center flex justify-center">
						<text class="text-white text-14px" style="top: 0rpx;left:20rpx;">{{item.title}}</text>
					</view>
				</view>

				<view class="flex flex-direction-row align-center justify-center  margin-xl">
					<view class="level-tip-number">1</view>
					<text class="text-16px text-left text-white " style="width:476rpx;">{{item.firstText}}</text>
				</view>
				<image
					:style="{ width: item.firstWidth  + 'rpx', height: item.firstHeight  + 'rpx' ,transform:'scaleX('+item.firstDirection +')' }"
					:src="item.firstImage"></image>
				<view class="flex flex-direction-row align-center justify-center margin-xl">
					<text class="level-tip-number">2</text>
					<text class="text-16px text-left text-white " style="width:476rpx;">{{item.secondText}}</text>
				</view>
				<image
					:style="{ width: item.secondWidth  + 'rpx', height: item.secondHeight  + 'rpx' ,transform:'scaleX('+item.secondDirection +')' }"
					:src="item.secondImage">
				</image>
				<view style="height: 100rpx;"></view>
			</view>
		</view>



	</view>


</template>

<script>
	export default {
		data() {
			return {
				devicesList: [],
				circular: true,
				levelList: [{
						title: '解锁向上跳',
						firstText: '请先确保手柄已经连接成功。',
						firstImage: '../../../static/common/subNVue/guide/level-game-fab@2x.png',
						firstDirection: 1,
						firstWidth: 102,
						firstHeight: 108,
						secondText: '通过向上跳的方式消除标志块',
						secondImage: '../../../static/modal/action-jump/midJumpWhite.png',
						secondDirection: 1,
						secondWidth: 68,
						secondHeight: 68

					},
					{
						title: '解锁左右跳',
						firstText: '此为左跳图标，通过向左跳的方式消除标志块',
						firstImage: '../../../static/modal/action-jump/directionJumpWhite.png',
						firstDirection: -1,
						firstWidth: 68,
						firstHeight: 68,
						secondText: '此为右跳图标，通过向右跳的方式消除标志块',
						secondImage: '../../../static/modal/action-jump/directionJumpWhite.png',
						secondDirection: 1,
						secondWidth: 68,
						secondHeight: 68
					},
					{
						title: '解锁左右旋跳',
						firstText: '此为左旋跳图标，通过向左旋跳的方式消除标志块',
						firstImage: '../../../static/modal/action-jump/directionJumpWhite.png',
						firstDirection: -1,
						firstWidth: 68,
						firstHeight: 68,
						secondText: '此为右旋跳图标，通过向右旋跳的方式消除标志块',
						secondImage: '../../../static/modal/action-jump/directionJumpWhite.png',
						secondDirection: 1,
						secondWidth: 68,
						secondHeight: 68
					}
				],
				currentHeight: 0,
				threeTipHeight: 0,
				threeZIndex: 100,

			}
		},
		onLoad(op) {


		},
		onHide() {},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			}

		}

	}
</script>

<style>
	.hardware-border {
		border: 1rpx solid #9898FF;
		box-sizing: border-box;
	}

	.guide-container {
		/* background-color: rgba(0, 0, 0, 0.3); */
		width: 750rpx;
		flex: 1;
	}

	.level-mid {

		justify-content: center;
		align-items: center;
		height: 850rpx;
		width: 750rpx;
	}

	.level-tip-number {
		border-radius: 18px;
		width: 22px;
		height: 22px;
		text-align: center;
		color: #FFFFFF;
		margin-right: 13px;
		line-height: 18px;
		border: 1rpx solid #FFFFFF;
	}
</style>