<template>
	<view class="dingzhi">
		<view class="dingzhi-navbar">
			<u-navbar title="旅行手册" :background="background"></u-navbar>
		</view>
		<view class="dingzhi-hd">
			<image class="banner" src="@/static/lvyou/shouce-01.png"></image>
		</view>
		<view class="dingzhi-bd">
			<view class="tab">
				<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">全部手册</view>
				<view class="item" :class="tabIndex == 2?'item-on':''" @click="tabItem(2)">热销套餐</view>
			</view>
			<view class="content">
				<view class="item" v-for="a in 10" :key="a">
					<image src="@/static/lvyou/shouce-02.png"></image>
					<view class="title">川藏318：典藏级旅行手册</view>
					<view class="desc"><view class="tag">赠品</view>旅行手册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 1,
				tabIndex: 1,
				background: {
					// 导航栏背景图
					background: 'url(https://api.lyiyuan.cn/profile/upload/2024/12/27/e6a2fc9f509d5d110ba139f02e6883ac.png) center top no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: '100% auto',
				},
			};
		},
		methods: {
			tabItem(index){
				this.tabIndex = index;
			},
		}
	}
</script>
<style scoped lang="scss">
.dingzhi{
	min-height: 100vh;
	background: url(https://api.lyiyuan.cn/profile/upload/2024/12/27/e6a2fc9f509d5d110ba139f02e6883ac.png) center top no-repeat;
	background-size: 100% auto;
	&-hd{
		width: 100%;
		text-align: center;
		image{
			width: 700rpx;
			height: 470rpx;
			margin-top: 350rpx;
		}
		
	}
	&-bd{
		overflow: hidden;
		.tab{
			padding: 35rpx 0;
			display: flex;
			align-items: center;
			.item{
				width: 200rpx;
				position: relative;
				font-weight: 500;
				font-size: 30rpx;
				color: #666666;
				text-align: center;
				&-on{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					&::after{
						content: "";
						width: 80rpx;
						height: 8rpx;
						background: #FF731C;
						border-radius: 8rpx;
						position: absolute;
						left: 50%;
						margin-left: -40rpx;
						bottom: -20rpx;
						z-index: 2;
					}
				}
			}
		}
		.content{
			padding: 0 25rpx;
			overflow: hidden;
			.item{
				width: 340rpx;
				float: left;
				margin-bottom: 20rpx;
				&:nth-child(2n){
					margin-left: 20rpx;
				}
				image{
					width: 340rpx;
					height: 340rpx;
					border-radius: 20rpx;
				}
				.title{
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					line-height: 48rpx;
					height: 96rpx;
					overflow: hidden;
					margin-top: 20rpx;
				}
				.desc{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					.tag{
						width: 70rpx;
						line-height: 40rpx;
						background: #F3F4F5;
						border-radius: 10rpx;
						border: 1px solid #FF731C;
						display: block;
						margin-right: 20rpx;
						text-align: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #FF731C;
					}
				}
			}
		}
	}
}
</style>
