引导页面bug修复

pages/index/index.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="content">
+		<button @click="openDiver">anniu</button>
 		<view class="content-top">
 			<view class="content-tops">
 				<view class="content-top_img" v-if="Object.keys(userInfoData).length>0">
@@ -855,7 +856,7 @@
 			this.$u.sleep(5000).then(() => {
 				this.loadEndFlag = true;
 			});
-			uni.$once('diverIndexSubEmit', () => {
+			uni.$on('diverIndexSubEmit', () => {
 				uni.navigateTo({
 					url: '/pages/product/list/index'
 				})

pages/index/subnvue/concat.nvue

@@ -1,17 +1,22 @@
 <template>
 	<view class="" style="width: 750rpx;height: 100%;">
+		<view class="jump" @click="jump">
+			<text class="font">跳过</text>
+		</view>
 		<view class="target" :style="{left:(left-9)+'px',top:(top-9)+'px'}">
 			<image src="/static/images/index7.png" class="imgs"></image>
 		</view>
-
+		<view class="" class="pointe" :style="{ left:(left-10)+'px',top:(top)+'px'}">
-		<view class="" style="width: 462rpx;height: 106rpx;">
+			<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;" mode=""></image>
-			<view class="tras" :class="{'act':isActive}">
-				<text class="font">点击商品管理，发布商品</text>
 		</view>
-			<image src="/static/images/bg2.png" style="width: 762rpx;height: 106rpx;z-index: -1;"></image>
+		<view class="tips" :style="{ left:left+'px',top:(top-200)+'px'}">
+			<view class="tras" :class="{act:isActive}">
+				<text class="font" style="line-height: 106rpx;">点击商品管理，发布商品</text>
+			</view>
+		</view>
+		<view class="center" :style="{left:(left+35)+'px',  top:(top-60)+'px'}">
+			<image src="/static/images/greenLine.png" style="width:35px;height: 60px;" mode=""></image>
 		</view>
-
-
 		<view class="next-btn">
 			<text class="next-btn-text font" @click="next">下一步(3/4){{isActive}} </text>
 		</view>
@@ -24,14 +29,20 @@
 			return {
 				isActive: false,
 				left: 33,
-				top: 459.54547119140625,
+				top: 0,
 				subNVue: null,
 				offsetX: 0,
 				offsetY: 0,
 			}
 		},
 		methods: {
+			jump() {
+
+				this.subNVue.hide('zoom-in', 300, )
+
+			},
 			next() {
+				this.subNVue = uni.getSubNVueById('concat')
 				this.subNVue.hide('zoom-in', 300, )
 				setTimeout(() => {
 					uni.$emit('diverIndexSubEmit');
@@ -42,20 +53,19 @@
 		onLoad() {
 			this.subNVue = uni.getSubNVueById('concat')
 			let that = this
-			uni.$once('diverIndexEmit', (data) => {
+			uni.$on('diverIndexEmit', (data) => {
 				console.log('data', data)
-				// that.left = data.left
+				that.left = data.left
-				// that.top = data.top
+				that.top = data.top
 			})
 			setTimeout(() => {
 				that.isActive = true
-			}, 500)
+			}, 1000)
 		}
 	}
 </script>
 
 <style>
-	/* 定义动画效果 */
 	.target {
 		position: relative;
 		width: 160rpx;
@@ -124,6 +134,96 @@
 	}
 
 
+	.next-btn {
+		position: absolute;
+		bottom: 100rpx;
+		left: 375rpx;
+		transform: translateX(-50%);
+		width: 240rpx;
+		height: 76rpx;
+		border: 1px solid white;
+		border-radius: 38rpx;
+	}
+
+	.next-btn-text {
+		line-height: 76rpx;
+		text-align: center;
+
+	}
+
+	.jump {
+		position: absolute;
+		right: 30rpx;
+		top: 80rpx;
+		border: 1px solid white;
+		padding: 20rpx;
+		border-radius: 30rpx;
+	}
+
+	.tips {
+		width: 462rpx;
+		height: 106rpx;
+		background-color: #5BE157;
+		border-radius: 20rpx;
+	}
+
+	.center {
+		position: absolute;
+		left: 375rpx;
+		transform: translateX(-50%);
+	}
+
+	.tabbar {
+		width: 136rpx;
+		height: 136rpx;
+		background-color: white;
+		border-radius: 136rpx;
+		position: absolute;
+	}
+
+	.tab-icon {
+		width: 50rpx;
+		height: 50rpx;
+		position: absolute;
+		left: 68rpx;
+		transform: translate(-50%, -50%);
+		top: 68rpx;
+	}
+
+	.te {
+		font-size: 20rpx;
+		position: absolute;
+		left: 68rpx;
+		transform: translate(-50%, 0);
+		top: 100rpx;
+	}
+
+	.pointe {
+		position: absolute;
+	}
+
+
+	.tras {
+		padding-left: 20rpx;
+		position: absolute;
+		z-index: 999 !important;
+		width: 20px;
+		transition-property: width;
+		transition-duration: 3s;
+		transition-delay: 0.1s;
+		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
+	}
+
+	.act {
+		width: 462rpx;
+	}
+
+	.font {
+		font-size: 28rpx;
+		color: white;
+		lines: 1;
+	}
+
 	.next-btn {
 		position: absolute;
 		bottom: 100rpx;

pages/product/list/subnvue/concat.nvue

@@ -1,11 +1,26 @@
 <template>
 	<view class="" style="width: 750rpx;height: 100%;">
+		<view class="jump" @click="jump">
+			<text class="font">跳过</text>
+		</view>
 		<view class="target" :style="{left:left+'px',top:top+'px'}" v-if="top">
 			<text style="color:white;text-align: center;font-size: 32rpx;line-height: 32px;">发布商品</text>
 		</view>
-		<view class="next-btn" :style="{top:bottomBtn +'px'}">
+		<view class="next-btn" :style="{top:(bottomBtn-100) +'px'}">
 			<text class="next-btn-text font" @click="next">我知道了</text>
 		</view>
+		<view class="" :style="{left:(left+10)+'px',top:bottomBtn+50+'px'}">
+			<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;" mode=""></image>
+		</view>
+
+		<view class="tips" :style="{ left:(left-100)+'px',top:(top-260)+'px'}">
+			<view class="tras" :class="{act:isActive}">
+				<text class="font" style="line-height: 106rpx;">点击发布商品，开启赚钱之旅</text>
+			</view>
+		</view>
+		<view style="position: absolute;" :style="{left:left+50+'px',top:(top-50)+'px'}">
+			<image src="/static/images/greenLine.png" style="width:35px;height: 60px;" mode=""></image>
+		</view>
 	</view>
 </template>
 
@@ -14,13 +29,18 @@
 		data() {
 			return {
 				isActive: false,
-				left: 0,
+				left: -100,
-				top: 0,
+				top: -100,
+				// left: 227.82386779785156,
+				// top: 777.7727661132812,
 				subNVue: null,
-				bottomBtn: 800,
+				bottomBtn: -100,
 			}
 		},
 		methods: {
+			jump() {
+				this.subNVue.hide('zoom-in', 300, )
+			},
 			test() {
 				this.subNVue.hide()
 			},
@@ -32,16 +52,18 @@
 			let that = this
 			this.subNVue = uni.getSubNVueById('concatpro')
 			uni.$on('diverProductEmit', (data) => {
-				console.log('data', data)
 					that.left = data.left
 					that.top = data.top
-			})
 					const res = uni.getSystemInfo({
 						success: (res => {
 							that.bottomBtn = res.screenHeight - 150
-					// this.clientHeight = res.windowHeight-uni.upx2px(80)
 						})
 					});
+				}),
+				setTimeout(() => {
+					that.isActive = true
+				}, 1000)
+
 
 
 		}
@@ -60,6 +82,14 @@
 
 	}
 
+	.tips {
+		width: 462rpx;
+		height: 106rpx;
+		background-color: #5BE157;
+		border-radius: 20rpx;
+		padding-left: 20rpx;
+	}
+
 	.imgs {
 		width: 62px;
 		height: 62px;
@@ -115,11 +145,22 @@
 		height: 76rpx;
 		border: 1px solid white;
 		border-radius: 38rpx;
+		background-color: #939394;
 	}
 
 	.next-btn-text {
 		line-height: 76rpx;
 		text-align: center;
 
+
+	}
+
+	.jump {
+		position: absolute;
+		right: 30rpx;
+		top: 80rpx;
+		border: 1px solid white;
+		padding: 20rpx;
+		border-radius: 30rpx;
 	}
 </style>