<template>
	<div class="bg">
		<div class="item" v-for="(item,index) in list" :key="index">
			<img :src="util.showImg(item.image)" alt="" />
			
			<div class="content">
				<div class="title">{{item.name}}</div>
				<div class="subtitle">{{item.points.length}}个景点</div>
				<div class="tags" v-if="item.goods_new_tag">
					<div class="tag" v-for="(tagItem,tagIndex) in item.goods_new_tag.split(',').slice(0,2)">{{tagItem}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			// 根据code获取推荐线路
			getList() {
				this.post({
					code: this.$route.query.code
				},'/api/emap/getLineByCode').then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		background: #F7F7F7;
		padding-top: 31px;
	}
	
	.item {
		width: 697px;
		height: 240px;
		background: #FFFFFF;
		box-shadow: 0px 1px 16px 0px rgba(153,153,153,0.35);
		border-radius: 20px;
		margin: 0 auto 33px;
		padding: 13px;
		display: flex;
		
		img {
			object-fit: cover;
			width: 213px;
			height: 213px;
			border-radius: 13px;
		}
		
		.content {
			margin-left: 25px;
			padding: 15px 0;
			width: 410px;
			
			.title {
				font-weight: bold;
				font-size: 33px;
				color: #111111;
			}
			
			.subtitle {
				margin-top: 8px;
				font-weight: 500;
				font-size: 27px;
				color: #666666;
			}
			
			.tags {
				display: flex;
				margin-top: 15px;
				
				.tag {
					font-weight: 500;
					font-size: 23px;
					color: #71B580;
					line-height: 40px;
					border-radius: 5px;
					border: 1px solid #69AF78;
					padding: 0 12px;
					margin-right: 13px;
				}
			}
		}
	}
</style>