From d30f92f9706549e83db0c8d8b009285130da9f17 Mon Sep 17 00:00:00 2001
From: wangweidong <850489345@qq.com>
Date: Wed, 17 Dec 2025 17:16:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/Warehouse/Warehouse.vue | 1148 +++++++++++++++++----------------
 1 file changed, 600 insertions(+), 548 deletions(-)

diff --git a/pages/Warehouse/Warehouse.vue b/pages/Warehouse/Warehouse.vue
index d3e3270..1529b00 100644
--- a/pages/Warehouse/Warehouse.vue
+++ b/pages/Warehouse/Warehouse.vue
@@ -1,193 +1,240 @@
 <template>
-	<view class="all-content">
-		<view class="content-title">
-			<image class="title-imge" src="/static/index/indeximage.png" mode="aspectFill"></image>
+	<view>
+		<view class="home">
+			<image class="all-home" src="/static/index/warehouse/newtwo/backpage.jpg" mode="aspectFit"></image>
+		</view>
+		<view class="right-title">
+			<image class="title-imge" src="/static/home.png" mode="aspectFit"></image>
 			<view class="title-font">
 				{{ uni.getStorageSync('nuName') }}
 			</view>
 		</view>
-		<view class="wareaitem">
-			<view class="wareaitem-item">
-				<view class="tp" :class="'itemact'+(index+1)" v-for="(item,index) in animArray" :key='index'
-					@click.stop="housactive(index)">
-					<donghua :width="item.width" :height="item.height" :links="item.url" :playing="index == housedex" />
-				</view>
-
-				<view class="tp" :class="'wareitem'+index" v-for="(item,index) in 12" :key='index'>
-					<image :src="'/static/index/warehouse/w'+index+'.png'" mode="aspectFill"></image>
-				</view>
-				<view class="tp ys">
-					<image :src="'/static/index/warehouse/i7.png'" mode="aspectFill"></image>
-				</view>
-				<view class="tp gifs">
-					<image src="/static/index/warehouse/ys.gif" mode="aspectFill"></image>
-				</view>
-				<view class="tp wclik" @click.stop="housactive(1)">
-					<!-- 采购增加层级高度方便点击 -->
-				</view>
-			</view>
-			<view class="annotation" :class="'annotation'+(i+1)"
-				v-for="(v,i) in ['库存盘点','采购','拣货','完结','护理单元','监控室','请领出库','退货入库']" :key='i'
-				@click.stop="housactive(i)">
-				<view> </view>
-				<view class="tp">
-					<text style="font-size: 30rpx;">{{v}}</text>
-					<image src="/static/index/warehouse/y2.png" mode="aspectFill" v-if="i==4"></image>
-					<image src="/static/index/warehouse/y1.png" mode="aspectFill" v-if="i!=4"></image>
-				</view>
-				<view class="tp">
-					<image src="/static/index/warehouse/y0.png" mode="aspectFill"></image>
-				</view>
-			</view>
-			<view @click="onlyjump(5)" class="zhanwei"></view>
-			<!-- <view class="white-dang">
-				
-			</view> -->
-			<!-- <view class="operationbtn">
-				<view v-for="(v,i) in ['请领出库','退货入库','库存盘点','实时监控']" @tap="onTap(i)"
-					:class="beblue === i ? 'click-box-target' : 'click-box'">
-					<image
-						:src="beblue === i?'/static/index/warehouse/ku/rq'+i+'.png':'/static/index/warehouse/ku/rs'+i+'.png'"
-						mode="aspectFill"></image>
-					{{v}}
-				</view>
-			</view> -->
+		<view class="paizi tp">
+			<donghua width="18vw" height="18vw" :interval="300" :links="paiziarray" :playing="playall" :loop="true" />
 		</view>
