<template>
	<view class="venue-navbar">
		<view class="navbar-list" v-for="(item,index) in navbarList" :key="index" @click="select_nav(index)">
			<view class="list-text">{{item.text}}</view>
			<image :src="sel_index==index?'/static/notsel-icon.png':'/static/select-icon.png'" mode=""></image>
		</view>
	</view>
	<view style="height: 70rpx;"></view>
	<view class="content">
		<view class="select-btn">
			<view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList" :key="index" @click="select_btn(index)">{{item}}</view>
		</view>
		<view class="t-card-list" v-for="item in 3">
			<view class="t-courseImg">
				<image src="https://img95.699pic.com/photo/60010/7623.jpg_wh860.jpg" mode=""></image>
			</view>
			<view class="t-course">
				<view class="c-title textHidden">1对1篮球30分钟室内精品30分钟室内精品</view>
				<view class="c-address">上课地点观山湖区万达广场 | 2.2km</view>
				<view class="c-price">￥25.9</view>
				<view class="c-ratio">已售37  98%好评</view>
				<view class="c-class">6课时 05.06-05.11</view>
				<view class="c-icon">
					<image src="/src/static/snapped.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const navbarList = ref([{
		text: '全部'
	}, {
		text: '学校'
	}, {
		text: '体育馆'
	}]);
	const selectList=ref(['距离','好评','销量'])
	const sel_index = ref(0);
	const sel_btn=ref(0);
	
	const select_btn=(i)=>{
		sel_btn.value=i
	}
	const select_nav = (i) => {
		sel_index.value = i
	}
</script>

<style lang="less" scoped>
	.venue-navbar {
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
		.navbar-list {
			display: flex;
			align-items: center;
			gap: 10rpx;
	
			.list-text {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}
	
			&>image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.select-btn{
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-top: 20rpx;
		.distance{
			width: 92rpx;
			height: 48rpx;
			background: #222222;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #C8FF0C;
			line-height:48rpx;
			text-align: center;
		}
		.score{
			width: 92rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #AAAAAA;
			height: 48rpx;
			line-height:48rpx;
			text-align: center;
		}
	}
	.t-card-list{
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-top: 20rpx;
		.t-courseImg{
			&>image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
			}
		}
		.t-course{
			position: relative;
			.c-title{
				width: 430rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
				line-height: 52rpx;
			}
			.c-address{
				margin-top: 4rpx;
				font-size: 22rpx;
				color: #AAAAAA;
			}
			.c-price{
				font-weight: 800;
				font-size: 32rpx;
				color: #FB5B5B;
				height: 44rpx;
				line-height: 44rpx;
			}
			.c-ratio{
				font-size: 22rpx;
				color: #222222;
				height: 32rpx;
				line-height: 32rpx;
			}
			.c-class{
				font-size: 22rpx;
				color: #AAAAAA;
				height: 32rpx;
				line-height: 32rpx;
			}
			.c-icon{
				position: absolute;
				bottom:-30rpx;
				right:-42rpx;
				&>image{
					width:161rpx;
				}
			}
		}
	}
</style>