lyf/frontend-miniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整室内导览起终点选择面板

Browse Source
This commit is contained in:
lyf
2026-06-27 22:04:00 +08:00
parent 8ff684fba9
commit 4f6059bbdb
2 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/navigation/RoutePlannerPanel.vue
View File

@@ -14,7 +14,7 @@
<view v-if="isCollapsed" class="panel-collapsed" @tap="expandPanel"> <view v-if="isCollapsed" class="panel-collapsed" @tap="expandPanel">
<view class="panel-collapsed-copy"> <view class="panel-collapsed-copy">
<text class="panel-title">室内到室内</text> <text class="panel-title">室内导览</text>
<text class="panel-summary">{{ collapsedSummary }}</text> <text class="panel-summary">{{ collapsedSummary }}</text>
</view> </view>
<view class="panel-expand"> <view class="panel-expand">
@@ -25,7 +25,7 @@
<template v-else> <template v-else>
<view class="panel-header"> <view class="panel-header">
<view class="panel-title-group"> <view class="panel-title-group">
<text class="panel-title">室内到室内</text> <text class="panel-title">室内导览</text>
<text v-if="summary" class="panel-summary">{{ summary }}</text> <text v-if="summary" class="panel-summary">{{ summary }}</text>
</view> </view>
<view class="panel-actions"> <view class="panel-actions">

32
src/components/navigation/RoutePointPicker.vue
View File

@@ -1,7 +1,16 @@
<template> <template>
<view v-if="visible" class="route-point-picker"> <view v-if="visible" class="route-point-picker" @touchmove.stop>
<view class="picker-mask" @tap="handleClose"></view> <view class="picker-mask" @tap="handleClose" @touchmove.stop.prevent></view>
<view class="picker-panel"> <view
class="picker-panel"
@tap.stop
@touchstart.stop
@touchmove.stop
@touchend.stop
@mousedown.stop
@mousemove.stop
@mouseup.stop
>
<view class="picker-header"> <view class="picker-header">
<text class="picker-title">{{ title }}</text> <text class="picker-title">{{ title }}</text>
<view class="picker-close" @tap="handleClose"> <view class="picker-close" @tap="handleClose">
@@ -12,10 +21,13 @@
<view class="picker-search"> <view class="picker-search">
<input <input
class="picker-search-input" class="picker-search-input"
type="text"
:value="keyword" :value="keyword"
:placeholder="placeholder" :placeholder="placeholder"
placeholder-class="picker-search-placeholder" placeholder-class="picker-search-placeholder"
confirm-type="search" confirm-type="search"
inputmode="search"
enterkeyhint="search"
@input="handleKeywordInput" @input="handleKeywordInput"
@confirm="handleSearchConfirm" @confirm="handleSearchConfirm"
/> />
@@ -162,6 +174,7 @@ const handleSelect = (option: RoutePointOption) => {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 1200; z-index: 1200;
touch-action: none;
} }
.picker-mask { .picker-mask {
@@ -172,10 +185,12 @@ const handleSelect = (option: RoutePointOption) => {
.picker-panel { .picker-panel {
position: absolute; position: absolute;
left: 12px; left: 50%;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 12px); bottom: calc(env(safe-area-inset-bottom) + 12px);
max-height: 72vh; width: calc(100vw - 24px);
max-width: 430px;
max-height: min(72vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px));
transform: translateX(-50%);
padding: 16px 14px 14px; padding: 16px 14px 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -184,6 +199,8 @@ const handleSelect = (option: RoutePointOption) => {
border: 1px solid #ffffff; border: 1px solid #ffffff;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
touch-action: pan-y;
overscroll-behavior: contain;
} }
.picker-header { .picker-header {
@@ -246,7 +263,8 @@ const handleSelect = (option: RoutePointOption) => {
.picker-list { .picker-list {
margin-top: 10px; margin-top: 10px;
max-height: 48vh; max-height: min(48vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 170px));
overscroll-behavior: contain;
} }
.picker-option { .picker-option {