<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" @click="examClick">开始考试</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 examClick = () => {
|
router.push('/exam');
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.item {
|
width: 100%;
|
min-height: 120px;
|
}
|
.bottom-item {
|
margin-right: 30px;
|
}
|
</style>
|
