<template>
|
<div class="list-container w-full h-full">
|
<el-scrollbar>
|
<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">{{ item.name }}</div>
|
<div class="tag">
|
<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>
|
<div class="time">
|
考试时间: {{ item.startTime }} ~ {{ item.endTime }}
|
</div>
|
</div>
|
<div class="bottom-container flex text-sm text-gray-400">
|
<div class="bottom-item">
|
总分: {{ item.examScore }}
|
</div>
|
<div class="bottom-item">
|
题数: {{ item.examTotal }}
|
</div>
|
<div class="bottom-item">
|
答题时间: {{ item.examTime }}分钟
|
</div>
|
</div>
|
</div>
|
<div class="right-container">
|
<div class="button-container">
|
<el-button type="primary" size="large" @click="examClick" :disabled="stateList[item.status].disabled">开始考试</el-button>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { Timer } from '@element-plus/icons-vue';
|
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');
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.item {
|
width: 100%;
|
min-height: 120px;
|
}
|
|
.bottom-item {
|
margin-right: 30px;
|
}
|
</style>
|
