new_shop_app/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="next-btn" :style="{top:(offsetY-250)+'px'}">
			<text class="next-btn-text font" @click="next">下一步(1/4)</text>
		</view>

		<view class="tips center" v-if='isStore' :style="{top:(offsetY-178)+'px'}">
			<view class="tras" :class="{act:isActive}">
				<text class="font" style="line-height: 106rpx;">点击生产页面，进入办公助手</text>
			</view>
		</view>

		<view class="tips" v-else :style="{top:(offsetY-178)+'px',left:(screenWidth/4-50)+'px'}">
			<view class="tras" :class="{act:isActive}">
				<text class="font" style="line-height: 106rpx;">点击生产页面，进入办公助手</text>
			</view>
		</view>

		<view class="center" v-if="isStore" :style="{top:(offsetY-120)+'px'}">
			<image src="/static/images/greenLine.png" style="width:35px;height: 60px;" mode=""></image>
		</view>
		<view v-else style="position: absolute;" :style="{top:(offsetY-120)+'px',left:(screenWidth/4+16)+'px'}">
			<image src="/static/images/greenLine.png" style="width:35px;height: 60px;" mode=""></image>
		</view>

		<view v-if='isStore' class="tabbar" :style="{top:(offsetY-68)+'px'}">
			<image src="/static/images/fabu.png" class="tab-icon"></image>
			<text class="te">工作台</text>
		</view>
		<view v-else class="tabbar2" :style="{top:(offsetY-68)+'px',left:(screenWidth/4)+'px'}">
			<image src="/static/images/fabu.png" class="tab-icon"></image>
			<text class="te">工作台</text>
		</view>

		<view v-if='isStore' class="pointe" :style="{top:(offsetY-58)+'px'}">
			<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;" mode=""></image>
		</view>
		<view v-else class="pointe2" :style="{top:(offsetY-58)+'px',left:(screenWidth/4)+'px'}">
			<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: false,
				subNVue: null,
				screenWidth: 400,
				offsetX: 0,
				offsetY: 0,
				isStore: false,
			}
		},
		methods: {
			next() {
				uni.$emit('diverIndexSubEmit');

			},
			jump() {
				uni.setStorageSync('is_new_user', false)
				uni.$emit('diverIndexSubEmit');
			}
		},
		onLoad() {
			uni.$on('diverIndexEmit', (data) => {
				this.isStore = Boolean(data.mer_info?.mer_name)
			})
			let that = this
			this.subNVue = uni.getSubNVueById('concatIndex')
			const res = uni.getSystemInfo({
				success: (res => {
					this.offsetY = res.screenHeight
					this.screenWidth = res.screenWidth
				})
			});
			setTimeout(() => {
				that.isActive = true
			}, 1000)

		}
	}
</script>

<style>
	.jump {
		position: absolute;
		right: 30rpx;
		top: 80rpx;
	}

	.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;
		left: 375rpx;
		transform: translateX(-50%);
		/* bottom: 0; */
	}

	.tabbar2 {
		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;
		left: 420rpx;
		transform: translateX(-50%);
	}

	.pointe2 {
		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;
	}

	.jump {
		position: absolute;
		right: 30rpx;
		top: 80rpx;
		border: 1px solid white;
		padding: 20rpx;
		border-radius: 30rpx;
	}
</style>