<template>
	<view class="listnav">
		<view v-for="(el,ind) in list" :class="['navli',info.ind==el.ind?'act':'']" @click="clickli(el.ind,el.url)">
			<image class="icon" v-if="info.ind==el.ind" :src="getImg(el.icon)" mode="aspectFill" lazy-load="true"></image>
			<view class="title">{{el.name}}</view>
		</view>
		<view  class="navli">
			<image class="lsimg" :src="getImg('ysxcx-img-ys.png')" mode="aspectFill" lazy-load="true"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:["info"],
		data() {
			return {
				list:[
					{ind:0,name:'虞·赏味',url:'ctgid=1&ind=0',icon:'ysxcx-dhlm1.png'},
					{ind:1,name:'虞·深味',url:'ctgid=2&ind=1',icon:'ysxcx-dhlm2.png'},
					{ind:2,name:'虞·民宿',url:'ctgid=164&ind=2',icon:'ysxcx-dhlm2.png'},
					{ind:3,name:'虞·趣味',url:'id=78&ind=3',icon:'ysxcx-dhlm3.png'},
					{ind:4,name:'虞·滋味',url:'ctgid=3&ind=4',icon:'ysxcx-dhlm4.png'},
					{ind:5,name:'虞·韵味',url:'ctgid=162&ind=5',icon:'ysxcx-dhlm5.png'},
					{ind:6,name:'虞·风味',url:'ctgid=173&ind=6',icon:'ysxcx-dhlm6.png'}
					
				]
			};
		},
		onLoad() {
			
		},
		methods: {
			getUrl(url) {
				return 'https://cs.tour-ma.com/' + url;
			},
			getImg(url) {
				return 'https://cs.tour-ma.com/r/cms/www/m/yushan/' + url;
			},
			clickli(ind,url){
				this.$emit('getId',{
					url:url
				})
				// uni.navigateTo({
				// 	url:url
				// })
			}
		}
	};
</script>

<style>
	.listnav{
		width: 88upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
	}
	.listnav .navli{
		width: 100%;
		height: 170upx;
		background: url(https://cs.tour-ma.com/r/cms/www/m/yushan/ysxcx-img-dhk00.jpg) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.listnav .navli.act{
		height: 213upx;
		background: url(https://cs.tour-ma.com/r/cms/www/m/yushan/ysxcx-img-dhk2.jpg) no-repeat;
		background-size: 100% 100%;
	}
	.listnav .navli .icon{
		width: 30upx;
		height: 30upx;
		margin-left: 20upx;
		border-radius: 50%;
		margin-bottom: 10upx;
	}
	.listnav .navli .title{
		color: #7A7671;
		font-size: 26upx;
		width: 26upx;
		margin: 0 auto;
		line-height: 32upx;
		text-align: center;
		margin-left: 40upx;
		font-family: 'TpldKhangXiDictTrial';
	}
	.listnav .navli.act .title{
		color: #FFFFFF;
	}
	.listnav .navli .lsimg{
		width: 24upx;
		height: 157upx;
		margin-left: 40upx;
	}
	
</style>
