OnlineEducation-student-front/src/views/exm/question/components/Show.vue

<template>
	<div style="line-height: 1.8">
		<template v-if="qType === 1">
			<div class="q-title" v-html="question.title"></div>
			<div class="q-content">
				<span v-for="item in question.items" :key="item.id" class="q-item-contain">
					<span class="q-item-prefix">{{ item.prefix }}</span>
					<span v-html="item.content" class="q-item-content"></span>
				</span>
			</div>
		</template>
		<template v-else-if="qType === 2">
			<div class="q-title" v-html="question.title"></div>
			<div class="q-content">
				<span v-for="item in question.items" :key="item.id" class="q-item-contain">
					<span class="q-item-prefix">{{ item.prefix }}</span>
					<span v-html="item.content" class="q-item-content"></span>
				</span>
			</div>
		</template>
		<template v-else-if="qType === 3">
			<div class="q-title" v-html="question.title" style="display: inline; margin-right: 10px"></div>
			<span>（</span>
			<span v-for="item in question.items" :key="item.id">
				<span v-html="item.content" class="q-item-content"></span>
			</span>
			<span>）</span>
		</template>
		<template v-else-if="qType === 4">
			<div class="q-title" v-html="question.title"></div>
		</template>
		<template v-else-if="qType === 5">
			<div class="q-title" v-html="question.title"></div>
		</template>
		<template v-else> </template>
	</div>
</template>

<script setup>
	import { computed } from 'vue'
	const props = defineProps({
		question: {
			type: Object,
			default: () => ({})
		},
		qLoading: {
			type: Boolean,
			default: false
		},
		qType: {
			type: Number,
			default: 0
		}
	})
</script>

<style scoped>
	.q-title {
		font-weight: bold;
		margin-bottom: 8px;
	}
	.q-content {
		margin-left: 16px;
	}
	.q-item-contain {
		display: inline-block;
		margin-right: 16px;
		margin-bottom: 4px;
	}
	.q-item-prefix {
		font-weight: bold;
		margin-right: 4px;
	}
	.q-item-content {
		display: inline;
	}
</style>