This commit is contained in:
parent
8aec346652
commit
8fe4f256bf
15
pages.json
15
pages.json
|
|
@ -7,7 +7,7 @@
|
|||
// {
|
||||
// "path": "pages/YNEduApp/index/index",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "首页"
|
||||
// "navigationStyle" : "custom"
|
||||
// }
|
||||
// },
|
||||
{
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
{
|
||||
"path": "pages/YNEduApp/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
"navigationStyle" : "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
{
|
||||
"path": "pages/YNEduApp/exam/beforeExam",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
"navigationBarTitleText": "考试详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
"path" : "pages/YNEduApp/prac/prac",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "练习"
|
||||
"navigationStyle" : "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -184,6 +184,13 @@
|
|||
{
|
||||
"navigationBarTitleText" : "pdf学习"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/YNEduApp/prac/pracDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle" : "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
.tab-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
/* background: #fff; */
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tab-item {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar leftIcon="" title="首页" placeholder />
|
||||
<view class="search">
|
||||
<uni-icons
|
||||
type="scan"
|
||||
|
|
|
|||
|
|
@ -37,57 +37,66 @@
|
|||
<uni-collapse>
|
||||
<uni-collapse-item title="理论学习">
|
||||
<uni-list>
|
||||
<uni-list-item
|
||||
<div
|
||||
class="list-wrapper"
|
||||
v-for="(item, index) in theoryLearnList"
|
||||
:key="item.id"
|
||||
title="课程"
|
||||
:note="item.title"
|
||||
clickable
|
||||
:show-extra-icon="true"
|
||||
:extra-icon="learnIconObj"
|
||||
:rightText="item.percent + '%'"
|
||||
:key="index"
|
||||
@click="toggleTheoryLearn(item.id)"
|
||||
>
|
||||
<!-- <template v-slot:footer>
|
||||
<liu-progressbar
|
||||
:progress="item.percent"
|
||||
color="#000"
|
||||
:height="'20rpx'"
|
||||
bgColor="#1989FA"
|
||||
:textInside="false"
|
||||
/>
|
||||
</template>-->
|
||||
</uni-list-item>
|
||||
<div class="left-content">
|
||||
<div class="title">
|
||||
<u-icon name="/static/images/课程.png" size="15" />
|
||||
<div style="margin: 0 15px 0 3px">课程</div>
|
||||
<div>{{ item.time }}</div>
|
||||
</div>
|
||||
<div class="note">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div class="progress">
|
||||
<u-line-progress :percentage="item.percent" :showText="false" activeColor="#579AF8" height="8" />
|
||||
</div>
|
||||
<div>{{ item.percent }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</uni-list>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="理论练习">
|
||||
<uni-list>
|
||||
<uni-list-item
|
||||
<div
|
||||
class="list-wrapper"
|
||||
v-for="(item, index) in theoryPracList"
|
||||
:key="item.id"
|
||||
title="练习"
|
||||
:note="item.title"
|
||||
:rightText="item.ifPrac ? '已练习' : '未练习'"
|
||||
clickable
|
||||
:show-extra-icon="true"
|
||||
:extra-icon="pracIconObj"
|
||||
:key="index"
|
||||
@click="toggleTheoryPrac(item.id)"
|
||||
></uni-list-item>
|
||||
>
|
||||
<div class="left-content">
|
||||
<div class="title">
|
||||
<u-icon name="/static/images/练习.png" size="15" />
|
||||
<div style="margin: 0 15px 0 3px">练习</div>
|
||||
</div>
|
||||
<div class="note">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="right-content">{{ item.ifExam ? '已练习' : '未练习' }}</div>
|
||||
</div>
|
||||
</uni-list>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="理论模拟考试">
|
||||
<uni-list>
|
||||
<uni-list-item
|
||||
<div
|
||||
class="list-wrapper"
|
||||
v-for="(item, index) in theoryExamList"
|
||||
:key="item.id"
|
||||
title="考试"
|
||||
:note="item.title"
|
||||
:rightText="item.ifExam ? '已考试' : '未考试'"
|
||||
clickable
|
||||
:show-extra-icon="true"
|
||||
:extra-icon="pracIconObj"
|
||||
:key="index"
|
||||
@click="toggleTheoryExam(item.id)"
|
||||
></uni-list-item>
|
||||
>
|
||||
<div class="left-content">
|
||||
<div class="title">
|
||||
<u-icon name="/static/images/考试.png" size="15" />
|
||||
<div style="margin: 0 15px 0 3px">考试</div>
|
||||
<div>{{ item.time }}</div>
|
||||
</div>
|
||||
<div class="note">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="right-content">{{ item.ifExam ? '已完成' : '未完成' }}</div>
|
||||
</div>
|
||||
</uni-list>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="实操题目练习">
|
||||
|
|
@ -100,8 +109,18 @@
|
|||
<view class="comment-area">
|
||||
<h2 style="margin-bottom: 15rpx">最新评论 ({{ commentList.length }})</h2>
|
||||
<view class="write-cmt">
|
||||
<uni-icons style="color: #9b9b9b; margin-right: 1vw" type="compose" size="12"></uni-icons>
|
||||
写评论
|
||||
<!-- <uni-icons style="color: #9b9b9b; margin-right: 1vw" type="compose" size="12"></uni-icons>
|
||||
写评论 -->
|
||||
<u--input
|
||||
ref="uInput"
|
||||
placeholder="写评论"
|
||||
prefixIcon="edit-pen"
|
||||
prefixIconStyle="font-size: 18px;color: #c0c4cc"
|
||||
placeholderStyle="font-size: 13px;color: #c0c4cc"
|
||||
border="none"
|
||||
maxlength="999"
|
||||
clearable
|
||||
/>
|
||||
</view>
|
||||
<view class="cmts" v-for="(item, index) in commentList" :key="index">
|
||||
<view class="cmt-up">
|
||||
|
|
@ -150,10 +169,10 @@ export default {
|
|||
{ title: '远程练习', id: 144, ifPrac: false }
|
||||
],
|
||||
theoryExamList: [
|
||||
{ title: '物理考试', id: 161, ifExam: false },
|
||||
{ title: '魔法考试', id: 162, ifExam: true },
|
||||
{ title: '近战考试', id: 163, ifExam: true },
|
||||
{ title: '远程考试', id: 164, ifExam: false }
|
||||
{ title: '物理考试', id: 161, ifExam: false, time: '00:34:21' },
|
||||
{ title: '魔法考试', id: 162, ifExam: true, time: '00:34:21' },
|
||||
{ title: '近战考试', id: 163, ifExam: true, time: '00:34:21' },
|
||||
{ title: '远程考试', id: 164, ifExam: false, time: '00:34:21' }
|
||||
],
|
||||
commentList: [
|
||||
{ username: '王二', avatar: '/static/eduImg/avatar.jpg', cont: '写的什么东西' },
|
||||
|
|
@ -167,6 +186,10 @@ export default {
|
|||
]
|
||||
}
|
||||
},
|
||||
onLoad(params) {
|
||||
this.projId = params.id
|
||||
console.log(this.projId)
|
||||
},
|
||||
methods: {
|
||||
toggleTheoryLearn(id) {
|
||||
console.log(id)
|
||||
|
|
@ -177,17 +200,17 @@ export default {
|
|||
toggleTheoryPrac(id) {
|
||||
console.log(id)
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/prac/prac?id=' + id
|
||||
url: '/pages/YNEduApp/prac/pracDetail?id=' + id
|
||||
})
|
||||
|
||||
uni.removeStorageSync('from')
|
||||
uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
|
||||
},
|
||||
toggleTheoryExam(id) {
|
||||
console.log(id)
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/exam/beforeExam?id=' + id
|
||||
})
|
||||
|
||||
// uni.setStorageSync('form', '/pages/YNEduApp/learnProj/learnProjDetail')
|
||||
// 先清空之前设置的 form 路径 在重新设置
|
||||
uni.removeStorageSync('from')
|
||||
uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
|
||||
},
|
||||
|
|
@ -196,10 +219,6 @@ export default {
|
|||
url: '/pages/YNEduApp/learnProj/learnProj'
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(params) {
|
||||
this.projId = params.id
|
||||
console.log(this.projId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -282,6 +301,35 @@ export default {
|
|||
box-sizing: border-box;
|
||||
padding: 25rpx 15rpx;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 12px;
|
||||
color: #b0b0b0;
|
||||
.left-content {
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.note {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.right-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.progress {
|
||||
width: 100px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-area {
|
||||
|
|
|
|||
|
|
@ -1,48 +1,40 @@
|
|||
<template>
|
||||
<view class="wrapper">
|
||||
<div class="top-container">
|
||||
<u-avatar :src="avatar" size="60" />
|
||||
<div class="name">{{ name }}</div>
|
||||
</div>
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="center-container">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<u-icon name="/static/images/正确率.png" size="50" />
|
||||
<div class="text">
|
||||
<div>正确率</div>
|
||||
<div>{{ correctRate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<u-icon name="/static/images/累计作答.png" size="50" />
|
||||
<div class="text">
|
||||
<div>累计作答</div>
|
||||
<div>{{ totalAnswer }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<u-icon name="/static/images/累计答对.png" size="50" />
|
||||
<div class="text">
|
||||
<div>累计答对</div>
|
||||
<div>{{ totalCorrect }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-top" @click="handleExercises(1)">
|
||||
<div class="right-text">顺序练习</div>
|
||||
<u-icon class="top-icon" name="/static/images/顺序练习.png" width="84" height="73" />
|
||||
</div>
|
||||
<div class="right-bottom" @click="handleExercises(1)">
|
||||
<div class="right-text">随机练习</div>
|
||||
<u-icon class="bottom-icon" name="/static/images/随机练习.png" width="84" height="73" />
|
||||
<view>
|
||||
<u-navbar title="练习" @leftClick="leftClick" placeholder />
|
||||
<div class="tab-wrapper">
|
||||
<div v-for="(item, index) in tabList" :key="index" class="tab-item" @click="handleTab(item, index)">
|
||||
<div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div :class="{ 'tab-line': activeIndex === index }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-text">选择题库</div>
|
||||
<u-icon class="bottom-icon" name="/static/images/选择题库.png" width="140" height="100" />
|
||||
<div class="content">
|
||||
<div v-for="(item, index) in list" :key="index" class="item-wrapper">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="name-status">
|
||||
<div class="name">
|
||||
{{ item.name }}
|
||||
<div class="name-sub">指派</div>
|
||||
</div>
|
||||
<div class="status">{{ item.status }}</div>
|
||||
</div>
|
||||
<div class="time">{{ item.time }}</div>
|
||||
<div class="count-total">
|
||||
<div class="count">练习{{ item.count }}次</div>
|
||||
<div class="total">总分：{{ item.total }}</div>
|
||||
</div>
|
||||
<div class="bt-wrapper">
|
||||
<div class="score">得分：{{ item.score }}</div>
|
||||
<div class="btn" @click="handleExercise(item.id)">开始练习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 暂无数据 -->
|
||||
<div class="no-data" v-if="list.length == 0">
|
||||
<image src="/static/images/zanwuneirong.png" mode="aspectFit" />
|
||||
<view class="no-data-text">暂无内容</view>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -51,154 +43,171 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 头像
|
||||
avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
// 姓名
|
||||
name: '张三',
|
||||
// 练习标题
|
||||
title: '送配电线路架设(初级)',
|
||||
// 正确率
|
||||
correctRate: '80%',
|
||||
// 累计作答
|
||||
totalAnswer: 100,
|
||||
// 累计答对
|
||||
totalCorrect: 80
|
||||
tabList: [{ name: '全部' }, { name: '待练习' }, { name: '已练习' }],
|
||||
activeIndex: 0,
|
||||
list: [],
|
||||
// 全部列表
|
||||
allList: [
|
||||
{
|
||||
id: 1,
|
||||
// 标题
|
||||
title: '送配电线路架设(初级)',
|
||||
// 姓名
|
||||
name: '张三',
|
||||
// 状态
|
||||
status: '待练习',
|
||||
// 练习时间
|
||||
time: '2020-12-12 12:00',
|
||||
// 练习次数
|
||||
count: 1,
|
||||
// 总分数
|
||||
total: '--',
|
||||
// 得分
|
||||
score: '暂无'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
// 标题
|
||||
title: '送配电线路架设(初级)',
|
||||
// 姓名
|
||||
name: '张三',
|
||||
// 状态
|
||||
status: '待练习',
|
||||
// 练习时间
|
||||
time: '2020-12-12 12:00',
|
||||
// 练习次数
|
||||
count: 1,
|
||||
// 总分数
|
||||
total: '--',
|
||||
// 得分
|
||||
score: '暂无'
|
||||
}
|
||||
],
|
||||
// 待练习列表
|
||||
waitList: [],
|
||||
// 已练习列表
|
||||
alreadyList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExercises(type) {
|
||||
console.log('type', type)
|
||||
uni.navigateTo({
|
||||
url: `/pages/YNEduApp/prac/exercises?type=${type}`
|
||||
})
|
||||
}
|
||||
}
|
||||
mounted() {
|
||||
this.list = this.allList
|
||||
},
|
||||
methods: {
|
||||
handleTab(item, index) {
|
||||
this.activeIndex = index
|
||||
if (index === 0) {
|
||||
this.list = this.allList
|
||||
} else if (index === 1) {
|
||||
this.list = this.waitList
|
||||
} else if (index === 2) {
|
||||
this.list = this.alreadyList
|
||||
}
|
||||
},
|
||||
// 开始练习
|
||||
handleExercise(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/prac/pracDetail?id=' + id
|
||||
})
|
||||
uni.removeStorageSync('from')
|
||||
uni.setStorageSync('from', '/pages/YNEduApp/prac/prac')
|
||||
},
|
||||
leftClick() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
height: 94vh;
|
||||
background: url('/static/images/练习-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
.tab-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
/* background: #fff; */
|
||||
margin-bottom: 10px;
|
||||
|
||||
.top-container {
|
||||
margin-top: 40px;
|
||||
.tab-item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #ffffff;
|
||||
margin-left: 20px;
|
||||
padding: 10px 0;
|
||||
.tab-line {
|
||||
margin-top: 5px;
|
||||
width: 30%;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 800;
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
width: 52%;
|
||||
height: 209px;
|
||||
background: #5185ed;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.item {
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 0 10px;
|
||||
.item-wrapper {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 43%;
|
||||
.name-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.right-top {
|
||||
height: 98px;
|
||||
background: #e7ac67;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
// top-icon - 在当前位置的右下角
|
||||
.top-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.name {
|
||||
display: flex;
|
||||
.name-sub {
|
||||
margin-left: 5px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.right-bottom {
|
||||
height: 98px;
|
||||
background: #73c2f7;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
position: relative;
|
||||
// bottom-icon - 在当前位置的左下角
|
||||
.bottom-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.status {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.right-text {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
.time {
|
||||
color: #999;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.count-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.count {
|
||||
color: #999;
|
||||
}
|
||||
.total {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.bt-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.score {
|
||||
color: #999;
|
||||
}
|
||||
.btn {
|
||||
padding: 5px 10px;
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
margin: 5px 0 0 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #226de3;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.bottom-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.bottom-text {
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
color: #ffffff;
|
||||
line-height: 120px;
|
||||
margin: auto 20px;
|
||||
.no-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 100px;
|
||||
.no-data-text {
|
||||
margin-top: 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<view class="wrapper">
|
||||
<u-navbar title="学习项目" @leftClick="leftClick" placeholder />
|
||||
<div class="top-container">
|
||||
<u-avatar :src="avatar" size="60" />
|
||||
<div class="name">{{ name }}</div>
|
||||
</div>
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="center-container">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<u-icon name="/static/images/正确率.png" size="50" />
|
||||
<div class="text">
|
||||
<div>正确率</div>
|
||||
<div>{{ correctRate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<u-icon name="/static/images/累计作答.png" size="50" />
|
||||
<div class="text">
|
||||
<div>累计作答</div>
|
||||
<div>{{ totalAnswer }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<u-icon name="/static/images/累计答对.png" size="50" />
|
||||
<div class="text">
|
||||
<div>累计答对</div>
|
||||
<div>{{ totalCorrect }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right-top" @click="handleExercises(1)">
|
||||
<div class="right-text">顺序练习</div>
|
||||
<u-icon class="top-icon" name="/static/images/顺序练习.png" width="84" height="73" />
|
||||
</div>
|
||||
<div class="right-bottom" @click="handleExercises(2)">
|
||||
<div class="right-text">随机练习</div>
|
||||
<u-icon class="bottom-icon" name="/static/images/随机练习.png" width="84" height="73" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 目前不要选择题库 -->
|
||||
<!-- <div class="bottom">
|
||||
<div class="bottom-text">选择题库</div>
|
||||
<u-icon class="bottom-icon" name="/static/images/选择题库.png" width="140" height="100" />
|
||||
</div> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 头像
|
||||
avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
// 姓名
|
||||
name: '张三',
|
||||
// 练习标题
|
||||
title: '送配电线路架设(初级)',
|
||||
// 正确率
|
||||
correctRate: '80%',
|
||||
// 累计作答
|
||||
totalAnswer: 100,
|
||||
// 累计答对
|
||||
totalCorrect: 80
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExercises(type) {
|
||||
console.log('type', type)
|
||||
uni.navigateTo({
|
||||
url: `/pages/YNEduApp/prac/exercises?type=${type}`
|
||||
})
|
||||
},
|
||||
leftClick() {
|
||||
const from = uni.getStorageSync('from')
|
||||
uni.navigateTo({
|
||||
url: from
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
height: 94vh;
|
||||
background: url('/static/images/练习-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
|
||||
.top-container {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #ffffff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 800;
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
width: 52%;
|
||||
height: 209px;
|
||||
background: #5185ed;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.item {
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 43%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.right-top {
|
||||
height: 98px;
|
||||
background: #e7ac67;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
// top-icon - 在当前位置的右下角
|
||||
.top-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.right-bottom {
|
||||
height: 98px;
|
||||
background: #73c2f7;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
position: relative;
|
||||
// bottom-icon - 在当前位置的左下角
|
||||
.bottom-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right-text {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #226de3;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.bottom-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.bottom-text {
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
color: #ffffff;
|
||||
line-height: 120px;
|
||||
margin: auto 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 903 B |
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue