From a4df1733923b72189d33ff2794e25b9cd883d7b4 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 06 六月 2024 14:30:12 +0800
Subject: [PATCH] feat:成绩单页面
---
src/views/exam/index.vue | 52 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 46 insertions(+), 6 deletions(-)
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index 5c3c485..fa8f549 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -4,10 +4,13 @@
<div class="exam-content">
<div class="exam-wrapper container mx-auto h-full flex flex-col">
<div class="exam-header flex items-center mt-12 mb-10">
- <div class="title-container text-3xl font-semibold text-white">
+ <div class="title-container text-3xl font-semibold text-white mr-8">
娴嬭瘯娴嬭瘯娴嬭瘯
</div>
+
+ <AnswerTime></AnswerTime>
</div>
+
<div class="exam-main grow flex justify-between">
<!-- 绛旈鍗″尯 -->
<div class="answer-wrapper answer-left mr-8 shadow-xl p-4 box-border">
@@ -28,7 +31,7 @@
</div>
<div class="submit-wrapper">
- <el-button type="primary" class="submit-button w-40">鎻愪氦璇曞嵎</el-button>
+ <el-button type="primary" class="submit-button">鎻愪氦璇曞嵎</el-button>
</div>
</div>
@@ -41,11 +44,24 @@
<div class="title text-xl font-semibold ">鍗曢�夐 (3鍒�)</div>
</div>
- <div class="main-wrapper">
-
+ <div class="main-wrapper w-full grow relative my-5">
+ <div class="main-content absolute top-0 bottom-0 w-full">
+ <Transition appear name="fade-transform" mode="out-in">
+ <component :is="typeComponent[currentType]" :key="questionIndex"></component>
+ </Transition>
+ </div>
</div>
-
+ <div class="tool-wrapper flex justify-end">
+ <div class="button-container flex items-center">
+ <div class="button-item">
+ <el-button class="tool-button" @click="prevQuestion">涓婁竴棰�</el-button>
+ </div>
+ <div class="button-item">
+ <el-button class="tool-button" type="primary" @click="nextQuestion">涓嬩竴棰�</el-button>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -55,10 +71,29 @@
</template>
<script setup>
+import {ref} from 'vue';
import AnswerTag from './components/answer-tag/index.vue';
import AnswerProgress from './components/answer-progress/index.vue';
import AnswerSheet from './components/answer-sheet/index.vue';
+import AnswerSingle from './components/answer-main/answer-single/index.vue';
+import AnswerMultiple from './components/answer-main/answer-multiple/index.vue';
+import AnswerTime from './components/answer-time/index.vue';
+const typeComponent = {
+ 1: AnswerSingle,
+ 2: AnswerMultiple,
+}
+
+const currentType = ref(1);
+const questionIndex = ref(0);
+
+const prevQuestion = () => {
+ questionIndex.value--;
+}
+
+const nextQuestion = () => {
+ questionIndex.value++;
+}
</script>
<style lang="scss" scoped>
@@ -101,7 +136,12 @@
width: 340px;
}
-.submit-button {
+.submit-button,
+.tool-button {
+ width: 160px;
height: 40px;
}
+.tool-button {
+ margin: 0 20px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0