diff --git a/src/components/InitServiceChooser.vue b/src/components/InitServiceChooser.vue index 5c42308..61cc96b 100644 --- a/src/components/InitServiceChooser.vue +++ b/src/components/InitServiceChooser.vue @@ -360,11 +360,18 @@ const openClassworksKV = () => { .main-service-card { min-height: 100px; cursor: pointer; - transition: all 0.3s ease; + transition: background-color 0.22s var(--apple-ease-out), + border-color 0.22s var(--apple-ease-out), + transform 0.14s var(--apple-ease-out); } .main-service-card:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; + border-color: var(--apple-hairline-strong) !important; +} + +.main-service-card:active { + transform: scale(0.995); + transition-duration: 0.08s; } .main-service-card .v-card-item { @@ -386,19 +393,20 @@ const openClassworksKV = () => { text-align: left; } +/* 三档入口:取自主题强调色,只做极淡的底色渐变与一道细描边 */ .gradient-new { - background: linear-gradient(135deg, rgba(33, 150, 243, .12), rgba(103, 80, 164, 0.08) 60%); - border: 2px solid rgba(33, 150, 243, .2); + background-image: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.12), transparent 70%); + border: 1px solid rgba(var(--v-theme-primary), 0.26); } .gradient-registered { - background: linear-gradient(135deg, rgba(76, 175, 80, .12), rgba(0, 184, 212, 0.08) 60%); - border: 2px solid rgba(76, 175, 80, .2); + background-image: linear-gradient(135deg, rgba(var(--v-theme-success), 0.12), transparent 70%); + border: 1px solid rgba(var(--v-theme-success), 0.26); } .gradient-kv { - background: linear-gradient(135deg, rgba(0, 184, 212, .12), rgba(33, 150, 243, 0.08) 60%); - border: 2px solid rgba(0, 184, 212, .2); + background-image: linear-gradient(135deg, rgba(var(--v-theme-info), 0.12), transparent 70%); + border: 1px solid rgba(var(--v-theme-info), 0.26); } /* 其他选项 */ diff --git a/src/components/home/HomeworkGrid.vue b/src/components/home/HomeworkGrid.vue index b35406f..a42f94c 100644 --- a/src/components/home/HomeworkGrid.vue +++ b/src/components/home/HomeworkGrid.vue @@ -63,7 +63,6 @@ color="grey-darken-3" class="glow-track" height="100%" - style="border-radius: 6px !important" @click="handleCardClick('dialog', item.key)" @mousemove="handleMouseMove" @touchmove="handleTouchMove" @@ -206,7 +205,6 @@ v-for="subject in unusedSubjects" :key="subject.name" border - style="border-radius: 6px !important" class="empty-subject-card" @click="handleCardClick('dialog', subject.name)" > diff --git a/src/pages/index.vue b/src/pages/index.vue index e4b96de..b9a4817 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -237,7 +237,6 @@
-
+
@@ -658,7 +657,7 @@ class="mb-3 glow-track cursor-pointer note-card" variant="outlined" color="grey-darken-3" - style="border-radius: 8px !important; border-color: rgba(255,255,255,0.12);" + style="border-color: var(--apple-hairline);" @click="openDialog(item.name)" @mousemove="handleCardMouseMove" @touchstart="handleCardMouseMove" @@ -3004,20 +3003,19 @@ export default { position: fixed; bottom: 12px; right: 16px; - color: rgba(255, 255, 255, 0.7); + color: rgba(var(--v-theme-on-surface), 0.72); font-size: 17px; z-index: 100; pointer-events: none; user-select: none; - font-family: "Microsoft YaHei", sans-serif; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); - - /* Box style */ - border: 1px solid rgba(255, 255, 255, 0.2); - background-color: rgba(0, 0, 0, 0.4); + + /* 与顶栏同源的悬浮材质,随主题取色 */ + border: 1px solid var(--apple-hairline); + background-color: var(--apple-material); padding: 4px 12px; - border-radius: 4px; - backdrop-filter: blur(4px); + border-radius: var(--apple-radius-sm); + -webkit-backdrop-filter: saturate(180%) blur(16px); + backdrop-filter: saturate(180%) blur(16px); } .bloom-container { @@ -3025,19 +3023,6 @@ export default { padding-bottom: 40px; } -.note-card { - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.note-card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important; -} - -.note-card:active { - transform: translateY(-2px); -} - .item-line-text { white-space: pre-line; } @@ -3052,12 +3037,12 @@ export default { } .custom-scrollbar::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(var(--v-theme-on-surface), 0.16); border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.4); + background-color: rgba(var(--v-theme-on-surface), 0.3); } .resizer-handle { diff --git a/src/pages/settings.vue b/src/pages/settings.vue index 4714365..30e7e99 100644 --- a/src/pages/settings.vue +++ b/src/pages/settings.vue @@ -784,11 +784,13 @@ export default { diff --git a/src/styles/apple.scss b/src/styles/apple.scss index 8340abe..59e5e8d 100644 --- a/src/styles/apple.scss +++ b/src/styles/apple.scss @@ -69,6 +69,29 @@ line-height: 1.25; } +/* 卡片标题:系统标题字重,避免 Material 默认的宽字距 */ +.v-application .v-card-title { + font-weight: 600; + letter-spacing: -0.01em; + line-height: 1.3; +} + +.v-application .v-card-subtitle { + letter-spacing: 0; + opacity: 0.72; +} + +/* 列表项标题保持中等字重,与系统侧边栏一致 */ +.v-application .v-list-item-title { + font-weight: 500; + letter-spacing: 0; +} + +/* 选中文本使用主题强调色,与系统高亮一致 */ +::selection { + background: rgba(var(--v-theme-primary), 0.32); +} + /* --------------------------------------------------------------------------- 2. 顶栏与抽屉:半透明材质,内容可从下方穿过 --------------------------------------------------------------------------- */ @@ -201,6 +224,12 @@ box-shadow: var(--apple-shadow-popover) !important; } +/* 遮罩层轻微虚化底层内容,营造系统的层次纵深 */ +.v-overlay__scrim { + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); +} + /* 提示气泡在明暗两套主题下都保持深色,与系统行为一致 */ .v-tooltip > .v-overlay__content { border-radius: var(--apple-radius-sm) !important; @@ -215,6 +244,11 @@ border-radius: var(--apple-radius) !important; } +/* 色块型提示加一道极细描边,边界更利落(描边款自带边框,不重复处理) */ +.v-alert--variant-tonal { + border: 1px solid var(--apple-hairline); +} + .v-divider { border-color: var(--apple-hairline) !important; opacity: 1 !important; @@ -225,6 +259,11 @@ border-radius: 10px !important; } +/* 聚焦时给输入框一圈柔和的强调色光晕,替代 Material 的整圈描边闪变 */ +.v-field--focused { + box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.16); +} + .v-snackbar__wrapper > .v-sheet { border-radius: var(--apple-radius) !important; border: 1px solid var(--apple-hairline); @@ -298,6 +337,11 @@ a:focus-visible { -webkit-backdrop-filter: none; backdrop-filter: none; } + + .v-overlay__scrim { + -webkit-backdrop-filter: none; + backdrop-filter: none; + } } @media (prefers-contrast: more) { diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 27f782a..64a97f7 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -10,11 +10,12 @@ // ); .student-card { - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + transition: background-color 0.2s var(--apple-ease-out), + border-color 0.2s var(--apple-ease-out); } .bg-primary-subtle { - background-color: rgb(var(--v-theme-primary), 0.05); + background-color: rgba(var(--v-theme-primary), 0.05); } .action-buttons { @@ -77,5 +78,5 @@ } .student-card:active { - background-color: rgb(var(--v-theme-primary), 0.05); + background-color: rgba(var(--v-theme-primary), 0.05); } \ No newline at end of file