You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.0 KiB
96 lines
2.0 KiB
2 years ago
|
<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>
|