调整讲解入口为悬浮按钮
Some checks failed
CI / verify (push) Has been cancelled

This commit is contained in:
lyf
2026-07-05 20:51:06 +08:00
parent 4b581da81d
commit eca85b9fed
2 changed files with 51 additions and 2 deletions

View File

@@ -2,7 +2,7 @@
<view class="guide-bottom-nav"> <view class="guide-bottom-nav">
<view class="guide-bottom-nav-inner"> <view class="guide-bottom-nav-inner">
<view <view
v-for="tab in GUIDE_TOP_TABS" v-for="tab in bottomNavTabs"
:key="tab.id" :key="tab.id"
class="guide-bottom-tab" class="guide-bottom-tab"
:class="[`tab-${tab.id}`, { active: activeTab === tab.id }]" :class="[`tab-${tab.id}`, { active: activeTab === tab.id }]"
@@ -31,6 +31,8 @@ import {
type GuideTopTab type GuideTopTab
} from '@/utils/guideTopTabs' } from '@/utils/guideTopTabs'
const bottomNavTabs = GUIDE_TOP_TABS.filter((tab) => tab.id !== 'explain')
withDefaults(defineProps<{ withDefaults(defineProps<{
activeTab?: GuideTopTab activeTab?: GuideTopTab
}>(), { }>(), {
@@ -64,7 +66,7 @@ const handleTabTap = (tab: GuideTopTab) => {
.guide-bottom-nav-inner { .guide-bottom-nav-inner {
height: 56px; height: 56px;
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: minmax(0, 1fr);
gap: 10px; gap: 10px;
padding: 4px; padding: 4px;
box-sizing: border-box; box-sizing: border-box;

View File

@@ -127,6 +127,14 @@
</view> </view>
<text class="guide-quick-action-text">来馆</text> <text class="guide-quick-action-text">来馆</text>
</view> </view>
<view class="guide-quick-action 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>
<view class="guide-quick-explain-wave bottom"></view>
</view>
<text class="guide-quick-action-text">讲解</text>
</view>
</view> </view>
<RoutePlannerPanel <RoutePlannerPanel
@@ -1210,6 +1218,10 @@ const handleMoreOutdoorNav = () => {
openOutdoorNavPanel() openOutdoorNavPanel()
} }
const handleExplainQuickTap = () => {
handleTabChange('explain')
}
const handleOutdoorNavClose = () => { const handleOutdoorNavClose = () => {
closeOutdoorNavPanel() closeOutdoorNavPanel()
} }
@@ -1801,6 +1813,11 @@ const handleExplainBack = () => {
border-color: #151713; border-color: #151713;
} }
.guide-quick-action.explain {
background: rgba(245, 245, 237, 0.96);
border-color: #dfe4d8;
}
.guide-quick-action:active { .guide-quick-action:active {
transform: translateY(1px); transform: translateY(1px);
} }
@@ -1817,6 +1834,10 @@ const handleExplainBack = () => {
color: var(--museum-accent); color: var(--museum-accent);
} }
.guide-quick-action.explain .guide-quick-icon {
color: #151713;
}
.guide-quick-icon-floor { .guide-quick-icon-floor {
position: absolute; position: absolute;
left: 3px; left: 3px;
@@ -1859,6 +1880,32 @@ const handleExplainBack = () => {
border-radius: 50%; border-radius: 50%;
} }
.guide-quick-explain-wave {
position: absolute;
left: 2px;
right: 2px;
height: 4px;
border: 1.8px solid currentColor;
border-left: 0;
border-right: 0;
border-bottom: 0;
border-radius: 999px 999px 0 0;
}
.guide-quick-explain-wave.top {
top: 3px;
}
.guide-quick-explain-wave.middle {
top: 9px;
left: 5px;
}
.guide-quick-explain-wave.bottom {
top: 15px;
right: 6px;
}
.guide-quick-action-text { .guide-quick-action-text {
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;