szgb-book-wx/packages/dl/index.vue

<template>
	<view class="container">
		<view class="nav">
			<view v-for="(item,index) in list" @click="towhere(index)">
				<view class="imgs">
					<img :src="item.icon" alt="" v-if="!item.show" :style="{'width':item.width,'height':item.height}">
					<img :src="item.icon1" alt="" v-else :style="{'width':item.width,'height':item.height}">
				</view>
				<view :class="item.show?'textscur':'texts'">{{item.text}}</view>
			</view>
		</view>
		<view class="bg">
			<movable-area  class="bg">
				<movable-view class="bg" scale out-of-bounds direction="all">
					<img :src="bg" alt="" class="bgs">
					
					<view v-for="(item,index) in curlist">
							<block v-for="(m,i) in item">
								<uni-transition duration="1500" ref="ani" custom-class="transition"
								:show="index === currentIndex">
									<img :src="m.icon" alt="" :style="{'top':m.top,'left':m.left,'right':m.right}" class="curs">
								</uni-transition>
								<!-- <u-transition :show="true" mode="fade" duration='1000'>
									<img :src="dl_cur" alt="" :style="{'top':m.top,'left':m.left,'right':m.right}" class="curs">
								</u-transition> -->
							</block>
						
					</view>
				</movable-view>
			</movable-area>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg: require("./static/dl/dlbg.png"),
				// dl_cur: require("./static/dl/dl_cur.png"),
				currentIndex: '',
				isshow:true,
				curlist: [
					[{
						'top': '192rpx',
						'left': '16rpx',
						'right': '',
						'icon': require("./static/dl/dl_cur1.png")
					}, {
						'top': '154rpx',
						'right': '7rpx',
						'left': '',
						'icon': require("./static/dl/dl_cur2.png")
					}, {
						'top': '234rpx',
						'right': '7rpx',
						'left': '',
						'icon': require("./static/dl/dl_cur4.png")
					}],
					[{
						'top': '200rpx',
						'right': '46rpx',
						'left': '',
						'icon': require("./static/dl/dl_cur3.png")
					}],
					[{
						'top': '334rpx',
						'left': '',
						'right': '241rpx',
						'icon': require("./static/dl/dl_cur5.png")
					}],
					[{
						'top': '334rpx',
						'left': '249rpx',
						'right': '',
						'icon': require("./static/dl/dl_cur6.png")
					}],
				],
				list: [{
					text: '卫生间',
					icon: require("./static/dl/dl1.png"),
					icon1: require("./static/dl/dl1_cur.png"),
					show: false,
					width: '50rpx',
					height: '50rpx'
				}, 
				// {
				// 	text: '楼梯',
				// 	icon: require("./static/dl/dl2.png"),
				// 	icon1: require("./static/dl/dl2_cur.png"),
				// 	show: false,
				// 	width: '44rpx',
				// 	height: '44rpx'
				// }, 
				{
					text: '电梯',
					icon: require("./static/dl/dl3.png"),
					icon1: require("./static/dl/dl3_cur.png"),
					show: false,
					width: '64rpx',
					height: '64rpx'
				}, 
				// {
				// 	text: '卫生间',
				// 	icon: require("./static/dl/dl4.png"),
				// 	icon1: require("./static/dl/dl4_cur.png"),
				// 	show: false,
				// 	width: '38rpx',
				// 	height: '46rpx'
				// }, 
				{
					text: '服务台',
					icon: require("./static/dl/dl5.png"),
					icon1: require("./static/dl/dl5_cur.png"),
					show: false,
					width: '50rpx',
					height: '50rpx'
				}, {
					text: '休息区',
					icon: require("./static/dl/dl6.png"),
					icon1: require("./static/dl/dl6_cur.png"),
					show: false,
					width: '64rpx',
					height: '64rpx'
				}, 
				// {
				// 	text: '出入口',
				// 	icon: require("./static/dl/dl7.png"),
				// 	icon1: require("./static/dl/dl7_cur.png"),
				// 	show: false,
				// 	width: '38rpx',
				// 	height: '38rpx'
				// },
				]
			}
		},
		methods: {
			towhere(index) {

				this.list.map((item, i) => {
					item.show = false
					if (index == i) {
						item.show = !item.show
						this.currentIndex = item.show ? index : ''
						// this.ishow = true
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5ede6;
		min-height: 100vh;
		padding-top: 30rpx;
	}

	.nav {
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		/* border:1px solid #ddd; */
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.5);
		margin: 0 20rpx;
		padding: 30rpx 15rpx;
		margin-bottom: 80rpx;
		border-radius: 10rpx;
		z-index:9999;
		position: relative;
	}

	.nav>view {
		text-align: center;
	}

	.nav>view .imgs {
		height: 64rpx;
	}

	.nav>view img {
		vertical-align: middle;
		display: inline-block;
	}

	.nav>view .texts {
		color: #333;
		font-size: 24rpx;
	}

	.nav>view .textscur {
		color: #cf995a;
		font-size: 24rpx;
	}

	.bg {
		width: 100%;
		height: 711rpx;
		position: relative;
	}

	.bg img.bgs {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bg img.curs {
		width: 132rpx;
		height: 170rpx;
		position: absolute;
		z-index: 999;
		opacity:0.9;
/* 		top:0;
		left:0;
		right:0 */
	}

</style>