shop-applet/pages/index/subnvue/concat.nvue

<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'}">
			<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;" mode=""></image>
		</view>
		<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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: false,
				left: 33,
				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');
				}, 300)

			}
		},
		onLoad() {
			this.subNVue = uni.getSubNVueById('concat')
			let that = this
			uni.$on('diverIndexEmit', (data) => {
				console.log('data', data)
				that.left = data.left
				that.top = data.top
			})
			setTimeout(() => {
				that.isActive = true
			}, 1000)
		}
	}
</script>

<style>
	.target {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 160rpx;
		background-color: white;
	}

	.greenLine {
		width: 10rpx;
		height: 100rpx;
		background-color: green;
		position: absolute;
		left: 40px;
		transform: translate(-50%, 0);
		z-index: 999;
		top: -40px;
	}

	.imgs {
		width: 62px;
		height: 62px;
		position: absolute;
		left: 40px;
		top: 40px;
		transform: translate(-50%, -50%);

	}

	.tras {
		position: absolute;
		z-index: 999 !important;
		width: 0;
		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;
	}

	.bgimg {
		width: 200rpx;
		position: absolute;
		z-index: 1;


	}

	.img {
		opacity: 0;
		width: 50rpx;
		height: 50rpx;
		transition-property: opacity;
		transition-duration: 1s;
		transition-delay: 0.1s;
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
	}


	.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;
		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;

	}
</style>