[测评系统]--前端(用户答题页面)
yj
2024-11-25 a778d5e53e74b2170e37607b2536a957dbc1d664
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+'&nbsp;&nbsp;'+question.title" style="font-size: x-large"/>
      <div class="q-title" v-if="question.template==='intelligence_title'" @click="showPopup(qLabel+'&nbsp;&nbsp;'+question.title)" v-html="qLabel+'&nbsp;&nbsp;'+question.title" style="font-size: x-large"/>
      <div class="q-title" v-else v-html="qLabel+'&nbsp;&nbsp;'+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">&times;</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>