<template>
|
<el-card class="card">
|
<el-row class="mb-5">
|
<el-col>
|
<div class="title text-lg font-bold">概览</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="mb-5" :gutter="20">
|
|
<el-col :span="8">
|
<div class="data-item flex flex-col items-center">
|
<div class="data-num">
|
<span class="text-num">{{ planeInfo.studyTime }}</span>
|
<span>小时</span>
|
</div>
|
<div class="data-label">已学小时</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="data-item flex flex-col items-center">
|
<div class="data-num">
|
<span class="text-num">{{ planeInfo.meetCount }}</span>
|
<span>节</span>
|
</div>
|
<div class="data-label">已学课程</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="data-item flex flex-col items-center">
|
<div class="data-num">
|
<span class="text-num">{{ planeInfo.scoreAverage }}</span>
|
<span>分</span>
|
</div>
|
<div class="data-label">考试平均分</div>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="mb-5" :gutter="40">
|
<el-col :span="12">
|
<div class="title text-lg font-bold">最近课程</div>
|
<div class="table-container">
|
<el-table :data="planeInfo.meetList" height="500" empty-text="暂无数据">
|
<el-table-column prop="startTime" label="开始时间" />
|
<el-table-column prop="meetName" label="课程名称" />
|
</el-table>
|
</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div class="title text-lg font-bold">最近考试</div>
|
<div class="table-container">
|
<el-table :data="planeInfo.examList" height="500" empty-text="暂无数据">
|
<el-table-column prop="startTime" label="开始时间" />
|
<el-table-column prop="examName" label="考试名称" />
|
</el-table>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { getHomeData } from '@/api/modules/home.js';
|
|
const planeInfo = ref({
|
meetList: [],
|
examList: [],
|
lastTime: 0,
|
scoreAverage: 0,
|
studyTime: 0,
|
meetCount: 0
|
})
|
|
const getData = () => {
|
getHomeData().then(res => {
|
planeInfo.value = res.data.data;
|
}).catch(error => {
|
console.error(error);
|
});
|
};
|
|
getData();
|
|
</script>
|
|
<style lang="scss" scoped>
|
.data-num {
|
font-size: 1.5rem;
|
font-weight: bold;
|
margin-bottom: 0.5rem;
|
}
|
|
.text-num {
|
color: var(--el-color-primary);
|
}
|
</style>
|
