| | |
| | | <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}"> |
| | |
| | | </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> |
| | |
| | | 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' } |
| | | } |
| | | }, |
| | |
| | | default: 'block' |
| | | } |
| | | }, |
| | | mounted () { |
| | | |
| | | }, |
| | | methods: { |
| | | jumpNext () { |
| | | let _this = this |
| | |
| | | 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() |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .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> |