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

chore: 简单的颜色和动画更改

Browse Source
This commit is contained in:
MKStoler1024 2024-08-23 10:18:21 +08:00 committed by GitHub
parent cceb850510
commit c51a7854f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/renderer/src/pages/mainWindow.vue
View File

@ -2,14 +2,14 @@
<v-container class="main-container" fill-height> <v-container class="main-container" fill-height>
<v-row justify="center" align="center"> <v-row justify="center" align="center">
<v-col cols="12" md="4"> <v-col cols="12" md="4">
<v-card class="pa-4" outlined> <v-card class="pa-4 fade-in slide-in" outlined>
<v-btn block color="primary" dark @click="openDialog"> 打开配置 </v-btn> <v-btn block color="deep-purple accent-4" dark @click="openDialog">打开配置</v-btn>
<p class="mt-2 text-center">打开 JSON 配置文件</p> <p class="mt-2 text-center">打开 JSON 配置文件</p>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" md="4" class="mt-4 mt-md-0"> <v-col cols="12" md="4" class="mt-4 mt-md-0">
<v-card class="pa-4" outlined> <v-card class="pa-4 fade-in slide-in" outlined>
<v-btn block color="success" dark @click="gotoInfoPage"> 直接进入看板 </v-btn> <v-btn block color="teal accent-4" dark @click="gotoInfoPage">直接进入看板</v-btn>
<p class="mt-2 text-center">直接进入看板，将继续使用上次加载的配置</p> <p class="mt-2 text-center">直接进入看板，将继续使用上次加载的配置</p>
</v-card> </v-card>
</v-col> </v-col>
@ -50,6 +50,10 @@ window.electron.ipcRenderer.on('common:openFile', (event, message) => {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
margin: auto; margin: auto;
transition: transform 0.3s ease-in-out;
}
.v-card:hover {
transform: scale(1.05);
} }
.v-btn { .v-btn {
height: 48px; height: 48px;
@ -57,4 +61,26 @@ window.electron.ipcRenderer.on('common:openFile', (event, message) => {
.text-center { .text-center {
text-align: center; text-align: center;
} }
.fade-in {
animation: fadeIn 1s ease-in-out;
}
.slide-in {
animation: slideIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateY(20px);
}
to {
transform: translateY(0);
}
}
</style> </style>