605 lines
20 KiB
Vue
605 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<Navbar title="练习" :showBack="false" />
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="top-wrapper">
|
|||
|
|
<div class="left">
|
|||
|
|
<div style="color: #1989fa">正确（{{ correctNum }}）</div>
|
|||
|
|
<div style="color: #ff4d4f">错误（{{ errorNum }}）</div>
|
|||
|
|
<div>用时：{{ timeCount }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
第
|
|||
|
|
<span style="color: #1989fa">{{ currentIndex + 1 }}</span>
|
|||
|
|
/{{ questionList.length }}
|
|||
|
|
题
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 题目内容 -->
|
|||
|
|
<div class="question-wrapper">
|
|||
|
|
<div class="question-list" v-for="(item, index) in questionList" :key="item.id" v-show="index == currentIndex">
|
|||
|
|
<div class="question-type">
|
|||
|
|
<div class="line"></div>
|
|||
|
|
<div class="type">
|
|||
|
|
<div v-if="item.questionType == 1">单选题</div>
|
|||
|
|
<div v-else-if="item.questionType == 2">多选题</div>
|
|||
|
|
<div v-else-if="item.questionType == 3">判断题</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="question-title">{{ index + 1 }}. {{ item.content }}</div>
|
|||
|
|
<div class="question-img-list">
|
|||
|
|
<div class="img" v-for="(img, imgIndex) in item.questionPictureVoList">
|
|||
|
|
<u-image
|
|||
|
|
:key="imgIndex"
|
|||
|
|
:src="img.url"
|
|||
|
|
:showLoading="true"
|
|||
|
|
width="60px"
|
|||
|
|
height="60px"
|
|||
|
|
@click="handleImg(img.url)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="question-item">
|
|||
|
|
<div v-if="item.questionType == 1 || item.questionType == 3">
|
|||
|
|
<!-- 单选题 -->
|
|||
|
|
<u-radio-group v-model="item.radioValue" placement="column">
|
|||
|
|
<u-radio
|
|||
|
|
:customStyle="{ marginBottom: '8px' }"
|
|||
|
|
v-for="(question, index) in item.questionAnswerVoList"
|
|||
|
|
:key="index"
|
|||
|
|
:label="question.options + '. ' + question.answerOptions"
|
|||
|
|
:name="question.options + '. ' + question.answerOptions"
|
|||
|
|
:disabled="question.disabled"
|
|||
|
|
@change="radioChange(question)"
|
|||
|
|
>
|
|||
|
|
<div class="radio-item">
|
|||
|
|
<div class="radio-name">{{ question.options + '. ' + question.answerOptions }}</div>
|
|||
|
|
<div class="question-img-list">
|
|||
|
|
<div class="img" v-for="(img, imgIndex) in question.questionPictureVoList">
|
|||
|
|
<u-image
|
|||
|
|
:key="imgIndex"
|
|||
|
|
:src="img.url"
|
|||
|
|
:showLoading="true"
|
|||
|
|
width="60px"
|
|||
|
|
height="60px"
|
|||
|
|
@click="handleImg(img.url)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</u-radio>
|
|||
|
|
</u-radio-group>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="item.questionType == 2">
|
|||
|
|
<!-- 多选题 -->
|
|||
|
|
<u-checkbox-group v-model="item.checkboxValue" placement="column">
|
|||
|
|
<div v-for="(question, index) in item.questionAnswerVoList">
|
|||
|
|
<u-checkbox
|
|||
|
|
:customStyle="{ marginBottom: '8px' }"
|
|||
|
|
:key="index"
|
|||
|
|
:label="question.options + '. ' + question.answerOptions"
|
|||
|
|
:name="question.options + '. ' + question.answerOptions"
|
|||
|
|
:disabled="question.disabled"
|
|||
|
|
@change="radioChange(question)"
|
|||
|
|
></u-checkbox>
|
|||
|
|
<div class="radio-item">
|
|||
|
|
<div class="question-img-list" style="margin: 10px">
|
|||
|
|
<div class="img" v-for="(img, imgIndex) in question.questionPictureVoList">
|
|||
|
|
<u-image
|
|||
|
|
:key="imgIndex"
|
|||
|
|
:src="img.url"
|
|||
|
|
:showLoading="true"
|
|||
|
|
width="60px"
|
|||
|
|
height="60px"
|
|||
|
|
@click="handleImg(img.url)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</u-checkbox-group>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="padding: 10px">
|
|||
|
|
<u-button
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
shape="circle"
|
|||
|
|
@click="handleOption(item)"
|
|||
|
|
v-show="!item.chooseAnswer"
|
|||
|
|
>
|
|||
|
|
确定选择
|
|||
|
|
</u-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="item.chooseAnswer">
|
|||
|
|
<div style="color: #5ac725" v-if="item.chooseAnswer == item.correctAnswer">回答正确</div>
|
|||
|
|
<div style="color: #ff4d4f" v-else>回答错误</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="answer-wrap" v-if="item.chooseAnswer">
|
|||
|
|
<div class="answer-item">
|
|||
|
|
<div>正确答案</div>
|
|||
|
|
<div style="color: #5ac725">{{ item.correctAnswer1 }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="answer-line"></div>
|
|||
|
|
<div class="answer-item">
|
|||
|
|
<div>已选答案</div>
|
|||
|
|
<div :style="{ color: item.chooseAnswer == item.correctAnswer ? '#5ac725' : '#ff4d4f' }">
|
|||
|
|
{{ item.chooseAnswer1 }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 解析 -->
|
|||
|
|
<div v-if="item.chooseAnswer">
|
|||
|
|
<div style="margin: 20px 0 10px; font-weight: 800">解析：</div>
|
|||
|
|
<div class="analysis">{{ item.analysis }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部固定按钮, 上一题, 下一题, 结束练习 -->
|
|||
|
|
<div class="box"></div>
|
|||
|
|
<div class="bottom-wrapper">
|
|||
|
|
<u-button
|
|||
|
|
class="btn"
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
shape="circle"
|
|||
|
|
@click="handlePrev"
|
|||
|
|
:disabled="currentIndex == 0"
|
|||
|
|
>
|
|||
|
|
上一题
|
|||
|
|
</u-button>
|
|||
|
|
<u-button
|
|||
|
|
class="btn"
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
shape="circle"
|
|||
|
|
@click="handleNext"
|
|||
|
|
:disabled="
|
|||
|
|
currentIndex == questionList.length - 1 ||
|
|||
|
|
(questionList[currentIndex] && questionList[currentIndex].chooseAnswer == '')
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
下一题
|
|||
|
|
</u-button>
|
|||
|
|
<u-button class="btn" type="primary" size="small" shape="circle" @click="showModal = true">结束练习</u-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 弹框 -->
|
|||
|
|
<u-modal
|
|||
|
|
:show="showModal"
|
|||
|
|
title="温馨提示"
|
|||
|
|
content="确定退出本次练习吗?"
|
|||
|
|
:showCancelButton="true"
|
|||
|
|
@cancel="showModal = false"
|
|||
|
|
@confirm="handleEnd"
|
|||
|
|
>
|
|||
|
|
<view class="slot-content">确定退出本次练习吗</view>
|
|||
|
|
</u-modal>
|
|||
|
|
<u-modal :show="showModal2" title="答题结果" @confirm="goBack">
|
|||
|
|
<view class="slot-content">
|
|||
|
|
<div class="container">
|
|||
|
|
<div>答题数：{{ correctNum + errorNum }}</div>
|
|||
|
|
<div style="margin: 0 20px">
|
|||
|
|
正确数：
|
|||
|
|
<span style="color: #5ac725">{{ correctNum }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
正确率：{{ correctNum + errorNum == 0 ? 0 : ((correctNum / (correctNum + errorNum)) * 100).toFixed(2) }}%
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<u-line dashed :hairline="false" margin="20px 0"></u-line>
|
|||
|
|
<div class="container">
|
|||
|
|
<div>用时：</div>
|
|||
|
|
<div>{{ timeCount }}</div>
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
</u-modal>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getQuestion, updateAnswer, getTestQuestion, endPractice } from '@/api/educationTraining'
|
|||
|
|
import config from '@/config'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isAddLoading: false,
|
|||
|
|
userId: uni.getStorageSync('userInfo').userId,
|
|||
|
|
opt: {},
|
|||
|
|
currentIndex: 0, // 当前题目索引
|
|||
|
|
questionList: [], // 试题列表
|
|||
|
|
endOfExamination: false, // 是否结束考试
|
|||
|
|
correctNum: 0, // 正确题数
|
|||
|
|
errorNum: 0, // 错误题数
|
|||
|
|
time: 0, // 用时
|
|||
|
|
timeCount: '00:00:00',
|
|||
|
|
timer: null, // 计时器id
|
|||
|
|
showModal: false,
|
|||
|
|
showModal2: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(opt) {
|
|||
|
|
this.opt = JSON.parse(opt.params)
|
|||
|
|
console.log('🚀 ~ onLoad ~ this.opt:', this.opt)
|
|||
|
|
this.getQuestionList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取题目列表
|
|||
|
|
async getQuestionList() {
|
|||
|
|
let res = {}
|
|||
|
|
if (this.opt.isAutoExercises) {
|
|||
|
|
const params = {
|
|||
|
|
practiceId: this.opt.practiceId,
|
|||
|
|
practiceType: this.opt.practiceType,
|
|||
|
|
lastPracticeQuestionId: this.opt.lastPracticeQuestionId || ''
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ getQuestionList ~ params:', params)
|
|||
|
|
res = await getTestQuestion(params)
|
|||
|
|
} else {
|
|||
|
|
res = await getQuestion({ examId: this.opt.id })
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ 题目列表 ~ res:', res)
|
|||
|
|
if (this.opt.practiceType == 1) {
|
|||
|
|
// 过滤出包含 lastPracticeQuestionId 的题目, lastPracticeQuestionId 是未答题目所有id拼接的字符串
|
|||
|
|
this.opt.lastPracticeQuestionId = this.opt.lastPracticeQuestionId.split(',')
|
|||
|
|
res.data = res.data.filter(item => this.opt.lastPracticeQuestionId.includes(item.questionId))
|
|||
|
|
}
|
|||
|
|
this.questionList = res.data
|
|||
|
|
this.questionList.forEach(item => {
|
|||
|
|
if (item.questionPictureVoList && item.questionPictureVoList.length > 0) {
|
|||
|
|
item.questionPictureVoList.forEach(img => {
|
|||
|
|
img.url = config.fileUrl2 + img.pictureUrl.replace(/\\/g, '/')
|
|||
|
|
// img.url = 'https://cdn.uviewui.com/uview/swiper/1.jpg'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
//
|
|||
|
|
if (item.questionAnswerVoList && item.questionAnswerVoList.length > 0) {
|
|||
|
|
// 添加一个 radiovalue 字段，用于记录用户选择的答案
|
|||
|
|
if (item.questionType == 1 || item.questionType == 3) {
|
|||
|
|
item.radioValue = ''
|
|||
|
|
} else if (item.questionType == 2) {
|
|||
|
|
item.checkboxValue = []
|
|||
|
|
}
|
|||
|
|
item.chooseAnswer = ''
|
|||
|
|
item.questionAnswerVoList.forEach(answer => {
|
|||
|
|
if (answer.questionPictureVoList && answer.questionPictureVoList.length > 0) {
|
|||
|
|
// 图片路径拼接
|
|||
|
|
answer.questionPictureVoList.forEach(opt => {
|
|||
|
|
opt.url = config.fileUrl2 + opt.pictureUrl.replace(/\\/g, '/')
|
|||
|
|
// opt.url = 'https://cdn.uviewui.com/uview/swiper/1.jpg'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
console.log('🚀 ~ getQuestionList ~ this.题目列表:', this.questionList)
|
|||
|
|
this.startTimer()
|
|||
|
|
},
|
|||
|
|
// 上一题
|
|||
|
|
handlePrev() {
|
|||
|
|
this.currentIndex--
|
|||
|
|
},
|
|||
|
|
// 下一题
|
|||
|
|
handleNext() {
|
|||
|
|
this.currentIndex++
|
|||
|
|
},
|
|||
|
|
// 结束练习
|
|||
|
|
async handleEnd() {
|
|||
|
|
console.log('🚀 结束练习')
|
|||
|
|
try {
|
|||
|
|
if (this.isAddLoading) {
|
|||
|
|
// 提示
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '正在提交中...',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.isAddLoading = true
|
|||
|
|
// 计算总分
|
|||
|
|
let totalScore = 0
|
|||
|
|
this.questionList.forEach(item => {
|
|||
|
|
if (item.scorePerQuestion) {
|
|||
|
|
totalScore += Number(item.scorePerQuestion)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 找到 this.questionList 中 chooseAnswer 最后一个有值的 questionId
|
|||
|
|
// const questionId = this.questionList.filter(item => item.chooseAnswer).pop().questionId
|
|||
|
|
// 过滤出所有未答题的questionId 拼接为一个字符串
|
|||
|
|
const questionId = this.questionList
|
|||
|
|
.filter(item => !item.chooseAnswer)
|
|||
|
|
.map(item => item.questionId)
|
|||
|
|
.join(',')
|
|||
|
|
// errorQuestionList 错题列表
|
|||
|
|
const errorQuestionList = this.questionList.filter(
|
|||
|
|
item => item.chooseAnswer && item.chooseAnswer != item.correctAnswer
|
|||
|
|
)
|
|||
|
|
// correctQuestionList 正确题列表
|
|||
|
|
const correctQuestionList = this.questionList.filter(
|
|||
|
|
item => item.chooseAnswer && item.chooseAnswer == item.correctAnswer
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
this.showModal = false
|
|||
|
|
// loading
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '提交中...',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
if (this.opt.isAutoExercises) {
|
|||
|
|
const params = {
|
|||
|
|
practiceId: this.opt.practiceId, // 题库id
|
|||
|
|
practiceType: this.opt.practiceType, // 题库类型
|
|||
|
|
personId: this.userId, // 用户id
|
|||
|
|
practiceNum: this.correctNum + this.errorNum, // 练习题数
|
|||
|
|
correctNum: this.correctNum, // 正确题数
|
|||
|
|
errorNum: this.errorNum, // 错误题数
|
|||
|
|
practiceTime: this.time, // 练习时间
|
|||
|
|
lastPracticeQuestionId: questionId, // 最后一题id
|
|||
|
|
errorQuestionList, // 错题列表
|
|||
|
|
correctQuestionList // 正确题列表
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ handleEnd ~ params:', params)
|
|||
|
|
const res = await endPractice(params)
|
|||
|
|
console.log('🚀 ~ handleEnd ~ res:', res)
|
|||
|
|
} else {
|
|||
|
|
let scoringRete = 0
|
|||
|
|
if (this.correctNum + this.errorNum != 0) {
|
|||
|
|
scoringRete = ((this.correctNum / (this.correctNum + this.errorNum)) * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
const params = {
|
|||
|
|
userId: this.userId,
|
|||
|
|
examPaperId: this.opt.id,
|
|||
|
|
scoringRete,
|
|||
|
|
answerTime: this.time,
|
|||
|
|
score: totalScore,
|
|||
|
|
selectAnswerList: this.questionList
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ handleEnd ~ params:', params)
|
|||
|
|
const res = await updateAnswer(params)
|
|||
|
|
console.log('🚀 ~ handleEnd ~ res:', res)
|
|||
|
|
}
|
|||
|
|
this.showModal2 = true
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.isAddLoading = false
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('🚀 ~ handleEnd ~ error:', error)
|
|||
|
|
this.isAddLoading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 返回
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
// 开启计时器
|
|||
|
|
startTimer() {
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
this.time++
|
|||
|
|
// 时间格式 00:00:00
|
|||
|
|
const hour = Math.floor(this.time / 3600)
|
|||
|
|
const minute = Math.floor((this.time % 3600) / 60)
|
|||
|
|
const second = this.time % 60
|
|||
|
|
this.timeCount = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${
|
|||
|
|
second < 10 ? '0' + second : second
|
|||
|
|
}`
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
// 点击预览
|
|||
|
|
handleImg(img) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: [img]
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 选择选项
|
|||
|
|
handleOption(item) {
|
|||
|
|
console.log('🚀 ~ handleOption ~ item:', item)
|
|||
|
|
if (item.questionType == 1 || item.questionType == 3) {
|
|||
|
|
if (!item.radioValue) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择答案',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ handleOption ~ 确认选择-单选:', item)
|
|||
|
|
item.chooseAnswer = String(item.radioValue.split('')[0].charCodeAt() - 65)
|
|||
|
|
item.correctAnswer1 = String.fromCharCode(65 + Number(item.correctAnswer))
|
|||
|
|
item.chooseAnswer1 = String.fromCharCode(65 + Number(item.chooseAnswer))
|
|||
|
|
item.questionAnswerVoList.forEach(answer => {
|
|||
|
|
answer.disabled = true
|
|||
|
|
})
|
|||
|
|
// 判断答案是否正确
|
|||
|
|
if (item.chooseAnswer == item.correctAnswer) {
|
|||
|
|
this.correctNum++
|
|||
|
|
if (item.questionType == 1) {
|
|||
|
|
item.scorePerQuestion = this.opt.singleScore
|
|||
|
|
} else if (item.questionType == 3) {
|
|||
|
|
item.scorePerQuestion = this.opt.judgeScore
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.errorNum++
|
|||
|
|
item.scorePerQuestion = '0'
|
|||
|
|
}
|
|||
|
|
} else if (item.questionType == 2) {
|
|||
|
|
if (item.checkboxValue.length == 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择答案',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ handleOption ~ 确认选择-多选:', item)
|
|||
|
|
let chooseAnswer = item.checkboxValue.map(item => item.split('')[0].charCodeAt() - 65)
|
|||
|
|
chooseAnswer.sort((a, b) => a - b)
|
|||
|
|
console.log('🚀 ~ handleOption ~ chooseAnswer:', chooseAnswer)
|
|||
|
|
item.chooseAnswer = chooseAnswer.join(',')
|
|||
|
|
console.log('🚀 ~ handleOption ~ item.chooseAnswer:', item.chooseAnswer)
|
|||
|
|
item.correctAnswer1 = item.correctAnswer
|
|||
|
|
.split(',')
|
|||
|
|
.map(item => String.fromCharCode(65 + Number(item)))
|
|||
|
|
.join(',')
|
|||
|
|
item.chooseAnswer1 = chooseAnswer.map(item => String.fromCharCode(65 + Number(item))).join(',')
|
|||
|
|
item.questionAnswerVoList.forEach(answer => {
|
|||
|
|
answer.disabled = true
|
|||
|
|
})
|
|||
|
|
// 判断答案是否正确
|
|||
|
|
if (item.chooseAnswer == item.correctAnswer) {
|
|||
|
|
this.correctNum++
|
|||
|
|
item.scorePerQuestion = this.opt.multipleScore
|
|||
|
|
} else {
|
|||
|
|
this.errorNum++
|
|||
|
|
item.scorePerQuestion = '0'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 单选题选择
|
|||
|
|
radioChange(e) {
|
|||
|
|
console.log('radioChange', e)
|
|||
|
|
},
|
|||
|
|
// 禁用手势返回
|
|||
|
|
onBackPress(options) {
|
|||
|
|
console.log(options)
|
|||
|
|
if (options.from == 'backbutton') {
|
|||
|
|
// 来自手势返回
|
|||
|
|
console.log('手势返回')
|
|||
|
|
// 返回为 true 时，不会执行返回操作，可以自定义返回逻辑
|
|||
|
|
// 返回为 false 或者不返回时，则执行默认返回操作
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
// 返回为 false 或者不返回时，则执行默认返回操作
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.content {
|
|||
|
|
padding: 20px;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
word-break: break-all;
|
|||
|
|
|
|||
|
|
.bottom-wrapper {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|||
|
|
.btn {
|
|||
|
|
margin: 0 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.box {
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-wrapper {
|
|||
|
|
height: 50px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|||
|
|
.left {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.question-wrapper {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
.question-type {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
.line {
|
|||
|
|
width: 3px;
|
|||
|
|
height: 15px;
|
|||
|
|
background-color: #1989fa;
|
|||
|
|
}
|
|||
|
|
.type {
|
|||
|
|
padding: 0 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.question-title {
|
|||
|
|
margin: 10px 0;
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.question-img-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
/* margin-top: 10px; */
|
|||
|
|
}
|
|||
|
|
.img {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
}
|
|||
|
|
.radio-item {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
.radio-name {
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.question-item {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.answer-wrap {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
background-color: #edf2f7;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 10px;
|
|||
|
|
.answer-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
div {
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.answer-line {
|
|||
|
|
width: 1px;
|
|||
|
|
height: 45px;
|
|||
|
|
background-color: #ccc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.analysis {
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
min-height: 30px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/deep/ .u-radio {
|
|||
|
|
align-items: flex-start !important;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
</style>
|