feat:成绩单页面

ZhangXianQiang

2024-06-06 a4df1733923b72189d33ff2794e25b9cd883d7b4

feat:成绩单页面

 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({

 src/views/exam/index.vue

@@ -9,7 +9,6 @@
          </div>

          <AnswerTime></AnswerTime>

        </div>

        <div class="exam-main grow flex justify-between">

 src/views/grade-list/data-list/index.vue

New file
@@ -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>

 src/views/grade-list/index.vue

New file
@@ -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>