fix(order): 修复移动端iOS Safari修改结账弹窗操作栏被截断及滚动卡死问题
- 架构重构:将修改结账、拒绝结账、发起争议弹窗的操作提交按钮从滚动体抽出,移入固定吸底的 popup-footer,保证任何情况下按钮始终完整可见、随手可点 - 视口适配:弹窗采用 85dvh 动态视口高度,配合 flex 列布局与 overflow: hidden,并在吸底栏集成 safe-area-inset-bottom,解决 iOS Safari 底部浮动地址栏遮挡 - 滚动解耦:弹窗内部 popup-body 独立滚动并开启 -webkit-overflow-scrolling 和 overscroll-behavior: contain,消除 WebKit 双层滚动容器死锁与橡皮筋卡死 - 防缩放优化:弹窗内全量输入框与 textarea 统一声明 16px 字体,杜绝 iOS Safari 聚焦时触发的强制页面缩放畸变 - 验证通过:运行全站门禁 ./scripts/check.sh(Go测试、MySQL测试、ESLint、Vue-TSC、Vite生产构建)全部通过
This commit is contained in:
@@ -216,16 +216,22 @@
|
|||||||
|
|
||||||
/* ========== Popups ========== */
|
/* ========== Popups ========== */
|
||||||
.mobile-popup-form {
|
.mobile-popup-form {
|
||||||
max-height: 85%;
|
display: flex !important;
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
flex-direction: column !important;
|
||||||
|
max-height: 85vh;
|
||||||
|
max-height: 85dvh;
|
||||||
|
overflow: hidden !important;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-header {
|
.popup-header {
|
||||||
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-bottom: 1px solid #edf2f7;
|
border-bottom: 1px solid #edf2f7;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-header h3 {
|
.popup-header h3 {
|
||||||
@@ -243,8 +249,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.popup-body {
|
.popup-body {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 10px 16px;
|
||||||
|
padding-bottom: calc(10px + env(safe-area-inset-bottom));
|
||||||
|
background: #fff;
|
||||||
|
border-top: 1px solid #edf2f7;
|
||||||
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-submit {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-hint-info {
|
.form-hint-info {
|
||||||
@@ -260,6 +283,15 @@
|
|||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* iOS Safari:font-size < 16px 时聚焦会自动放大整个页面 */
|
||||||
|
.mobile-popup-form input,
|
||||||
|
.mobile-popup-form textarea,
|
||||||
|
.popup-field :deep(.van-field__control),
|
||||||
|
.custom-inline-input,
|
||||||
|
.custom-select {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.evidence-upload-row {
|
.evidence-upload-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -269,10 +301,6 @@
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-submit {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-select {
|
.custom-select {
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|||||||
@@ -601,6 +601,8 @@ async function copyListingCode() {
|
|||||||
<span>上传新证据截图:</span>
|
<span>上传新证据截图:</span>
|
||||||
<input type="file" accept="image/*" @change="handleCounterEvidenceUpload" />
|
<input type="file" accept="image/*" @change="handleCounterEvidenceUpload" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="popup-footer">
|
||||||
<van-button
|
<van-button
|
||||||
type="warning"
|
type="warning"
|
||||||
block
|
block
|
||||||
@@ -612,7 +614,7 @@ async function copyListingCode() {
|
|||||||
>
|
>
|
||||||
提交给对方确认
|
提交给对方确认
|
||||||
</van-button>
|
</van-button>
|
||||||
</div>
|
</footer>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
|
|
||||||
<!-- POPUP: Renter Reject Counter Proposal Reason -->
|
<!-- POPUP: Renter Reject Counter Proposal Reason -->
|
||||||
@@ -634,6 +636,8 @@ async function copyListingCode() {
|
|||||||
placeholder="请详细叙述拒绝号主扣款的理由,这些信息将被客服作为判定依据"
|
placeholder="请详细叙述拒绝号主扣款的理由,这些信息将被客服作为判定依据"
|
||||||
class="popup-field"
|
class="popup-field"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<footer class="popup-footer">
|
||||||
<van-button
|
<van-button
|
||||||
type="danger"
|
type="danger"
|
||||||
block
|
block
|
||||||
@@ -645,7 +649,7 @@ async function copyListingCode() {
|
|||||||
>
|
>
|
||||||
提交原因并提起争议
|
提交原因并提起争议
|
||||||
</van-button>
|
</van-button>
|
||||||
</div>
|
</footer>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
|
|
||||||
<!-- POPUP: Create Generic Order Dispute -->
|
<!-- POPUP: Create Generic Order Dispute -->
|
||||||
@@ -690,6 +694,8 @@ async function copyListingCode() {
|
|||||||
<span>上传证据截图:</span>
|
<span>上传证据截图:</span>
|
||||||
<input type="file" accept="image/*" @change="handleEvidenceUpload" />
|
<input type="file" accept="image/*" @change="handleEvidenceUpload" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="popup-footer">
|
||||||
<van-button
|
<van-button
|
||||||
type="warning"
|
type="warning"
|
||||||
block
|
block
|
||||||
@@ -701,7 +707,7 @@ async function copyListingCode() {
|
|||||||
>
|
>
|
||||||
提交申诉客服仲裁
|
提交申诉客服仲裁
|
||||||
</van-button>
|
</van-button>
|
||||||
</div>
|
</footer>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user