样式优化

This commit is contained in:
binbin_pan 2024-12-31 15:55:54 +08:00
parent bd529e0eb8
commit e56395f5c2
4 changed files with 58 additions and 195 deletions

View File

@ -21,12 +21,14 @@
</div>
</div>
<div class="explain">*进入考试后计时结束将自动交卷退出后将会继续计时考试期间请勿登录其他设备否则成绩作废</div>
<div class="explain">
*进入考试后计时结束将自动交卷退出后将会继续计时考试期间请勿登录其他设备否则成绩作废
</div>
<!-- 底部固定按钮 -->
<div class="bottom-btn">
<div class="btn">
<u-button type="primary" size="small" shape="circle" text="进入考试" @click="openModal" />
<u-button type="primary" shape="circle" text="进入考试" @click="openModal" />
</div>
</div>
@ -117,7 +119,7 @@ export default {
padding: 10px;
border-radius: 5px;
background-color: #fff;
height: 90vh;
height: calc(100vh - 90px);
box-sizing: border-box;
.title {
@ -129,14 +131,14 @@ export default {
.subtitle {
font-size: 14px;
color: #666;
color: #3185f0;
margin-top: 10px;
}
.info {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-top: 50px;
.duration-wrapper,
.count-wrapper,
@ -182,6 +184,7 @@ export default {
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fff;
padding: 10px 0;
display: flex;

View File

@ -2,9 +2,19 @@
<view :style="{ fontSize: fontSize + 'px' }">
<u-navbar leftIcon="" title="考试" :placeholder="true">
<view class="u-nav-slot" slot="right">
<u-tag text="小" :type="fontSize == 19 ? 'primary' : 'info'" @click="changeFont(19)" style="margin-right: 8px" ></u-tag>
<u-tag text="中" :type="fontSize == 21 ? 'primary' : 'info'" @click="changeFont(21)" style="margin-right: 8px"></u-tag>
<u-tag text="大" :type="fontSize == 23 ? 'primary' : 'info'" @click="changeFont(23)"></u-tag>
<u-tag
text="小"
:type="fontSize == 19 ? 'primary' : 'info'"
@click="changeFont(19)"
style="margin-right: 8px"
></u-tag>
<u-tag
text="中"
:type="fontSize == 21 ? 'primary' : 'info'"
@click="changeFont(20.5)"
style="margin-right: 8px"
></u-tag>
<u-tag text="大" :type="fontSize == 23 ? 'primary' : 'info'" @click="changeFont(22)"></u-tag>
</view>
</u-navbar>
<div class="content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
@ -70,27 +80,30 @@
</div>
</div>
</div>
<!-- 题目 -->
<div class="question-wrapper" v-for="(item, index) in questionList" :key="index" v-show="index == currentIndex">
<div class="question-type-wrapper">
<div class="line" />
<div class="question-type">
<div class="line" :style="{ height: fontSize - 8 + 'px' }" />
<div class="question-type" :style="{ fontSize: fontSize - 2 + 'px' }">
<div v-if="item.examType == 1">单选题{{ item.questionScore }}</div>
<div v-if="item.examType == 2">多选题{{ item.questionScore }}</div>
<div v-if="item.examType == 3">判断题{{ item.questionScore }}</div>
</div>
</div>
<div class="question">{{ currentIndex + 1 }}. {{ item.examTopic }}</div>
<u--image
<div class="question" :style="{ fontSize: fontSize + 2 + 'px' }">
{{ currentIndex + 1 }}. {{ item.examTopic }}
</div>
<u-image
v-if="item.examTopicUrl"
:showLoading="true"
:src="fileUrl + item.examTopicUrl || ''"
width="60px"
height="60px"
style="margin-bottom: 10px"
style="margin: 0 10px 15px 0"
@click="clickImg(fileUrl + item.examTopicUrl)"
/>
<u-line />
<div class="options">
<div class="option-wrapper" v-for="(option, optionIndex) in item.listOption" :key="optionIndex">
<div
@ -101,13 +114,13 @@
<div class="option-item">{{ option.optionIdent }}.</div>
<div class="option-content">{{ option.optionContent }}</div>
</div>
<u--image
<u-image
v-if="option.optionUrl"
:showLoading="true"
:src="fileUrl + option.optionUrl || ''"
width="60px"
height="60px"
style="margin-bottom: 10px"
style="margin: 15px 10px 5px 0"
@click="clickImg(fileUrl + option.optionUrl)"
/>
</div>
@ -117,7 +130,7 @@
<!-- 底部按钮 -->
<div style="height: 75px"></div>
<div class="bottom-btn">
<div class="btn" v-show="currentIndex != 0">
<div class="btn" v-if="currentIndex != 0">
<u-button shape="circle" text="上一题" @click="currentIndex--" />
</div>
<div class="btn" v-if="currentIndex !== questionList.length - 1">
@ -152,8 +165,6 @@
</template>
<script>
import { pathToBase64, base64ToPath } from 'image-tools'
// import face from '@/uni_modules/mcc-face/index.js'
import {
getExamQuestionList,
insertQuestionAnswerById,
@ -223,32 +234,15 @@ export default {
},
onShow() {
this.isHide = false
// setTimeout(() => {
// if (this.screenCount > this.switchCount) {
// this.$refs.uToast.show({
// message: ', ',
// duration: 1000
// })
// this.handleConfirmSubmit()
// }
// }, 1000)
},
onHide() {
// this.screenCount++
// console.log('🚀 ~ onHide ~ this.screenCount:', this.screenCount)
setTimeout(() => {
if (!this.isHide) {
this.handleConfirmSubmit()
}
}, 500)
},
mounted() {
// this.getList()
},
// onUnload() {
// console.log('🚀 ~ onUnload ~ ')
// this.handleConfirmSubmit()
// },
methods: {
changeFont(size) {
console.log('🚀 ~ changeFont ~ size:', size)
@ -262,7 +256,6 @@ export default {
}
console.log('🚀 ~ 考试 ~ params:', params)
this.$verificationToken()
console.log('🚀 ~ 考试 ~ config:', config)
uni.request({
url: config.baseUrl + '/exam-student/studentExam/getExamQuestionList',
method: 'post',
@ -281,9 +274,6 @@ export default {
this.time = Number(data.answerTime) * 60 * 1000
console.log('🚀 ~ getList ~ this.time:', this.time)
console.log('🚀 ~ getList ~ this.questionList:', this.questionList)
// this.random1 = (data.answerTime / 3) * 60 + Math.ceil(Math.random() * 20) + 20
// this.random2 = (data.answerTime / 1.5) * 60 + Math.ceil(Math.random() * 30) + 30
// console.log('🚀 ~ getList ~ this.random1:', this.random1, this.random2)
if (this.questionList.length > 0) {
this.questionList.forEach((item, index) => {
this.$set(item, 'isShow', index < 7)
@ -315,23 +305,7 @@ export default {
if (this.time == 0 && !this.isLoading) return
this.answerTime =
this.time - (time.days * 24 * 60 * 60 + time.hours * 60 * 60 + time.minutes * 60 + time.seconds) * 1000
// console.log('🚀 ~ changeCountDown ~ this.answerTime:', this.answerTime)
// console.log(
// '🚀 ~ changeCountDown ~ this.answerTime:',
// this.time,
// this.answerTime / 1000,
// )
// console.log('🚀 ~ changeCountDown ~:', this.answerTime / 1000 == this.random1)
// console.log('🚀 ~ changeCountDown ~:', this.answerTime / 1000 == this.random2)
// if (this.answerTime / 1000 == this.random1) {
// console.log('🚀 ~ changeCountDown ~ ')
// // this.openFaceScan() // Android
// this.openPhotograph() // IOS
// } else if (this.answerTime / 1000 == this.random2) {
// // this.openFaceScan()
// this.openPhotograph()
// } else
if (this.answerTime == this.time) {
if (this.answerTime == this.time) {
// : ,
this.$refs.uToast.show({
message: '考试时间结束, 系统将自动提交',
@ -473,131 +447,7 @@ export default {
this.updStudyDurationExamPractice({ userId: params.userId, studyId: this.studyId })
}
console.log('🚀 ~ handleConfirmSubmit ~ params:', params, res)
// this.showConfirmModal = false
// const params2 = {
// examId: this.examId,
// examGrade: res.examGrade,
// examResult: res.examResult,
// gradeAverage: res.gradeAverage,
// answerTime: Math.ceil(this.answerTime / 60000),
// examTime: this.examTime,
// questionCount: this.questionList.length,
// switchCount: this.switchCount,
// examNum: this.examNum,
// examCount: this.examCount,
// examCustom: this.examCustom,
// results: res.examResult,
// studyId: this.studyId || ''
// }
// uni.navigateTo({
// url: `/pages/YNEduApp/exam/examinationDetails?params=${JSON.stringify(params2)}`
// })
},
//
// async openFaceScan() {
// face.open(['a'], e => {
// console.log('🚀 ~ e-:', e)
// face.close()
// let params = {
// userId: uni.getStorageSync('userId'),
// img: e
// }
// params = JSON.stringify(params)
// this.getFaceRecognition(params)
// })
// },
//
// openPhotograph() {
// this.isHide = true
// setTimeout(() => {
// this.$refs.countDown.pause()
// uni.chooseImage({
// count: 1,
// sizeType: ['compressed'],
// sourceType: ['camera'],
// success: res => {
// this.isHide = false
// let url = ''
// console.log('🚀 ~ res-:', res)
// this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
// url = base64
// console.log('🚀 ~ this.imgToBase64 ~ base64:', url)
// this.getFaceRecognition({ userId: uni.getStorageSync('userId'), img: url })
// })
// },
// fail: err => {
// this.isHide = false
// console.log('🚀 ~ err:', err)
// }
// })
// }, 10)
// },
// imgToBase64(data) {
// return new Promise((resolve, reject) => {
// pathToBase64(data)
// .then(base64 => {
// resolve(base64)
// })
// .catch(error => {
// console.error(error)
// reject(error)
// })
// })
// },
//
// getFaceRecognition(params) {
// console.log('🚀 ~ getFaceRecognition ~ params:', params)
// this.$verificationToken()
// uni.request({
// url: config.baseUrl + '/exam-student/personalCenter/getFaceRecognition',
// method: 'POST',
// header: {
// 'content-type': 'application/json',
// Authorization: uni.getStorageSync('access_token')
// },
// data: params,
// success: res => {
// console.log('🚀 ~ openFaceScan ~ res-:', res)
// res = res.data
// console.log('🚀 ~ openFaceScan ~ res-:', res.code)
// if (res.code == 200) {
// this.$refs.uToast.show({
// message: '',
// duration: 1000
// })
// this.failCount = 3
// //
// this.$refs.countDown.start()
// } else {
// this.failCount--
// if (this.failCount == 0) {
// this.$refs.uToast.show({
// message: ', ',
// duration: 1500
// })
// setTimeout(() => {
// this.handleConfirmSubmit()
// }, 1000)
// } else {
// this.$refs.uToast.show({
// message: ', , : ' + this.failCount + '',
// duration: 1500
// })
// setTimeout(() => {
// this.openPhotograph()
// }, 1700)
// }
// }
// },
// fail(err) {
// console.log('🚀 ~ openFaceScan ~ ', err)
// this.$refs.uToast.show({
// message: err.errMsg,
// duration: 1000
// })
// }
// })
// },
clickImg(url) {
this.isHide = true
uni.previewImage({
@ -630,6 +480,7 @@ export default {
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
console.log('🚀 ~ touchStart ~ this.startX:', this.startX)
console.log('🚀 ~ touchStart ~ this.startY:', this.startY)
},
touchMove(event) {
console.log('🚀 ~ 移动 ~ event:', event)
@ -637,6 +488,7 @@ export default {
this.endX = event.touches[0].clientX
this.endY = event.touches[0].clientY
console.log('🚀 ~ touchMove ~ this.endX:', this.endX)
console.log('🚀 ~ touchMove ~ this.endY:', this.endY)
},
touchEnd() {
//
@ -686,6 +538,7 @@ export default {
height: 90vh;
.top-content {
margin: 10px;
background: #fff;
padding: 10px;
border-radius: 5px;
@ -749,15 +602,13 @@ export default {
.question-wrapper {
padding: 10px;
.question-type-wrapper {
margin: 20px 0;
margin: 20px 0 10px;
display: flex;
justify-content: flex-start;
align-items: center;
.line {
width: 2px;
height: 11px;
background: #1989fa;
border: 2px solid #1989fa;
margin-right: 3px;
}
.question-type {
@ -766,13 +617,13 @@ export default {
}
.question {
margin-bottom: 8px;
font-weight: 800;
color: #333333;
}
}
.options {
margin-top: 10px;
margin-bottom: 30px;
margin: 5px 0 30px 20px;
overflow: auto;
.option-wrapper {
max-height: 200px;
@ -797,7 +648,7 @@ export default {
color: #333;
}
.option-content {
margin-left: 10px;
/* margin-left: 10px; */
color: #333;
}
}
@ -810,13 +661,19 @@ export default {
width: 100%;
background-color: #fff;
padding: 15px 0;
padding-bottom: 18px;
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
.btn {
width: 100px;
margin-right: 10px;
&:first-child {
margin-left: 15px;
}
&:last-child {
margin-right: 15px;
}
}
}
}

View File

@ -63,7 +63,7 @@
/>
</div> -->
<div class="btn">
<u-button type="primary" size="small" shape="circle" text="重新考试" @click="handleResetExamination" />
<u-button type="primary" shape="circle" text="重新考试" @click="handleResetExamination" />
</div>
</div>
</view>
@ -274,7 +274,7 @@ export default {
.center-container {
margin: 0 10px;
width: calc(100% - 20px);
height: 250px;
height: 275px;
background: #e8f2fe;
border-radius: 20px;
display: flex;
@ -287,7 +287,7 @@ export default {
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 0 10px;
margin: 30px 10px 10px;
.item {
margin-top: 25px;

View File

@ -289,6 +289,7 @@ export default {
return
}
const params = {
...item,
id: item.examMsg.id, // id
cutNum: item.examMsg.isCut, //
examNum: item.examMsg.examNum, //
@ -297,7 +298,9 @@ export default {
studyId: this.studyId, // id
responseTime: item.examMsg.responseTime, //
score: item.examMsg.score, //
passScore: item.examMsg.passScore //
passScore: item.examMsg.passScore, //
name: item.examMsg.name, //
validityDate: item.examMsg.validityDate //
}
console.log('🚀 ~ toggleTheoryExam ~ params:', params)
uni.navigateTo({