fix：CAQ固定住图片并且不需要用户选择。不缩小

wzp

8 天以前 fcdc68ab5c95835b70301221d25cdb75202e02f1

 src/views/exam/paper/intelligence.vue

@@ -12,10 +12,14 @@
        <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>
              <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 +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())
    // 多语言
@@ -180,14 +186,14 @@
    }
  },
  updated () {
    // const elements = document.querySelectorAll('.exampaper-item-box')
    // if (elements) {
    //   elements.forEach(element => {
    //     if (element) {
    //       element.addEventListener('scroll', this.handleCardScroll, true)
    //     }
    //   })
    // }
    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,25 +203,28 @@
  },
  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%'
        })
      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
      }
      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%'
          }
        })
      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) {
@@ -442,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()
@@ -490,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)
@@ -579,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++
      // 如果是已经完成本段，提交展示指导语
@@ -614,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) {
@@ -852,11 +904,24 @@
    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-box.show{
    display: block;
  }

</style>