| | |
| | | v-show="item.infoList.length" |
| | | > |
| | | <p class="catalogName" :style="{ color: primaryColor }"> |
| | | <span v-if="nindex == 0">一、</span> |
| | | <span v-if="nindex == 1">二、</span> |
| | | <span v-if="nindex == 2">三、</span> |
| | | <span v-if="nindex == 3">四、</span> |
| | | <span v-if="nindex == 4">五、</span> |
| | | <span>{{ item.catalogName }}</span> |
| | | <span class="catalogName-box" > |
| | | <span v-if="nindex == 0">一、</span> |
| | | <span v-if="nindex == 1">二、</span> |
| | | <span v-if="nindex == 2">三、</span> |
| | | <span v-if="nindex == 3">四、</span> |
| | | <span v-if="nindex == 4">五、</span> |
| | | <span>{{ item.catalogName }}</span> |
| | | </span> |
| | | <img |
| | | :src="item.isCollect ? isHeart : heart" |
| | | alt="" |
| | | class="collect-png" |
| | | @click="handleCollect(nindex)" |
| | | v-if="item.type == 'material'" |
| | | /> |
| | | </p> |
| | | <ul> |
| | | <li v-for="(value, index) in item.infoList" :key="value.id" :id="'listItem-' + value.id"> |
| | |
| | | ></el-image> |
| | | <!-- 文字加图片 --> |
| | | <p class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'"> |
| | | <span> {{ value.stem.stemTxt }}</span> |
| | | <span v-html="value.stem.stemTxt" ></span> |
| | | <el-image |
| | | :src="getPublicImage(value.stem.stemImage, 150)" |
| | | :preview-src-list="[getPublicImage(value.stem.stemImage)]" |
| | |
| | | <!-- 填空题题干 --> |
| | | <p class="titleText" v-if="value.questionType == 'completion'"> |
| | | <span v-for="(itemText, indexText) in value.stem" :key="indexText"> |
| | | <span v-if="typeof itemText == 'string'" v-html="itemText"></span> |
| | | <span style="display: flex;align-items: center;" v-if="typeof itemText == 'string'" v-html="itemText"></span> |
| | | <!-- --> |
| | | <input |
| | | <!-- <input |
| | | v-else |
| | | type="text" |
| | | class="input" |
| | | v-model.trim="value.userAnswer[itemText.num]" |
| | | :disabled="value.isComplete" |
| | | :style="{ backgroundColor: inputBc }" |
| | | /> |
| | | /> --> |
| | | <math-field v-else @input="onChangeInput($event,nindex,index,indexText)" class="mathField" :menuItems="[]"> |
| | | {{ value.userAnswer[itemText.num] }} |
| | | </math-field |
| | | > |
| | | <!-- --> |
| | | </span> |
| | | </p> |
| | |
| | | v-cloak |
| | | ></p> |
| | | </div> |
| | | <!-- 收藏 --> |
| | | <img |
| | | :src="value.isCollect ? isHeart : heart" |
| | | alt="" |
| | | class="collect-png" |
| | | @click="handleCollect(nindex, index)" |
| | | v-if="!(hideCollect && value.questionType == 'shortAnswer')" |
| | | v-if="item.type != 'material'" |
| | | /> |
| | | <!-- 收藏 --> |
| | | </div> |
| | | <div class="questionContent"> |
| | | <!-- 单选 --> |
| | |
| | | v-for="content in value.option" |
| | | :key="content.value" |
| | | :label="content.value" |
| | | @change="onChangeRadio(nindex,index)" |
| | | @change="onChangeRadio(nindex, index)" |
| | | border |
| | | :class=" |
| | | value.optionStyle == 'Image' || |
| | |
| | | :preview-src-list="[getPublicImage(content.img)]" |
| | | v-if="isReal" |
| | | ></el-image> |
| | | <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" /> |
| | | <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" /> |
| | | <el-image |
| | | v-else |
| | | :src="getPublicImage(content.img, 115)" |
| | |
| | | <el-input |
| | | :disabled="value.isComplete" |
| | | style="width: 94%; margin: 0 auto" |
| | | v-else-if="value.questionType == 'shortAnswer'" |
| | | v-else-if="value.questionType == 'shortAnswer' ||value.questionType =='formula'" |
| | | type="textarea" |
| | | :rows="6" |
| | | placeholder="请输入内容" |
| | |
| | | value.questionType == 'completion') |
| | | " |
| | | > |
| | | <el-button @click="onChangeRadio(nindex,index)" style="margin-top: 10px">查看解析</el-button> |
| | | <el-button @click="onChangeRadio(nindex, index)" style="margin-top: 10px" |
| | | >查看解析</el-button |
| | | > |
| | | </div> |
| | | <!-- 提交后解析 --> |
| | | <div class="analysis" v-if="value.isComplete"> |
| | | <ul class="analysis-box"> |
| | | <li class="headerConent" style="width:60%"> |
| | | <li class="headerConent" style="width: 60%"> |
| | | <!-- 正确错误标识 --> |
| | | <ul class="mark"> |
| | | <ul class="mark"> |
| | | <li v-if="value.isRight" class="mark-correct">正确</li> |
| | | <li v-if="value.isRight == false" class="mark-error">错误</li> |
| | | </ul> |
| | | <p :title="arrayToString(value.answer)"> |
| | | </ul> |
| | | <p :title="arrayToString(value.answer)"> |
| | | <span>【正确答案】:</span> |
| | | <span v-html="arrayToString(value.answer)" class="correctBox"></span> |
| | | </p> |
| | |
| | | style="margin-left: 20px" |
| | | > |
| | | <span>您的答案:</span> |
| | | <span class="errorBox" >{{ |
| | | <span class="errorBox">{{ |
| | | arrayToString(value.userAnswer) ? arrayToString(value.userAnswer) : '-' |
| | | }}</span> |
| | | |
| | | </p> |
| | | </li> |
| | | <li> |
| | | <div class="difficulty" v-if="value.difficulty"> |
| | | <span style="color: #333">难度等级:</span> |
| | | <el-rate |
| | | v-model="value.difficulty" |
| | | :max="3" |
| | | size="large" |
| | | disabled |
| | | disabled-void-color="#949494" |
| | | /> |
| | | </div> |
| | | <span style="color: #333">难度等级:</span> |
| | | <el-rate |
| | | v-model="value.difficulty" |
| | | :max="3" |
| | | size="large" |
| | | disabled |
| | | disabled-void-color="#949494" |
| | | /> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <el-collapse |
| | |
| | | <div class="headerConent sitgBox"> |
| | | <p v-if="!value.isUnfold" class="al-cn"> |
| | | <span class="analysisColor">展开解析</span> |
| | | <img :src="openIcon" alt="" class="analysis-icon"> |
| | | <img :src="openIcon" alt="" class="analysis-icon" /> |
| | | </p> |
| | | <p v-else> |
| | | <span class="analysisColor">收起解析</span> |
| | | <img :src="closeIcon" alt="" class="analysis-icon"> |
| | | <img :src="closeIcon" alt="" class="analysis-icon" /> |
| | | </p> |
| | | </div> |
| | | </div> |
| | |
| | | <el-collapse-item :name="value.id" class="objective"> |
| | | <template #title> |
| | | <div class="headerBox"> |
| | | <p v-if="!value.isUnfold" class="al-cn"> |
| | | <p v-if="!value.isUnfold" class="al-cn"> |
| | | <span class="analysisColor">展开答案与解析</span> |
| | | <img :src="openIcon" alt="" class="analysis-icon"> |
| | | <img :src="openIcon" alt="" class="analysis-icon" /> |
| | | </p> |
| | | <p v-else class="al-cn"> |
| | | <p v-else class="al-cn"> |
| | | <span class="analysisColor">收起答案与解析</span> |
| | | <img :src="closeIcon" alt="" class="analysis-icon"> |
| | | <img :src="closeIcon" alt="" class="analysis-icon" /> |
| | | </p> |
| | | </div> |
| | | </template> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { defineProps, onMounted, ref,reactive } from 'vue' |
| | | import { defineProps, onMounted, ref, reactive } from 'vue' |
| | | import { getPublicImage } from '@/assets/js/middleGround/tool.js' |
| | | import heart from '@/assets/images/examination/collectIcon.png' |
| | | import isHeart from '@/assets/images/examination/collectClickIcon.png' |
| | | import openIcon from '@/assets/images/examination/open.png' |
| | | import closeIcon from '@/assets/images/examination/close.png' |
| | | const props = defineProps({ cardList: Array, collectList: Array }) |
| | | const emits = defineEmits([ 'onChangeRadio','setCollect']) |
| | | const emits = defineEmits(['onChangeRadio', 'setCollect','onChangeInput']) |
| | | // const presentId = ref<Number>(props.collectList[0]) |
| | | onMounted(() => { |
| | | // if (props.collectList) presentId.value = props.collectList[0] |
| | | }) |
| | | // 数组转为字符串方法 |
| | | const arrayToString = (data:any) => { |
| | | const arrayToString = (data: any) => { |
| | | // 检查是否为数组 |
| | | if (Array.isArray(data)) { |
| | | // 使用 join 方法将数组转换为字符串,默认使用逗号分隔 |
| | |
| | | return data.replace(/<[^>]*>/g, '') |
| | | } |
| | | } |
| | | const isHaveAnswer = (data:any) => { |
| | | const isHaveAnswer = (data: any) => { |
| | | if (typeof data == 'string') { |
| | | data = data |
| | | .replace(/<[^>]*>/g, '') |
| | |
| | | } |
| | | } |
| | | // 收藏按钮 |
| | | const handleCollect = (num:number,number:number) => { |
| | | emits('setCollect',num,number) |
| | | const handleCollect = (num: number, number: number) => { |
| | | emits('setCollect', num, number) |
| | | } |
| | | // 单选框输入 |
| | | const onChangeRadio = (num:number,number:number) => { |
| | | emits('onChangeRadio', num,number) |
| | | const onChangeRadio = (num: number, number: number) => { |
| | | emits('onChangeRadio', num, number) |
| | | } |
| | | const onChangeInput = (event: any,index:number,cindex:number,dindex:number) => { |
| | | emits('onChangeInput',event.target.value,index,cindex,dindex) |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .catalogName { |
| | | display: flex; |
| | | margin-top: 40px; |
| | | .catalogName-box { |
| | | width: 94%; |
| | | } |
| | | } |
| | | .collect-png { |
| | | cursor: pointer; |
| | |
| | | display: flex; |
| | | align-items: flex-start; |
| | | span { |
| | | height: 24px; |
| | | line-height: 24px; |
| | | text-align: center; |
| | | font-size: 16px; |
| | |
| | | font-weight: bold; |
| | | } |
| | | .titleText { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | padding: 0 10px 10px 10px; |
| | | min-width: 90%; |
| | | font-size: 14px; |
| | |
| | | width: 100%; |
| | | padding: 0 20px; |
| | | font-size: 14px; |
| | | background-color: #E0F2FF ; |
| | | color: #3B93FE; |
| | | background-color: #e0f2ff; |
| | | color: #3b93fe; |
| | | .checkAnalysis { |
| | | cursor: pointer; |
| | | height: 100%; |
| | |
| | | /deep/ .el-collapse-item__content { |
| | | width: 100%; |
| | | padding: 0 20px; |
| | | background-color: #E0F2FF; |
| | | background-color: #e0f2ff; |
| | | font-size: 14px; |
| | | color: #333; |
| | | } |
| | |
| | | .mark { |
| | | font-size: 14px; |
| | | color: #fff; |
| | | .mark-error,.mark-correct { |
| | | .mark-error, |
| | | .mark-correct { |
| | | white-space: nowrap; |
| | | min-height: 20px; |
| | | line-height: 18px; |
| | |
| | | background-color: #1fbc1f; |
| | | } |
| | | .mark-error { |
| | | background-color: #FF5E5E; |
| | | background-color: #ff5e5e; |
| | | } |
| | | } |
| | | .headerConent { |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | .el-image { |
| | | width: 9px; |
| | | height: 9px; |
| | | } |
| | | .correct { |
| | | color: #70B503; |
| | | width: 200px; |
| | | text-align: left; |
| | | } |
| | | .error { |
| | | text-align: left; |
| | | margin-left: 40px; |
| | | width: 200px; |
| | | color: #FF5E5E; |
| | | } |
| | | } |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | .el-image { |
| | | width: 9px; |
| | | height: 9px; |
| | | } |
| | | .correct { |
| | | color: #70b503; |
| | | width: 200px; |
| | | text-align: left; |
| | | } |
| | | .error { |
| | | text-align: left; |
| | | margin-left: 40px; |
| | | width: 200px; |
| | | color: #ff5e5e; |
| | | } |
| | | } |
| | | .difficulty { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | background-color: red; |
| | | } |
| | | .primary-text-color { |
| | | color: #3B93FE; |
| | | color: #3b93fe; |
| | | } |
| | | .mathField { |
| | | min-width: 200px; |
| | | max-width: 518px; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |