|
@ -3,18 +3,60 @@ |
|
|
<view class="size-28 mb20 question"> |
|
|
<view class="size-28 mb20 question"> |
|
|
{{ `${props.index + 1}、${props.data.question}` }} |
|
|
{{ `${props.index + 1}、${props.data.question}` }} |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<template v-if="props.mode === 'edit'"> |
|
|
|
|
|
<template v-if="props.data.options?.length"> |
|
|
<view class="size-28 option" |
|
|
<view class="size-28 option" |
|
|
v-for="(option, oIdx) in props.data.options" |
|
|
v-for="(option, oIdx) in props.data.options" |
|
|
:key="`${props.index}-option-${oIdx}`" |
|
|
:key="`${props.index}-option-${oIdx}`" |
|
|
:class="[props.modelValue === option.value ? 'is-selected' : '']" |
|
|
|
|
|
|
|
|
:class="[value === option.value ? 'is-selected' : '']" |
|
|
@click="onClick(option.value)" |
|
|
@click="onClick(option.value)" |
|
|
> |
|
|
> |
|
|
{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }} |
|
|
{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }} |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<view class="textarea"> |
|
|
|
|
|
<textarea |
|
|
|
|
|
v-model="value" |
|
|
|
|
|
placeholder="请输入您的答案,不得低于700个字" |
|
|
|
|
|
:rows="10" |
|
|
|
|
|
></textarea> |
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<template v-if="props.data.options?.length"> |
|
|
|
|
|
<view class="size-28 option" |
|
|
|
|
|
v-for="(option, oIdx) in props.data.options" |
|
|
|
|
|
:key="`${props.index}-option-${oIdx}`" |
|
|
|
|
|
:class="[ |
|
|
|
|
|
props.data.answer === option.value ? 'is-correct' : '', |
|
|
|
|
|
props.data.value === option.value ? 'is-error' : '', |
|
|
|
|
|
]" |
|
|
|
|
|
@click="onClick(option.value)" |
|
|
|
|
|
> |
|
|
|
|
|
{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }} |
|
|
|
|
|
|
|
|
|
|
|
<view class="icon icon-correct"> |
|
|
|
|
|
<up-icon name="checkmark" color="#05C160" size="35rpx"></up-icon> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="icon icon-error"> |
|
|
|
|
|
<up-icon name="close" color="#FF2A2A" size="35rpx"></up-icon> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<view class="textarea"> |
|
|
|
|
|
<view>{{ props.data.value }}</view> |
|
|
|
|
|
<view class="highlight">{{ props.data.reason }}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
</template> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup> |
|
|
<script setup> |
|
|
|
|
|
import { computed } from 'vue' |
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
index: { |
|
|
index: { |
|
@ -33,14 +75,23 @@ const props = defineProps({ |
|
|
}, |
|
|
}, |
|
|
mode: { |
|
|
mode: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'select', // select | display |
|
|
|
|
|
|
|
|
default: 'edit', // edit | display |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
|
|
|
|
|
const onClick = (val) => { |
|
|
|
|
|
|
|
|
const value = computed({ |
|
|
|
|
|
set(val) { |
|
|
emit('update:modelValue', val) |
|
|
emit('update:modelValue', val) |
|
|
|
|
|
}, |
|
|
|
|
|
get() { |
|
|
|
|
|
return props.modelValue |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const onClick = (val) => { |
|
|
|
|
|
value.value = val |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
</script> |
|
|
</script> |
|
@ -57,15 +108,57 @@ const onClick = (val) => { |
|
|
padding: 23rpx; |
|
|
padding: 23rpx; |
|
|
border-radius: 28rpx; |
|
|
border-radius: 28rpx; |
|
|
|
|
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
& + & { |
|
|
& + & { |
|
|
margin-top: 20rpx; |
|
|
margin-top: 20rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 45rpx; |
|
|
|
|
|
bottom: 23rpx; |
|
|
|
|
|
display: none; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.textarea { |
|
|
|
|
|
background-color: #F3F3F3; |
|
|
|
|
|
padding: 23rpx; |
|
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
|
|
|
|
|
|
.highlight { |
|
|
|
|
|
color: #FF2A2A; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.question__view.select { |
|
|
|
|
|
|
|
|
.question__view.edit { |
|
|
.option.is-selected { |
|
|
.option.is-selected { |
|
|
background-color: rgba($color: #FFBF60, $alpha: 0.22); |
|
|
background-color: rgba($color: #FFBF60, $alpha: 0.22); |
|
|
color: #FFBF60; |
|
|
color: #FFBF60; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.question__view.display { |
|
|
|
|
|
.option { |
|
|
|
|
|
&.is-correct { |
|
|
|
|
|
background-color: rgba($color: #05C160, $alpha: 0.08); |
|
|
|
|
|
color: #05C160; |
|
|
|
|
|
|
|
|
|
|
|
.icon-correct { |
|
|
|
|
|
display: block; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
&.is-error { |
|
|
|
|
|
background-color: rgba($color: #FFEBCE, $alpha: 0.36); |
|
|
|
|
|
color: #FF2A2A; |
|
|
|
|
|
|
|
|
|
|
|
.icon-error { |
|
|
|
|
|
display: block; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |