更新CAQ优化，适配低分辨率设备

yj

2024-12-03 7f4105bc2f1d4f8562e1cb9776ce49f8be0c98d2

 src/views/exam/paper/intelligence.vue

@@ -4,18 +4,26 @@
      <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 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>
@@ -36,15 +44,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 +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())
    // 多语言
@@ -179,7 +190,35 @@
      })
    }
  },
  mounted () {
  updated () {
    // 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)
@@ -188,6 +227,44 @@
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    handleCardScroll (e) {
      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
      }
    },

    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) {
      if (!this.isSubmiting) {
        if (this.isLastQuestionOrderNum(this.order)) {
@@ -413,10 +490,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()
@@ -550,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++
      // 如果是已经完成本段，提交展示指导语
@@ -585,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) {
@@ -692,6 +793,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 +917,58 @@
    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-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>