@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user