+		<view class="jiankong tp" @click="housactive(3)">
+			<donghua width="17vw" height="17vw" :interval="150" :links="jiankongarray" :playing="playall"
+				:loop="true" />
+		</view>
+		<view class="jiankongtag tp" @click="housactive(3)">
+			<view class="blue-bgc">
+				监控室
+				<view class="triangle-middle"></view>
+			</view>
+			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
+		</view>
+		<view class="wanjie tp" @click="housactive(4)">
+			<donghua width="18vw" height="18vw" :interval="300" :links="wanjiearray" :playing="playall" :loop="true" />
+		</view>
+		<view class="wanjietag tp" @click="housactive(4)">
+			<view class="blue-bgc">
+				完结
+				<view class="triangle-middle"></view>
+			</view>
+			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
+		</view>
+		<view class="caigou tp" @click="housactive(0)">
+			<donghua width="18vw" height="18vw" :interval="150" :links="caigouarray" :playing="playall" :loop="true" />
+		</view>
+		<view class="caigoutag tp" @click="housactive(0)">
+			<view class="blue-bgc">
+				采购
+				<view class="triangle-middle"></view>
+			</view>
+			<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
+		</view>
+		<view class="ruku tp">
+			<donghua width="11vw" height="11vw" :interval="300" :links="rukuarray" :playing="playall" :loop="true" />
+		</view>
+		<view class="chuku tp">
+			<donghua width="11vw" height="11vw" :interval="300" :links="rukuarray" :playing="playall" :loop="true" />
+		</view>
+		<view class="jianhuo tp">
+			<donghua width="40vw" height="40vw" :interval="150" :links="jianhuoarray" :playing="playall" :loop="true" />
+		</view>
+		<view class="pandan tp" @click="housactive(5)">
+			<image src="/static/index/warehouse/newhome/count.png" mode="widthFix"></image>
+		</view>
+		<view class="pandantag tp" @click="housactive(5)">
+			<view class="gray-bgc">
+				库存盘点
+				<view class="triangle-left"></view>
+				<view class="triangle-left-bgc"></view>
+			</view>
+		</view>
+		<view class="return tp" @click="housactive(8)">
+			<image src="/static/index/warehouse/newhome/return.png" mode="widthFix"></image>
+		</view>
+		<view class="leadtag tp" @click="housactive(8)">
+			<view class="gray-bgc">
+				退货入库
+				<view class="triangle-left"></view>
+				<view class="triangle-left-bgc"></view>
+			</view>
+		</view>
+		<view class="lead tp" @click="housactive(7)">
+			<image src="/static/index/warehouse/newhome/lead.png" mode="widthFix"></image>
+		</view>
+		<view class="returntag tp" @click="housactive(7)">
+			<view class="gray-bgc">
+				请领出库
+				<view class="triangle-left"></view>
+				<view class="triangle-left-bgc"></view>
+			</view>
+		</view>
+
+		<view class="picking tp" @click="housactive(2)">
+			<image src="/static/index/warehouse/newhome/picking.png" mode="widthFix"></image>
+		</view>
+		<view class="pickingtag tp" @click="housactive(2)">
+			<view class="blue-bgc">
+				拣货
+
+				<view class="triangle-left-bgc"></view>
+			</view>
+		</view>
+		<view :style="moverStyle">
+			<image style="width: 100%;height: 100%;" :src="cararray[cartarget]" mode="widthFix"></image>
+		</view>
+
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
-	const darkFans = ref(false);
-	const getblue = ref(false);
+	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick } from 'vue';
 
