From 5c0d64898ddeabb85ddae32bb620b89b10cee930 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 05 六月 2024 16:15:13 +0800
Subject: [PATCH] feat:答题卡
---
src/components/NormalHeader/index.vue | 2
src/views/exam/answer-progress/index.vue | 29 +++++++
components.d.ts | 4 +
src/views/exam/answer-sheet/index.vue | 63 +++++++++++++++
src/views/exam/answer-tag/index.vue | 46 +++++++++++
src/router/index.js | 2
src/views/exam/index.vue | 75 +++++++++++++++++-
7 files changed, 212 insertions(+), 9 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index 19fab2e..7dfdc82 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,11 +11,15 @@
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
+ ElCollapse: typeof import('element-plus/es')['ElCollapse']
+ ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElPagination: typeof import('element-plus/es')['ElPagination']
+ ElProgress: typeof import('element-plus/es')['ElProgress']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+ ElSlider: typeof import('element-plus/es')['ElSlider']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
diff --git a/src/components/NormalHeader/index.vue b/src/components/NormalHeader/index.vue
index 1152027..fcf5395 100644
--- a/src/components/NormalHeader/index.vue
+++ b/src/components/NormalHeader/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="w-screen h-16 bg-blue-400 flex justify-between items-center px-10 box-border">
+ <div class="w-screen h-16 bg-blue-500 flex justify-between items-center px-10 box-border">
<div class="return-container text-center cursor-pointer" @click="returnBack">
<div class="icon mx-auto">
<img src="@/assets/icons/return.png" class="width-img" alt="">
diff --git a/src/router/index.js b/src/router/index.js
index e2efcca..268e366 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@
const routes = [
{
path: '/',
- redirect: '/index'
+ redirect: '/exam'
},
{
diff --git a/src/views/exam/answer-progress/index.vue b/src/views/exam/answer-progress/index.vue
new file mode 100644
index 0000000..73b94b7
--- /dev/null
+++ b/src/views/exam/answer-progress/index.vue
@@ -0,0 +1,29 @@
+<template>
+ <div class="progress-container w-full px-3 py-4 bg-slate-50">
+ <div class="title-container flex justify-between items-center mb-3">
+ <div class="title text-gray-600 text-base">绛旈杩涘害</div>
+ <div class="title-num text-sm text-gray-500">10/30</div>
+ </div>
+
+ <div class="progress-content mb-3">
+ <el-progress :percentage="progress" :stroke-width="10" :show-text="false" />
+ </div>
+
+ <div class="exam-info text-sm text-gray-600">
+ 鍏�30棰橈紝婊″垎100鍒�
+ </div>
+
+ </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+const progress = ref(10);
+
+</script>
+
+<style lang="scss" scoped>
+.progress-container {
+ border-radius: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/exam/answer-sheet/index.vue b/src/views/exam/answer-sheet/index.vue
new file mode 100644
index 0000000..ee55a0f
--- /dev/null
+++ b/src/views/exam/answer-sheet/index.vue
@@ -0,0 +1,63 @@
+<template>
+ <div class="sheet-container w-full h-full">
+ <el-scrollbar>
+ <el-collapse v-model="activeNames" @change="handleChange">
+ <template v-for="item in sheetList">
+ <el-collapse-item :title="item.title" :name="item.type">
+ <div class="sheet-list grid grid-cols-5 gap-4 justify-items-center">
+ <div class="sheet-item cursor-pointer flex justify-center items-center" v-for="index in item.total" @click="">
+ {{ index }}
+ </div>
+ </div>
+ </el-collapse-item>
+ </template>
+ </el-collapse>
+ </el-scrollbar>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const categroy = ref(0);
+const sheetIndex = ref(0);
+
+
+const sheetList = ref([
+ {
+ title: '鍗曢�夐',
+ type: 1,
+ total: 20,
+ },
+ {
+ title: '澶氶�夐',
+ type: 2,
+ total: 20,
+ },
+ {
+ title: '鍒ゆ柇棰�',
+ type: 3,
+ total: 20,
+ },
+]);
+
+const activeNames = ref(sheetList.value.map(item => item.type));
+
+
+const handleChange = () => {
+
+};
+</script>
+
+<style lang="scss" scoped>
+.sheet-list {
+ width: 97%;
+}
+.sheet-item {
+ width: 35px;
+ height: 35px;
+ border: 1px solid #DCDFE6;
+ background-color: #fff;
+ color: #374151;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/exam/answer-tag/index.vue b/src/views/exam/answer-tag/index.vue
new file mode 100644
index 0000000..430559b
--- /dev/null
+++ b/src/views/exam/answer-tag/index.vue
@@ -0,0 +1,46 @@
+<template>
+ <div class="tag-container flex flex-wrap">
+ <div class="tag-item flex items-center" v-for="item in tagList">
+ <div class="label text-xs text-gray-500 mr-2">{{ item.name }}</div>
+ <div class="tag flex-shrink-0" :style="{backgroundColor: item.bgColor, borderColor: item.borderColor}"></div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const tagList = ref([
+ {
+ name: '宸茬瓟',
+ bgColor: '#3680fa',
+ borderColor: '#3680fa',
+ },
+ {
+ name: '褰撳墠',
+ bgColor: '#ffffff',
+ borderColor: '#3680fa',
+ },
+ {
+ name: '鏈瓟',
+ bgColor: '#ffffff',
+ borderColor: '#DCDFE6',
+ },
+])
+
+</script>
+
+<style lang="scss" scoped>
+.tag-item {
+ margin-right: 14px;
+ &:last-of-type {
+ margin: 0;
+ }
+}
+.tag {
+ width: 12px;
+ height: 12px;
+ border: 1px solid #fff;
+ background-color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index cdc820e..04e0403 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -1,22 +1,61 @@
<template>
- <div class="exam-container w-screen h-screen relative overflow-hidden">
- <div class="top-bg bg-blue-400"></div>
- <div class="exam-content flex flex-col ">
- <div class="exam-header">
- <div class="title-container">
- 娴嬭瘯娴嬭瘯娴嬭瘯
+ <div class="exam-container w-screen h-screen bg-slate-50 relative overflow-hidden">
+ <div class="top-bg bg-blue-500"></div>
+ <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>
+ </div>
+ <div class="exam-main grow flex justify-between">
+ <!-- 绛旈鍗″尯 -->
+ <div class="answer-wrapper answer-left mr-8 shadow-xl p-4 box-border">
+ <div class="wrapper h-full flex flex-col items-center">
+ <div class="title-wrapper w-full flex justify-between items-center mb-5">
+ <div class="title text-xl font-semibold ">绛旈鍗�</div>
+ <AnswerTag></AnswerTag>
+ </div>
+
+ <div class="progress-wrapper w-full">
+ <AnswerProgress></AnswerProgress>
+ </div>
+
+ <div class="sheet-wrapper w-full grow relative my-5">
+ <div class="sheet-content absolute top-0 bottom-0 w-full">
+ <AnswerSheet></AnswerSheet>
+ </div>
+ </div>
+
+ <div class="submit-wrapper">
+ <el-button type="primary" class="submit-button w-40">鎻愪氦璇曞嵎</el-button>
+ </div>
+
+ </div>
+ </div>
+ <!-- 绛旈鍐呭鍖� -->
+ <div class="answer-wrapper answer-right grow shadow-xl">
+
+ </div>
</div>
</div>
- <div class="exam-main flex-1"></div>
</div>
</div>
</template>
<script setup>
+import AnswerTag from './answer-tag/index.vue';
+import AnswerProgress from './answer-progress/index.vue';
+import AnswerSheet from './answer-sheet/index.vue';
</script>
<style lang="scss" scoped>
+@media (min-width: 1836px) {
+ .container {
+ max-width: 1724px;
+ }
+}
.top-bg {
width: 130%;
height: 200px;
@@ -26,8 +65,30 @@
left: 50%;
transform: translateX(-50%);
}
+
.exam-content {
width: 100%;
height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+}
+.exam-header {
+ width: 100%;
+}
+.answer-wrapper {
+ background-color: #fff;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+.answer-left {
+ width: 340px;
+}
+.answer-right {
+ color: #3680fa;
+}
+.submit-button {
+ height: 40px;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0