From fcdc68ab5c95835b70301221d25cdb75202e02f1 Mon Sep 17 00:00:00 2001
From: wzp <2040239371@qq.com>
Date: 星期二, 07 四月 2026 10:57:13 +0800
Subject: [PATCH] fix：CAQ固定住图片并且不需要用户选择。不缩小
---
src/views/exam/paper/intelligence.vue | 141 ++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 127 insertions(+), 14 deletions(-)
diff --git a/src/views/exam/paper/intelligence.vue b/src/views/exam/paper/intelligence.vue
index 05f0bb3..dba5017 100644
--- a/src/views/exam/paper/intelligence.vue
+++ b/src/views/exam/paper/intelligence.vue
@@ -4,18 +4,22 @@
<el-header class="align-center" v-if="guide">
<h1></h1>
</el-header>
- <el-main style="padding-top: 3%;">
+ <el-main style="">
<div v-html="guideDescirption" v-if="guide" :style="ismobile?'padding-top: 2%;':'padding-top: 2%;margin: 0 auto;width:66%'"></div>
<el-row class="do-align-center" v-if="guide">
<el-button @click="startDo" type="primary" :disable="startDoDisable">{{$t('start')}}</el-button>
</el-row >
<el-form :model="form" ref="form" v-loading="formLoading" label-width="100%" v-else>
- <el-row :key="index" v-for="(titleItem,index) in titleItems">
+ <el-row :key="index" v-for="(titleItem,index) in titleItems" ref="titleItem">
<div class="q-content">{{titleItem.description}}</div>
- <el-card class="exampaper-item-box" style="border:2px solid #2b90ff;">
- <div class="align-center"><span style="font-size: small; float: left">{{$t('examinee')}}{{memberName}}</span><span style="margin-top: 0px;padding-right: 11%">鈼弡{form.name}}鈼�</span><span style="font-size: small; float: right">{{$t('partRemailTime')}}{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</span></div>
- <hr style="border : 1px dashed #b3d8ff;" />
- <el-form-item :key="index" label-width="1px" v-for="(questionItem, index) in questionItems">
+ <el-card class="exampaper-item-box" style="border:2px solid #2b90ff;" :body-style="{padding: '0px 20px 20px 20px'}">
+ <div class="align-center" style="padding-top:20px;height:50px;position: sticky;top: 0px; z-index: 1; background-color: white;"><span style="font-size: small; float: left">{{$t('examinee')}}{{memberName}}</span><span style="margin-top: 0px;padding-right: 11%">鈼弡{form.name}}鈼�</span><span style="font-size: small; float: right">{{$t('partRemailTime')}}{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</span></div>
+ <hr style="margin:0px;border : 1px dashed #b3d8ff;position: sticky;top: 50px; z-index: 1; background-color: white;" />
+ <div class="question-title-down-box">
+ <div class="question-title-down">
+ </div>
+ </div>
+ <el-form-item :class="questionItem.questionType==1 && questionItem.template=='intelligence_title'?'question-title-box':''" :key="index" label-width="1px" v-for="(questionItem, index) in questionItems">
<QuestionIntelligenceEdit @callNextSubject="onChoice" :qType="questionItem.questionType" :question="questionItem"
:answer="answer.answerItems[questionItem.itemOrder-1]" :qLabel="questionItem.questionNumber" :order = "questionItem.itemOrder-1" :displayVal="displayVal"/>
</el-form-item>
@@ -36,15 +40,15 @@
</el-main>
</el-container>
- <el-row class="do-exam-title footer">
- <el-col :span="24">
+ <!-- <el-row class="do-exam-title footer"> -->
+ <!-- <el-col :span="24"> -->
<!--娴嬭瘯鐨勬椂鍊欐墦寮�-->
<!--<span class="do-exam-time">-->
<!--<label>{{$t('remainingTime')}}</label>-->
<!--<label>{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</label>-->
<!--</span>-->
- </el-col>
- </el-row>
+ <!-- </el-col> -->
+ <!-- </el-row> -->
</div>
</template>
@@ -98,11 +102,13 @@
isSubmiting: false,
displayVal: 'block',
isSubmitClick: false,
- timeoutValue: 6
+ timeoutValue: 6,
+ hasShownSubmitTip: false // 鏍囧織鏄惁宸茬粡鏄剧ず杩囨彁浜ゆ彁绀�
}
},
created: function () {
let _this = this
+
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
_this.ismobile = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(navigator.userAgent.toLowerCase())
// 澶氳瑷�
@@ -179,7 +185,15 @@
})
}
},
- mounted () {
+ updated () {
+ let elements = document.querySelectorAll('.exampaper-item-box')
+ if (elements) {
+ elements.forEach(element => {
+ if (element) {
+ element.addEventListener('scroll', this.handleCardScroll, true)
+ }
+ })
+ }
},
beforeDestroy () {
window.clearInterval(this.timer)
@@ -188,6 +202,30 @@
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
},
methods: {
+ handleCardScroll (e) {
+ const scrollRoot = e.target
+ const questionTitleBox = scrollRoot.querySelector('.question-title-box')
+ const questionTitleDown = scrollRoot.querySelector('.question-title-down')
+ const questionTitleDownBox = scrollRoot.querySelector('.question-title-down-box')
+ if (!questionTitleBox || !questionTitleDown || !questionTitleDownBox) {
+ return
+ }
+ const scrollTop = scrollRoot.scrollTop
+ if (scrollTop >= questionTitleBox.offsetHeight) {
+ questionTitleDownBox.classList.add('show')
+ if (questionTitleDown.childNodes.length === 0) {
+ this.fillStickyTitleClone(questionTitleBox, questionTitleDown)
+ }
+ } else {
+ questionTitleDown.innerHTML = ''
+ questionTitleDownBox.classList.remove('show')
+ }
+ },
+
+ fillStickyTitleClone (questionTitleBox, questionTitleDown) {
+ questionTitleDown.innerHTML = ''
+ questionTitleDown.appendChild(questionTitleBox.cloneNode(true))
+ },
beforeunloadFn (e) {
if (!this.isSubmiting) {
if (this.isLastQuestionOrderNum(this.order)) {
@@ -413,10 +451,10 @@
},
nextQuestion: function (nowPartOrder) {
let _this = this
- let num = ++_this.order
+ let num = _this.order + 1
// 璺冲埌娌℃湁绛旂殑棰樼洰鐨勬
while (_this.isContentNotEmpty(num) && num !== _this.answer.answerItems.length - 1) {
- num = ++_this.order
+ num = _this.order + 1
this.getEmptySubjct(num)
}
this.determineWhetherIntelligenceTitle()
@@ -461,7 +499,18 @@
_this.determineWhetherIntelligenceTitle()
},
onChoice () { // 鏄惁鏄剧ず鎻愪氦鎸夐挳
+ let _this = this
if (this.isLastQuestionOrder()) {
+ // 妫�鏌ユ槸鍚︽槸鏈�鍚庝竴棰樹笖宸茬瓟瀹岋紝寮瑰嚭鎻愮ず妗�
+ if (_this.isContentNotEmpty(_this.order)) {
+ if (!_this.hasShownSubmitTip) {
+ _this.hasShownSubmitTip = true
+ _this.$alert(_this.$t('submit_tip'), _this.$t('prompt'), {
+ confirmButtonText: _this.$t('determine'),
+ customClass: 'submit-tip-dialog'
+ })
+ }
+ }
return
}
this.isShowNextQuestionButton(this)
@@ -550,6 +599,22 @@
return true
},
nextOrder () {
+ // 婊氬姩鍒伴《閮�
+ let elements = document.querySelectorAll('.exampaper-item-box')
+ if (elements) {
+ elements.forEach(element => {
+ if (element) {
+ element.scrollTop = 0
+ const downBox = element.querySelector('.question-title-down-box')
+ const down = element.querySelector('.question-title-down')
+ if (downBox && down) {
+ down.innerHTML = ''
+ downBox.classList.remove('show')
+ }
+ }
+ })
+ }
+
let _this = this
_this.order++
// 濡傛灉鏄凡缁忓畬鎴愭湰娈碉紝鎻愪氦灞曠ず鎸囧璇�
@@ -585,6 +650,22 @@
return answerSubmit
},
preSubject () {
+ // 婊氬姩鍒伴《閮�
+ let elements = document.querySelectorAll('.exampaper-item-box')
+ if (elements) {
+ elements.forEach(element => {
+ if (element) {
+ element.scrollTop = 0
+ const downBox = element.querySelector('.question-title-down-box')
+ const down = element.querySelector('.question-title-down')
+ if (downBox && down) {
+ down.innerHTML = ''
+ downBox.classList.remove('show')
+ }
+ }
+ })
+ }
+
let _this = this
_this.isShowGuide(false)
if (_this.order <= 0) {
@@ -692,6 +773,11 @@
return
}
if (this.isTimeoutFinish()) {
+ return
+ }
+ // 鐗规畩澶勭悊 LAQ娴嬭瘯鍖� 缁撴潫鎻愮ず璇�
+ if (_this.form.name.indexOf('LAQ') !== -1) {
+ _this.$router.push({ path: '/exam/finish', query: { name: _this.form.name, content: _this.$t('finishMsg') } })
return
}
_this.$router.push({ path: '/exam/finish', query: { name: _this.form.name, content: mess } })
@@ -811,4 +897,31 @@
z-index: 1000;
bottom: 0px;
}
+
+ .exampaper-item-box {
+ position: relative;
+ overflow-y: auto; /* 鍏佽鍐呭婊氬姩 */
+ height: calc(100vh - 110px); /* 鏍规嵁闇�瑕佽缃洅瀛愮殑鏈�澶ч珮搴� */
+ }
+
+ .question-title-down-box {
+ position: sticky;
+ display: none;
+ top: 51px;
+ width: 100%;
+ z-index: 1;
+ }
+
+ .question-title-down {
+ background-color: #fff;
+ }
+
+ .question-title-down .question-title-box {
+ margin-bottom: 0px;
+ }
+
+ .question-title-down-box.show{
+ display: block;
+ }
+
</style>
--
Gitblit v1.9.1