修复点位搜索H5宽度适配

src/pages/search/index.vue

@@ -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>