ExamAware/ExamShowboard-Legacy
3
0
Fork 0
mirror of https://hub.gitmirror.com/https://github.com/ExamAware/ExamShowboard-Legacy.git synced 2025-04-29 18:26:33 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor：将ExamStatus组件迁移到Vuetify，优化响应式布局

Browse Source 
将ExamStatus组件从使用Element UI迁移到Vuetify框架，以提升用户体验。此次迁移包括对组件模板的调整和对样式的一系列修改。

BREAKING CHANGE: 由于依赖从Element UI切换到Vuetify，基于Element UI的自定义样式和组件将不再可用。需要确保所有依赖Element UI的特性已完成迁移或已更新为使用Vuetify。
This commit is contained in:
hello8693 2024-08-05 16:56:26 +08:00
parent e36752d9a4
commit 19e2f88767
1 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/renderer/src/components/ExamStatus.vue
View File

@ -1,28 +1,27 @@
<template> <template>
<div class="exam-status"> <v-card class="exam-status">
<el-row class="exam-info-bar"> <v-card-text class="exam-info-bar">
<el-col :span="3"> <div class="d-flex flex-row">
<strong>{{ exam.name }}</strong> <div class="flex-grow-1">
</el-col> <strong>{{ exam?.name || '未知名称' }}</strong>
</div>
&nbsp;
<div>{{ formatDateTime(exam?.start) }} ~ {{ formatDateTime(exam?.end) }}</div>
</div>
<el-col :span="8"> <div class="status-text-large" :class="statusColor">{{ statusText }}</div>
{{ formatDateTime(exam.start) }} ~ {{ formatDateTime(exam.end) }} </v-card-text>
</el-col> </v-card>
<el-col :span="3">
<el-text class="mx-1" size="large" :type="statusColor">{{ statusText }}</el-text>
</el-col>
</el-row>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, computed } from 'vue';
import moment from 'moment'; import moment from 'moment';
const props = defineProps({ const props = defineProps({
exam: { exam: {
type: Object, type: Object,
required: true default: () => null
} }
}); });
@ -33,9 +32,9 @@ const statusColor = computed(() => {
const start = moment(props.exam.start); const start = moment(props.exam.start);
const end = moment(props.exam.end); const end = moment(props.exam.end);
if (now.isBefore(start)) return 'running'; if (now.isBefore(start)) return 'warning--text';
if (now.isBetween(start, end)) return 'success'; if (now.isBetween(start, end)) return 'success--text';
if (now.isAfter(end)) return 'error'; if (now.isAfter(end)) return 'error--text';
}); });
const statusText = computed(() => { const statusText = computed(() => {
@ -51,16 +50,34 @@ const statusText = computed(() => {
<style scoped> <style scoped>
.exam-status { .exam-status {
padding: 10px;
border: 1px solid #e9e9e9;
margin-bottom: 10px; margin-bottom: 10px;
} }
.exam-info-bar { .exam-info-bar {
font-size: 1.5em;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 1.4em; }
.small-screen .exam-info-bar {
flex-direction: column;
align-items: flex-start;
}
.status-text-large {
font-size: 1.05em;
}
.warning--text {
color: orange;
}
.success--text {
color: green;
}
.error--text {
color: red;
} }
</style> </style>