pull/4/head
parent
d76bff73ae
commit
bb3fb81962
@ -0,0 +1,144 @@ |
||||
<template> |
||||
<view> |
||||
<view class="cu-custom" :style="[{ height: customBar + 'px' }]"> |
||||
<view class="cu-bar u-flex u-row-between" :class="{ fixed: isFixed }" :style="[style]"> |
||||
<view class="action u-flex" @tap="goBack" v-if="isBack"> |
||||
<u-icon customStyle="padding: 6rpx;" :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon> |
||||
<view class="u-back-text u-line-1 u-m-l-20" v-if="backText" :style="[backTextStyle]">{{ backText || '' }}</view> |
||||
</view> |
||||
<slot name="left"></slot> |
||||
<view class="content fs32 fwb" :style="[{ top: statusBarHeight + 'px' }]"><slot></slot></view> |
||||
<view class="right"> |
||||
<slot name="right"></slot> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
/** |
||||
* jtools-navbar -自定义标题栏 |
||||
* @property {Boolean} isBack = [true] - 是否显示返回按钮 |
||||
* @property {Booelan} isFixed = [true] - 是否开启定位 |
||||
*/ |
||||
|
||||
// 获取系统状态栏的高度 |
||||
let systemInfo = uni.getSystemInfoSync(); |
||||
let menuButtonInfo = {}; |
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ |
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect(); |
||||
// #endif |
||||
export default { |
||||
name: 'jtools-tabbar', |
||||
data() { |
||||
return { |
||||
statusBarHeight: systemInfo.statusBarHeight |
||||
}; |
||||
}, |
||||
computed: { |
||||
// tabbar样式 |
||||
style() { |
||||
let statusBarHeight = systemInfo.statusBarHeight; |
||||
let style = {}; |
||||
style.height = `${this.customBar}px`; |
||||
style.paddingTop = `${statusBarHeight}px`; |
||||
Object.assign(style, this.background); |
||||
return style; |
||||
}, |
||||
// 高度 |
||||
customBar() { |
||||
let statusBarHeight = systemInfo.statusBarHeight; |
||||
// #ifndef MP |
||||
return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45; |
||||
// #endif |
||||
// #ifdef MP-WEIXIN |
||||
return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight; |
||||
// #endif |
||||
// #ifdef MP-ALIPAY |
||||
return statusBarHeight + systemInfo.titleBarHeight; |
||||
// #endif |
||||
} |
||||
}, |
||||
props: { |
||||
isBack: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
isFixed: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
background: { |
||||
type: Object, |
||||
default() { |
||||
return { |
||||
background: '#fff' |
||||
}; |
||||
} |
||||
}, |
||||
// 返回箭头的颜色 |
||||
backIconColor: { |
||||
type: String, |
||||
default: '#333' |
||||
}, |
||||
// 左边返回的图标 |
||||
backIconName: { |
||||
type: String, |
||||
default: 'arrow-left' |
||||
}, |
||||
// 左边返回图标的大小，rpx |
||||
backIconSize: { |
||||
type: [String, Number], |
||||
default: '20' |
||||
}, |
||||
// 返回的文字提示 |
||||
backText: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
// 返回的文字的 样式 |
||||
backTextStyle: { |
||||
type: Object, |
||||
default() { |
||||
return { |
||||
color: '#000' |
||||
}; |
||||
} |
||||
}, |
||||
backPath: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
methods: { |
||||
goBack() { |
||||
if(this.backPath) { |
||||
this.$tools.routerTo(this.backPath) |
||||
} else { |
||||
uni.navigateBack(); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.cu-custom { |
||||
width: 100%; |
||||
} |
||||
.cu-bar { |
||||
width: 100%; |
||||
.content { |
||||
// width: 350rpx; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex: 1; |
||||
align-items: center; |
||||
pointer-events: auto; |
||||
justify-content: center; |
||||
color: #333; |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,96 @@ |
||||
<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> |
||||
@ -0,0 +1,109 @@ |
||||
<template> |
||||
<view class="p14"> |
||||
<view class="flex jc-sb"> |
||||
<view class="relative mr5"> |
||||
<image style="width: 336rpx;height: 152rpx;" src="../../static/image/practice/errorprone_bg.png"> |
||||
</image> |
||||
<view style="position: absolute;left: 0;top: 0;" class="p10"> |
||||
<view style="color: #04B13B;font-size: 18px;">图表技巧</view> |
||||
<text style="color: #04B13B;font-size: 14px;">快速记忆</text> |
||||
</view> |
||||
</view> |
||||
<view class="relative ml5"> |
||||
<image style="width: 363rpx;height: 170rpx;" src="../../static/image/practice/chapter_bg.png"></image> |
||||
<view style="position: absolute;left: 0;top: 0;" class="p10"> |
||||
<view style="color: #FF6E02;font-size: 18px;">章节练习</view> |
||||
<text style="color: #FF6E02;font-size: 14px;">共5章</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="bc-fff pt14" style="border-radius: 20rpx;"> |
||||
<u-grid :border="false" col="4"> |
||||
<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="toAnswer(listItem.title)"> |
||||
<view style="width: 84rpx;height: 84rpx;"> |
||||
<image style="width: 84rpx;" mode="widthFix" :src="listItem.image"></image> |
||||
</view> |
||||
<text class="grid-text fs14 cor-000">{{listItem.title}}</text> |
||||
<text class="grid-text mb10 fs12 cor-999">{{listItem.subTitle}}</text> |
||||
</u-grid-item> |
||||
</u-grid> |
||||
</view> |
||||
<view class="mt14 p14 bc-fff" style="border-radius: 20rpx;"> |
||||
<text class="fs18 cor-000 fw600">常见考点</text> |
||||
<view class="flex ai-c wp100 mt10" style="flex-wrap: wrap;"> |
||||
<view class="wp50 flex ai-c mb10" v-for="(item,index) of testCenterList" :key="index"> |
||||
<view class="dot_item">{{index+1}}</view> |
||||
<text class="ml5">{{item.label}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import errorIcon from "../../static/image/practice/error_icon.png" |
||||
import newRulesIcon from "../../static/image/practice/newRules_icon.png" |
||||
import neverWriteIcon from "../../static/image/practice/neverWrite_icon.png" |
||||
export default { |
||||
data() { |
||||
return { |
||||
errorIcon, |
||||
newRulesIcon, |
||||
neverWriteIcon, |
||||
list:[{ |
||||
title:'新规题', |
||||
subTitle:'392题', |
||||
image:newRulesIcon |
||||
},{ |
||||
title:'易错题', |
||||
subTitle:'392题', |
||||
image:errorIcon |
||||
},{ |
||||
title:'未做题', |
||||
subTitle:'392题', |
||||
image:neverWriteIcon |
||||
},{ |
||||
title:'单选题', |
||||
subTitle:'392题', |
||||
image:newRulesIcon |
||||
},{ |
||||
title:'判断题', |
||||
subTitle:'392题', |
||||
image:errorIcon |
||||
},{ |
||||
title:'图片题', |
||||
subTitle:'392题', |
||||
image:neverWriteIcon |
||||
}], |
||||
testCenterList:[ |
||||
{label:'驾驶证申请相关'}, |
||||
{label:'驾驶证申请相关'}, |
||||
{label:'驾驶证登记处罚'}, |
||||
{label:'机动车强制报废'}, |
||||
{label:'其他考点'}, |
||||
{label:'驾驶证登记处罚'}, |
||||
{label:'机动车强制报废'}, |
||||
{label:'其他考点'}] |
||||
} |
||||
}, |
||||
methods: { |
||||
toAnswer(title) { |
||||
uni.navigateTo({ |
||||
url:"/pages/questionBank/questionBank?navTitle="+title |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.dot_item{ |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
line-height: 40rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
background: #0BD032; |
||||
border-radius: 50%; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,27 @@ |
||||
<template> |
||||
<view> |
||||
<video style="width: 100%;height: 422rpx;" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video> |
||||
<view class="p14 bc-fff"> |
||||
<view class="flex ai-c jc-sb mt10"> |
||||
<text class="fs18 fw600 cor-000">C1捷达-基础操作视频讲解</text> |
||||
<view class="flex"> |
||||
<text class="fs14 cor-666">更多</text> |
||||
<u-icon color="#666" name="arrow-right" size="18"></u-icon> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
@ -0,0 +1,195 @@ |
||||
<template> |
||||
<view> |
||||
<u-sticky bgColor="#fff"> |
||||
<u-tabs :list="categoryList" :scrollable="false" @click="tabChange"></u-tabs> |
||||
</u-sticky> |
||||
<view class="p14"> |
||||
<view class="top_box"> |
||||
<view class="tip_box flex ai-c jc-sb" v-if="tIndex==0"> |
||||
<view class="flex ai-c"> |
||||
<u-icon name="error-circle-fill" color="#FF6E02" size="18"></u-icon> |
||||
<text class="ml10 fs12" style="color: #FF6E02;">{{title}}</text> |
||||
</view> |
||||
<u-icon name="close" color="#FF6E02" size="18"></u-icon> |
||||
</view> |
||||
<view class="p14"> |
||||
<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏'}}情况</text> |
||||
<view class="total_box mt10"> |
||||
<view class="flex ai-c jc-sb"> |
||||
<view class="text-center"> |
||||
<view style="width: 111rpx;" class="fs30 cor-000">4</view> |
||||
</view> |
||||
<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c" @tap="toPractice"> |
||||
<u-icon name="arrow-right" size="18"></u-icon> |
||||
</view> |
||||
</view> |
||||
<view class="flex ai-c jc-sb mt5"> |
||||
<view class="text-center"> |
||||
<text class="fs14 cor-666">全部{{tIndex==0?'错题':'收藏'}}</text> |
||||
</view> |
||||
<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c"> |
||||
<text v-if="tIndex==0" class="fs14 cor-666">错4/已做100</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="yellow_box" v-if="tIndex==0"> |
||||
<view class="flex jc-sb ai-c"> |
||||
<view> |
||||
<text class="fs24 fw600" style="color: #FF6E02;">32%</text><text class="fs18 cor-000 fw600">错题率</text> |
||||
<view class="fs14 cor-000">错题率有点高，快去提升吧</view> |
||||
</view> |
||||
<view style="width: 156rpx;"> |
||||
<button class="riseBtn">马上提升</button> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="flex jc-sb ai-c mt10" v-if="tIndex==0"> |
||||
<text>答对后自动移除错题</text> |
||||
<u-switch v-model="isMoveWrong" activeColor="#0BD032" ></u-switch> |
||||
</view> |
||||
</view> |
||||
<view style="margin-top: 30rpx;" v-if="tIndex==0"> |
||||
<view class="video-box"> |
||||
<view class="flex jc-sb ai-c wp100"> |
||||
<text style="color: #05C341;font-size: 36rpx;">科一精品视频课</text> |
||||
<text class="cor-666 fs12">全部10节课 ></text> |
||||
</view> |
||||
<view class="flex ai-c mt20"> |
||||
<image class="contain-box" src="../../static/image/index/index_bg.png"></image> |
||||
<view class="ml15 text-center"> |
||||
<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff" |
||||
text="去看视频" color="linear-gradient(90deg, #11DF20 0%, #00B74F 100%)" icon="play-circle"> |
||||
</u-button> |
||||
<view class="cor-333 fs15 fw600 mt10">科一易错试题</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="top_box mt15 p14"> |
||||
<view class="flex jc-sb aic"> |
||||
<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏题'}}分类</text> |
||||
<u-icon name="arrow-right" size="18"></u-icon> |
||||
</view> |
||||
<view class="flex ai-c jc-sb" style="flex-wrap: wrap;"> |
||||
<view v-for="(item,index) of typeList" :key="index" class="category_item p14 flex jc-sb ai-c mb10"> |
||||
<text class="cor-000">{{item.typeName}}</text> |
||||
<text class="cor-666">{{item.typeNum}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
tIndex:0, |
||||
isMoveWrong:true, |
||||
title:'重要提示：所有错题做对，再去考试！', |
||||
categoryList:[{ |
||||
name:'错题本' |
||||
},{name:'收藏夹'}], |
||||
typeList:[{ |
||||
typeName:'驾驶证审验注销', |
||||
typeNum:1 |
||||
},{ |
||||
typeName:'机动车强制报废', |
||||
typeNum:2 |
||||
},{ |
||||
typeName:'驾驶证审验注销', |
||||
typeNum:1 |
||||
},{ |
||||
typeName:'机动车强制报废', |
||||
typeNum:2 |
||||
},{ |
||||
typeName:'驾驶证审验注销', |
||||
typeNum:1 |
||||
},{ |
||||
typeName:'机动车强制报废', |
||||
typeNum:2 |
||||
}] |
||||
} |
||||
}, |
||||
methods:{ |
||||
tabChange(val){ |
||||
this.tIndex=val.index |
||||
}, |
||||
toPractice(){ |
||||
const navTitle=this.tIndex==0?'错题本':'收藏夹' |
||||
uni.navigateTo({ |
||||
url:"/pages/questionBank/questionBank?navTitle="+navTitle |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
::v-deep .u-tabs__wrapper__nav__line { |
||||
background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important; |
||||
bottom: 14rpx !important; |
||||
} |
||||
.top_box{ |
||||
width: 100%; |
||||
background: #FDFDFD; |
||||
border-radius: 20rpx; |
||||
} |
||||
.tip_box{ |
||||
width: 100%; |
||||
background: #FFE6D4; |
||||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
||||
padding: 10px 14px; |
||||
} |
||||
.total_box{ |
||||
width: 100%; |
||||
background: #F5F5F5; |
||||
border-radius: 20rpx; |
||||
padding: 14px; |
||||
} |
||||
.yellow_box{ |
||||
margin-top: 10px; |
||||
padding: 14px; |
||||
width: 100%; |
||||
background: linear-gradient(90deg, #FBF2D4 0%, #F7E4B5 100%); |
||||
border-radius: 20rpx; |
||||
} |
||||
.riseBtn{ |
||||
width: 156rpx; |
||||
height: 56rpx; |
||||
text-align: center; |
||||
line-height: 56rpx; |
||||
font-size: 12px; |
||||
background-color: #F7E4B5; |
||||
border: 1px solid #FF6E02; |
||||
color: #FF6E02; |
||||
border-radius: 28rpx; |
||||
} |
||||
.video-box { |
||||
padding: 20rpx; |
||||
width: 694rpx; |
||||
height: 369rpx; |
||||
background: #DEEFE5; |
||||
border: 2px solid #47DB87; |
||||
border-radius: 16rpx; |
||||
} |
||||
|
||||
.contain-box { |
||||
width: 406rpx; |
||||
height: 228rpx; |
||||
background: #00B74F; |
||||
border-radius: 16rpx; |
||||
} |
||||
.category_item{ |
||||
width: 312rpx; |
||||
height: 90rpx; |
||||
text-align: center; |
||||
line-height: 90rpx; |
||||
background: #F5F5F5; |
||||
border-radius: 20rpx; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 161 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 20 KiB |
Loading…
Reference in new issue