提交

src/pages/questionBank/components/Question.vue

@@ -0,0 +1,146 @@
+<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>