feat:成绩单页面

ZhangXianQiang

2024-06-06 a4df1733923b72189d33ff2794e25b9cd883d7b4

 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>