Task：指引页

components/FunctionGuide.vue

@@ -1,14 +1,27 @@
 <template>
 	<view v-if="show" class="guide-remark white">
-		<view class="box" :style="[functionGuideData.position]">
-			<!-- <view class="tips flex" :style="{top: functionGuideData.tipsPosition || '-110rpx'}">
-				{{ functionGuideData.tips }}
-			</view> -->
-			<view class="btn-group flex_center" :style="{bottom: functionGuideData.btnGroupPosition || '-150rpx'}">
+		<view class="guid-wrap">
+			<image 
+				v-for="(img, index) in functionGuideData.imgs" 
+				:key="index" 
+				:style="[img.style]" 
+				:src="img.url" 
+				@click.stop="handleImg(img)"
+				mode="aspectFit|aspectFill|widthFix" 
+				lazy-load="true" >
+			</image>
+			<view class="box" :style="[functionGuideData.position]">
+				<!-- <view class="tips flex" :style="{top: functionGuideData.tipsPosition || '-110rpx'}">
+					{{ functionGuideData.tips }}
+				</view> -->
+				
+			</view>
+			<!-- <view class="btn-wrap flex_center" :style="[functionGuideData.btnGroupPosition]">
 				<view class="btn flex_center" @click="jump">跳过</view>
 				<view class="next-btn v12-primary flex_center" @click="next">{{ functionGuideData.step==maxStep ? '知道了' : '下一步' }}</view>
-			</view>
+			</view> -->
 		</view>
+		
 	</view>
 </template>
 
@@ -25,7 +38,7 @@
 				type: Object,
 				default: ()=> {
 					return {
-						step: 0,
+						step: 2,
 						tips: '', // 介绍
 						tipsPosition: '', // 介绍 显示位置
 						btnGroupPosition: '', // 按钮组显示位置
@@ -50,6 +63,17 @@
 			}
 		},
 		methods: {
+			handleImg(img) {
+				if(!img.isBtn) return
+				if(img.isBtn === 'next') {
+					this.next()
+					return
+				}
+				if(img.isBtn === 'jump') {
+					this.jump()
+					return
+				}
+			},
 			init() {
 				if (this.show) return
 				setTimeout(() => {
@@ -97,6 +121,15 @@
 </script>
 
 <style lang="scss" scoped>
+.btn-wrap{
+	position: absolute;
+	z-index: 99;
+}
+.guid-wrap{
+	position: relative;
+	height: inherit;
+	width: inherit;
+}
 .next-btn {
 	color: #fff;
 	padding: 2rpx 10rpx;
@@ -162,9 +195,9 @@
 				left: 50%;
 				transform: translateX(-50%);
 				font-size: 32rpx;
-				z-index: 2;
+				z-index: 2;	
 				transition: bottom 0.3s ease;
-
+				
 				.btn {
 					width: 240rpx;
 					height: 84rpx;