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.
jwl-applet/src/pages/questionBank/baseOperate.vue

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>