From a4df1733923b72189d33ff2794e25b9cd883d7b4 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 06 六月 2024 14:30:12 +0800
Subject: [PATCH] feat:成绩单页面
---
src/views/grade-list/index.vue | 57 +++++++++++++++++++
src/views/grade-list/data-list/index.vue | 65 +++++++++++++++++++++
src/router/index.js | 8 ++
src/views/exam/index.vue | 1
4 files changed, 129 insertions(+), 2 deletions(-)
diff --git a/src/router/index.js b/src/router/index.js
index 268e366..726610c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@
const routes = [
{
path: '/',
- redirect: '/exam'
+ redirect: '/index'
},
{
@@ -35,6 +35,12 @@
path: '/exam',
component: () => import('@/views/exam/index.vue'),
},
+
+ // 鎴愮哗鍗曞垪琛�
+ {
+ path: '/grade-list',
+ component: () => import('@/views/grade-list/index.vue'),
+ },
];
const router = createRouter({
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index aaf82e4..fa8f549 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -9,7 +9,6 @@
</div>
<AnswerTime></AnswerTime>
-
</div>
<div class="exam-main grow flex justify-between">
diff --git a/src/views/grade-list/data-list/index.vue b/src/views/grade-list/data-list/index.vue
new file mode 100644
index 0000000..08620b2
--- /dev/null
+++ b/src/views/grade-list/data-list/index.vue
@@ -0,0 +1,65 @@
+<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 mb-3">
+ <div class="bottom-item">
+ 鎬诲垎: 100
+ </div>
+ <div class="bottom-item">
+ 棰樻暟: 20
+ </div>
+ <div class="bottom-item">
+ 绛旈鏃堕棿: 20鍒嗛挓
+ </div>
+ </div>
+
+ <div class="grade-container flex items-center text-red-600">
+ <div class="grade-label mr-1">鎴愮哗:</div>
+ <div class="grade-num text-lg font-bold">100</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/grade-list/index.vue b/src/views/grade-list/index.vue
new file mode 100644
index 0000000..ef07006
--- /dev/null
+++ b/src/views/grade-list/index.vue
@@ -0,0 +1,57 @@
+<template>
+ <div class="grade-list-container w-screen h-screen bg-slate-50 flex flex-col items-center">
+ <NormalHeader class="shrink-0"></NormalHeader>
+ <div class="list-container container grow relative">
+ <div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
+ <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 shrink-0">
+ <div class="header-tab">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane label="鍏ㄩ儴" name="1"></el-tab-pane>
+ <el-tab-pane label="宸叉壒鏀�" name="2"></el-tab-pane>
+ <el-tab-pane label="鏈壒鏀�" name="3"></el-tab-pane>
+ </el-tabs>
+ </div>
+ <div class="header-search flex items-center">
+ <el-input v-model="searchText" placeholder="璇疯緭鍏ヨ�冭瘯鍚嶇О" :prefix-icon="Search" />
+ <el-button type="primary" class="ml-4">鎼滅储</el-button>
+ </div>
+
+ </div>
+
+ <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 shrink-0">
+ <el-pagination background layout="prev, pager, next" :total="1000" />
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import NormalHeader from '@/components/NormalHeader/index.vue';
+import DataList from './data-list/index.vue';
+import { Search } from '@element-plus/icons-vue';
+const activeName = ref('1');
+const searchText = ref('');
+const handleClick = (tab, event) => {
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs__nav-wrap:after) {
+ display: none;
+}
+
+</style>
\ No newline at end of file
--
Gitblit v1.8.0