提交 b50e77de authored 作者: lihuihui's avatar lihuihui

修改正确选项样式

上级 43e94c41
...@@ -29,22 +29,70 @@ ...@@ -29,22 +29,70 @@
<ul class="option" v-if="item.type === '1' || item.type === '6' || item.type === '5' && dItem.answer_count <= 1"> <ul class="option" v-if="item.type === '1' || item.type === '6' || item.type === '5' && dItem.answer_count <= 1">
<template v-for="(opt, oIndex) in dItem.question_options"> <template v-for="(opt, oIndex) in dItem.question_options">
<template v-if="requestData2 != 0 && requestData[item.id]"> <template v-if="requestData2 != 0 && requestData[item.id]">
<li :key="oIndex" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : requestData[item.id][dItem.id].answer.find(res => { return res === opt.id }) ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li> <li :key="oIndex" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : requestData[item.id][dItem.id].answer.find(res => { return res === opt.id }) ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">
<li :key="oIndex" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li> <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
<div>
<span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
{{opaKey[oIndex]}}.
</span>
{{ opt.option }}
</div>
</li>
<li :key="oIndex" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">
<van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
<div>
<span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
{{opaKey[oIndex]}}.
</span>
{{ opt.option }}
</div>
</li>
</template> </template>
<template v-else> <template v-else>
<li :key="oIndex" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li> <li :key="oIndex" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">
<van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
<div>
<span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
{{opaKey[oIndex]}}.
</span>
{{ opt.option }}
</div>
</li>
</template> </template>
</template> </template>
</ul> </ul>
<ul class="option" v-if="item.type === '2' || item.type === '5' && dItem.answer_count > 1"> <ul class="option" v-if="item.type === '2' || item.type === '5' && dItem.answer_count > 1">
<template v-for="(opt, oIndex) in dItem.question_options"> <template v-for="(opt, oIndex) in dItem.question_options">
<template v-if="requestData2 != 0 && requestData[item.id]"> <template v-if="requestData2 != 0 && requestData[item.id]">
<li :key="oIndex+'-'" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li> <li :key="oIndex+'-'" v-if="requestData[item.id][dItem.id]" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' : opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">
<li :key="oIndex+'-'" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li> <van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
<div>
<span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
{{opaKey[oIndex]}}.
</span>
{{ opt.option }}
</div>
</li>
<li :key="oIndex+'-'" v-else :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">
<van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
<div>
<span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
{{opaKey[oIndex]}}.
</span>
{{ opt.option }}
</div>
</li>
</template> </template>
<template v-else> <template v-else>
<li :key="oIndex+'-'" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}. {{ opt.option }}</li> <li :key="oIndex+'-'" :class="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id) ? 'active2' :opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">
<van-icon v-if="dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id)" class="icon" name="checked"/>
<div>
<span v-if="!(dItem.answerOpt.find(cla => { return cla == opaKey[oIndex] }) && (isAnalysis || $route.query.id))">
{{opaKey[oIndex]}}.
</span>
{{ opt.option }}
</div>
</li>
</template> </template>
</template> </template>
</ul> </ul>
...@@ -836,6 +884,12 @@ export default { ...@@ -836,6 +884,12 @@ export default {
padding: .35rem .2rem; padding: .35rem .2rem;
margin-bottom: .2rem; margin-bottom: .2rem;
word-wrap:break-word; word-wrap:break-word;
display: flex;
align-items: center;
.icon{
margin-right: 0.1rem;
color: #5CB9A2;
}
} }
.active{ .active{
color: #5F95DE; color: #5F95DE;
......
...@@ -36,7 +36,10 @@ ...@@ -36,7 +36,10 @@
: ''" : ''"
> >
<van-icon class="icon" name="checked" v-if="item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id })"/> <van-icon class="icon" name="checked" v-if="item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id })"/>
<div>{{ A_Z[optIndex] }}. {{ opt.option }}</div> <div>
<span v-if="!(item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id }))">{{ A_Z[optIndex] }}.</span>
{{ opt.option }}
</div>
</li> </li>
<li <li
v-else v-else
...@@ -49,7 +52,10 @@ ...@@ -49,7 +52,10 @@
: ''" : ''"
> >
<van-icon class="icon" name="checked" v-if="item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id })"/> <van-icon class="icon" name="checked" v-if="item.user_answer.length != 0 && item.question_answer.find(id => { return id === opt.id })"/>
<div>{{ A_Z[optIndex] }}. {{ opt.option }}</div> <div>
<span v-if="!(item.question_answer.find(id => { return id === opt.id }))">{{ A_Z[optIndex] }}.</span>
{{ opt.option }}
</div>
</li> </li>
</template> </template>
</ul> </ul>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论