<template> <view style="margin-top: 100px;"> <view class="flex ai-c jc-c"> <view class="flex type_box"> <view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view> <view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view> </view> </view> <view class="m14lr"> <text class="tag_box">{{questionList[currentIndex].questionTypeDesc}}</text> <text class="fs18">{{questionList[currentIndex].questionDesc}}</text> </view> <view class="flex m14lr ai-c mt20" v-for="(item,index) in questionList[currentIndex].optionList" :key="item.op"> <template v-if="clickAnswer&&item.op===questionList[currentIndex].rightAnswer"> <u-icon name="checkmark-circle-fill" color="#05C341" size="30"></u-icon> </template> <template v-else-if="clickAnswer===item.op&&item.op!==questionList[currentIndex].rightAnswer"> <u-icon name="close-circle-fill" color="red" size="30"></u-icon> </template> <template v-else-if="!clickAnswer"> <view class="option_item">{{item.op}}</view> </template> <text class="fs18">{{item.opDesc}}</text> </view> </view> </template> <script> export default { data() { return { tCurrent:0, clickAnswer:undefined, questionList:[], currentIndex:0, } }, onshow(){ this.getQuestionList() }, methods: { sectionChange(index){ this.tCurrent=index }, getQuestionList(){ this.questionList=[{ questionId:0, questionTypeDesc:'单选', questionDesc:'在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?', optionList:[{ op:'A', opDesc:'注意新手标志' },{ op:'B', opDesc:'注意新手标志' },{ op:'C', opDesc:'注意新手标志' },{ op:'D', opDesc:'注意新手标志' }], rightOp:'C', },{ questionId:1, questionDesc:'在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?', optionList:[{ op:'A', opDesc:'注意新手标志' },{ op:'B', opDesc:'注意新手标志' },{ op:'C', opDesc:'注意新手标志' },{ op:'D', opDesc:'注意新手标志' }], rightOp:'B', },{ questionId:2, questionDesc:'在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?', optionList:[{ op:'A', opDesc:'注意新手标志' },{ op:'B', opDesc:'注意新手标志' },{ op:'C', opDesc:'注意新手标志' },{ op:'D', opDesc:'注意新手标志' }], rightOp:'A', }] } } } </script> <style scoped> .type_box{ width: 280rpx; height: 72rpx; background-color: #FFFFFF; border-radius: 8rpx; } .type_item{ text-align: center; line-height: 64rpx; width: 126rpx; height: 64rpx; border-radius: 8rpx; } .checked{ color: #fff; background-color: #05C341; } .unchecked{ color: #666; } .tag_box{ display: inline-block; width: 78rpx; height: 42rpx; background: #05C341; border-radius: 8rpx; text-align: center; line-height: 42rpx; color: #fff; font-size: 12px; margin-right: 5px; } .option_item{ width: 60rpx; height: 60rpx; border: 1px solid #666; border-radius: 50%; text-align: center; line-height: 60rpx; margin-right: 30rpx; } </style>