From 3341b1602cbf20822bd0ef98bdc2e3898aaea2f9 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 05 六月 2024 10:06:11 +0800
Subject: [PATCH] feat:考试列表
---
src/components/NormalHeader/index.vue | 9 ++
src/views/exam-list/data-list/index.vue | 120 +++++++++++++++++++++++++++++++++++++++
components.d.ts | 2
src/views/exam-list/index.vue | 10 ++-
src/router/index.js | 2
src/views/menu/index.vue | 2
6 files changed, 137 insertions(+), 8 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index a3e034d..19fab2e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,6 +11,7 @@
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
+ ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRow: typeof import('element-plus/es')['ElRow']
@@ -19,6 +20,7 @@
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
+ ElTag: typeof import('element-plus/es')['ElTag']
ExamInfoDialog: typeof import('./src/components/ExamInfoDialog/index.vue')['default']
Header: typeof import('./src/components/Header/index.vue')['default']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
diff --git a/src/components/NormalHeader/index.vue b/src/components/NormalHeader/index.vue
index 4375271..1152027 100644
--- a/src/components/NormalHeader/index.vue
+++ b/src/components/NormalHeader/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="w-screen h-16 bg-blue-400 flex justify-between items-center px-10 box-border">
- <div class="return-container text-center cursor-pointer">
+ <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="">
</div>
@@ -23,11 +23,18 @@
<script setup>
import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
import randomColor from '@/utils/randomColor.js';
+
+const router = useRouter();
const getColor = computed(() => {
return randomColor();
});
+
+const returnBack = () => {
+ router.back();
+}
</script>
<style lang="scss" scoped>
diff --git a/src/router/index.js b/src/router/index.js
index eaa2e50..e2efcca 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@
const routes = [
{
path: '/',
- redirect: '/exam-list'
+ redirect: '/index'
},
{
diff --git a/src/views/exam-list/data-list/index.vue b/src/views/exam-list/data-list/index.vue
index 239f314..f4d0610 100644
--- a/src/views/exam-list/data-list/index.vue
+++ b/src/views/exam-list/data-list/index.vue
@@ -1,15 +1,133 @@
<template>
<div class="list-container w-full h-full">
<el-scrollbar>
+ <el-card shadow="hover" class="mb-3">
+ <div class="item flex justify-between items-center">
+ <div class="left-container flex flex-col justify-between">
+ <div class="top-container flex items-center">
+ <div class="title mr-5 text-xl font-bold">娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯</div>
+ <div class="tag">
+ <el-tag type="primary" effect="light" round>
+ 鏈紑濮�
+ </el-tag>
+ </div>
+ </div>
+ <div class="mid-container flex items-center my-4 text-gray-700">
+ <el-icon class="mr-1"><Timer /></el-icon>
+ <div class="time">
+ 鑰冭瘯鏃堕棿: 2024-6-5 08:00 ~ 2024-6-5 10:00
+ </div>
+ </div>
+ <div class="bottom-container flex text-sm text-gray-400">
+ <div class="bottom-item">
+ 鎬诲垎: 100
+ </div>
+ <div class="bottom-item">
+ 棰樻暟: 20
+ </div>
+ <div class="bottom-item">
+ 绛旈鏃堕棿: 20鍒嗛挓
+ </div>
+ </div>
+ </div>
+ <div class="right-container">
+ <div class="button-container">
+ <el-button type="primary" size="large">寮�濮嬭�冭瘯</el-button>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ <el-card shadow="hover" class="mb-3">
+ <div class="item flex justify-between items-center">
+ <div class="left-container flex flex-col justify-between">
+ <div class="top-container flex items-center">
+ <div class="title mr-5 text-xl font-bold">娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯</div>
+ <div class="tag">
+ <el-tag type="primary" effect="light" round>
+ 鏈紑濮�
+ </el-tag>
+ </div>
+ </div>
+ <div class="mid-container flex items-center my-4 text-gray-700">
+ <el-icon class="mr-1"><Timer /></el-icon>
+ <div class="time">
+ 鑰冭瘯鏃堕棿: 2024-6-5 08:00 ~ 2024-6-5 10:00
+ </div>
+ </div>
+ <div class="bottom-container flex text-sm text-gray-400">
+ <div class="bottom-item">
+ 鎬诲垎: 100
+ </div>
+ <div class="bottom-item">
+ 棰樻暟: 20
+ </div>
+ <div class="bottom-item">
+ 绛旈鏃堕棿: 20鍒嗛挓
+ </div>
+ </div>
+ </div>
+ <div class="right-container">
+ <div class="button-container">
+ <el-button type="primary" size="large">寮�濮嬭�冭瘯</el-button>
+ </div>
+ </div>
+ </div>
+ </el-card>
+
+ <el-card shadow="hover" class="mb-3">
+ <div class="item flex justify-between items-center">
+ <div class="left-container flex flex-col justify-between">
+ <div class="top-container flex items-center">
+ <div class="title mr-5 text-xl font-bold">娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯娴嬭瘯</div>
+ <div class="tag">
+ <el-tag type="primary" effect="light" round>
+ 鏈紑濮�
+ </el-tag>
+ </div>
+ </div>
+ <div class="mid-container flex items-center my-4 text-gray-700">
+ <el-icon class="mr-1"><Timer /></el-icon>
+ <div class="time">
+ 鑰冭瘯鏃堕棿: 2024-6-5 08:00 ~ 2024-6-5 10:00
+ </div>
+ </div>
+ <div class="bottom-container flex text-sm text-gray-400">
+ <div class="bottom-item">
+ 鎬诲垎: 100
+ </div>
+ <div class="bottom-item">
+ 棰樻暟: 20
+ </div>
+ <div class="bottom-item">
+ 绛旈鏃堕棿: 20鍒嗛挓
+ </div>
+ </div>
+ </div>
+ <div class="right-container">
+ <div class="button-container">
+ <el-button type="primary" size="large">寮�濮嬭�冭瘯</el-button>
+ </div>
+ </div>
+ </div>
+ </el-card>
</el-scrollbar>
</div>
</template>
<script setup>
+import {ref} from 'vue';
+import { Timer } from '@element-plus/icons-vue';
+
</script>
<style lang="scss" scoped>
-
+.item {
+ width: 100%;
+ min-height: 120px;
+}
+.bottom-item {
+ margin-right: 30px;
+}
</style>
\ No newline at end of file
diff --git a/src/views/exam-list/index.vue b/src/views/exam-list/index.vue
index 3efe17d..1c9b2a2 100644
--- a/src/views/exam-list/index.vue
+++ b/src/views/exam-list/index.vue
@@ -7,7 +7,7 @@
<div class="list-wrapper w-full h-full">
<el-card class="h-full" :body-style="{height: '100%'}">
<div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
- <div class="card-header flex justify-between items-center">
+ <div class="card-header flex justify-between items-center shrink-0">
<div class="header-tab">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="鍏ㄩ儴" name="1"></el-tab-pane>
@@ -22,11 +22,13 @@
</div>
</div>
- <div class="card-main grow my-5">
- <DataList></DataList>
+ <div class="card-main flex-1 my-5 relative">
+ <div class="main-content absolute top-0 bottom-0 left-0 right-0">
+ <DataList></DataList>
+ </div>
</div>
- <div class="card-footer flex justify-center mb-7">
+ <div class="card-footer flex justify-center mb-7 shrink-0">
<el-pagination background layout="prev, pager, next" :total="1000" />
</div>
</div>
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index 3a06d1c..1be7d1d 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -59,7 +59,7 @@
]);
const testClick = (item) => {
- router.push('/exam');
+ router.push('/exam-list');
}
</script>
--
Gitblit v1.8.0