// 添加卡片发光效果 .glow-track { position: relative; overflow: hidden; transition: all 0.3s ease; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1; } &:hover::before { opacity: 1; } } // 数据更新高亮效果 .glow-highlight { animation: glow-pulse 3s ease-in-out; box-shadow: 0 0 20px rgba(33, 150, 243, 0.6), 0 0 40px rgba(33, 150, 243, 0.4), 0 0 60px rgba(33, 150, 243, 0.2) !important; } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(33, 150, 243, 0.6), 0 0 40px rgba(33, 150, 243, 0.4), 0 0 60px rgba(33, 150, 243, 0.2); } 50% { box-shadow: 0 0 30px rgba(33, 150, 243, 0.8), 0 0 60px rgba(33, 150, 243, 0.6), 0 0 90px rgba(33, 150, 243, 0.4); } } // 添加卡片悬浮效果 .grid-item .v-card { transition: transform 0.3s ease, box-shadow 0.3s ease; &:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important; } &:active { transform: translateY(-2px); } } // 添加空科目卡片样式 .empty-subject-card { transition: all 0.3s ease; opacity: 0.8; &:hover { opacity: 1; transform: translateY(-4px); } } // 修改防烧屏提示卡片,使用 tonal 样式减少信息密度 .anti-burn-card { animation: subtle-glow 4s infinite alternate; transition: all 0.3s ease; &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } } @keyframes subtle-glow { 0% { box-shadow: 0 0 5px rgba(33, 150, 243, 0.1); } 100% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.3); } } // 出勤管理对话框样式 .attendance-stat { height: 100%; } // 搜索建议按钮 .suggestion-btn { margin: 2px; min-width: 0; padding: 0 6px; &:active { transform: scale(0.95); } } // 适配触摸屏 @media (hover: none) { .student-card .attendance-actions { opacity: 1; } } // 小屏幕适配 @media (max-width: 600px) { .student-card { .attendance-actions .v-btn { margin: 0 1px; min-width: 28px; width: 28px; height: 28px; } } } // 过滤器芯片 .filter-chip { cursor: pointer; margin: 2px; &:active { transform: scale(0.95); } } .grid-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 8px; grid-auto-flow: dense; } .grid-item { width: 100%; transition: all 0.2s ease; } .empty-card { transform: scale(0.9); opacity: 0.8; grid-row-end: span 1 !important; } .empty-card:hover { transform: scale(0.95); opacity: 1; } .empty-subjects-container { display: flex; flex-wrap: wrap; } @media (max-width: 1199px) { .grid-masonry { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 799px) { .grid-masonry { grid-template-columns: 1fr; } .empty-card { transform: scale(0.95); } } /* 确保容器高度不超过视口 */ .main-window { max-height: calc(100vh - 80px); overflow-y: auto; } /* 优化滚动条样式 */ .main-window::-webkit-scrollbar { width: 8px; } .main-window::-webkit-scrollbar-track { background: transparent; } .main-window::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; } .main-window::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); } .no-data-message { display: flex; justify-content: center; align-items: center; min-height: 200px; margin: 20px 0; } .attendance-drawer { border-left: 1px solid rgba(0, 0, 0, 0.12); } .attendance-drawer :deep(.v-navigation-drawer__content) { overflow-y: auto; } /* 优化滚动条样式 */ .attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar) { width: 8px; } .attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-track) { background: transparent; } .attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb) { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; } .attendance-drawer :deep(.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover) { background-color: rgba(0, 0, 0, 0.3); } /* 响应式调整 */ @media (max-width: 960px) { .attendance-drawer { display: none; } } .text-success { color: rgb(var(--v-theme-success)); } .text-error { color: rgb(var(--v-theme-error)); } .text-warning { color: rgb(var(--v-theme-warning)); } .attendance-card { display: flex; flex-direction: column; } .attendance-numbers { padding: 20px 0; } .total-number { border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding-bottom: 20px; } .status-number { flex: 1; } .text-h2, .text-h3 { line-height: 1.2; } .empty-subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 8px; } .empty-subject-card { cursor: pointer; transition: all 0.2s ease; opacity: 0.8; } .empty-subject-card:hover { transform: scale(1.02); opacity: 1; } .empty-subjects { border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: 1rem; } .empty-subject-card:not(:disabled):hover { opacity: 1; transform: scale(1.02); } // 出勤管理对话框样式 .attendance-stat { height: 100%; } // 搜索建议按钮 .suggestion-btn { margin: 2px; min-width: 0; padding: 0 6px; &:active { transform: scale(0.95); } } // 适配触摸屏 @media (hover: none) { .student-card .attendance-actions { opacity: 1; } } // 小屏幕适配 @media (max-width: 600px) { .student-card { .attendance-actions .v-btn { margin: 0 1px; min-width: 28px; width: 28px; height: 28px; } } } // 过滤器芯片 .filter-chip { cursor: pointer; margin: 2px; &:active { transform: scale(0.95); } }