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/views/exam/index.vue | 75 ++++++++++++++++++++++++++++++++++---
1 files changed, 68 insertions(+), 7 deletions(-)
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