<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">
			<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="dl_cur" 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>
		</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': '268rpx',
						'left': '13rpx',
						'right': ''
					}, {
						'top': '268rpx',
						'right': '10rpx',
						'left': ''
					}, {
						'top': '320rpx',
						'right': '10rpx',
						'left': ''
					}],
					[{
						'top': '290rpx',
						'right': '50rpx',
						'left': ''
					}],
					[{
						'top': '424rpx',
						'left': '',
						'right': '265rpx',
					}],
					[{
						'top': '424rpx',
						'left': '266rpx',
						'right': '',
					}],
				],
				list: [{
					text: '卫生间',
					icon: require("./static/dl/dl1.png"),
					icon1: require("./static/dl/dl1_cur.png"),
					show: false,
					width: '42rpx',
					height: '46rpx'
				}, 
				// {
				// 	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: '38rpx',
					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: '44rpx',
					height: '38rpx'
				}, {
					text: '休息区',
					icon: require("./static/dl/dl6.png"),
					icon1: require("./static/dl/dl6_cur.png"),
					show: false,
					width: '54rpx',
					height: '38rpx'
				}, 
				// {
				// 	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;
	}

	.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: 80rpx;
		height: 80rpx;
		position: absolute;
		z-index: 999;
/* 		top:0;
		left:0;
		right:0 */
	}

</style>