diff --git a/patient-h5/index.html b/patient-h5/index.html index 1e41192..e7c35af 100644 --- a/patient-h5/index.html +++ b/patient-h5/index.html @@ -1,11 +1,23 @@ - + + + - - patient-h5 + + + + + 医签通 · 知情同意签署
diff --git a/patient-h5/src/router/index.ts b/patient-h5/src/router/index.ts index f05cabe..3da574f 100644 --- a/patient-h5/src/router/index.ts +++ b/patient-h5/src/router/index.ts @@ -35,6 +35,12 @@ router.beforeEach((to) => { return '/entry' } + // 已签名提交后不允许再回到阅读 / 签署页:微信里按返回键很常见, + // 退回去重签会把已提交的签名覆盖掉 + if (signingState.signatureCaptured && (to.path === '/consent' || to.path === '/signer')) { + return '/result' + } + return true }) diff --git a/patient-h5/src/styles/index.css b/patient-h5/src/styles/index.css index abdd6d3..dd8812b 100644 --- a/patient-h5/src/styles/index.css +++ b/patient-h5/src/styles/index.css @@ -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 {