@charset "UTF-8";
/* =============================================================================
TIGER 客户端(扫码 / 激活)样式 —— 移动优先
目标环境: iPhone Safari / Android Chrome / 微信 / Zalo
============================================================================= */
:root {
/* 主色: TGR 字标红(取自官方 logo) */
--tg-red: #D81319;
--tg-red-dark: #9E0C0E;
--tg-red-light: #F0231C;
--tg-red-soft: #FDECEC;
/* 辅助色: 虎头橙 */
--tg-orange: #ED7620;
--tg-orange-dark: #C85F13;
--tg-orange-soft: #FFF2E6;
/* 主按钮 / 强调一律走 primary, 换主色只改这一行 */
--tg-primary: var(--tg-red);
--tg-primary-dark: var(--tg-red-dark);
--tg-primary-soft: var(--tg-red-soft);
--tg-black: #141414;
--tg-text: #2B2B2B;
--tg-muted: #7A7A7A;
--tg-border: #E8E8E8;
--tg-bg: #F5F6F8;
--tg-card: #FFFFFF;
--tg-success: #1B9C57;
--tg-success-soft: #E8F6EE;
--tg-warning: #C8860D;
--tg-warning-soft: #FDF4E3;
--tg-danger: #C9372C;
--tg-danger-soft: #FCEDEC;
--tg-info: #2C6FD1;
--tg-info-soft: #EAF2FD;
--tg-radius: 14px;
--tg-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .04);
/* 等宽字体栈。以前只在 .tg-row-value.is-mono 等处写死, 而 .tg-order-no /
.tg-status-banner-no 引用的 var(--tg-mono) 没人定义, 一律落到后备的
ui-monospace —— 中文 Windows 上那是带衬线的新宋体, 同一页上两种等宽字体
混着用。这里统一定义一次。(2026-09-20 布局修复 L45) */
--tg-mono: "SF Mono", Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
padding: 0;
background: var(--tg-bg);
color: var(--tg-text);
font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--tg-primary); text-decoration: none; }
/* --- 页头 --- */
.tg-header {
background: linear-gradient(135deg, var(--tg-black) 0%, #3A3A3A 100%);
color: #fff;
padding: 18px 16px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tg-brand {
display: flex;
flex-direction: column;
/* 纵向 flex 默认 align-items:stretch, logo 会被拉到副标题那么宽, 再被
object-fit:contain 居中 —— 越南语副标题长, logo 就被推到中间, 和下面的
副标题左边对不齐。(2026-09-20 布局修复 L39) */
align-items: flex-start;
gap: 4px;
min-width: 0;
}
/* 官方 logo 原图: 限高等比缩放, 深色页头上自带白描边不需额外处理 */
.tg-brand-logo {
height: 34px;
width: auto;
max-width: 190px;
object-fit: contain;
}
/* 无 logo 文件时的文字兜底 */
.tg-logo {
font-size: 22px;
font-weight: 800;
letter-spacing: 3px;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.tg-logo::before {
content: "";
width: 5px;
height: 22px;
background: var(--tg-primary);
border-radius: 3px;
}
.tg-logo-sub {
display: block;
font-size: 11px;
letter-spacing: .5px;
color: rgba(255, 255, 255, .62);
font-weight: 400;
margin-top: 2px;
}
/* --- 语言切换 --- */
.tg-lang {
display: flex;
background: rgba(255, 255, 255, .13);
border-radius: 999px;
padding: 3px;
flex-shrink: 0;
}
/* 上下内边距 9px 把可点区域撑到约 32px 高(原来只有 24px), 手机上点得中。
视觉大小(字号 / 底色胶囊)没变, 只是胶囊变高一点。(2026-09-20 布局修复 L50) */
.tg-lang a {
color: rgba(255, 255, 255, .75);
font-size: 12px;
padding: 9px 12px;
border-radius: 999px;
line-height: 1.2;
white-space: nowrap;
}
.tg-lang a.is-active {
background: var(--tg-primary);
color: #fff;
font-weight: 600;
}
/* --- 容器 --- */
.tg-page {
max-width: 640px;
margin: 0 auto;
padding: 16px 16px 40px;
}
.tg-card {
background: var(--tg-card);
border-radius: var(--tg-radius);
box-shadow: var(--tg-shadow);
overflow: hidden;
margin-bottom: 14px;
}
.tg-card-head {
padding: 14px 16px;
border-bottom: 1px solid var(--tg-border);
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
/* 详情页卡片头的状态徽章要靠右, 和列表卡片头(.tg-order-head)一样两端对齐 ——
原来它紧贴在单号右边, 右侧空一大片, 同一个产品里两种对齐方式。
只推状态徽章: 计数徽章(.tg-evidence-count)是标题的一部分, 仍然紧跟标题。
(2026-09-20 布局修复 L79) */
.tg-card-head > .tg-status {
margin-left: auto;
flex: none;
white-space: nowrap;
}
.tg-card-body { padding: 4px 16px 14px; }
/* 卡片正文顶部只有 4px, 那是给自带 11px 上下内边距的 .tg-row 准备的。
直接放表单 / 时间线 / 门店列表 / 说明段落时, 内容离标题分隔线只有 4-5px,
而底部留白有 30px, 上下差了 6 倍。给非 .tg-row 的首个元素补上 12px。
(2026-09-20 布局修复 L40) */
.tg-card-head + .tg-card-body > :first-child:not(.tg-row):not(.tg-product),
.tg-card-head + .tg-card-body > input[type="hidden"]:first-child + *:not(.tg-row):not(.tg-product) {
margin-top: 12px;
}
/* 最后一个字段的 16px 下外边距叠在 14px 内边距上, 卡片底部空 30px */
.tg-card-body > .tg-field:last-child,
.tg-card-body > form > .tg-field:last-child {
margin-bottom: 2px;
}
/* 没有标题栏的卡片(门店登录 / 改密码): 顶部 4px 是给标题栏下方准备的,
直接放表单时标签会贴着卡片上沿 */
.tg-card > .tg-card-body:first-child { padding-top: 16px; }
/* 兜底: