diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 9438bc8..f9ce23c 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -114,20 +114,32 @@ v-if="showGuideFloatingActions" class="guide-quick-actions" > - + - 馆内 + 馆内 - + 来馆 - + @@ -637,6 +649,11 @@ const showGuideFloatingActions = computed(() => ( && (!showGuideHomeDock.value || !homeSearchExpanded.value) )) +const guideQuickActiveAction = computed<'indoor' | 'arrival' | 'explain'>(() => { + if (currentTab.value === 'explain') return 'explain' + return is3DMode.value ? 'indoor' : 'arrival' +}) + const toRoutePointOption = (target: GuideRouteTarget): RoutePointOption => ({ poiId: target.poiId, name: target.name, @@ -2038,15 +2055,22 @@ const handleExplainBack = () => { border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); + transition: + background 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease, + transform 0.16s ease; } -.guide-quick-action.primary { +.guide-quick-action.active { background: var(--museum-accent); border-color: var(--museum-accent); + box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(224, 225, 0, 0.35); + animation: guide-quick-active-in 0.22s ease-out both; } .guide-quick-action:active { - transform: translateY(1px); + transform: translateY(1px) scale(0.98); } .guide-quick-icon { @@ -2057,7 +2081,7 @@ const handleExplainBack = () => { color: #151713; } -.guide-quick-action.primary .guide-quick-icon { +.guide-quick-action.active .guide-quick-icon { color: #0a0b08; } @@ -2139,10 +2163,20 @@ const handleExplainBack = () => { white-space: nowrap; } -.guide-quick-action-text.primary { +.guide-quick-action.active .guide-quick-action-text { color: #0a0b08; } +@keyframes guide-quick-active-in { + from { + transform: scale(0.96); + } + + to { + transform: scale(1); + } +} + .route-sim-top-pill { position: absolute; top: 126px;