feat(患者H5): 补齐移动端/微信适配与签名后路由防回退

This commit is contained in:
yelan
2026-09-28 13:06:51 +08:00
parent 3995c027fc
commit 536632e104
3 changed files with 70 additions and 4 deletions
+6
View File
@@ -35,6 +35,12 @@ router.beforeEach((to) => {
return '/entry'
}
// 已签名提交后不允许再回到阅读 / 签署页:微信里按返回键很常见,
// 退回去重签会把已提交的签名覆盖掉
if (signingState.signatureCaptured && (to.path === '/consent' || to.path === '/signer')) {
return '/result'
}
return true
})
+49 -1
View File
@@ -17,10 +17,24 @@
box-sizing: border-box;
}
/*
* 移动端 / 微信环境的基础适配。
*
* ① `text-size-adjust` 锁 100%:微信「设置 → 字体大小」会放大页面文字,
* 放大的不只是字号 —— 整页布局跟着错位(按钮被挤出屏幕、表格串行)。
* ② `overscroll-behavior`:微信 iOS 的下拉橡皮筋会把整页拖出可视区、露出白底。
*/
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-width: 320px;
min-height: 100vh;
margin: 0;
overflow-x: hidden;
overscroll-behavior-y: contain;
background: radial-gradient(circle at 10% 0%, rgb(170 226 215 / 28%), transparent 30%), #f3f8f8;
}
@@ -34,11 +48,45 @@ button {
cursor: pointer;
}
/*
* 可点元素:去掉系统点击高亮(微信里是一块半透明蓝灰),
* 并用 `touch-action: manipulation` 干掉双击缩放的 300ms 延迟 ——
* 老年患者容易连点,有延迟时手感很差。
* 不用 viewport 的 maximum-scale 来禁缩放:那会把双指放大也一起关掉。
*/
button,
label,
input,
select,
[role='button'] {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
button:active:not(:disabled) {
opacity: 0.86;
}
.mobile-shell {
width: min(100%, 560px);
min-height: 100vh;
margin: 0 auto;
padding: 30px 20px 42px;
/*
* 安全区:viewport-fit=cover 之后内容会铺到刘海 / 圆角 / home indicator 下面,
* 这里逐边避让。用 max() 与设计稿内边距取大值 ——
* 非全面屏上 env() 为 0,不能因此把设计稿的 20px 吃掉。
*/
padding-top: max(30px, env(safe-area-inset-top));
padding-right: max(20px, env(safe-area-inset-right));
padding-bottom: max(42px, env(safe-area-inset-bottom));
padding-left: max(20px, env(safe-area-inset-left));
}
/* 手写板 / 平板这类大屏:560px 的手机宽度居中会显得很局促,放宽一档 */
@media (min-width: 900px) {
.mobile-shell {
width: min(100%, 720px);
}
}
.mobile-brand {