-	const housedex = ref(-1);
-	const lastTap = ref(0)
-	const DOUBLE_TAP_DELAY = 300;
-	const setout = ref(null)
-	const housactive = (index : number) => {
-		housedex.value = index;
-		const now = Date.now()
-		if (now - lastTap.value < DOUBLE_TAP_DELAY) {
-			// 双击成立
-			clearTimeout(setout.value)
-			if (index == 0) {
-				navurl.value = 'pages/Warehouse/paymoney'
-				uni.navigateTo({
-					url: '/' + navurl.value
-				})
-			}
-			if (index == 1) {
-				navurl.value = 'pages/procurement/material'
-				uni.navigateTo({
-					url: '/' + navurl.value
-				})
-			}
-			if (index == 2) {
-				navurl.value = 'pages/Warehouse/picking'
-				uni.navigateTo({
-					url: '/' + navurl.value
-				})
-			}
-			if (index == 3) {
-				navurl.value = 'pages/Warehouse/finish'
-				uni.navigateTo({
-					url: '/' + navurl.value
-				})
-			}
-			if (index === 5) {
-				uni.navigateTo({
-					url: "/pages/watch/full"
-				})
-			}
-			if (index == 6) {
-				navurl.value = 'pages/procurement/outbound?code=0'
-				uni.navigateTo({
-					url: '/' + navurl.value
-				})
-			}
-			if (index == 7) {
-				navurl.value = 'pages/procurement/outbound?code=1'
-				uni.navigateTo({
-					url: '/' + navurl.value
-				})
-			}
-			// 重置，避免多次触发
-			lastTap.value = 0
-		} else {
-			setout.value = setTimeout(() => {
-				// console.log("点击哪个了", index)
-				if (index === 5) {
-					uni.navigateTo({
-						url: "/pages/watch/full"
-					})
-				}
-
-			}, DOUBLE_TAP_DELAY)
-			// 记录本次时间，等待下次点击
-			lastTap.value = now
-		}
-
-	}
+	const cararray =
+		genPaths(
+			'/static/index/warehouse/newhome/',
+			'train',
+			10,    // 张数
+			'png',
+			1,     // 起始索引为 1
+			false  // 不补零
+		)
+	const cartarget = ref(0)
+	const paiziarray =
+		genPaths(
+			'/static/index/warehouse/newhome/',
+			'logo',
+			3,    // 张数
+			'png',
+			1,     // 起始索引为 1
+			false  // 不补零
+		)
+	const jiankongarray =
+		genPaths(
+			'/static/index/warehouse/newhome/',
+			'monitor',
+			8,    // 张数
+			'png',
+			0,     // 起始索引为 1
+			false  // 不补零
+		)
+	const wanjiearray =
+		genPaths(
+			'/static/index/warehouse/newhome/',
+			'end',
+			6,    // 张数
+			'png',
+			0,     // 起始索引为 1
+			false  // 不补零
+		)
+	const caigouarray = genPaths(
+		'/static/index/warehouse/newhome/',
+		'purchase',
+		8,    // 张数
+		'png',
+		0,     // 起始索引为 1
+		false  // 不补零
+	)
+	const rukuarray = genPaths(
+		'/static/index/warehouse/newhome/',
+		'unit1-',
+		5,    // 张数
+		'png',
+		0,     // 起始索引为 1
+		false  // 不补零
+	)
+	const jianhuoarray = genPaths(
+		'/static/index/warehouse/newhome/',
+		'Warehouse',
+		8,    // 张数
+		'png',
+		1,     // 起始索引为 1
+		false  // 不补零
+	)
+	const playall = ref(false);
+	let clickAudio
 	onMounted(() => {
-		housedex.value = 1
+		playall.value = true;
+		ceshi()
+		clickAudio = uni.createInnerAudioContext()
+		clickAudio.src = '/static/click.mp3'
+		clickAudio.volume = 0.4
 	})
