From 7f4105bc2f1d4f8562e1cb9776ce49f8be0c98d2 Mon Sep 17 00:00:00 2001
From: yj <2077506045@qq.com>
Date: 星期二, 03 十二月 2024 13:46:37 +0800
Subject: [PATCH] 更新CAQ优化，适配低分辨率设备
---
src/views/exam/paper/intelligence.vue | 170 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 141 insertions(+), 29 deletions(-)
diff --git a/src/views/exam/paper/intelligence.vue b/src/views/exam/paper/intelligence.vue
index 688a1d6..feaa445 100644
--- a/src/views/exam/paper/intelligence.vue
+++ b/src/views/exam/paper/intelligence.vue
@@ -12,10 +12,18 @@
<el-form :model="form" ref="form" v-loading="formLoading" label-width="100%" v-else>
<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;" :body-style="{padding: '0px 20px 20px 20px' }">
+ <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;" />
- <el-form-item :class="(questionItem.questionType==1 && questionItem.template==='intelligence_title')?'fixed-div':''" :key="index" label-width="1px" v-for="(questionItem, index) in questionItems">
+ <div class="question-title-down-box">
+
+ <div class="question-title-down">
+ </div>
+ <div class="question-title-down-btn" @click="handleClickDownBtn">
+ <i class="el-icon-d-caret"></i>
+ </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>
@@ -98,11 +106,14 @@
isSubmiting: false,
displayVal: 'block',
isSubmitClick: false,
- timeoutValue: 6
+ timeoutValue: 6,
+ downBtnFlag: false,
+ downBtnFlagInit: true
}
},
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())
// 澶氳瑷�
@@ -180,14 +191,34 @@
}
},
updated () {
- // const elements = document.querySelectorAll('.exampaper-item-box')
- // if (elements) {
- // elements.forEach(element => {
- // if (element) {
- // element.addEventListener('scroll', this.handleCardScroll, true)
+ // let questionTitleDownBtnBottom = document.querySelectorAll('.question-title-down-btn')[0]
+ // if (questionTitleDownBtnBottom) {
+ // questionTitleDownBtnBottom.addEventListener('click', () => {
+ // console.log('click')
+ // let questionTitleBox = document.querySelectorAll('.question-title-box')[0]
+ // let questionTitleDown = document.querySelectorAll('.question-title-down')[0]
+ // let questionTitleDownBtn = document.querySelectorAll('.question-title-down-btn i')[0]
+ // questionTitleDown.innerHTML = ''
+ // if (questionTitleDownBtn.classList.contains('el-icon-caret-bottom')) {
+ // document.querySelectorAll('.question-title-down-btn i')[0].classList.remove('el-icon-caret-bottom')
+ // document.querySelectorAll('.question-title-down-btn i')[0].classList.add('el-icon-caret-top')
+ // let questionTitleBoxClone = questionTitleBox.cloneNode(true)
+ // questionTitleDown.appendChild(questionTitleBoxClone)
+ // } else {
+ // document.querySelectorAll('.question-title-down-btn i')[0].classList.remove('el-icon-caret-top')
+ // document.querySelectorAll('.question-title-down-btn i')[0].classList.add('el-icon-caret-bottom')
// }
// })
// }
+
+ 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)
@@ -197,24 +228,41 @@
},
methods: {
handleCardScroll (e) {
- const scrollTop = e.target.scrollTop;
- const elements = e.target.querySelectorAll('.q-title p img')
- if (scrollTop > 200) {
- elements.forEach(element => {
- element.style.transition = 'width 0.5s ease-in-out'
- element.style.width = '30%'
- })
+ let scrollTop = e.target.scrollTop;
+ let questionTitleBox = e.target.querySelectorAll('.question-title-box')[0]
+ let questionTitleDown = document.querySelectorAll('.question-title-down')[0]
+ let questionTitleDownBox = document.querySelectorAll('.question-title-down-box')[0]
+ if (scrollTop >= questionTitleBox.offsetHeight) {
+ questionTitleDownBox.classList.add('show')
+ document.querySelectorAll('.question-title-down-btn')[0].classList.add('show')
+ if (this.downBtnFlagInit) {
+ this.handleClickDownBtn()
+ this.downBtnFlagInit = false
+ }
+ } else if (scrollTop < questionTitleBox.offsetHeight) {
+ questionTitleDown.innerHTML = ''
+ questionTitleDownBox.classList.remove('show')
+ document.querySelectorAll('.question-title-down-btn')[0].classList.remove('show')
+ this.downBtnFlag = false
}
- if (scrollTop === 0) {
- elements.forEach(element => {
- if (elements.length > 1) {
- element.style.transition = 'width 0.5s ease-in-out'
- element.style.width = '50%'
- } else {
- element.style.transition = 'width 0.5s ease-in-out'
- element.style.width = '50%'
- }
+ },
+
+ handleClickDownBtn () {
+ let questionTitleBox = document.querySelectorAll('.question-title-box')[0]
+ let questionTitleDown = document.querySelectorAll('.question-title-down')[0]
+ questionTitleDown.innerHTML = ''
+ console.log(this.downBtnFlag)
+ if (!this.downBtnFlag) {
+ this.downBtnFlag = true
+ let questionTitleBoxClone = questionTitleBox.cloneNode(true)
+ let cloneImgs = questionTitleBoxClone.querySelectorAll('.q-title>p>img')
+ console.log(cloneImgs)
+ cloneImgs.forEach(item => {
+ item.style.width = '35%'
})
+ questionTitleDown.appendChild(questionTitleBoxClone)
+ } else {
+ this.downBtnFlag = false
}
},
beforeunloadFn (e) {
@@ -579,6 +627,18 @@
return true
},
nextOrder () {
+ // 婊氬姩鍒伴《閮�
+ let elements = document.querySelectorAll('.exampaper-item-box')
+ if (elements) {
+ elements.forEach(element => {
+ if (element) {
+ element.scrollTop = 0
+ }
+ })
+ }
+ this.downBtnFlag = false
+ this.downBtnFlagInit = true
+
let _this = this
_this.order++
// 濡傛灉鏄凡缁忓畬鎴愭湰娈碉紝鎻愪氦灞曠ず鎸囧璇�
@@ -614,6 +674,18 @@
return answerSubmit
},
preSubject () {
+ // 婊氬姩鍒伴《閮�
+ let elements = document.querySelectorAll('.exampaper-item-box')
+ if (elements) {
+ elements.forEach(element => {
+ if (element) {
+ element.scrollTop = 0
+ }
+ })
+ }
+ this.downBtnFlag = false
+ this.downBtnFlagInit = true
+
let _this = this
_this.isShowGuide(false)
if (_this.order <= 0) {
@@ -852,11 +924,51 @@
height: calc(100vh - 110px); /* 鏍规嵁闇�瑕佽缃洅瀛愮殑鏈�澶ч珮搴� */
}
- .fixed-div {
+ .question-title-down-box {
position: sticky;
- top: 51px; /* 鍥哄畾鍦ㄧ洅瀛愮殑椤堕儴 */
- background-color: white; /* 鑳屾櫙棰滆壊浠ヨ鐩栨粴鍔ㄥ唴瀹� */
- z-index: 1; /* 纭繚鏍囬鍦ㄦ粴鍔ㄦ椂楂樹簬鍏朵粬鍐呭 */
- border-bottom: 1px dotted #ccc;
+ 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-btn{
+ display: none;
+ background-color: #409EFF; /* 鑳屾櫙棰滆壊浠ヨ鐩栨粴鍔ㄥ唴瀹� */
+ color: #fff;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ justify-content: center;
+ width: 100px;
+ padding: 1px 0px;
+ margin-left: auto;
+ margin-right: auto;
+ border-radius: 0px 0px 5px 5px;
+ cursor: pointer;
+ }
+
+ .question-title-down-btn.top{
+ display: none;
+ }
+
+ .question-title-down-btn.show{
+ display: flex;
+ }
+
+ .question-title-down-box.show{
+ display: block;
+ }
+
+ .question-title-down-box .question-title-down-btn i{
+ font-size: 18px;
+ font-weight: bold;
+ }
+
</style>
--
Gitblit v1.9.1