page { --app-viewport-height: 100vh; --app-safe-top: env(safe-area-inset-top, 0px); --app-safe-bottom: env(safe-area-inset-bottom, 0px); --app-touch-min: 44px; background: $paper; color: $ink; font-family: "STKaiti", "KaiTi", serif } // 全局文字流基础:任何元素进入 flex / grid 后都可以收缩,避免长值把同排布局顶坏。 // 是否必须单行由下面的语义类决定,正文、姓名和地址仍按内容自然换行。 view, text, input, textarea, button { min-width: 0; } // 用于页头操作、导航标签、按钮等短操作文案:保持一行,空间不足时给出省略号。 .app-single-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // 用于邮箱、编号等连续长值:允许在必要处断开,不能撑破卡片或表单。 .app-long-value { min-width: 0; overflow-wrap: anywhere; } @supports (height: 100dvh) { page { --app-viewport-height: 100dvh; } } view:not(.page-header-slot):has(> .page-header-slot) { position: relative; z-index: 31; } .page-shell { min-height: 100vh; box-sizing: border-box; background: $paper; } .paper-card { background: $paper-white; border: 1rpx solid $gold-soft; border-radius: 24rpx; box-sizing: border-box; } .section-title { color: $ink; font-size: clamp(19px, 34rpx, 24px); font-weight: 700; letter-spacing: 2rpx; } .muted-copy { color: $ink-muted; font-size: clamp(16px, 26rpx, 20px); line-height: 1.7; } .primary-button { display: flex; align-items: center; justify-content: center; min-height: 92rpx; border: 0; border-radius: 14rpx; background: $brand-red; color: #fff8ec; font-size: clamp(17px, 31rpx, 22px); font-weight: 700; letter-spacing: 3rpx; } .secondary-button { display: flex; align-items: center; justify-content: center; min-height: 88rpx; border: 1rpx solid $gold; border-radius: 14rpx; background: transparent; color: $brand-red; font-size: clamp(16px, 29rpx, 20px); font-weight: 600; } // 认证页的视觉由现有卷轴与文字类负责;这里是原生 button 的唯一重置 owner。 // 保留可见焦点环,让 H5 键盘用户能确认当前位置,同时不改动 App 触摸态。 .auth-plain-button { box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: normal; } .auth-plain-button::after { border: 0; } .auth-plain-button:focus-visible { outline: 2px solid #9f170f; outline-offset: 2px; } .auth-page.auth-page .auth-plain-button { min-width: 48px; min-height: 48px; } // App 端原生 button 在 disabled 时会自行注入浅色底,认证页的文字按钮不能 // 继承这一默认控件外观。禁用态由各页面的文字颜色表达,不再出现白色方块。 .auth-page.auth-page .auth-plain-button[disabled] { background: transparent !important; opacity: 1; }