|
|
@@ -447,6 +447,10 @@ onUnmounted(() => {
|
|
|
白块压在 #fafafa 上几乎分不出边界 */
|
|
|
--danger: #e34d59; /* 校验失败。与后台 Element Plus 的 danger 同色 */
|
|
|
--key-shadow: 0 2px 2px rgb(0 0 0 / 18%), 0 1px 1px rgb(0 0 0 / 16%);
|
|
|
+ /* 键行高。定成变量是因为**两处**要用它：键盘自己，和加载态骨架
|
|
|
+ （骨架高度必须等于键区高度，否则回复一到整页会跳一下）。
|
|
|
+ 宽屏那段会覆盖它 —— 见文件末尾的 @media。 */
|
|
|
+ --key-row: 66px;
|
|
|
|
|
|
/* ★ 宽度必须在这里定死，不能留给内容去决定。祖先链 html/body/#app 三层**全是
|
|
|
display:flex** ⇒ 这一层是个 flex 项，而 flex 项的 min-width:auto 落在 min-content 上：
|
|
|
@@ -506,11 +510,11 @@ onUnmounted(() => {
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
margin-top: 6px;
|
|
|
- min-height: 46px;
|
|
|
+ min-height: 62px;
|
|
|
}
|
|
|
|
|
|
.amount__symbol {
|
|
|
- font-size: 26px;
|
|
|
+ font-size: 32px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
@@ -521,7 +525,7 @@ onUnmounted(() => {
|
|
|
min-width: 0;
|
|
|
padding: 0;
|
|
|
font-family: inherit;
|
|
|
- font-size: 34px;
|
|
|
+ font-size: 46px;
|
|
|
font-weight: 700;
|
|
|
color: var(--ink);
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
@@ -529,9 +533,10 @@ onUnmounted(() => {
|
|
|
border: none;
|
|
|
outline: none;
|
|
|
|
|
|
- /* 占位比真值小一号、细一档 —— 参照页就是这么分的（30px/500 对 35px/700） */
|
|
|
+ /* 占位比真值小一号、细一档 —— 参照页就是这么分的（30px/500 对 35px/700，
|
|
|
+ 这里是它那个比例放大后的 36px/500 对 46px/700） */
|
|
|
&::placeholder {
|
|
|
- font-size: 28px;
|
|
|
+ font-size: 36px;
|
|
|
font-weight: 500;
|
|
|
color: var(--placeholder);
|
|
|
}
|
|
|
@@ -577,7 +582,7 @@ onUnmounted(() => {
|
|
|
.pad {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
- grid-auto-rows: 52px;
|
|
|
+ grid-auto-rows: var(--key-row);
|
|
|
gap: 6px;
|
|
|
padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
|
|
|
}
|
|
|
@@ -588,7 +593,7 @@ onUnmounted(() => {
|
|
|
justify-content: center;
|
|
|
padding: 0;
|
|
|
font-family: inherit;
|
|
|
- font-size: 21px;
|
|
|
+ font-size: 24px;
|
|
|
font-weight: 700;
|
|
|
color: #000;
|
|
|
cursor: pointer;
|
|
|
@@ -626,7 +631,7 @@ onUnmounted(() => {
|
|
|
.pad__key--pay {
|
|
|
grid-column: 4;
|
|
|
grid-row: 2 / span 3;
|
|
|
- font-size: 19px;
|
|
|
+ font-size: 21px;
|
|
|
color: #fff;
|
|
|
background: var(--brand);
|
|
|
|
|
|
@@ -643,11 +648,42 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.pad__icon {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
+/* ── 宽屏：空白交给键盘吃掉 ──
|
|
|
+ 这一屏在桌面上没有「拇指够不够得着」这回事，中间那块空白唯一的用处就是「别太挤」；
|
|
|
+ 可不管它的话它会跟着显示器一起长 —— 柱子收到 480 之后，1440×900 实测空出 428px，
|
|
|
+ 整页像一条被拉长的收据。让它长在键盘上：键一大，这块空自然就短了。
|
|
|
+
|
|
|
+ 行高取 clamp 而不是定值。定 112 的话，1440×700 这种半屏窗口上内容会到 675 而窗口
|
|
|
+ 只有 700 —— 再矮一点就平白长出滚动条；12vh 让它跟着窗口缩。下限 66 就是手机那一档
|
|
|
+ （窗口再矮也不小于手机），上限 112 = 键宽（键 112 宽时正好见方，再高就拉长了）。
|
|
|
+ 键上的字要一起放大，否则一格 112 里蹲着个 24px 的数字，看着发虚。
|
|
|
+
|
|
|
+ ★ 这一段只挂在 ≥600px。390×844 下逐格不变：键仍 89×66、scrollHeight 仍 844
|
|
|
+ （实测，改前改后同一批读数）。 */
|
|
|
+@media (min-width: 600px) {
|
|
|
+ .checkout {
|
|
|
+ --key-row: clamp(66px, 12vh, 112px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .pad__key {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pad__key--pay {
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pad__icon {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/* ── 跳转中：盖满整屏 ── */
|
|
|
.redirect {
|
|
|
position: fixed;
|
|
|
@@ -730,16 +766,16 @@ onUnmounted(() => {
|
|
|
|
|
|
.skeleton--amount {
|
|
|
width: 42%;
|
|
|
- height: 34px;
|
|
|
+ height: 46px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
/* 键盘那块占位压在屏幕下沿（margin-top:auto）。高度对齐的是**键区**、不是整个键盘块：
|
|
|
- 4×52 + 3×6 = 226，正好是真键盘第一排键的上沿到最后一排键的下沿（390×844 实测
|
|
|
- 骨架 610→836，真键盘的键 610→836）。键盘块自己的上下各 8px 是贴着页面底色的留白，
|
|
|
- 占位不该连它一起画 —— 那样两边会差 16px。 */
|
|
|
+ 4 行 + 3 个 6px 缝 = 4×行高 + 18，正好是真键盘第一排键的上沿到最后一排键的下沿。
|
|
|
+ 键盘块自己的上下各 8px 是贴着页面底色的留白，占位不该连它一起画 —— 那样会差 16px。
|
|
|
+ 用 `var(--key-row)` 而不是写死：宽屏下行高会变，写死的话骨架与真键区就对不上了。 */
|
|
|
.pad-skeleton {
|
|
|
- height: 226px;
|
|
|
+ height: calc(var(--key-row) * 4 + 18px);
|
|
|
margin: auto 8px calc(8px + env(safe-area-inset-bottom));
|
|
|
background: #e9ebee;
|
|
|
border-radius: 5px;
|
alphaH