还原首页来馆组件原始样式
This commit is contained in:
@@ -38,7 +38,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</template>
|
</template>
|
||||||
<view v-else class="outdoor-map-bg" :class="`variant-${props.outdoorVariant}`">
|
<view v-else class="outdoor-map-bg">
|
||||||
<TencentMap
|
<TencentMap
|
||||||
class="outdoor-map"
|
class="outdoor-map"
|
||||||
:active-floor="activeFloor"
|
:active-floor="activeFloor"
|
||||||
@@ -793,33 +793,6 @@ defineExpose({
|
|||||||
background: #f6f8f5;
|
background: #f6f8f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outdoor-map-bg.variant-entrance {
|
|
||||||
animation: outdoor-entrance-focus 0.38s ease-out both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outdoor-map-bg.variant-entrance::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
background:
|
|
||||||
radial-gradient(circle at 52% 60%, rgba(224, 225, 0, 0.16), rgba(224, 225, 0, 0) 32%),
|
|
||||||
linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 100%);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes outdoor-entrance-focus {
|
|
||||||
from {
|
|
||||||
opacity: 0.72;
|
|
||||||
transform: scale(1.018);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.indoor-platform-fallback {
|
.indoor-platform-fallback {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
|||||||
@@ -114,32 +114,20 @@
|
|||||||
v-if="showGuideFloatingActions"
|
v-if="showGuideFloatingActions"
|
||||||
class="guide-quick-actions"
|
class="guide-quick-actions"
|
||||||
>
|
>
|
||||||
<view
|
<view class="guide-quick-action primary" @tap="handleMoreRouteGuide">
|
||||||
class="guide-quick-action"
|
|
||||||
:class="{ active: is3DMode }"
|
|
||||||
@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">馆内</text>
|
<text class="guide-quick-action-text primary">馆内</text>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="guide-quick-action" @tap="handleMoreOutdoorNav">
|
||||||
class="guide-quick-action"
|
|
||||||
:class="{ active: guideOutdoorState === 'entrance' && !is3DMode }"
|
|
||||||
@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
|
<view class="guide-quick-action" @tap="handleExplainQuickTap">
|
||||||
class="guide-quick-action"
|
|
||||||
:class="{ active: isExplainQuickActionActive }"
|
|
||||||
@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>
|
||||||
@@ -649,8 +637,6 @@ const showGuideFloatingActions = computed(() => (
|
|||||||
&& (!showGuideHomeDock.value || !homeSearchExpanded.value)
|
&& (!showGuideHomeDock.value || !homeSearchExpanded.value)
|
||||||
))
|
))
|
||||||
|
|
||||||
const isExplainQuickActionActive = computed(() => currentTab.value === 'explain')
|
|
||||||
|
|
||||||
const toRoutePointOption = (target: GuideRouteTarget): RoutePointOption => ({
|
const toRoutePointOption = (target: GuideRouteTarget): RoutePointOption => ({
|
||||||
poiId: target.poiId,
|
poiId: target.poiId,
|
||||||
name: target.name,
|
name: target.name,
|
||||||
@@ -1333,24 +1319,7 @@ const closeOutdoorNavPanel = () => {
|
|||||||
clearOutdoorNavState()
|
clearOutdoorNavState()
|
||||||
}
|
}
|
||||||
|
|
||||||
const showOutdoorEntrancePreview = () => {
|
|
||||||
showOutdoorNavPanel.value = false
|
|
||||||
showRoutePlanner.value = false
|
|
||||||
selectedGuidePoi.value = null
|
|
||||||
isPoiCardCollapsed.value = false
|
|
||||||
isSimulatingRoute.value = false
|
|
||||||
clearRoutePreviewState()
|
|
||||||
clearOutdoorNavState()
|
|
||||||
is3DMode.value = false
|
|
||||||
guideOutdoorState.value = 'entrance'
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleMoreOutdoorNav = () => {
|
const handleMoreOutdoorNav = () => {
|
||||||
if (!isOutdoorGuidePanelEnabled) {
|
|
||||||
showOutdoorEntrancePreview()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
openOutdoorNavPanel()
|
openOutdoorNavPanel()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2071,7 +2040,7 @@ const handleExplainBack = () => {
|
|||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-quick-action.active {
|
.guide-quick-action.primary {
|
||||||
background: var(--museum-accent);
|
background: var(--museum-accent);
|
||||||
border-color: var(--museum-accent);
|
border-color: var(--museum-accent);
|
||||||
}
|
}
|
||||||
@@ -2088,7 +2057,7 @@ const handleExplainBack = () => {
|
|||||||
color: #151713;
|
color: #151713;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-quick-action.active .guide-quick-icon {
|
.guide-quick-action.primary .guide-quick-icon {
|
||||||
color: #0a0b08;
|
color: #0a0b08;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2170,23 +2139,10 @@ const handleExplainBack = () => {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-quick-action.active .guide-quick-action-text {
|
.guide-quick-action-text.primary {
|
||||||
color: #0a0b08;
|
color: #0a0b08;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-quick-action.active .guide-quick-pin::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: -7px;
|
|
||||||
top: -7px;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border: 1.5px solid currentColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0;
|
|
||||||
animation: entrance-pin-pulse 1.6s ease-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.route-sim-top-pill {
|
.route-sim-top-pill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 126px;
|
top: 126px;
|
||||||
@@ -2276,8 +2232,6 @@ const handleExplainBack = () => {
|
|||||||
background: rgba(255, 255, 255, 0.96);
|
background: rgba(255, 255, 255, 0.96);
|
||||||
border: 1px solid #e5e6de;
|
border: 1px solid #e5e6de;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
|
|
||||||
animation: entrance-tip-in 0.34s ease-out both;
|
|
||||||
z-index: 45;
|
z-index: 45;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2532,7 +2486,6 @@ const handleExplainBack = () => {
|
|||||||
border: 1px solid #ffffff;
|
border: 1px solid #ffffff;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||||
animation: entrance-card-in 0.42s cubic-bezier(0.2, 0.82, 0.2, 1) both;
|
|
||||||
z-index: 45;
|
z-index: 45;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2594,41 +2547,4 @@ const handleExplainBack = () => {
|
|||||||
color: var(--museum-accent);
|
color: var(--museum-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes entrance-tip-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-10px, 8px, 0) scale(0.96);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes entrance-card-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 28px, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes entrance-pin-pulse {
|
|
||||||
0% {
|
|
||||||
opacity: 0.42;
|
|
||||||
transform: scale(0.68);
|
|
||||||
}
|
|
||||||
|
|
||||||
72%,
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(1.36);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user