样式优化
This commit is contained in:
parent
f5f25b2ea6
commit
bd529e0eb8
|
|
@ -33,6 +33,7 @@
|
|||
<div class="num">{{ nowNum }}/{{ allNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-line></u-line>
|
||||
|
||||
<div
|
||||
class="question-wrapper"
|
||||
|
|
@ -82,12 +83,20 @@
|
|||
</div>
|
||||
|
||||
<div v-if="item.isSelect">
|
||||
<div class="answer">
|
||||
<div>正确答案：{{ item.correctGrade }}</div>
|
||||
<div>你的答案：{{ item.select }}</div>
|
||||
</div>
|
||||
<u-line dashed></u-line>
|
||||
|
||||
<div>
|
||||
<div class="analysis">答案解析：</div>
|
||||
<div class="analysis-container">{{ item.answerAnaly }}</div>
|
||||
<div class="analysis">
|
||||
<div class="line" :style="{ height: fontSize - 5 + 'px' }"></div>
|
||||
答案解析：
|
||||
</div>
|
||||
<div class="analysis-container" :style="{ fontSize: fontSize - 2 + 'px' }">
|
||||
{{ item.answerAnaly || '暂无' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -142,11 +151,19 @@
|
|||
</div>
|
||||
|
||||
<div v-if="item.isSelect">
|
||||
<div class="answer">
|
||||
<div>正确答案：{{ item.correctGrade.split('').join('、') }}</div>
|
||||
<div>你的答案：{{ item.select && item.select.join('、') }}</div>
|
||||
</div>
|
||||
<u-line dashed></u-line>
|
||||
|
||||
<div class="analysis">知识点</div>
|
||||
<div class="analysis-container">{{ item.answerAnaly }}</div>
|
||||
<div class="analysis">
|
||||
<div class="line" :style="{ height: fontSize - 5 + 'px' }"></div>
|
||||
知识点：
|
||||
</div>
|
||||
<div class="analysis-container" :style="{ fontSize: fontSize - 2 + 'px' }">
|
||||
{{ item.answerAnaly || '暂无' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -185,20 +202,12 @@
|
|||
</div>
|
||||
|
||||
<!-- 提交弹框 -->
|
||||
<u-modal
|
||||
:show="showModal"
|
||||
title="本次答题正确率"
|
||||
showCancelButton
|
||||
@cancel="handleConfirm"
|
||||
@confirm="handleClose"
|
||||
cancelText="继续答题"
|
||||
confirmText="结束答题"
|
||||
:buttonReverse="true"
|
||||
confirmColor="#606266"
|
||||
cancelColor="#2979ff"
|
||||
>
|
||||
<view class="slot-content">
|
||||
<u-popup :show="showModal" :closeOnClickOverlay="false" mode="center" round="10" customStyle="width: 80% ">
|
||||
<div class="pop-content">
|
||||
<div class="top-title">
|
||||
<div class="title">本次答题正确率</div>
|
||||
<div class="correctRate">{{ correctRate }}%</div>
|
||||
</div>
|
||||
<div class="modal-container">
|
||||
<div class="item">
|
||||
<div class="num">{{ answerNum }}</div>
|
||||
|
|
@ -213,8 +222,12 @@
|
|||
<div>答题时长</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</u-modal>
|
||||
<div class="pop-btn">
|
||||
<u-button class="custom-style" plain shape="circle" text="结束答题" @click="handleClose" />
|
||||
<u-button class="custom-style" type="primary" shape="circle" text="继续答题" @click="handleConfirm" />
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
|
||||
<!-- 题目选择弹框 -->
|
||||
<u-popup
|
||||
|
|
@ -222,7 +235,7 @@
|
|||
@close="showModalSelect = false"
|
||||
mode="center"
|
||||
round="10"
|
||||
customStyle="width: 90%; height: 50%"
|
||||
customStyle="width: 90%; height: 50% "
|
||||
>
|
||||
<div class="num-wrapper">
|
||||
<div class="correct">
|
||||
|
|
@ -238,6 +251,7 @@
|
|||
<div class="num">{{ nowNum }}/{{ allNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-line></u-line>
|
||||
|
||||
<div class="topic-content">
|
||||
<div class="wrap" v-for="(item, index) in questionListSelect" :key="index">
|
||||
|
|
@ -270,8 +284,10 @@ import {
|
|||
updStudyDurationExamPractice
|
||||
} from '@/api/eduApp'
|
||||
import config from '@/config'
|
||||
import uLine from '../../../uni_modules/uview-ui/components/u-line/u-line.vue'
|
||||
|
||||
export default {
|
||||
components: { uLine },
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
|
|
@ -752,25 +768,6 @@ export default {
|
|||
// 计算正确率 = 正确题数 / 已答题数
|
||||
this.correctRate = rate == 'NaN' ? '0' : rate
|
||||
this.showModal = true
|
||||
// const params = {
|
||||
// id: this.practiceId
|
||||
// }
|
||||
// uni.request({
|
||||
// url: config.baseUrl + '/exam-student/studentPractice/getPracticeQuestionRate',
|
||||
// method: 'post',
|
||||
// data: params,
|
||||
// header: {
|
||||
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||||
// Authorization: uni.getStorageSync('access_token')
|
||||
// },
|
||||
// success: res => {
|
||||
// console.log('🚀 ~ handleSubmit ~ res:', res)
|
||||
// res = res.data
|
||||
// },
|
||||
// fail: err => {
|
||||
// console.log(err)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
handleConfirm() {
|
||||
console.log('确认')
|
||||
|
|
@ -872,6 +869,7 @@ export default {
|
|||
openSelect() {
|
||||
if (this.isAddLoading) return
|
||||
this.isAddLoading = true
|
||||
// this.showModalSelect = true
|
||||
// const res = await this.getPracticeQuestionList()
|
||||
// console.log('🚀 ~ openSelect ~ res:', res)
|
||||
// this.questionListSelect = res.data
|
||||
|
|
@ -958,24 +956,39 @@ export default {
|
|||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
/* background: url('/static/images/question-bg.png') no-repeat; */
|
||||
background: #fff;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.slot-content {
|
||||
width: 100%;
|
||||
.answer {
|
||||
margin: 15px 0;
|
||||
padding: 10px;
|
||||
background: #f6f9fc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.pop-content {
|
||||
.top-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
background: #1f92df;
|
||||
border-radius: 10px 10px 0 0;
|
||||
line-height: 1;
|
||||
.title {
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.correctRate {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
background: #f5f8fb;
|
||||
margin: 20px 10px;
|
||||
background: #f6f9fc;
|
||||
border-radius: 5px;
|
||||
height: 73px;
|
||||
|
||||
|
|
@ -985,13 +998,33 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #9d9b9b;
|
||||
font-size: 14px;
|
||||
.num {
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
color: #3185f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pop-btn {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.custom-style {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
/* background: url('/static/images/question-bg.png') no-repeat; */
|
||||
background: #fff;
|
||||
background-size: 100% 100%;
|
||||
.topic-content {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: flex-start;
|
||||
|
|
@ -1097,13 +1130,22 @@ export default {
|
|||
}
|
||||
|
||||
.analysis {
|
||||
margin-top: 20px;
|
||||
margin-top: 8px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
border: 2px solid #1f92df;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
.analysis-container {
|
||||
margin-top: 6px;
|
||||
color: #475583;
|
||||
text-indent: 1em;
|
||||
background: #f6f9fc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1115,12 +1157,13 @@ export default {
|
|||
.num-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 15px 6%;
|
||||
margin: 15px 9%;
|
||||
|
||||
.correct,
|
||||
.error,
|
||||
.total {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue