<template>
	<view class="bg">
		<navigator :url="'/subPackages/line/detail?id=' + item.id" v-for="(item,index) in list" :key="index" class="item">
			<image :src="showImg(item.image)" mode="aspectFill" class="item-img"></image>
			<view class="item-content flex-column">
				<view class="title text-overflowRows">{{item.title}}</view>
				<view class="tags">
					<view v-for="(tagItem,tagIndex) in item.goods_new_tag.split(',').slice(0,3)" :key="tagIndex" class="tag">
						{{tagItem}}
					</view>
				</view>
				<view class="flex-between">
					<view class="price">{{item.money / 100}}</view>
					<view class="btn">预订</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		onReady() {
			this.getList()
		},
		methods: {
			getList() {
				this.Post({
					type_id: 1,
					offset: 0,
					limit: 100
				},'/api/goods/getGoodsByType').then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F9F5F0;
		padding: 27rpx 26rpx 100rpx;
	}
	
	.item {
		margin-bottom: 26rpx;
		height: 547rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		border: 1rpx solid #96684F;
		padding: 21rpx;
		
		.item-img {
			width: 653rpx;
			height: 319rpx;
		}
		
		.item-content {
			height: 178rpx;
			justify-content: space-between;
			
			.title {
				font-weight: bold;
				font-size: 31rpx;
				color: #333333;
			}
			.tags {
				display: flex;
				
				.tag {
					font-weight: 500;
					font-size: 24rpx;
					color: #96684F;
				}
				.tag:not(:first-child)::before {
					content: '丨';
				}
			}
			
			.price {
				font-weight: bold;
				font-size: 34rpx;
				color: #DC2525;
			}
			.price::before {
				font-size: 23rpx;
				font-weight: 500;
				content: '￥';
			}
			.price::after {
				font-size: 23rpx;
				font-weight: 500;
				content: '起';
				color: rgba(153, 153, 153, 1);
			}
			
			.btn {
				width: 133.33rpx;
				line-height: 53.33rpx;
				text-align: center;
				background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/btnBg.png');
				background-size: 100% 100%;
				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
			}
		}
	}
</style>