<template>
	<view>
		<j-navbar>基本操作</j-navbar>
		<u-sticky bgColor="#fff">
		  <u-tabs :list="categoryList" :scrollable="false" @click="changeCategory"></u-tabs>
		</u-sticky>
		<view class="p14">
			<!-- <view class="flex ai-c">
				<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 mt10" 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">
					<text class="fs16 cor-000 fw600">上车、下车的方法</text>
					<view class="fs14 mt5 cor-666">上车、下车的方法</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				tCar:0,
				categoryList:[{
					name:'手动挡C1'
				},{
					name:'自动挡C2'
				}],
				carTypeList:[{
					label:'捷达',
					value:0
				},{
					label:'新桑塔纳',
					value:1
				},{
					label:'爱丽舍',
					value:2
				}],
				videoList:[{
					label:"111"
				},{
					label:'222'
				},{
					label:'333'
				},{
					label:'444'
				}]
			}
		},
		methods:{
			chooseCar(val){
				this.tCar=val
			},
			changeCategory(val){
				
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/questionBank/videoDetail'
				})
			}
		}
		}
</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;
		}
</style>