fix(watch): 移除监测槽 hover 时 Vuetify 灰遮罩

v-card 关闭 link/ripple 并隐藏 overlay,仅保留外框主题色高亮。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Nexus Agent
2026-06-12 04:54:24 +08:00
parent 49b471eff9
commit ac98dc496c
2 changed files with 12 additions and 0 deletions
@@ -6,6 +6,10 @@
监测槽卡片(空槽/满槽)hover 时改为**外框主题色**,不再整卡铺灰底。
## 补充(2026-06-12 晚)
- `v-card``:link="false"` `:ripple="false"`,并隐藏 `.v-card__overlay`,消除 Vuetify 默认可点击卡片的 hover 灰遮罩。
## 涉及文件
- `frontend/src/components/watch/WatchSlotCard.vue`
@@ -46,6 +46,8 @@ const load1 = computed(() => props.slot.metrics?.load_1)
elevation="0"
border
rounded="lg"
:link="false"
:ripple="false"
class="watch-slot-card pa-3 watch-slot-card--filled"
:class="{
'watch-slot-card--error': monitoringOn && slot.metrics?.probe_status && slot.metrics.probe_status !== 'ok',
@@ -194,6 +196,8 @@ const load1 = computed(() => props.slot.metrics?.load_1)
elevation="0"
border
rounded="lg"
:link="false"
:ripple="false"
class="watch-slot-card watch-slot-card--empty d-flex align-center justify-center pa-4"
variant="outlined"
role="button"
@@ -212,6 +216,10 @@ const load1 = computed(() => props.slot.metrics?.load_1)
.watch-slot-card {
min-height: 280px;
}
/* Vuetify v-card--link 会在 hover 时铺 v-card__overlay 灰层,此处仅保留外框高亮 */
.watch-slot-card :deep(.v-card__overlay) {
opacity: 0 !important;
}
.watch-slot-card--empty {
min-height: 220px;
border-style: dashed !important;