From 0f52b1e924693795faea619cd68ea7ecc855a61f Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 06 六月 2024 13:54:22 +0800
Subject: [PATCH] feat:倒计时
---
src/views/exam/index.vue | 32 ++++++++++++++++++++++++++------
1 files changed, 26 insertions(+), 6 deletions(-)
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index ec0bc4c..aaf82e4 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -4,9 +4,12 @@
<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">
@@ -44,22 +47,22 @@
<div class="main-wrapper w-full grow relative my-5">
<div class="main-content absolute top-0 bottom-0 w-full">
- <AnswerSingle></AnswerSingle>
+ <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">涓婁竴棰�</el-button>
+ <el-button class="tool-button" @click="prevQuestion">涓婁竴棰�</el-button>
</div>
<div class="button-item">
- <el-button class="tool-button" type="primary">涓嬩竴棰�</el-button>
+ <el-button class="tool-button" type="primary" @click="nextQuestion">涓嬩竴棰�</el-button>
</div>
</div>
</div>
-
-
</div>
</div>
</div>
@@ -69,12 +72,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>
--
Gitblit v1.8.0