mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-07-02 09:19:23 +00:00
11
This commit is contained in:
SunWuyuan
parent
f9e1dd5412
commit
cc950d1fc6
@ -53,33 +53,35 @@
|
||||
<v-container class="main-window flex-grow-1" fluid>
|
||||
<!-- 有内容的科目卡片 -->
|
||||
<div ref="gridContainer" class="grid-masonry">
|
||||
<div
|
||||
v-for="item in sortedItems"
|
||||
:key="item.key"
|
||||
class="grid-item"
|
||||
:style="{
|
||||
'grid-row-end': `span ${item.rowSpan}`,
|
||||
order: item.order,
|
||||
}"
|
||||
>
|
||||
<v-card
|
||||
border
|
||||
height="100%"
|
||||
@click="!isEditingDisabled && openDialog(item.key)"
|
||||
<TransitionGroup name="grid">
|
||||
<div
|
||||
v-for="item in sortedItems"
|
||||
:key="item.key"
|
||||
class="grid-item"
|
||||
:style="{
|
||||
'grid-row-end': `span ${item.rowSpan}`,
|
||||
order: item.order,
|
||||
}"
|
||||
>
|
||||
<v-card-title>{{ item.name }}</v-card-title>
|
||||
<v-card-text :style="state.contentStyle">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="text in splitPoint(item.content)"
|
||||
:key="text"
|
||||
>
|
||||
{{ text }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
<v-card
|
||||
border
|
||||
height="100%"
|
||||
@click="!isEditingDisabled && openDialog(item.key)"
|
||||
>
|
||||
<v-card-title>{{ item.name }}</v-card-title>
|
||||
<v-card-text :style="state.contentStyle">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="text in splitPoint(item.content)"
|
||||
:key="text"
|
||||
>
|
||||
{{ text }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
|
||||
<!-- 单独显示空科目 -->
|
||||
@ -98,22 +100,24 @@
|
||||
</v-btn-group>
|
||||
</template>
|
||||
<div v-else class="empty-subjects-grid">
|
||||
<v-card
|
||||
v-for="subject in unusedSubjects"
|
||||
:key="subject.key"
|
||||
border
|
||||
class="empty-subject-card"
|
||||
:disabled="isEditingDisabled"
|
||||
@click="openDialog(subject.key)"
|
||||
>
|
||||
<v-card-title class="text-subtitle-1">
|
||||
{{ subject.name }}
|
||||
</v-card-title>
|
||||
<v-card-text class="text-center">
|
||||
<v-icon size="small" color="grey"> mdi-plus </v-icon>
|
||||
<div class="text-caption text-grey">点击添加作业</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<TransitionGroup name="v-list">
|
||||
<v-card
|
||||
v-for="subject in unusedSubjects"
|
||||
:key="subject.key"
|
||||
border
|
||||
class="empty-subject-card"
|
||||
:disabled="isEditingDisabled"
|
||||
@click="openDialog(subject.key)"
|
||||
>
|
||||
<v-card-title class="text-subtitle-1">
|
||||
{{ subject.name }}
|
||||
</v-card-title>
|
||||
<v-card-text class="text-center">
|
||||
<v-icon size="small" color="grey"> mdi-plus </v-icon>
|
||||
<div class="text-caption text-grey">点击添加作业</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</v-container>
|
||||
@ -292,6 +296,7 @@ import dataProvider from "@/utils/dataProvider";
|
||||
import { getSetting, watchSettings, setSetting } from "@/utils/settings";
|
||||
import { useDisplay } from "vuetify";
|
||||
import "../styles/index.scss";
|
||||
import "../styles/transitions.scss"; // 添加新的样式导入
|
||||
import { debounce, throttle } from "@/utils/debounce";
|
||||
|
||||
export default {
|
||||
|
||||
125
src/styles/transitions.scss
Normal file
125
src/styles/transitions.scss
Normal file
@ -0,0 +1,125 @@
|
||||
// Material Design 3 动画曲线
|
||||
$emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
|
||||
$emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
|
||||
$standard-easing: cubic-bezier(0.2, 0.0, 0, 1.0);
|
||||
$standard-decelerate: cubic-bezier(0.0, 0.0, 0.0, 1.0);
|
||||
$standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
|
||||
|
||||
// 网格项目的进入和离开动画
|
||||
.grid-item {
|
||||
transition: transform 400ms $emphasized-decelerate,
|
||||
opacity 200ms $standard-easing;
|
||||
will-change: transform, opacity;
|
||||
backface-visibility: hidden;
|
||||
|
||||
&.v-enter-active {
|
||||
transition: transform 400ms $emphasized-decelerate,
|
||||
opacity 250ms $standard-easing;
|
||||
}
|
||||
|
||||
&.v-move {
|
||||
transition: transform 400ms $emphasized-decelerate;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.v-leave-active {
|
||||
position: absolute !important;
|
||||
transition: transform 300ms $emphasized-accelerate,
|
||||
opacity 200ms $standard-accelerate;
|
||||
}
|
||||
|
||||
&.v-enter-from,
|
||||
&.v-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
// 空科目卡片动画
|
||||
.empty-subject-card {
|
||||
transition: all 250ms $standard-easing;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
// 列表项目动画
|
||||
.v-list-enter-active {
|
||||
transition: all 400ms $emphasized-decelerate;
|
||||
}
|
||||
|
||||
.v-list-leave-active {
|
||||
transition: all 300ms $emphasized-accelerate;
|
||||
}
|
||||
|
||||
.v-list-enter-from,
|
||||
.v-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-24px);
|
||||
}
|
||||
|
||||
// 出勤数据变化动画
|
||||
.attendance-area {
|
||||
h2, h3 {
|
||||
transition: all 300ms $standard-easing;
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片展开收起动画
|
||||
.v-card {
|
||||
transition: all 400ms $emphasized-decelerate;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改对话框过渡动画 - 移除点击波纹效果
|
||||
.v-dialog {
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框过渡动画
|
||||
.v-dialog {
|
||||
// 禁用原生点击波纹效果
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 禁用卡片点击效果
|
||||
.v-card {
|
||||
transition: none;
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 保持对话框本身的过渡动画
|
||||
.v-dialog-transition-enter-active {
|
||||
transition: transform 400ms $emphasized-decelerate,
|
||||
opacity 300ms $standard-easing;
|
||||
}
|
||||
|
||||
.v-dialog-transition-leave-active {
|
||||
transition: transform 250ms $emphasized-accelerate,
|
||||
opacity 200ms $standard-accelerate;
|
||||
}
|
||||
|
||||
// 按钮状态变化动画
|
||||
.v-btn {
|
||||
transition: background-color 250ms $standard-easing,
|
||||
transform 200ms $emphasized-decelerate;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.96);
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user