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

wzp

8 天以前 fcdc68ab5c95835b70301221d25cdb75202e02f1

 src/views/exam/paper/intelligence.vue

@@ -16,11 +16,7 @@
              <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">
@@ -107,8 +103,7 @@
      displayVal: 'block',
      isSubmitClick: false,
      timeoutValue: 6,
      downBtnFlag: false,
      downBtnFlagInit: true
      hasShownSubmitTip: false // 标志是否已经显示过提交提示
    }
  },
  created: function () {
@@ -191,26 +186,6 @@
    }
  },
  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 => {
@@ -228,42 +203,28 @@
  },
  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]
      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')
        document.querySelectorAll('.question-title-down-btn')[0].classList.add('show')
        if (this.downBtnFlagInit) {
          this.handleClickDownBtn()
          this.downBtnFlagInit = false
        if (questionTitleDown.childNodes.length === 0) {
          this.fillStickyTitleClone(questionTitleBox, questionTitleDown)
        }
      } else if (scrollTop < questionTitleBox.offsetHeight) {
      } else {
        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]
    fillStickyTitleClone (questionTitleBox, questionTitleDown) {
      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
      }
      questionTitleDown.appendChild(questionTitleBox.cloneNode(true))
    },
    beforeunloadFn (e) {
      if (!this.isSubmiting) {
@@ -538,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)
@@ -633,11 +605,15 @@
        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')
            }
          }
        })
      }
      this.downBtnFlag = false
      this.downBtnFlagInit = true

      let _this = this
      _this.order++
@@ -680,11 +656,15 @@
        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')
            }
          }
        })
      }
      this.downBtnFlag = false
      this.downBtnFlagInit = true

      let _this = this
      _this.isShowGuide(false)
@@ -940,35 +920,8 @@
    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>