From 0e025c01be2ba8c5a0f92be2c7453c6ea6f1f37c Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期四, 20 六月 2024 15:19:10 +0800 Subject: [PATCH] feat:考试列表测试数据 --- src/views/exam-list/data-list/index.vue | 52 ++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 40 insertions(+), 12 deletions(-) diff --git a/src/views/exam-list/data-list/index.vue b/src/views/exam-list/data-list/index.vue index 2d4d5d0..28a0d1d 100644 --- a/src/views/exam-list/data-list/index.vue +++ b/src/views/exam-list/data-list/index.vue @@ -1,38 +1,40 @@ <template> <div class="list-container w-full h-full"> <el-scrollbar> - <el-card shadow="hover" class="mb-3"> + <el-card shadow="hover" class="mb-3" v-for="item in props.dataList"> <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="title mr-5 text-xl font-bold">{{ item.name }}</div> <div class="tag"> - <el-tag type="primary" effect="light" round> - 鏈紑濮� + <el-tag :type="stateList[item.status].type" effect="light" round> + {{ stateList[item.status].text }} </el-tag> </div> </div> <div class="mid-container flex items-center my-4 text-gray-700"> - <el-icon class="mr-1"><Timer /></el-icon> + <el-icon class="mr-1"> + <Timer /> + </el-icon> <div class="time"> - 鑰冭瘯鏃堕棿: 2024-6-5 08:00 ~ 2024-6-5 10:00 + 鑰冭瘯鏃堕棿: {{ item.startTime }} ~ {{ item.endTime }} </div> </div> <div class="bottom-container flex text-sm text-gray-400"> <div class="bottom-item"> - 鎬诲垎: 100 + 鎬诲垎: {{ item.examScore }} </div> <div class="bottom-item"> - 棰樻暟: 20 + 棰樻暟: {{ item.examTotal }} </div> <div class="bottom-item"> - 绛旈鏃堕棿: 20鍒嗛挓 + 绛旈鏃堕棿: {{ item.examTime }}鍒嗛挓 </div> </div> </div> <div class="right-container"> <div class="button-container"> - <el-button type="primary" size="large" @click="examClick">寮�濮嬭�冭瘯</el-button> + <el-button type="primary" size="large" @click="examClick" :disabled="stateList[item.status].disabled">寮�濮嬭�冭瘯</el-button> </div> </div> </div> @@ -42,10 +44,35 @@ </template> <script setup> -import {ref} from 'vue'; +import { ref } from 'vue'; import { Timer } from '@element-plus/icons-vue'; -import {useRouter} from 'vue-router'; +import { useRouter } from 'vue-router'; const router = useRouter(); + +const props = defineProps({ + dataList: { + type: Array, + default: () => [] + } +}); + +const stateList = { + 1: { + text: '鏈紑濮�', + type: 'primary', + disabled: true + }, + 2: { + text: '杩涜涓�', + type: 'success', + disabled: false + }, + 3: { + text: '宸茬粨鏉�', + type: 'info', + disabled: true + } +}; const examClick = () => { router.push('/exam'); @@ -58,6 +85,7 @@ width: 100%; min-height: 120px; } + .bottom-item { margin-right: 30px; } -- Gitblit v1.8.0