WIP:考试面板

src/views/newMap/display/exam/examPanel.vue

@@ -4,7 +4,20 @@
 			<div>满分: {{ composition.fullScore }}</div>
 			<div>考试时间: {{ composition.validDuration }}分钟</div>
 		</div>
-		<div class="questionList"></div>
+		<div class="questionList">
+			<div
+				class="item"
+				v-for="(question, index) in questionList"
+				:key="index"
+				@click="questionSelect(question)"
+				:class="{ current: currentQuestionIndex === index }"
+			>
+				{{ index + 1 }}
+			</div>
+		</div>
+		<div class="footer">
+			<el-button @click="submitExam">交卷</el-button>
+		</div>
 	</div>
 </template>
 
@@ -16,14 +29,27 @@ export default {
 			composition: {},
 			paper: {},
 			questionList: {},
+			currentQuestionIndex: -1,
 		}
 	},
 	methods: {
 		init(data) {
+			this.currentQuestionIndex = -1
 			this.composition = data.composition
 			this.paper = data.paper
-			this.questionList = data.questionList
+			this.questionList = [
+				...data.questionList,
+				...data.questionList,
+				...data.questionList,
+				...data.questionList,
+				...data.questionList,
+				...data.questionList,
+				...data.questionList,
+				...data.questionList,
+			]
 		},
+		questionSelect(data) {},
+		submitExam() {},
 	},
 }
 </script>
@@ -31,9 +57,28 @@ export default {
 <style lang="scss" scoped>
 .examPanel {
 	position: fixed;
-  background: #fff;
+	background: #fff;
 	left: 0;
 	top: 50%;
 	transform: translateY(-50%);
+	width: 190px;
+}
+.questionList {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+
+	.item {
+		width: 30px;
+		height: 30px;
+		background-color: #eee;
+		text-align: center;
+		line-height: 30px;
+		margin: 3px;
+		cursor: pointer;
+		&:hover {
+			background-color: #ccc;
+		}
+	}
 }
 </style>