From 0ce38b390e5f0db787c3c3737293bbcc97000a99 Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Tue, 7 Jul 2026 00:36:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5=E6=9D=A5?=
 =?UTF-8?q?=E9=A6=86=E6=8C=89=E9=92=AE=E8=81=94=E5=8A=A8=E5=8A=A8=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue | 50 ++++++++++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 8 deletions(-)

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"
       >
-        <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-floor top"></view>
             <view class="guide-quick-icon-floor bottom"></view>
           </view>
-          <text class="guide-quick-action-text primary">馆内</text>
+          <text class="guide-quick-action-text">馆内</text>
         </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-pin"></view>
           </view>
           <text class="guide-quick-action-text">来馆</text>
         </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-explain-wave top"></view>
             <view class="guide-quick-explain-wave middle"></view>
@@ -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;