11 changed files with 628 additions and 21 deletions
-
38pages.json
-
2pages/exercises/brushQuestions/brushQuestions.vue
-
2pages/exercises/exam/exam.vue
-
236pages/exercises/examSubjiect1/examResultsOne.vue
-
112pages/exercises/examSubjiect1/examSubjiect1.vue
-
136pages/exercises/lastPage/lastPage.vue
-
2pages/exercises/theoryStudy/theoryStudy.vue
-
73pages/vip/vipEntry/vipEntry.vue
-
44pages/vip/vipQuestions/vipQuestions.vue
-
0static/images/vip/stepTag.png
@ -0,0 +1,236 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" title="我的学习" |
|||
:bgColor="'transparent'" :titleStyle="{color: '#fff'}"> |
|||
</up-navbar> |
|||
<view class="padding"> |
|||
<view class="useInfo flex"> |
|||
<view class="avatar"> |
|||
<image src="" mode=""></image> |
|||
</view> |
|||
<view class="rightBox"> |
|||
<view class="name">用户名</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="bigNum"> |
|||
<view class="num">80%</view> |
|||
<view class="lab">预测通过率</view> |
|||
</view> |
|||
<view class="huiBg"> |
|||
<view class="li"> |
|||
<view class="num">10:22</view> |
|||
<view class="lab">测试时长</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="num">10</view> |
|||
<view class="lab">已做题</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="num">14</view> |
|||
<view class="lab">答错题</view> |
|||
</view> |
|||
</view> |
|||
<view class="btnBox"> |
|||
<oneBtn text="快速提升通过率" @oneBtnClick="$goPage('/pages/vip/vipEntry/vipEntry')"></oneBtn> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card card2"> |
|||
<view class="chartTab"> |
|||
<view class="h3">模拟考试成绩</view> |
|||
<view class="btn_row"> |
|||
<view class="btn" @click="changeChart(1)" :class="{bg: currentChart==1}">曲线</view> |
|||
<view class="btn" @click="changeChart(2)" :class="{bg: currentChart==2}">明细</view> |
|||
</view> |
|||
</view> |
|||
<view class="tip">近30次科目一模拟考试成绩</view> |
|||
<view class="con" v-if="currentChart==1"> |
|||
图表 |
|||
<view class="tips">按住可左右滑动查看更多成绩</view> |
|||
</view> |
|||
<view class="con" v-if="currentChart==2"> |
|||
<view class="tables"> |
|||
<view class="fristTab li"> |
|||
<view class="item">考试成绩</view> |
|||
<view class="item">考试用时</view> |
|||
<view class="item">考试时间</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="item">90分</view> |
|||
<view class="item">10分30秒</view> |
|||
<view class="item">2024-8-28</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
import nodata from '@/components/nodata/nodata.vue' |
|||
const value = ref(false) |
|||
const currentNav = ref(1) |
|||
|
|||
function changeNav(val) { |
|||
currentNav.value = val |
|||
} |
|||
|
|||
const currentChart = ref(1) |
|||
function changeChart(num) { |
|||
currentChart.value = num |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
padding: 100rpx 0rpx 30rpx 0rpx; |
|||
background: url('../../../static/images/topbg.png') #F6F7FA no-repeat; |
|||
background-size: 100% 410rpx; |
|||
|
|||
.useInfo { |
|||
padding: 30rpx 0; |
|||
|
|||
.avatar { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
overflow: hidden; |
|||
border-radius: 50%; |
|||
background: url('../../../static/images/avatarbg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
|
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.rightBox { |
|||
flex: 1; |
|||
width: 0; |
|||
padding-left: 30rpx; |
|||
|
|||
.name { |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
.bigNum { |
|||
padding: 20rpx 0 20rpx 0; |
|||
text-align: center; |
|||
.num { |
|||
font-weight: bold; |
|||
font-size: 72rpx; |
|||
color: #3776FF; |
|||
} |
|||
.lab { |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #CCCCCC; |
|||
} |
|||
} |
|||
.huiBg { |
|||
width: 100%; |
|||
height: 164rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
text-align: center; |
|||
padding-bottom: 30rpx ; |
|||
.li { |
|||
flex: 1; |
|||
.num { |
|||
font-family: DIN; |
|||
font-weight: bold; |
|||
font-size: 48rpx; |
|||
} |
|||
|
|||
.lab { |
|||
font-size: 24rpx; |
|||
margin-top: 10rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
.card { |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
margin-top: 20rpx; |
|||
padding: 30rpx; |
|||
} |
|||
.tables { |
|||
width: 100%; |
|||
.fristTab.li { |
|||
background: #F4F4F4; |
|||
border-radius: 8rpx 8rpx 0 0; |
|||
.item { |
|||
color: $themC; |
|||
} |
|||
} |
|||
|
|||
.li { |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
border-bottom: 1rpx solid #F4F4F4; |
|||
display: flex; |
|||
.item { |
|||
text-align: center; |
|||
flex: 1; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
.tip { |
|||
font-size: 24rpx; |
|||
color: #ccc; |
|||
padding: 10rpx 0 30rpx; |
|||
} |
|||
.tips { |
|||
width: 360rpx; |
|||
height: 48rpx; |
|||
background: #DCE7FF; |
|||
border-radius: 24rpx; |
|||
font-size: 24rpx; |
|||
color: $themC; |
|||
text-align: center; |
|||
line-height: 48rpx; |
|||
margin-top: 30rpx; |
|||
} |
|||
.chartTab { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.btn_row { |
|||
display: flex; |
|||
width: 170rpx; |
|||
height: 44rpx; |
|||
border-radius: 8rpx; |
|||
overflow: hidden; |
|||
border: 1px solid $themC; |
|||
.btn.bg { |
|||
background: #3776FF; |
|||
color: #fff; |
|||
} |
|||
|
|||
.btn { |
|||
color: $themC; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,112 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" title="我的学习" |
|||
:bgColor="'transparent'" :titleStyle="{color: '#fff'}"> |
|||
<template #right> |
|||
<view class="cjd" @click="$goPage('/pages/exercises/examSubjiect1/examResultsOne')"> |
|||
成绩单 |
|||
</view> |
|||
</template> |
|||
</up-navbar> |
|||
<view class="padding"> |
|||
<view class="useInfo flex"> |
|||
<view class="avatar"> |
|||
<image src="" mode=""></image> |
|||
</view> |
|||
<view class="rightBox"> |
|||
<view class="name">用户名</view> |
|||
<view class="p"> |
|||
<text>最高分数：85</text> |
|||
<text>用时：00：30</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="text">考试车型：小车C1</view> |
|||
<view class="text">考试时间：45分钟（100题）</view> |
|||
<view class="text">合格标准：90分及格（满分100分）</view> |
|||
<view class="text">出题规则：根据公安部规定出题规则组卷</view> |
|||
<view class="text">计分规则：模拟考试下不能修改答案，每错1题扣2分，累计错题超过5道，考试不通过，系统自动提醒交卷。</view> |
|||
</view> |
|||
<view class="btnBox"> |
|||
<oneBtn text="开始模拟考试"></oneBtn> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
padding: 100rpx 0rpx 30rpx 0rpx; |
|||
background: url('../../../static/images/topbg.png') #F6F7FA no-repeat; |
|||
background-size: 100% 410rpx; |
|||
.cjd { |
|||
color: #fff; |
|||
} |
|||
.useInfo { |
|||
padding: 30rpx 0; |
|||
|
|||
.avatar { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
overflow: hidden; |
|||
border-radius: 50%; |
|||
background: url('../../../static/images/avatarbg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.rightBox { |
|||
flex: 1; |
|||
width: 0; |
|||
padding-left: 30rpx; |
|||
|
|||
.name { |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.p { |
|||
padding-top: 30rpx; |
|||
|
|||
text { |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
margin-right: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx 30rpx; |
|||
|
|||
.text { |
|||
padding: 10rpx 0; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.btnBox { |
|||
padding: 100rpx 50rpx; |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,136 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<u-navbar leftText=" " title="顺序练习成绩" :safeAreaInsetTop="true" :autoBack="true" :fixed="false" :leftIconColor="'#fff'" :bgColor="'transparent'" :titleStyle="{color: '#fff'}"></u-navbar> |
|||
<view class="padding"> |
|||
<view class="card"> |
|||
<view class="echartBox"> |
|||
这里是图表 |
|||
</view> |
|||
<view class="huiBg"> |
|||
<view class="li"> |
|||
<view class="num">10:22</view> |
|||
<view class="lab">测试时长</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="num">10</view> |
|||
<view class="lab">已做题</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="num">14</view> |
|||
<view class="lab">答错题</view> |
|||
</view> |
|||
</view> |
|||
<view class="btn_row"> |
|||
<view class="btn">查看全部错题</view> |
|||
<view class="btn lastBtn">继续答题</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card flex-b"> |
|||
<view class="leftTxt"> |
|||
<view class="text">查看全部错题</view> |
|||
<view class="tps">继续答题</view> |
|||
</view> |
|||
<view class="lianxi flex"> |
|||
<view class="lx">去练习</view> |
|||
<u-icon name="arrow-right" color="#666" size="14"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
background: linear-gradient(0deg, rgba(55,118,255,0) 0%, #3776FF 100%) no-repeat #F6F7FA; |
|||
background-size: 100% 720rpx; |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
.card { |
|||
width: 100%; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 30rpx; |
|||
margin-top: 30rpx; |
|||
.echartBox { |
|||
width: 100%; |
|||
min-height: 230rpx; |
|||
} |
|||
|
|||
.huiBg { |
|||
width: 100%; |
|||
height: 144rpx; |
|||
background: #F4F4F4; |
|||
border-radius: 20rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
text-align: center; |
|||
.li { |
|||
flex: 1; |
|||
.num { |
|||
font-family: DIN; |
|||
font-weight: bold; |
|||
font-size: 48rpx; |
|||
} |
|||
|
|||
.lab { |
|||
font-size: 24rpx; |
|||
margin-top: 10rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn_row { |
|||
padding-top: 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.btn { |
|||
height: 77rpx; |
|||
background: linear-gradient(90deg, #FAE0A2 0%, #F6C86F 100%); |
|||
border-radius: 39rpx; |
|||
color: #6B4229; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
line-height: 77rpx; |
|||
width: 48%; |
|||
&.lastBtn { |
|||
background: #3776FF; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
.leftTxt { |
|||
flex: 1; |
|||
.text { |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.tps { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.lianxi { |
|||
.lx { |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #3776FF; |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<up-collapse |
|||
:value="['2']" |
|||
:border="false" |
|||
> |
|||
<up-collapse-item |
|||
title="文档指南" |
|||
|
|||
> |
|||
<view class="textbg"> |
|||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> |
|||
</view> |
|||
</up-collapse-item> |
|||
<up-collapse-item |
|||
title="组件全面" |
|||
> |
|||
<view class="textbg"> |
|||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> |
|||
</view> |
|||
</up-collapse-item> |
|||
<up-collapse-item |
|||
name="2" |
|||
title="众多利器" |
|||
> |
|||
<view class="textbg"> |
|||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> |
|||
</view> |
|||
</up-collapse-item> |
|||
</up-collapse> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.textbg { |
|||
background: #F4F4F4; |
|||
border-radius: 10rpx; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
</style> |
|||
|
Before Width: 125 | Height: 47 | Size: 465 B After Width: 125 | Height: 47 | Size: 465 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue