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/components/ExamInfo/index.vue | 2
src/views/exam/components/answer-main/answer-multiple/index.vue | 123 ++++++++++++++++++++++++
src/store/index.js | 3
src/store/modules/exam.js | 11 ++
src/views/exam/components/answer-time/index.vue | 28 +++++
components.d.ts | 1
src/views/exam/components/answer-main/answer-single/index.vue | 97 +++++++++++++++++-
src/views/exam/index.vue | 32 +++++-
8 files changed, 281 insertions(+), 16 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index d9f6dd9..29e085c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,6 +13,7 @@
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+ ElCountdown: typeof import('element-plus/es')['ElCountdown']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElPagination: typeof import('element-plus/es')['ElPagination']
diff --git a/src/components/ExamInfo/index.vue b/src/components/ExamInfo/index.vue
index f768c33..e776b51 100644
--- a/src/components/ExamInfo/index.vue
+++ b/src/components/ExamInfo/index.vue
@@ -17,6 +17,6 @@
<style lang="scss" scoped>
.img-item {
- max-width: 500px;
+ max-width: 400px;
}
</style>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index eef45de..c407325 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,4 +2,5 @@
const pinia = createPinia();
export default pinia;
-export * from './modules/user';
+export * from './modules/user.js';
+export * from './modules/exam.js';
diff --git a/src/store/modules/exam.js b/src/store/modules/exam.js
new file mode 100644
index 0000000..96a55e9
--- /dev/null
+++ b/src/store/modules/exam.js
@@ -0,0 +1,11 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+const useExamStore = defineStore('exam', () => {
+ const examInfo = ref(null);
+
+ return {
+ examInfo
+ }
+});
+
+export default useExamStore;
\ No newline at end of file
diff --git a/src/views/exam/components/answer-main/answer-multiple/index.vue b/src/views/exam/components/answer-main/answer-multiple/index.vue
new file mode 100644
index 0000000..b8a570b
--- /dev/null
+++ b/src/views/exam/components/answer-main/answer-multiple/index.vue
@@ -0,0 +1,123 @@
+<template>
+ <div class="answer-container w-full h-full">
+ <el-scrollbar>
+ <ExamInfo class="mb-5"></ExamInfo>
+
+ <div class="answer-content">
+ <div class="answer-item flex" v-for="item, index in examInfo.answerList" @click="answerClick(item)"
+ :class="answerState(item)">
+ <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.type }}</div>
+ <div class="answer-text text-gray-700">{{ item.text }}</div>
+ </div>
+ </div>
+
+ </el-scrollbar>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ExamInfo from '@/components/ExamInfo/index.vue';
+
+const examInfo = ref({
+ qId: 1,
+ answerList: [
+ {
+ type: 'A',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'B',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'C',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'D',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'E',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'F',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ ]
+});
+
+const activeIndex = ref(null);
+
+const answerClick = (item) => {
+ if(item) {
+ resetAnswer();
+ item.isActive = true
+ }
+};
+
+const answerState = (item) => {
+ return {
+ active: item.isActive
+ };
+}
+
+const resetAnswer = () => {
+ examInfo.value.answerList.forEach(item => item.isActive = false);
+}
+
+</script>
+
+<style lang="scss" scoped>
+.answer-item {
+ max-width: 500px;
+ border-radius: 10px;
+ border: 1px solid #DCDFE6;
+ overflow: hidden;
+ margin-bottom: 20px;
+ cursor: pointer;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+
+ &:hover {
+ border-color: #3680fa;
+
+ .answer-icon {
+ color: #3680fa;
+ border-color: #3680fa;
+ }
+ }
+
+
+ .answer-icon {
+ width: 50px;
+ background-color: #F0F2F5;
+ border-right: 1px solid #ffffff;
+ }
+
+ .answer-text {
+ min-height: 50px;
+ padding: 15px 0;
+ margin: 0 10px;
+ }
+}
+
+.active {
+ border-color: #409EFF !important;
+ .answer-icon {
+ color: #ffffff !important;
+ border-color: #409EFF !important;
+ background-color: #409EFF !important;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/exam/components/answer-main/answer-single/index.vue b/src/views/exam/components/answer-main/answer-single/index.vue
index 1c9d6ea..c5316c2 100644
--- a/src/views/exam/components/answer-main/answer-single/index.vue
+++ b/src/views/exam/components/answer-main/answer-single/index.vue
@@ -1,12 +1,13 @@
<template>
<div class="answer-container w-full h-full">
<el-scrollbar>
- <ExamInfo></ExamInfo>
+ <ExamInfo class="mb-5"></ExamInfo>
<div class="answer-content">
- <div class="answer-item flex">
- <div class="answer-icon flex justify-center items-center">A</div>
- <div class="answer-text"></div>
+ <div class="answer-item flex" v-for="item, index in examInfo.answerList" @click="answerClick(item)"
+ :class="answerState(item)">
+ <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.type }}</div>
+ <div class="answer-text text-gray-700">{{ item.text }}</div>
</div>
</div>
@@ -15,18 +16,98 @@
</template>
<script setup>
+import { ref } from 'vue';
import ExamInfo from '@/components/ExamInfo/index.vue';
+
+const examInfo = ref({
+ qId: 1,
+ answerList: [
+ {
+ type: 'A',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'B',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'C',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ {
+ type: 'D',
+ text: '娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯璇曟祴璇�',
+ isActive: false
+ },
+ ]
+});
+
+const activeIndex = ref(null);
+
+const answerClick = (item) => {
+ if(item) {
+ resetAnswer();
+ item.isActive = true
+ }
+};
+
+const answerState = (item) => {
+ return {
+ active: item.isActive
+ };
+}
+
+const resetAnswer = () => {
+ examInfo.value.answerList.forEach(item => item.isActive = false);
+}
+
</script>
<style lang="scss" scoped>
.answer-item {
- max-width: 400px;
+ max-width: 500px;
border-radius: 10px;
- padding: 10px 0;
- border: 1px solid #EBEEF5;
+ border: 1px solid #DCDFE6;
+ overflow: hidden;
+ margin-bottom: 20px;
+ cursor: pointer;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+
+ &:hover {
+ border-color: #3680fa;
+
+ .answer-icon {
+ color: #3680fa;
+ border-color: #3680fa;
+ }
+ }
+
+
.answer-icon {
width: 50px;
- height: 100%;
+ background-color: #F0F2F5;
+ border-right: 1px solid #ffffff;
+ }
+
+ .answer-text {
+ min-height: 50px;
+ padding: 15px 0;
+ margin: 0 10px;
+ }
+}
+
+.active {
+ border-color: #409EFF !important;
+ .answer-icon {
+ color: #ffffff !important;
+ border-color: #409EFF !important;
+ background-color: #409EFF !important;
}
}
</style>
\ No newline at end of file
diff --git a/src/views/exam/components/answer-time/index.vue b/src/views/exam/components/answer-time/index.vue
new file mode 100644
index 0000000..b37e18b
--- /dev/null
+++ b/src/views/exam/components/answer-time/index.vue
@@ -0,0 +1,28 @@
+<template>
+ <div class="time-container flex justify-center text-white items-center shadow-md">
+ <el-icon class="mr-1 text-xl" size="24"><Timer /></el-icon>
+ <div class="label mr-1">鍓╀綑鏃堕棿:</div>
+ <el-countdown :value="time" />
+ </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import { Timer } from '@element-plus/icons-vue';
+
+const time = ref(1000);
+</script>
+
+<style lang="scss" scoped>
+.time-container {
+ width: 220px;
+ border-radius: 100px;
+ padding: 10px 0;
+ background-color: rgba($color: #86d7f7, $alpha: 0.3);
+
+}
+
+:deep(.el-statistic__number) {
+ color: #ffffff;
+}
+</style>
\ No newline at end of file
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