Skip to content

X
x-learn
提交 b8a1a399 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

添加能力自测页面

上级 1ef40519
隐藏空白字符变更
内嵌 并排
正在显示 包含 1132 行增加 和 2 行删除
src/api/exam.js 0 → 100644
浏览文件 @ b8a1a399
import httpRequest from '@/utils/axios'
/**
* 获取考前摸底试题
*/
export function getExamQuestion(params) {
return httpRequest.get('/api/zy/v2/examination/examination-papers', { params }, { headers: { 'Content-Type': 'multipart/form-data' } })
}
/**
* 获取课程列表
*/
export function getCourseList() {
return httpRequest.get('/api/zy/v2/education/courses/list')
}
/**
* 获取课程详情
* @param {string} courseId 课程ID
*/
export function getCourse(courseId) {
return httpRequest.get(`/api/zy/v2/education/courses/${courseId}`)
}
/**
* 获取课程知识点
* @param {string} courseId 课程ID
*/
export function getCourseTagList(courseId) {
return httpRequest.get(`/api/zy/v2/education/tag/tree/${courseId}`)
}
/**
* 知识点详情
* @param {string} tagId 知识点ID
*/
export function getCourseTag(tagId) {
return httpRequest.get(`/api/zy/v2/education/tag/${tagId}`)
}
src/components/exam/answerCard.vue 0 → 100644
浏览文件 @ b8a1a399
<template>
<div>
<!-- <div class="info">
<div class="shape">
<img :src="info.id_photo" alt="">
</div>
<div class="right">
<div class="name">{{ info.name }}</div>
<div class="code">{{ info.examinee_number }}</div>
</div>
</div> -->
<!-- {{ questionParams.card }} -->
<div class="order-num">
<template v-for="(item, index) in questionParams.card">
<div :key="index" v-if="item.question_item_type != 5">
<div class="tit">{{ item.find(tit => { return tit.question_item_title }).question_item_title }}</div>
<ul>
<template v-for="(cItem, cIndex) in item">
<!-- stu1已答 stu2当前 stu3标记 -->
<li
:key="cItem.q_order + '-' + cIndex"
@click="goQuestion(cItem.q_order)"
:class="questionParams.questionIndex + 1 === cItem.q_order
? questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][cItem.id]
? questionParams.answerRecord[item.question_item_id][cItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu1 stu2 stu3'
: 'stu1 stu2'
: questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu2 stu3'
: 'stu2'
: 'stu2'
: 'stu2'
: questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][cItem.id]
? questionParams.answerRecord[item.question_item_id][cItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu1 stu3'
: 'stu1'
: questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu3'
: ''
: ''
: ''
"
>{{ cItem.q_order }}</li>
</template>
</ul>
</div>
<div :key="index" v-else>
<div class="tit">{{ item.find(tit => { return tit.question_item_title }).question_item_title }}</div>
<ul>
<template v-for="cItem in item.question_list">
<template v-for="(lItem, lIndex) in cItem.list">
<li
:key="lItem.q_order +'-'+ lIndex"
@click="goQuestion(lItem.q_order)"
:class="questionParams.questionIndex + 1 === lItem.q_order
? questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][lItem.id]
? questionParams.answerRecord[item.question_item_id][lItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu1 stu2 stu3'
: 'stu1 stu2'
: questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu2 stu3'
: 'stu2'
: 'stu2'
: 'stu2'
: questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][lItem.id]
? questionParams.answerRecord[item.question_item_id][lItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu1 stu3'
: 'stu1'
: questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu3'
: ''
: ''
: ''
"
>{{ lItem.q_order }}</li>
</template>
</template>
</ul>
</div>
</template>
</div>
</div>
</template>
<script>
// import Bus from '../../components/common/bus.js'
export default {
props: {
questionParams: { type: Object, default: () => {} },
info: { type: Object, default: () => {} }
},
mounted() {
// Bus.$on('monitoringChanges', target => {
// this.$forceUpdate()
// })
},
computed: {
changeQuestionIndex() {
return this.questionParams.questionIndex
}
},
methods: {
goQuestion(n) {
this.questionParams.questionIndex = n - 1
}
},
watch: {
changeQuestionIndex(newV, oldV) {
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.info{
display: flex;
align-items: center;
height: 100px;
.shape{
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
img{
width: 75px;
// transform: scale(1);
display: block;
}
.right{
margin-left: 22px;
.name{
font-size: 18px;
color: #222222;
line-height: 25px;
}
.code{
font-size: 14px;
color: #222222;
line-height: 20px;
margin-top: 5px;
}
}
}
.order-num{
padding-bottom: 90px;
.tit{
font-size: 12px;
color: #999999;
line-height: 17px;
margin-bottom: 10px;
}
ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
li{
cursor: pointer;
position: relative;
border-radius: 50px;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
font-size: 14px;
color: #666666;
line-height: 24px;
margin-right: 20px;
margin-bottom: 10px;
text-align: center;
&:nth-child(5n+5){
margin-right: 0;
}
&.stu1{
background: #EEEEEE;
border: 1px solid #CCCCCC;
}
&.stu2{
width: 22px;
height: 22px;
line-height: 22px;
border: 2px solid #0FC118;
}
&.stu3{
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
}
}
}
.flag-tips{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
width: 24px;
height: 24px;
background: #EEEEEE;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle1{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle2{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle3{
width: 24px;
height: 24px;
border: 2px solid #0FC118;
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
</style>
src/components/exam/question.vue 0 → 100644
浏览文件 @ b8a1a399
<template>
<div>
<!-- 单选多选判断题(题目描述dom结构一样，只那选项区分) -->
<template v-if="questionData.question_item_type == 1 || questionData.question_item_type == 2 || questionData.question_item_type == 6">
<div class="title-type">
<div class="type">{{ questionData.question_item_title }}</div>
<div class="num">{{ questionData.q_order }}/{{ questionData.total_question_count }}</div>
</div>
<div class="title">
<div class="num">{{ questionData.q_order }}.</div><div class="des" v-html="questionData.content"></div>
</div>
<ul :class="questionData.question_item_type == 2 ? 'check-option' : 'radio-option'">
<template v-for="(item, index) in questionData.options">
<li
:key="index"
@click="changeOptions(questionData.question_item_type, questionData.question_item_id, questionData.id, item.id)"
:class="questionParams.answerRecord[questionData.question_item_id]
? questionParams.answerRecord[questionData.question_item_id][questionData.id]
? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find(id => { return id === item.id })
? 'active'
: ''
: ''
: ''"
>
<div class="icon"></div>
<div class="txt">{{item.option}}</div>
</li>
</template>
</ul>
</template>
<!-- 复合题 -->
<template v-if="questionData.question_item_type == 5">
<div class="title-type">
<div class="type">{{ questionData.question_item_title }}</div>
<div class="num">{{ questionData.q_order }}/{{ questionParams.question.total_question_count }}</div>
</div>
<div class="case-que">
<div class="stem" v-html="questionData.common_content"></div>
<ul class="topics" :style="{height: contentHeight - 60 + 'px'}">
<template v-for="(item, index) in questionData.list">
<li :key="'type5' + index">
<div class="title">
<div class="num">{{ item.q_order }}.</div><div class="des" v-html="item.content"></div>
</div>
<ul :class="item.type == 2 ? 'check-option' : 'radio-option'"><!-- radio-option check-option -->
<template v-if="item.options">
<template v-for="(items, cIndex) in item.options">
<li
:id="items.id"
:key="'c' + cIndex"
@click="changeOptions(item.type, questionData.question_item_id, questionData.id, items.id)"
:class="questionParams.answerRecord[questionData.question_item_id]
? questionParams.answerRecord[questionData.question_item_id][questionData.id]
? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find(id => { return id === items.id })
? 'active'
: ''
: ''
: ''"
>
<div class="icon"></div>
<div class="txt">{{items.option}}</div>
</li>
</template>
</template>
</ul>
</li>
</template>
</ul>
</div>
</template>
</div>
</template>
<script>
// import action from '@action'
// import Bus from '../../components/common/bus.js'
export default {
props: {
contentHeight: { type: Number, default: () => {} },
questionParams: { type: Object, default: () => {} }
},
data() {
return {
questionData: {}
}
},
created() {
this.questionData = this.questionParams.question
},
mounted() {
// this.questionData = this.questionParams.question
// console.log(this.questionParams, '=====111')
// this.dataCombined()
},
methods: {
// 重组数据
dataCombined() {
// this.questionParams.question.question_items.map((item, index) => {
// if (parseInt(item.question_item_type) === 5) {
// item.question_list.map(cItem => {
// const currentItem = cItem.list.find(items => { return items.q_order === this.questionParams.questionIndex + 1 })
// if (currentItem) {
// this.questionData = {}
// this.questionData.common_content = cItem.common_content
// this.questionData.list = cItem.list.map(k => {
// if (k.q_order === this.questionParams.questionIndex + 1) {
// this.questionData.id = k.id
// this.questionData.q_order = k.q_order
// typeof k.options === 'string' && (k.options = JSON.parse(k.options))
// return k
// } else {
// return {
// content: k.content,
// q_order: k.q_order
// }
// }
// })
// const key = ['question_item_id', 'question_item_title', 'question_item_type']
// key.map(k => {
// this.questionData[k] = item[k]
// })
// }
// })
// } else {
// const currentItem = item.question_list.find(items => { return items.q_order === this.questionParams.questionIndex + 1 })
// if (currentItem) {
// this.questionData = currentItem
// const key = ['question_item_id', 'question_item_title', 'question_item_type']
// key.map(k => {
// this.questionData[k] = item[k]
// })
// typeof this.questionData.options === 'string' && (this.questionData.options = JSON.parse(currentItem.options))
// }
// }
// })
},
// 选项选择
changeOptions(type, pId, cId, optId) {
if (parseInt(type) !== 2) {
this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId]
? this.questionParams.answerRecord[pId][cId].answer = [optId]
: this.questionParams.answerRecord[pId][cId] = {
answer: [optId],
sign: false
}
: this.questionParams.answerRecord[pId] = {
[cId]: {
answer: [optId],
sign: false
}
}
} else {
this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId]
? (() => {
const optChack = this.questionParams.answerRecord[pId][cId].answer.findIndex(item => { return item === optId })
if (optChack === -1) {
this.questionParams.answerRecord[pId][cId].answer.push(optId)
} else {
this.questionParams.answerRecord[pId][cId].answer.splice(optChack, 1)
}
})()
: this.questionParams.answerRecord[pId][cId] = {
answer: [optId],
sign: false
}
: this.questionParams.answerRecord[pId] = {
[cId]: {
answer: [optId],
sign: false
}
}
}
// Bus.$emit('monitoringChanges')
this.$forceUpdate()
},
setCache() {
// const param = {
// answer: JSON.stringify(this.questionParams.answerRecord)
// }
// action.Exam.setCache(this.$route.params.examId, param).then(res => {
// }).catch(err => {
// this.$alert(err.message, {
// callback: action => {}
// })
// })
},
// 标记
onSignHandle() {
const pId = this.questionData.question_item_id
const cId = this.questionData.id
this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId]
? this.questionParams.answerRecord[pId][cId].sign
? this.questionParams.answerRecord[pId][cId].sign = false
: this.questionParams.answerRecord[pId][cId].sign = true
: this.questionParams.answerRecord[pId][cId] = {
sign: true,
answer: []
}
: this.questionParams.answerRecord[pId] = {
[cId]: {
sign: true,
answer: []
}
}
this.signCallback()
},
signCallback() {
const pId = this.questionData.question_item_id
const cId = this.questionData.id
let isSign = false
this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId]
? isSign = this.questionParams.answerRecord[pId][cId].sign
: isSign = false
: isSign = false
this.$emit('isSign', isSign)
}
},
computed: {
changeQuestionIndex() {
return this.questionParams.questionIndex
}
},
watch: {
changeQuestionIndex(newV, oldV) {
this.questionData = this.questionParams.question
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.title-type{
width: 100%;
height: 45px;
border-bottom:1px solid #ccc;
display: flex;
align-items: center;
.type{
font-size: 18px;
color: #222222;
}
.num{
margin-left: auto;
font-size: 18px;
color: #222222;
}
}
.title{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
display: flex;
.num{
font-size: 32px;
font-weight: bold;
color: #222222;
line-height: 45px;
margin-top: 5px;
}
.des{
margin-left: 5px;
padding-top: 18px;
&::v-deep p{
margin: 0;
}
}
}
.describe{
font-size: 18px;
color: #222222;
line-height: 25px;
margin-top: 20px;
}
.radio-option,.check-option{
padding: 24px 0 0 0;
margin: 0;
list-style: none;
li{
cursor: pointer;
margin-bottom: 20px;
display: flex;
// align-items: center;
.icon{
width: 18px;
height: 18px;
border: 1px solid #999999;
border-radius: 50%;
margin-top: 3px;
}
.txt{
width: 95%;
font-size: 18px;
color: #222222;
line-height: 28px;
margin-left: 10px;
}
&.active{
.icon{
width: 8px;
height: 8px;
border: 6px solid #C01540;
}
}
}
}
.check-option{
.icon{
border-radius: 3px !important;
}
}
.case-que{
display: flex;
.stem{
flex: 1;
font-size: 14px;
font-weight: bold;
color: #222222;
line-height: 28px;
}
.topics{
flex: 1;
margin: 0;
padding: 0 0 0 20px;
list-style: none;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
li{
.title{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
span{
font-size: 32px;
font-weight: bold;
color: #222222;
line-height: 45px;
}
}
}
}
}
</style>
src/components/layout/aside.vue
浏览文件 @ b8a1a399
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
data() { data() {
return { return {
defaultMenus: [ defaultMenus: [
{ title: '考前摸底', icon: '', path: '/exam' }, { title: '考前摸底', icon: '', path: '/testExam' },
{ title: '真题实战', icon: '', path: '/exam' }, { title: '真题实战', icon: '', path: '/exam' },
{ title: '错题集合', icon: '', path: '/exam' }, { title: '错题集合', icon: '', path: '/exam' },
{ title: '收藏试题', icon: '', path: '/exam' }, { title: '收藏试题', icon: '', path: '/exam' },
......
src/pages/testExam/exam/index.vue 0 → 100644
浏览文件 @ b8a1a399
<template>
<div>
<div class="answer-box">
<div class="head" id="head-h">
<div class="title">全国统一高考试卷A</div>
<div class="right">
<div class="count">00：60：00倒计时</div>
<!-- <div class="time">
<div class="icon"></div>
<div class="mun">60:00</div>
</div> -->
</div>
</div>
<div class="exam-main" :style="{height: this.contentHeight + 'px'}">
<div class="left">
<question
v-if="Object.keys(questionParams.question).length"
:contentHeight="contentHeight"
:questionParams="questionParams"
ref="signHandle"
@isSign="isSign"
></question>
</div>
<div class="right">
<answer-card
:questionParams="questionParams"
></answer-card>
<!-- :info="sInfo.info" -->
</div>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
<div
@click="changeIndex('prev')"
:class="this.questionParams.questionIndex !== 0 ? 'active' : ''"
>上一题</div>
<div
:class="questionParams.questionIndex + 1 !== questionParams.question.total_question_count ? 'active' : ''"
@click="changeIndex('next')"
>下一题</div>
</div>
<div class="rigth-btn" @click="signHandle">
<div class="sign">
<div class="icon"></div>
<div class="txt"></div>
</div>
<div class="end-exam-btn">
<div class="btn" @click="endExam">结束考试</div>
</div>
</div>
</div>
</div>
<my-dia :title="title" :prompt="prompt" v-if="isPopup" @close="close">
<template v-slot:button>
<button @click="close">关闭</button>
<button @click="endExamRequest">确定</button>
</template>
</my-dia>
</div>
</template>
<script>
import * as api from '@/api/exam.js'
import answerCard from '@/components/exam/answerCard.vue'
import question from '@/components/exam/question.vue'
export default {
components: {
question,
answerCard
},
data() {
return {
isExamTimeDate: true,
itemSign: false,
examTime: '00:00:00 倒计时',
clearTime: null,
isPopup: false,
// 设置页面高
contentHeight: 0,
// 原数据
beforeChangeData: {},
// 过滤后的数据
afterChangeData: {},
// 题的数据所需的参数
changeTime: 0,
questionParams: {
// 用户选择的选项 --- 提交后台的数据
answerRecord: {},
// 当前题的下标
questionIndex: 0,
// 所有题 和题的信息
question: {},
card: {}
}
}
},
mounted() {
// this.setTick()
this.contentHeight = parseInt(document.documentElement.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight))
this.getTopic()
},
methods: {
// 标记
signHandle() {
this.$refs.signHandle.onSignHandle()
},
isSign(value) {
this.itemSign = value
},
// 提交考试
endExam() {
this.isExamTimeDate
? this.isPopup = true
: this.endExamRequest()
},
endExamRequest() {
},
countDown(time) {
const lefttime = parseInt((time) / 1000)
const h = this.addZero(parseInt(lefttime / (60 * 60) % 24))
const m = this.addZero(parseInt(lefttime / 60 % 60))
const s = this.addZero(parseInt(lefttime % 60))
this.examTime = `${h} : ${m} : ${s} 倒计时`
},
setTick() {
this.clearTime = setInterval(() => {
const nowtime = new Date()
const endtime = new Date(this.examInfo.end_time)
const countTime = endtime.getTime() - nowtime.getTime()
if (countTime <= 0) {
this.isExamTimeDate = false
clearInterval(this.clearTime)
this.examTime = '00:00:00 倒计时'
this.endExam()
} else {
this.countDown(countTime)
}
}, 1000)
},
addZero(i) {
return i < 10 ? '0' + i : i + ''
},
close() {
this.isPopup = false
},
getDom(id) {
return document.getElementById(id)
},
changeIndex(type) {
if (type === 'prev') {
this.questionParams.questionIndex > 0 && (this.questionParams.questionIndex--)
} else {
this.questionParams.questionIndex + 1 !== this.questionParams.question.total_question_count && (this.questionParams.questionIndex++)
}
this.setData()
},
getTopic() {
const param = {
type: 1,
is_create: 1
}
api
.getExamQuestion(param)
.then(response => {
const data = JSON.parse(response.data)
this.beforeChangeData = data.sheet
this.afterChangeData = this.addNumber(data.sheet.questions.question_items)
this.questionParams.card = this.addNumber(data.sheet.questions.question_items)
console.log(this.afterChangeData, '===1')
this.setData()
})
.finally(() => {
// this.loaded = true
})
},
addNumber(data) {
let countNum = 0
const type = {
1: '单选题',
2: '多选题',
5: '案例题',
6: '判断题'
}
return data.map(item => {
return item.question_list.map(cItem => {
countNum++
const data = {
q_order: countNum,
question_item_id: item.question_item_id,
question_item_type: item.question_type,
content: cItem.question_content,
id: cItem.id,
options: cItem.question_options,
question_item_title: type[item.question_type],
total_question_count: this.beforeChangeData.questions.total_question_count
}
if (parseInt(item.question_type) === 5) {
data.group_id = cItem.group_id
data.list = this.mergeData(item.question_list, 'answer_count')
}
return data
})
})
},
// 合并案例题
mergeData(arr, str) {
const _arr = []
let _t = []
let _tmp = null
if (arr.length) {
_tmp = arr[0][str]
}
for (const i in arr) {
if (arr[i][str] === _tmp) {
_t.push(arr[i])
} else {
_tmp = arr[i][str]
_arr.push(_t)
_t = [arr[i]]
}
}
_arr.push(_t)
return _arr
},
setData() {
this.afterChangeData.map(item => {
item.map(cItem => {
cItem.q_order === this.questionParams.questionIndex + 1 && (this.questionParams.question = cItem)
})
})
console.log(this.questionParams.question)
},
getCache() {
// action.Exam.getCache(this.$route.params.examId).then(res => {
// const data = JSON.parse(res.answer)
// if (data !== null && data !== 'null') {
// this.questionParams.answerRecord = data
// }
// }).catch(err => {
// this.$alert(err.message, {
// callback: action => {}
// })
// })
}
},
computed: {
changeQuestionIndex() {
return this.questionParams.questionIndex
}
},
watch: {
changeQuestionIndex(newV, oldV) {
this.setData()
}
}
}
</script>
<style lang="scss" scoped>
.answer-box{
width: 100%;
height: 100%;
// background: #f9f9f9;
.head{
width: 100%;
height: 80px;
background: #FFFFFF;
display: flex;
.title{
padding-left: 30px;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
}
.right{
width: 260px;
margin-left: auto;
display: flex;
justify-content: space-around;
align-items: center;
.count{
font-size: 18px;
font-weight: bold;
color: #222222;
}
.time{
display: flex;
.icon{
width: 23px;
height: 23px;
// background: url(../../assets/images/tick.png);
background-size:100% 100%;
}
.mun{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
margin-left: 10px;
}
}
}
}
.exam-main{
display: flex;
.left{
flex: 1;
padding: 10px 20px 0 53px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.right{
position: relative;
width: 220px;
background: #fff;
padding: 0 20px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
.foot{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #FFFFFF;
display: flex;
align-items: center;
.exam-btn{
display: flex;
padding-left: 40px;
cursor: pointer;
div{
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #CCCCCC;
font-size: 14px;
font-weight: bold;
color: #999999;
line-height: 40px;
text-align: center;
margin-right: 20px;
&.active{
background: #C01540;
border-radius: 4px;
color: #fff;
}
}
}
.rigth-btn{
display: flex;
margin-left: auto;
.end-exam-btn{
width: 260px;
display: flex;
justify-content: center;
align-items: center;
.btn{
cursor: pointer;
width: 200px;
height: 40px;
background: #EEEEEE;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #CCCCCC;
line-height: 40px;
text-align: center;
}
}
.sign{
margin-right: 20px;
.icon{
margin: 0 auto;
width: 24px;
height: 24px;
// background: url(../../assets/images/sign.png);
background-size:100% 100%;
}
.txt{
font-size: 14px;
color: #CCCCCC;
line-height: 20px;
margin-top: 2px;
}
}
}
}
}
</style>
src/pages/testExam/index.vue 0 → 100644
浏览文件 @ b8a1a399
<template>
<div class="app-container">
<div class="title">考前摸底介绍</div>
<div class="desc-exam">
<p>考试时间20分钟。</p>
<p>考试题目共22题，分四部分：单选题共8题，多选题共8题，判断题共5题，案例题共1题。</p>
</div>
<div class="exam-btn-box">
<div class="exam-btn">开始考试</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.app-container{
position: relative;
height: 100%;
padding: 30px;
background-color: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
box-sizing: border-box;
.title{
border-bottom: 1px solid #ccc;
font-size: 18px;
color: #222222;
line-height: 45px;
}
.desc-exam{
min-height: 350px;
// border-bottom: 1px solid #ccc;
p{
margin-top: 20px;
font-size: 14px;
color: #333333;
line-height: 20px;
}
}
.exam-btn-box{
box-sizing: border-box;
width: 100%;
padding-top: 30px;
border-top: 1px solid #ccc;
.exam-btn{
text-align: center;
line-height: 40px;
width: 116px;
height: 40px;
background: #C01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
}
}
</style>
src/router/routes.js
浏览文件 @ b8a1a399
...@@ -23,6 +23,13 @@ const courseRoutes = [ ...@@ -23,6 +23,13 @@ const courseRoutes = [
component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/course/tag/item') component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/course/tag/item')
} }
] ]
const examAnswer = [
/* 考前摸底 */
{
path: '/testExam',
component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/testExam')
}
]
export default [ export default [
{ path: '*', redirect: '/index' }, { path: '*', redirect: '/index' },
...@@ -199,7 +206,8 @@ export default [ ...@@ -199,7 +206,8 @@ export default [
component: () => import(/* webpackChunkName: "account" */ '@/pages/account/password') component: () => import(/* webpackChunkName: "account" */ '@/pages/account/password')
}, },
/* 考证课程 */ /* 考证课程 */
...courseRoutes ...courseRoutes,
...examAnswer
] ]
}, },
/* 搜索 */ /* 搜索 */
...@@ -218,5 +226,10 @@ export default [ ...@@ -218,5 +226,10 @@ export default [
{ path: 'course', component: () => import(/* webpackChunkName: "my" */ '@/pages/my/course') }, { path: 'course', component: () => import(/* webpackChunkName: "my" */ '@/pages/my/course') },
{ path: 'test', component: () => import(/* webpackChunkName: "my" */ '@/pages/my/test') } { path: 'test', component: () => import(/* webpackChunkName: "my" */ '@/pages/my/test') }
] ]
},
/* 考前摸底考试 */
{
path: '/testExam/exam',
component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/testExam/exam/index')
} }
] ]
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论