uniProject/components/question/panduan.vue

<template>
	<view>
		<!-- 标题区域 -->
		<view>判断题:</view>
		<!-- 题干区域 -->
		<rich-text :nodes="question.name"></rich-text>
		<!-- 选项区域 -->
		<view>
			<radio-group @change="radioChange">
				<label :class="formatClass('1')">
					<view>
						<radio value="1" :checked="question.reply == '1'" />
					</view>
					<view>正确</view>
				</label>
				<label :class="formatClass('0')">
					<view>
						<radio value="0" :checked="question.reply == '0'" />
					</view>
					<view>错误</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		}
	})

	function radioChange(e) {
		if (props.showError) {
			return;
		}
		props.question.reply = e.detail.value;
	}
	
	function formatClass(index) {
		if (props.showError) {
			return {
				active_right: props.question.result == index,
				showError: props.question.reply == index && props.question.result != index
			}
		} else {
			return {
				active: props.question.reply == index
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.active {
		background-color: blue; // 判断题选中的颜色
	}
	.showError {
		background-color: red; // 判断错误选中颜色
	}
	.active_right {
		background-color: green; // 答案解析：单选正确颜色
	}
</style>