-	const navurl = ref('');
-	const onlyjump = (index : number) => {
-		console.log("点击了哪个图标", index)
-		if (index > 5) {
-			navurl.value = 'pages/Warehouse/finish'
+
+	const housedex = ref(0);
+	const navurl = ref('')
+	const housactive = (index : number) => {
+		clickAudio.stop() // 防止叠音（Galgame 必备）
+		clickAudio.play()
+		console.log(index)
+		housedex.value = index;
+		if (index == 0) {
+			navurl.value = 'pages/procurement/material'
 			uni.navigateTo({
 				url: '/' + navurl.value
 			})
-			return
 		}
-		if (index < 4) {
-			housedex.value = index;
+		if (index == 1) {
+			navurl.value = 'pages/Warehouse/paymoney'
+			uni.navigateTo({
+				url: '/' + navurl.value
+			})
 		}
 
-		if (index === 5) {
+		if (index == 2) {
+			navurl.value = 'pages/Warehouse/picking'
+			uni.navigateTo({
+				url: '/' + navurl.value
+			})
+		}
+
+		if (index === 3) {
 			uni.navigateTo({
 				url: "/pages/watch/full"
 			})
 		}
-	}
-	const beblue = ref<number>(-1);
-	let clickResetTimer : ReturnType<typeof setTimeout> | null = null;
-	// 单击（或短按）
-	function onTap(dir : number) {
-		clearClickResetTimer()
-		console.log("?????", dir)
-		beblue.value = dir
-		clickResetTimer = setTimeout(() => {
-			beblue.value = -1
-			clickResetTimer = null
-		}, 500)
-		switch (dir) {
-			case 0:
-
-				break
-			case 1:
-
-				break
-			case 2:
-
-				break
-			case 3:
-				uni.navigateTo({
-					url: "/pages/watch/full"
-				})
-				break
+		if (index == 4) {
+			navurl.value = 'pages/Warehouse/finish'
+			uni.navigateTo({
+				url: '/' + navurl.value
+			})
 		}
-	}
-	function clearClickResetTimer() {
-		if (clickResetTimer) {
-			clearTimeout(clickResetTimer)
-			clickResetTimer = null
+		if (index == 5) {
+			navurl.value = 'pages/procurement/inventory'
+			uni.navigateTo({
+				url: '/' + navurl.value
+			})
 		}
+		if (index == 7) {
+			navurl.value = 'pages/procurement/outbound?code=1'
+			uni.navigateTo({
+				url: '/' + navurl.value
+			})
+		}
+		if (index == 8) {
+			navurl.value = 'pages/procurement/retstock'
+			uni.navigateTo({
+				url: '/' + navurl.value
+			})
+		}
+
+
 	}
 
-	// 通用的生成函数
+
 	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
 		return Array.from({ length: count }, (_, i) => {
 			const idx = pad
@@ -196,406 +243,411 @@
 			return `${base}/${prefix}${idx}.${ext}`
 		})
 	}
-	const animArray = ref([
-		{
-			url: genPaths(
-				'/static/index/warehouse/animation',
-				'remit0',
-				5,    // 张数
-				'png',
-				1,     // 起始索引为 1
-				false  // 不补零
-			),
-			width: '29vw',
-			height: '21vw'
-		},
-		{
-			url: genPaths(
-				'/static/index/warehouse/animation',
-				'buy0',
-				5,    // 张数
-				'png',
-				1,     // 起始索引为 1
-				false  // 不补零
-			),
-			width: '26vw',
-			height: '16vw'
-		},
-		{
-			url: genPaths(
-				'/static/index/warehouse/animation',
-				'Pick0',
-				4,    // 张数
-				'png',
-				1,     // 起始索引为 1
-				false  // 不补零
-			),
-			width: '17vw',
-			height: '13vw'
-		},
-		{
-			url: genPaths(
-				'/static/index/warehouse/animation',
-				'checkout0',
-				5,    // 张数
-				'png',
-				1,     // 起始索引为 1
-				false  // 不补零
-			),
-			width: '24vw',
-			height: '16vw'
-		},
+	// 当前坐标（px）
+	const x = ref(63)
+	const y = ref(59)
+	// 默认过渡时长（s）
+	const duration = ref(0.7)
+	const easing = 'linear' // 柔和的 easing
 
-	])
+	// 样式绑定：translate3d + transition（GPU 加速）
+	const moverStyle = computed(() => {
+		return {
+			position: 'fixed',
+			left: '0',
+			top: '0',
+			width: '7vw',       // 图片宽高按需改
+			height: '7vw',
+			transform: `translate3d(${x.value}vw, ${y.value}vw, 0)`,
+			transition: `transform ${duration.value}s ${easing}`,
+			willChange: 'transform'
+		}
+	})
+
+	// 调用函数：moveTo(pxX, pxY, seconds)
+	function moveTo(pxX, pxY, seconds = 0.6) {
+		// 设置时长（秒），然后直接改坐标
+		duration.value = seconds
+		x.value = pxX
+		y.value = pxY
+	}
+
+	const ceshi = () => {
+		moveTo(21, 43, 3);
+		cartarget.value = 0
+		setTimeout(() => {
+			cartarget.value = 1
+			moveTo(21, 40, 0.5); // 6 秒后执行这个
+		}, 3000);
+		setTimeout(() => {
+			cartarget.value = 2
+			moveTo(34, 31.5, 2); // 6 秒后执行这个
+		}, 3500);
+		setTimeout(() => {
+			cartarget.value = 3
+			moveTo(38, 30, 0.5); // 6 秒后执行这个
+		}, 5500);
+		setTimeout(() => {
+			cartarget.value = 4
+			moveTo(65, 39, 3); // 6 秒后执行这个
+		}, 6000);
+		setTimeout(() => {
+			cartarget.value = 5
+			moveTo(93, 20, 3); // 6 秒后执行这个
+		}, 9000);
+		setTimeout(() => {
+			cartarget.value = 6
+			moveTo(92, 16, 0.5); // 6 秒后执行这个
+		}, 12000);
+		setTimeout(() => {
+			cartarget.value = 7
+			moveTo(91, 15, 0.5); // 6 秒后执行这个
+		}, 12500);
+		setTimeout(() => {
+			cartarget.value = 8
+			moveTo(48, 0.5, 3); // 6 秒后执行这个
+		}, 13000);
+		setTimeout(() => {
+			cartarget.value = 9
+			moveTo(-11, 35, 4); // 6 秒后执行这个
+		}, 16000);
+		setTimeout(() => {
+			cartarget.value = 0
+			moveTo(63, 59, 0.0001);
+		}, 20000);
+		setTimeout(() => {
+			ceshi()
+		}, 21000);
+	}
 </script>
 
-<style lang="less" scoped>
-	.all-content {
-		width: 100%;
-		height: 100%;
-		background: url('/static/index/warehouse/bg.png')no-repeat;
-		background-size: cover cover;
-		position: relative;
-	}
+<style scoped lang="less">
+	.home {
+		width: 100vw;
+		height: 100vh;
+		overflow: hidden;
+		position: fixed;
+		z-index: 0;
 
-	.wareaitem {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
-		transform: scale(0.9, 0.8);
-
-		.tp {
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		.operationbtn {
-			width: 22vw;
-			height: 10vw;
-			position: absolute;
-			right: 1.5vw;
-			bottom: 2vw;
-			display: flex;
-			justify-content: space-between;
-			flex-wrap: wrap;
-
-			>view {
-				width: 10vw;
-				height: 4vw;
-				border-radius: 1vw;
-				border: 2rpx solid #D9DADC;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-weight: 400;
-				font-size: 1.3vw;
-				color: #888D99;
-				margin: 0 0.3vw;
-				transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
-				-webkit-tap-highlight-color: transparent;
-
-				image {
-					width: 1.6vw;
-					height: 1.6vw;
-					margin-right: .2vw;
-				}
-			}
-
-			// .click-box {
-			// 	color: #888d99;
-			// 	background: rgba(255, 255, 255, 0.43);
-			// }
-
-			// .click-box-target {
-			// 	background: #FFFFFF;
-			// 	box-shadow: 0px 0px 3vw 0px rgba(12, 102, 209, 0.33) inset;
-			// 	// box-shadow: 0rpx 0rpx 3vw 0rpx rgba(38,137,255,0.44) inset;
-			// 	color: rgba(108, 132, 160, 1) !important;
-			// 	animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
-			// 	transform-origin: center center;
-			// }
-
-			.grad-text {
-				background: linear-gradient(90deg, #5b8bb3, #87a1bd);
-				background-size: 200% 100%;
-				background-position: 0% 50%;
-				-webkit-background-clip: text;
-				background-clip: text;
-				-webkit-text-fill-color: transparent;
-				transition: background-position 0.8s linear;
-			}
-
-			@keyframes scalePulse {
-				0% {
-					transform: scale(1);
-				}
-
-				25% {
-					transform: scale(0.94);
-				}
-
-				65% {
-					transform: scale(1.08);
-				}
-
-				100% {
-					transform: scale(1);
-				}
-			}
-		}
-
-		.wareaitem-item {
+		.all-home {
 			width: 100%;
 			height: 100%;
-			position: fixed;
-			top: 0;
-			left: -2vw;
-
-
-			.itemact1 {
-				width: 29vw;
-				height: 21vw;
-				top: 23vw;
-				left: 6vw;
-				z-index: 31;
-			}
-
-			.itemact2 {
-				width: 26vw;
-				height: 16vw;
-				top: 15vw;
-				left: 41vw;
-				z-index: 27;
-			}
-
-			.itemact4 {
-				width: 24vw;
-				height: 16vw;
-				top: 28vw;
-				left: 46vw;
-				z-index: 55;
-			}
-
-			.itemact3 {
-				width: 17vw;
-				height: 13vw;
-				top: 22vw;
-				left: 67vw;
-				z-index: 36;
-			}
-
-
-			.wclik {
-				width: 22vw;
-				height: 14vw;
-				top: 16vw;
-				left: 44vw;
-				z-index: 47;
-			}
-
-			.gifs {
-				width: 41vw;
-				height: 20vw;
-				top: 21.6vw;
-				left: 27.5vw;
-				z-index: 29;
-			}
-
-			.ys {
-				width: 11vw;
-				height: 8vw;
-				top: 24.2vw;
-				left: 57.9vw;
-				z-index: 28;
-			}
-
-			.wareitem1 {
-				width: 86vw;
-				height: 44vw;
-				top: 1vw;
-				left: 10.5vw;
-				z-index: 15;
-			}
-
-			.wareitem4 {
-				width: 11vw;
-				height: 7vw;
-				top: 30.9vw;
-				left: 60vw;
-			}
-
-			.wareitem6 {
-				width: 17vw;
-				height: 12vw;
-				top: 28vw;
-				right: -2vw;
-				z-index: 35;
-			}
-
-			.wareitem5 {
-				width: 18vw;
-				height: 15vw;
-				top: 37vw;
-				left: 73vw;
-				z-index: 35;
-			}
-
-			.wareitem8 {
-				width: 26vw;
-				height: 8vw;
-				top: 29.7vw;
-				left: 21.8vw;
-			}
-
-			.wareitem11 {
-				width: 3vw;
-				height: 3vw;
-				top: 24.5vw;
-				left: 60vw;
-				z-index: 35;
-			}
-
-			.wareitem10 {
-				width: 55vw;
-				height: 27vw;
-				top: 38vw;
-				left: 20vw;
-				z-index: 36;
-			}
-
-			>view {
-				position: absolute;
-			}
 
 		}
-
-		.annotation1 {
-			top: 21.5vw;
-			left: 19.5vw;
-		}
-
-		.annotation2 {
-			top: 13vw;
-			left: 47vw;
-		}
-
-		.annotation3 {
-			top: 18vw;
-			left: 70vw;
-		}
-
-		.annotation4 {
-
-			top: 24vw;
-			left: 49.3vw;
-		}
-
-		.annotation5 {
-			top: 34vw;
-			left: 74vw;
-		}
-
-		.annotation6 {
-			top: 24vw;
-			right: 6vw;
-		}
-
-		.annotation7 {
-			top: 62vh;
-			left: 40vw;
-		}
-
-		.annotation8 {
-			top: 5vh;
-			left: 28vw;
-		}
-
-		// title
-		.annotation {
-			width: 7vw;
-			height: 8vw;
-			z-index: 20;
-			position: fixed;
-			
-
-			>view {
-				position: relative;
-
-				&:nth-child(2) {
-					width: 7.8vw;
-					height: 3.5vw;
-					z-index: 2;
-
-					margin-left: -10rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-radius: 0.8vw 0.8vw 1.5vw 1.5vw;
-					overflow: hidden;
-
-
-					image {
-						position: absolute;
-						top: 0;
-						left: 0;
-					}
-
-					text {
-						position: relative;
-						font-weight: 400;
-						font-size: 1.1vw;
-						color: #fff;
-						z-index: 3;
-						margin-top: -0.5vw;
-					}
-				}
-
-				&:nth-child(3) {
-					width: 3vw;
-					height: 5vw;
-					z-index: 1;
-					margin: -1vw auto 0;
-				}
-			}
-		}
-
 	}
 
-	.zhanwei {
-		position: absolute;
-		top: 40vh;
-		right: 3vw;
-		width: 13vw;
-		height: 13vw;
+	.tp {
+		image {
+			width: 100%;
+			height: 100%;
+		}
 	}
-	.content-title{
-		position: absolute;
-		top: 100rpx;
-		left: 50rpx;
+
+	.paizi {
+		width: 18vw;
+		height: 18vw;
+		position: fixed;
+		bottom: 0.3vw;
+		left: 10vw;
+	}
+
+	.jiankong {
+		width: 17vw;
+		height: 17vw;
+		position: fixed;
+		top: 1.5vw;
+		left: 12vw;
+		z-index: 50;
+	}
+
+	.wanjie {
+		width: 18vw;
+		height: 18vw;
+		position: fixed;
+		top: 19vw;
+		left: 12vw;
+		z-index: 50;
+	}
+
+	.pandan {
+		width: 9.3vw;
+		height: 9.3vw;
+		position: fixed;
+		top: 23vw;
+		left: 29vw;
+		z-index: 50;
+	}
+
+	.caigou {
+		width: 18vw;
+		height: 18vw;
+		position: fixed;
+		top: 34vw;
+		left: 37vw;
+		z-index: 50;
+	}
+
+	.ruku {
+		width: 11vw;
+		height: 11vw;
+		position: fixed;
+		bottom: 9vw;
+		right: 17vw;
+		z-index: 50;
+	}
+
+	.chuku {
+		width: 11vw;
+		height: 11vw;
+		position: fixed;
+		bottom: 20.5vw;
+		right: 2.5vw;
+		z-index: 50;
+	}
+
+	.return {
+		width: 7vw;
+		height: 7vw;
+		position: fixed;
+		bottom: 8.8vw;
+		right: 25vw;
+		z-index: 50;
+	}
+
+	.lead {
+		width: 7vw;
+		height: 7vw;
+		position: fixed;
+		bottom: 20vw;
+		right: 10vw;
+		z-index: 50;
+	}
+
+	.jianhuo {
+		width: 40vw;
+		height: 40vw;
+		position: fixed;
+		top: 0vw;
+		right: 23vw;
+		z-index: 50;
+	}
+
+	.picking {
+		width: 12vw;
+		height: 12vw;
+		position: fixed;
+		top: 24vw;
+		right: 27vw;
+		z-index: 50;
+	}
+
+	.blue-bgc {
+		background: linear-gradient(to right, #0385fa, #0195f3);
+		border: 1rpx solid #fff;
+		width: 6.2vw;
+		height: 2.8vw;
+		font-size: 28rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2vw;
+		color: #fff;
+		position: relative;
+
+		.triangle-middle {
+			position: absolute;
+			top: 2.6vw;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 0;
+			height: 0;
+			border-left: 0.5vw solid transparent;
+			border-right: 0.5vw solid transparent;
+			border-top: 0.5vw solid #0385fa;
+		}
+
+		.triangle-left-bgc {
+			position: absolute;
+			top: 2.68vw;
+			left: 1.17vw;
+			width: 0;
+			height: 0;
+
+			/* 左上是直角的三角形 —— 只要两个边有颜色 */
+			border-top: 0.45vw solid #0385fa;
+			/* 上边  */
+			border-left: 0.55vw solid #0385fa;
+			/* 左边  */
+
+			/* 另外两个边透明（保持三角形形状） */
+			border-right: 0.55vw solid transparent;
+			border-bottom: 0.55vw solid transparent;
+		}
+	}
+
+	.gray-bgc {
+		background: #e4efff;
+		border: 1rpx solid #60a1ff;
+		width: 7.5vw;
+		height: 2.8vw;
+		font-size: 26rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2vw;
+		color: #0385fa;
+		position: relative;
+
+
+		.triangle-left-bgc {
+			position: absolute;
+			top: 2.68vw;
+			left: 1.17vw;
+			width: 0;
+			height: 0;
+
+			/* 左上是直角的三角形 —— 只要两个边有颜色 */
+			border-top: 0.45vw solid #60a1ff;
+			/* 上边  */
+			border-left: 0.55vw solid #60a1ff;
+			/* 左边  */
+
+			/* 另外两个边透明（保持三角形形状） */
+			border-right: 0.55vw solid transparent;
+			border-bottom: 0.55vw solid transparent;
+		}
+
+		.triangle-left {
+			position: absolute;
+			top: 2.68vw;
+			left: 1.2vw;
+			width: 0;
+			height: 0;
+
+			/* 左上是直角的三角形 —— 只要两个边有颜色 */
+			border-top: 0.4vw solid #e4efff;
+			/* 上边  */
+			border-left: 0.5vw solid #e4efff;
+			/* 左边  */
+
+			/* 另外两个边透明（保持三角形形状） */
+			border-right: 0.5vw solid transparent;
+			border-bottom: 0.5vw solid transparent;
+			z-index: 1;
+		}
+	}
+
+	.jiankongtag {
+		position: fixed;
+		top: 2.8vw;
+		left: 16vw;
+		z-index: 51;
+
+		.blue-imge {
+			position: absolute;
+			top: 2.2vw;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 3vw;
+			height: 5vw;
+		}
+	}
+
+	.pickingtag {
+		position: fixed;
+		top: 24vw;
+		left: 67vw;
+		z-index: 51;
+
+		.blue-imge {
+			position: absolute;
+			top: 2.2vw;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 3vw;
+			height: 5vw;
+		}
+	}
+
+	.wanjietag {
+		position: fixed;
+		top: 22vw;
+		left: 18vw;
+		z-index: 51;
+
+		.blue-imge {
+			position: absolute;
+			top: 2.2vw;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 3vw;
+			height: 5vw;
+		}
+	}
+
+	.caigoutag {
+		position: fixed;
+		top: 36vw;
+		left: 42vw;
+		z-index: 51;
+
+		.blue-imge {
+			position: absolute;
+			top: 2.2vw;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 3vw;
+			height: 5vw;
+		}
+	}
+
+	.pandantag {
+		position: fixed;
+		top: 22vw;
+		left: 35.5vw;
+		z-index: 51;
+	}
+
+	.returntag {
+		position: fixed;
+		top: 32.5vw;
+		left: 84vw;
+		z-index: 51;
+	}
+
+	.leadtag {
+		position: fixed;
+		top: 44vw;
+		left: 71vw;
+		z-index: 51;
+	}
+
+	.right-title {
+		position: fixed;
+		right: 2vw;
+		top: 3vw;
 		display: flex;
 		align-items: center;
-		.title-imge{
-			width: 60rpx;
-			height: 60rpx;
+
+		.title-imge {
+			width: 1.8vw;
+			height: 1.8vw;
+			margin-right: 0.5vw;
+			// margin-top: -0.3vw;
 		}
-		.title-font{
-			margin-left: 10rpx;
-			font-size: 35rpx;
+
+		.title-font {
+			font-size: 32rpx;
+			// margin-left: 3vw;
 			font-weight: 600;
+
 		}
 	}
-	// .white-dang{
-	// 	position: fixed;
-	// 	width: 450rpx;
-	// 	height: 50rpx;
-	// 	bottom: 100rpx;
-	// 	left: 550rpx;
-	// 	background-color: #fff;
-	// 	 transform: rotate(20deg);
-	// 	    transform-origin: left center;
-	// }
+
+	// <view class="right-title">
+	// 	<image class="title-imge" src="/static/index/indeximage.png" mode="aspectFit"></image>
+	// 	<view class="title-font">
+	// 		{{ uni.getStorageSync('nuName') }}
+	// 	</view>
+	// </view>
 </style>
\ No newline at end of file