修复首页来馆按钮联动动效
Some checks failed
CI / verify (push) Has been cancelled

This commit is contained in:
lyf
2026-07-07 00:36:26 +08:00
parent 0d2cc5181d
commit 0ce38b390e

View File

@@ -114,20 +114,32 @@
v-if="showGuideFloatingActions" v-if="showGuideFloatingActions"
class="guide-quick-actions" class="guide-quick-actions"
> >
<view class="guide-quick-action primary" @tap="handleMoreRouteGuide"> <view
class="guide-quick-action"
:class="{ active: guideQuickActiveAction === 'indoor' }"
@tap="handleMoreRouteGuide"
>
<view class="guide-quick-icon indoor"> <view class="guide-quick-icon indoor">
<view class="guide-quick-icon-floor top"></view> <view class="guide-quick-icon-floor top"></view>
<view class="guide-quick-icon-floor bottom"></view> <view class="guide-quick-icon-floor bottom"></view>
</view> </view>
<text class="guide-quick-action-text primary">馆内</text> <text class="guide-quick-action-text">馆内</text>
</view> </view>
<view class="guide-quick-action" @tap="handleMoreOutdoorNav"> <view
class="guide-quick-action"
:class="{ active: guideQuickActiveAction === 'arrival' }"
@tap="handleMoreOutdoorNav"
>
<view class="guide-quick-icon arrival"> <view class="guide-quick-icon arrival">
<view class="guide-quick-pin"></view> <view class="guide-quick-pin"></view>
</view> </view>
<text class="guide-quick-action-text">来馆</text> <text class="guide-quick-action-text">来馆</text>
</view> </view>
<view class="guide-quick-action" @tap="handleExplainQuickTap"> <view
class="guide-quick-action"
:class="{ active: guideQuickActiveAction === 'explain' }"
@tap="handleExplainQuickTap"
>
<view class="guide-quick-icon explain"> <view class="guide-quick-icon explain">
<view class="guide-quick-explain-wave top"></view> <view class="guide-quick-explain-wave top"></view>
<view class="guide-quick-explain-wave middle"></view> <view class="guide-quick-explain-wave middle"></view>
@@ -637,6 +649,11 @@ const showGuideFloatingActions = computed(() => (
&& (!showGuideHomeDock.value || !homeSearchExpanded.value) && (!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 => ({ const toRoutePointOption = (target: GuideRouteTarget): RoutePointOption => ({
poiId: target.poiId, poiId: target.poiId,
name: target.name, name: target.name,
@@ -2038,15 +2055,22 @@ const handleExplainBack = () => {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px); 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); background: var(--museum-accent);
border-color: 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 { .guide-quick-action:active {
transform: translateY(1px); transform: translateY(1px) scale(0.98);
} }
.guide-quick-icon { .guide-quick-icon {
@@ -2057,7 +2081,7 @@ const handleExplainBack = () => {
color: #151713; color: #151713;
} }
.guide-quick-action.primary .guide-quick-icon { .guide-quick-action.active .guide-quick-icon {
color: #0a0b08; color: #0a0b08;
} }
@@ -2139,10 +2163,20 @@ const handleExplainBack = () => {
white-space: nowrap; white-space: nowrap;
} }
.guide-quick-action-text.primary { .guide-quick-action.active .guide-quick-action-text {
color: #0a0b08; color: #0a0b08;
} }
@keyframes guide-quick-active-in {
from {
transform: scale(0.96);
}
to {
transform: scale(1);
}
}
.route-sim-top-pill { .route-sim-top-pill {
position: absolute; position: absolute;
top: 126px; top: 126px;