修复点位搜索H5宽度适配
This commit is contained in:
@@ -137,11 +137,26 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="showGuideHomeDock"
|
||||
v-show="homeSearchExpanded"
|
||||
class="guide-home-search-scrim"
|
||||
@mousedown.stop.prevent="handleHomeSearchOutsideTap"
|
||||
@click.stop="handleHomeSearchOutsideTap"
|
||||
@touchstart.stop.prevent="handleHomeSearchOutsideTap"
|
||||
@tap.stop="handleHomeSearchOutsideTap"
|
||||
></view>
|
||||
|
||||
<view
|
||||
v-if="showGuideHomeDock"
|
||||
class="guide-home-dock"
|
||||
:class="{ expanded: homeSearchExpanded }"
|
||||
@mousedown.capture="handleHomeDockActivate"
|
||||
@click.capture="handleHomeDockActivate"
|
||||
@tap.capture="handleHomeDockActivate"
|
||||
>
|
||||
<PoiSearchPanel
|
||||
ref="homeSearchPanelRef"
|
||||
variant="home"
|
||||
@expanded-change="handleHomeSearchExpandedChange"
|
||||
/>
|
||||
@@ -404,6 +419,10 @@ const isPoiCardCollapsed = ref(false)
|
||||
const guideMapShellRef = ref<{
|
||||
clearRoute?: () => void
|
||||
} | null>(null)
|
||||
const homeSearchPanelRef = ref<{
|
||||
expandHomePanel?: () => void
|
||||
collapseHomePanel?: () => void
|
||||
} | null>(null)
|
||||
const homeSearchExpanded = ref(false)
|
||||
|
||||
let launchOverlayFallbackTimer: ReturnType<typeof setTimeout> | null = null
|
||||
@@ -1303,6 +1322,18 @@ const handleHomeSearchExpandedChange = (expanded: boolean) => {
|
||||
homeSearchExpanded.value = expanded
|
||||
}
|
||||
|
||||
const handleHomeSearchOutsideTap = () => {
|
||||
homeSearchPanelRef.value?.collapseHomePanel?.()
|
||||
homeSearchExpanded.value = false
|
||||
}
|
||||
|
||||
const handleHomeDockActivate = () => {
|
||||
if (homeSearchExpanded.value) return
|
||||
|
||||
homeSearchPanelRef.value?.expandHomePanel?.()
|
||||
homeSearchExpanded.value = true
|
||||
}
|
||||
|
||||
const handleOutdoorNavClose = () => {
|
||||
closeOutdoorNavPanel()
|
||||
}
|
||||
@@ -1897,8 +1928,10 @@ const handleExplainBack = () => {
|
||||
|
||||
.guide-home-dock {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
--museum-h5-page-width: min(100vw, 430px);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
width: calc(var(--museum-h5-page-width) - 24px);
|
||||
bottom: calc(env(safe-area-inset-bottom) + 16px);
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
@@ -1906,9 +1939,53 @@ const handleExplainBack = () => {
|
||||
border: 1px solid rgba(255, 255, 255, 0.96);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 28px rgba(36, 49, 42, 0.16);
|
||||
transform: translateX(-50%);
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.guide-home-dock.expanded {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
width: var(--museum-h5-page-width);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
height: var(--home-search-viewport-height, 100dvh);
|
||||
max-height: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 14px);
|
||||
background: #f7f8f2;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
overscroll-behavior: contain;
|
||||
touch-action: pan-y;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.guide-home-dock.expanded {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
max-width: var(--museum-h5-page-width);
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.guide-home-search-scrim {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.guide-quick-actions {
|
||||
position: absolute;
|
||||
top: clamp(96px, 14vh, 118px);
|
||||
|
||||
@@ -10,16 +10,18 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<PoiSearchPanel
|
||||
:initial-keyword="initialKeyword"
|
||||
variant="page"
|
||||
autofocus
|
||||
/>
|
||||
<view class="search-panel-shell">
|
||||
<PoiSearchPanel
|
||||
:initial-keyword="initialKeyword"
|
||||
variant="page"
|
||||
autofocus
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import PoiSearchPanel from '@/components/search/PoiSearchPanel.vue'
|
||||
|
||||
@@ -43,25 +45,71 @@ const handleBackToMap = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
let removeSearchViewportResizeListener: (() => void) | null = null
|
||||
|
||||
const updateSearchViewportHeight = () => {
|
||||
if (typeof document === 'undefined') return
|
||||
|
||||
const viewportHeight = window.visualViewport?.height || window.innerHeight
|
||||
document.documentElement.style.setProperty('--poi-search-page-height', `${viewportHeight}px`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateSearchViewportHeight()
|
||||
|
||||
const target = window.visualViewport || window
|
||||
target.addEventListener('resize', updateSearchViewportHeight)
|
||||
removeSearchViewportResizeListener = () => {
|
||||
target.removeEventListener('resize', updateSearchViewportHeight)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
removeSearchViewportResizeListener?.()
|
||||
removeSearchViewportResizeListener = null
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
document.documentElement.style.removeProperty('--poi-search-page-height')
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.poi-search-page {
|
||||
--museum-h5-page-width: min(100vw, 430px);
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
padding: calc(env(safe-area-inset-top) + 32px) 14px 24px;
|
||||
padding: calc(env(safe-area-inset-top) + 28px) 14px calc(env(safe-area-inset-bottom) + 16px);
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(224, 225, 0, 0.22) 0, rgba(245, 245, 237, 0) 146px),
|
||||
#f5f5ed;
|
||||
color: #262421;
|
||||
font-family: '鸿蒙黑体', 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.poi-search-page {
|
||||
height: var(--poi-search-page-height, 100dvh);
|
||||
min-height: var(--poi-search-page-height, 100dvh);
|
||||
max-width: var(--museum-h5-page-width);
|
||||
margin: 0 auto;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.search-header {
|
||||
min-height: 46px;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
@@ -69,6 +117,13 @@ const handleBackToMap = () => {
|
||||
margin: 0 2px 16px;
|
||||
}
|
||||
|
||||
.search-panel-shell {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-header-copy {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -119,4 +174,27 @@ const handleBackToMap = () => {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.poi-search-page {
|
||||
padding-top: calc(env(safe-area-inset-top) + 22px);
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.search-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 23px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.map-link {
|
||||
min-width: 68px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user