<template>
	<view>
		<u-sticky bgColor="#fff">
		  <u-tabs :list="categoryList" :scrollable="false" @click="changeCategory"></u-tabs>
		</u-sticky>
		<view class="p14">
			<view class="flex ai-c" v-if="carTypeList&&carTypeList.length">
				<view class="car_item mr10" v-for="(item,index) of carTypeList" :key="index" @tap="chooseCar(item.value)" :class="item.value===tCar?'checked_car':'unchecked_car'">{{item.label}}</view>
			</view>
			<view class="flex p14 bc-fff" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index" @tap="toDetail">
				<image class="pic" src="../../static/image/index/index_bg.png"></image>
				<view class="ml10" style="width: calc(100% - 320rpx);">
					<text class="fs16 cor-000 fw600">八一考场</text>
					<view class="fs14 mt40 cor-666 flex jc-sb ai-c wp100" >
						<text>共9条路线视频</text>
						<text>蜀山区</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				tCar:0,
				categoryList:[{
					name:'全部'
				},{
					name:'蜀山区'
				},{
					name:'长丰县'
				},{
					name:'瑶海区'
				},{
					name:'肥东县'
				},{
					name:'庐江县'
				}],
				carTypeList:[],
				videoList:[{
					label:"111"
				},{
					label:'222'
				},{
					label:'333'
				},{
					label:'444'
				}]
			}
		},
		methods:{
			chooseCar(val){
				this.tCar=val
			},
			changeCategory(val){
				
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/questionBank/videoDetail?type=test'
				})
			}
		}
		}
</script>

<style scoped>
	::v-deep .u-tabs__wrapper__nav__line {
			background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
			bottom: 14rpx !important;
		}
		.car_item{
			font-size: 28rpx;
			padding:0 34rpx;
		  height: 58rpx;
			line-height: 58rpx;
			border-radius: 29rpx;
		}
		.checked_car{
			background-color: #05C341;
			color: #fff;
		}
		.unchecked_car{
			border: 1px solid #DDD;
			color: #666;
			box-sizing: border-box;
		}
		.pic{
			width: 300rpx;
			height: 169rpx;
			background: #00B74F;
			border-radius: 8rpx;
		}
		::v-deep .u-tabs__wrapper__nav__item{
			padding: 0 !important;
		}
</style>