From ff0c5bb9f8136d5b9404b0c0a00f37911456ff41 Mon Sep 17 00:00:00 2001
From: yj <2077506045@qq.com>
Date: 星期一, 25 十一月 2024 11:51:56 +0800
Subject: [PATCH] 更新CAQ
---
src/views/exam/components/QuestionIntelligenceEdit.vue | 78 +++++++++++++++++++++++++-
src/layout/index.vue | 4
src/views/exam/paper/intelligence.vue | 65 ++++++++++++++++++---
3 files changed, 131 insertions(+), 16 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 8e5475e..cd989c8 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -25,8 +25,8 @@
<el-main class="student-main" style="margin-top:20px;">
<router-view/>
</el-main>
- <el-footer height="340" class="student-footer">
- </el-footer>
+ <!-- <el-footer height="340" class="student-footer">
+ </el-footer> -->
</el-container>
</template>
diff --git a/src/views/exam/components/QuestionIntelligenceEdit.vue b/src/views/exam/components/QuestionIntelligenceEdit.vue
index bd1c8c7..b981160 100644
--- a/src/views/exam/components/QuestionIntelligenceEdit.vue
+++ b/src/views/exam/components/QuestionIntelligenceEdit.vue
@@ -1,7 +1,8 @@
<template>
- <div style="line-height:1.8">
+ <div style="line-height:1.8" :class="question.template==='intelligence_title'?'fixed-div':''">
<div v-if="qType==1" v-loading="qLoading">
- <div class="q-title" v-html="qLabel+' '+question.title" style="font-size: x-large"/>
+ <div class="q-title" v-if="question.template==='intelligence_title'" @click="showPopup(qLabel+' '+question.title)" v-html="qLabel+' '+question.title" style="font-size: x-large"/>
+ <div class="q-title" v-else v-html="qLabel+' '+question.title" style="font-size: x-large"/>
<div class="q-content" :hidden="question.template==='intelligence_title'">
<el-radio-group v-model="answer.content" @change="answer.completed = true">
<el-radio class="intelligence-el_radio" v-for="(item, index) in question.items" :key="item.prefix" :label="item.prefix" @change="jumpNext" :disabled="answer.readOnly" :style="{display:displayVal}">
@@ -49,6 +50,13 @@
</div>
<div v-else>
</div>
+ <!-- 寮圭獥 -->
+ <div v-if="isPopupVisible" id="content-popup" class="popup" @click="closePopupOnOutsideClick">
+ <div class="popup-content">
+ <span class="close" @click="closePopup">×</span>
+ <div v-html="popupHtmlContent" class="popup-html"></div>
+ </div>
+ </div>
</div>
</template>
@@ -58,7 +66,8 @@
name: 'QuestionIntelligenceShow',
data () {
return {
- abcValue: { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E', 6: 'F' }
+ abcValue: { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E', 6: 'F' },
+ isPopupVisible: false
// abcValue: { '1': 'A', '2': 'B', '3': 'C', '4': 'D', '5': 'E', '6': 'F' }
}
},
@@ -96,6 +105,9 @@
default: 'block'
}
},
+ mounted () {
+
+ },
methods: {
jumpNext () {
let _this = this
@@ -106,6 +118,30 @@
setTimeout(function () {
_this.$emit('callNextSubject', [_this.order])
}, 500)
+ },
+ showPopup (content) {
+ this.popupHtmlContent = content
+ this.isPopupVisible = true
+ this.$nextTick(() => {
+ const popupElements = document.querySelectorAll('.popup-html p img')
+ popupElements.forEach(popupElement => {
+ if (popupElement) {
+ if (popupElements.length > 1) {
+ popupElement.style.width = '50%'
+ } else {
+ popupElement.style.width = '100%'
+ }
+ }
+ })
+ })
+ },
+ closePopup () {
+ this.isPopupVisible = false
+ },
+ closePopupOnOutsideClick (event) {
+ if (event.target.id === 'content-popup') {
+ this.closePopup()
+ }
}
}
}
@@ -118,4 +154,40 @@
.intelligence-el_radio {
margin-right: 60px;
}
+
+ .popup {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 1000;
+ }
+ .popup-content {
+ position: relative;
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ overflow-y: auto;
+ }
+ .close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 24px;
+ color: #000;
+ cursor: pointer;
+ }
+ .thumbnail {
+ margin-bottom: 10px;
+ cursor: pointer;
+ }
+ .popup-html {
+ font-size: 16px;
+ color: #333;
+ }
</style>
diff --git a/src/views/exam/paper/intelligence.vue b/src/views/exam/paper/intelligence.vue
index 0ec0938..3b2a236 100644
--- a/src/views/exam/paper/intelligence.vue
+++ b/src/views/exam/paper/intelligence.vue
@@ -4,18 +4,18 @@
<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;" />
+ <el-form-item :class="(questionItem.questionType==1 && questionItem.template==='intelligence_title')?'fixed-div':''" :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 +36,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>
@@ -179,7 +179,15 @@
})
}
},
- mounted () {
+ updated () {
+ // const 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 +196,27 @@
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
},
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%'
+ })
+ }
+ 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%'
+ }
+ })
+ }
+ },
beforeunloadFn (e) {
if (!this.isSubmiting) {
if (this.isLastQuestionOrderNum(this.order)) {
@@ -816,4 +845,18 @@
z-index: 1000;
bottom: 0px;
}
+
+ .exampaper-item-box {
+ position: relative;
+ overflow-y: auto; /* 鍏佽鍐呭婊氬姩 */
+ height: calc(100vh - 110px); /* 鏍规嵁闇�瑕佽缃洅瀛愮殑鏈�澶ч珮搴� */
+ }
+
+ .fixed-div {
+ position: sticky;
+ top: 51px; /* 鍥哄畾鍦ㄧ洅瀛愮殑椤堕儴 */
+ background-color: white; /* 鑳屾櫙棰滆壊浠ヨ鐩栨粴鍔ㄥ唴瀹� */
+ z-index: 1; /* 纭繚鏍囬鍦ㄦ粴鍔ㄦ椂楂樹簬鍏朵粬鍐呭 */
+ border-bottom: 1px dotted #ccc;
+ }
</style>
--
Gitblit v1.9.1