/* ============================================================================
* xt-responsive.css · TA Associates 全局响应式(移动 / 平板 / 桌面 / 大屏)
* ---------------------------------------------------------------------------
* 由 postbuild.js 注入 index.html · 直接作用于类名(scoped 只加 data-v 属性,
* 不改类名,全局选择器仍然生效)。这里只做:
* 1. 通用容器 .xt-container 居中(mobile 100% / tablet 720 / desktop 900 / wide 1120)
* 2. IPO / Bond 主页 PC 端优化(hero 收紧 / quick 放大 / tab 加宽 / 内容居中 / footer 居中)
* 3. 首页 hero + IPO 卡片 PC 端居中
* 4. 登录页 PC 端 max-width + 立体感
* 不做业务级 UI 微调(那些放在各页面 scoped style 里)。
* 命名前缀 .xt-* 全局唯一,不污染。
* ==========================================================================*/
/* ================ 断点变量(全局供 JS 也可读) ================ */
:root {
--bp-tablet: 768px;
--bp-desktop: 1024px;
--bp-wide: 1440px;
--xt-container-mobile: 100%;
--xt-container-tablet: 720px;
--xt-container-desktop: 900px;
--xt-container-wide: 1120px;
/* v11 移动端顶栏统一令牌 · 首页自写顶栏(.xt-bh-mnav)与 hub-topbar(.xt-hmt)共用
* 消除页面间顶栏高度跳变 · paddingTop 由各页 statusBarHeight(JS)动态叠加 */
--xt-topbar-row-h: 44px; /* 顶栏内容行高 · = 触摸热区 */
--xt-topbar-pad-x: 16px; /* 顶栏左右内边距 */
}
/* ================ 通用容器 · 居中 + max-width ================ */
.xt-container {
width: 100%;
max-width: var(--xt-container-mobile);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) and (min-width: 99999px) {
.xt-container { max-width: var(--xt-container-tablet); padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) and (min-width: 99999px) {
.xt-container { max-width: var(--xt-container-desktop); }
}
@media (min-width: 1440px) and (min-width: 99999px) {
.xt-container { max-width: var(--xt-container-wide); }
}
/* ============================================================================
* IPO / Bond 主页 · PC 响应式增强
* (页面根类 .xt-ipo-page / .xt-bond-page)
* ==========================================================================*/
/* PC 端 · 整体容器居中,浅背景仅在 body 层,内容 max-width */
@media (min-width: 768px) and (min-width: 99999px) {
.xt-ipo-page,
.xt-bond-page {
padding-bottom: 200rpx;
}
/* 让 hero 内部 max-width,视觉不撑满宽屏 */
.xt-ipo-hero-inner,
.xt-bond-hero-inner {
max-width: 900px;
margin: 0 auto;
}
.xt-ipo-quick-wrap,
.xt-bond-quick-wrap,
.xt-ipo-market-row,
.xt-ipo-summary,
.xt-bond-summary,
.xt-ipo-content,
.xt-bond-content {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Tab sticky 时,让 tab-list 内容也居中 */
.xt-ipo-page .xt-tab-list,
.xt-bond-page .xt-tab-list {
max-width: 900px;
margin: 0 auto;
}
/* Hero 顶部 padding 更宽气 */
.xt-ipo-hero,
.xt-bond-hero {
padding: 100px 32rpx 80rpx !important;
}
/* 底部固定服务栏:居中且卡片化 */
.xt-ipo-footer-wrap {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
width: 100%;
max-width: 900px;
border-radius: 20px 20px 0 0;
}
}
@media (min-width: 1440px) and (min-width: 99999px) {
.xt-ipo-hero-inner,
.xt-bond-hero-inner,
.xt-ipo-quick-wrap,
.xt-bond-quick-wrap,
.xt-ipo-market-row,
.xt-ipo-summary,
.xt-bond-summary,
.xt-ipo-content,
.xt-bond-content,
.xt-ipo-page .xt-tab-list,
.xt-bond-page .xt-tab-list {
max-width: 1120px;
}
.xt-ipo-footer-wrap { max-width: 1120px; }
}
/* ============================================================================
* 首页 · PC 响应式(不改结构,只居中 + 加大呼吸感)
* (页面根类 .xt-home)
* ==========================================================================*/
@media (min-width: 768px) and (min-width: 99999px) {
.xt-home .xt-hero,
.xt-home .xt-quick,
.xt-home > .xt-card {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* topnav 内容居中 */
.xt-home .xt-topnav-inner {
max-width: 1120px;
margin: 0 auto;
}
}
@media (min-width: 1440px) and (min-width: 99999px) {
.xt-home .xt-hero,
.xt-home .xt-quick,
.xt-home > .xt-card {
max-width: 1120px;
}
}
/* ============================================================================
* 登录 / 注册 · PC 响应式 · V2
* (页面根类 .xt-login / .xt-reg)
* 说明:
* · V1 全局用 `.xt-login > *:not(.xt-login-bg)` 限宽 520px 把 hero 也压死了
* · V2 改为只对内容子块限宽,hero(左侧品牌)完全 full-bleed
* · < 900px:仍是单栏移动布局,页面自带 CSS 生效
* · ≥ 900px:页面自带 @media(min-width:900px) grid 两栏(60/40)接管
* ========================================================================== */
@media (min-width: 768px) and (min-width: 99999px) {
.xt-login,
.xt-reg {
min-height: 100vh;
}
/* 只对表单/头部/底部内容限宽 · 不影响 hero */
.xt-login .xt-login-header,
.xt-login .xt-login-footer,
.xt-reg .xt-reg-header,
.xt-reg .xt-reg-footer {
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
}
/* body(表单主体)PC 端居中约束由 vue 页面自身 @media 900px+ 接管 */
/* ============================================================================
* Mine 高频页 · PC 响应式
* 页面根类真实值:
* recharge=.xt-rc withdrawal=.xt-wd bindBank=.xt-bb fundDetails=.xt-fd
* buyDetails=.xt-position message_center=.xt-mc withdraw_record=.xt-wl
* security_center=.xt-sc change_mobile=.xt-cm modifypwd=.xt-mp
* moneypwd=.xt-mm setting=.xt-set deactivate=.xt-da mine/index=.xt-mine
*
* 注意 · .xt-mc 只用作 message_center 页面根;会员卡组件已改为 .xt-tier-card 独立命名
* 故此处 .xt-mc 限定为 uni-page-body 直接子元素,防止污染子级(即会员卡片过去被误伤)
* ==========================================================================*/
@media (min-width: 768px) and (min-width: 99999px) {
.xt-rc, .xt-wd, .xt-bb, .xt-fd, .xt-position,
uni-page-body > .xt-mc,
.xt-wl, .xt-sc, .xt-cm, .xt-mp,
.xt-mm, .xt-set, .xt-da, .xt-mine {
min-height: 100vh;
background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--xt-divider-warm) 100%);
}
/* 内容 max-width 720px 居中(nav-bar 由自身居中规则处理) */
.xt-rc > *:not(.xt-nav-bar),
.xt-wd > *:not(.xt-nav-bar),
.xt-bb > *:not(.xt-nav-bar),
.xt-fd > *:not(.xt-nav-bar),
.xt-position > *:not(.xt-nav-bar),
uni-page-body > .xt-mc > *:not(.xt-nav-bar),
.xt-wl > *:not(.xt-nav-bar),
.xt-sc > *:not(.xt-nav-bar),
.xt-cm > *:not(.xt-nav-bar),
.xt-mp > *:not(.xt-nav-bar),
.xt-mm > *:not(.xt-nav-bar),
.xt-set > *:not(.xt-nav-bar),
.xt-da > *:not(.xt-nav-bar),
.xt-mine > *:not(.xt-nav-bar) {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1024px) and (min-width: 99999px) {
.xt-rc > *:not(.xt-nav-bar),
.xt-wd > *:not(.xt-nav-bar),
.xt-bb > *:not(.xt-nav-bar),
.xt-fd > *:not(.xt-nav-bar),
.xt-position > *:not(.xt-nav-bar),
uni-page-body > .xt-mc > *:not(.xt-nav-bar),
.xt-wl > *:not(.xt-nav-bar),
.xt-sc > *:not(.xt-nav-bar),
.xt-cm > *:not(.xt-nav-bar),
.xt-mp > *:not(.xt-nav-bar),
.xt-mm > *:not(.xt-nav-bar),
.xt-set > *:not(.xt-nav-bar),
.xt-da > *:not(.xt-nav-bar),
.xt-mine > *:not(.xt-nav-bar) {
max-width: 800px;
}
}
/* ============================================================================
* 会员卡组件 (.xt-tier-card · 也兼容旧类 .xt-mc 嵌套在页面里的场景)
* PC 端加固:让卡片保持内容纵向排列,不被误伤成 100vh
* ==========================================================================*/
@media (min-width: 768px) and (min-width: 99999px) {
.xt-mine .xt-mc,
.xt-tier-card {
min-height: auto;
background: none;
max-width: none;
margin: 0;
}
/* 恢复会员卡卡片的内部子元素(bg/shine/content)不被居中约束 */
.xt-mine .xt-mc > *,
.xt-tier-card > * {
max-width: none;
margin: 0;
}
/* 卡片自身容器上限 · 与其它 mine 内容一致 */
.xt-mine-membercard {
max-width: 720px;
margin: -40rpx auto 24rpx !important;
}
}
@media (min-width: 1024px) and (min-width: 99999px) {
.xt-mine-membercard {
max-width: 800px;
}
}
/* ============================================================================
* xt-nav-bar · PC 端居中 inner
* 让 nav bar 全宽,但内部返回按钮+标题+右侧图标区居中
* ==========================================================================*/
@media (min-width: 768px) and (min-width: 99999px) {
.xt-nav-bar .xt-nav-inner {
max-width: 900px;
margin: 0 auto;
}
}
@media (min-width: 1440px) and (min-width: 99999px) {
.xt-nav-bar .xt-nav-inner {
max-width: 1120px;
}
}
/* ============================================================================
* 移动端安全区 · 底部 tabBar 遮挡防护(iOS 全面屏)
* ==========================================================================*/
.xt-safe-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* ============================================================================
* 无障碍 · 至少 44x44 点击热区(WCAG 2.5.5)
* 通用作用于所有 .xt-btn / .xt-chip / .xt-tab-item / .xt-nav-icon
* ==========================================================================*/
.xt-tab-item {
min-height: 44px;
min-width: 44px;
}
/* xt-chip 不强制 44px min-width(横滑筛选场景需紧凑 pill),仅保留合理触摸高度 */
.xt-chip {
min-height: 36px;
}
@media (min-width: 768px) and (min-width: 99999px) {
.xt-chip { min-height: 40px; }
}
/* ============================================================================
* PC / 大屏 · 隐藏页面级 topnav(xt-app-shell 已提供全局顶栏,避免双层重复)
* · home/index 的 .xt-topnav 仅在 mobile / tablet 时显示
* · 通过 属性识别(main.js bindBreakpointToRoot)
* ==========================================================================*/
html[data-bp="desktop"] .xt-topnav,
html[data-bp="wide"] .xt-topnav {
display: none !important;
}
/* PC 端 home hero 顶部无 topnav,减去 topnav padding-top 视觉更整齐 */
html[data-bp="desktop"] .xt-hero,
html[data-bp="wide"] .xt-hero {
padding-top: 40px !important;
}
/* ============================================================================
* v11 银行系 · 修复移动端原生 tabBar 滚动时"上移 / 抖一下"
* · 现象:滚动页面时,固定在底部的 tabBar 会随重绘/复位轻微滑动或跳动
* · 根因:uni-app H5 原生 tabBar(position:fixed)在滚动重绘时发生子像素漂移,
* 且 uni 复位/显隐带过渡动画,叠加移动浏览器地址栏收起 → 视觉上"滑一下"
* · 修:① 强制独立 GPU 合成层(translateZ,消除滚动子像素抖动)② 关闭过渡(复位即时,不再滑动)
* · 仅移动端(desktop/tablet/wide 下 tabBar 已 display:none · 不受影响)
* ⚠ 2026-09-12 关键修复(底部导航消失事故):transform 只能施加在【真正 fixed 的元素本身】
* `.uni-tabbar-bottom` / `.xt-ab` 上;绝不能加在其【祖先包裹元素】(`uni-tabbar` 自定义标签、
* `uni-page-wrapper > uni-page > uni-tabbar`)上 —— 祖先一旦有 transform,会成为 fixed 子元素的
* 包含块,导致 `.uni-tabbar-bottom` 不再相对视口固定,而是掉到文档流末尾 → 可滚动页面上底栏
* 被顶到折叠线以下,用户"看不到底部导航"。故此处删除 uni-tabbar / uni-page 祖先选择器。
* ==========================================================================*/
html[data-bp="mobile"] .uni-tabbar-bottom,
html[data-bp="mobile"] .xt-ab {
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: none !important;
will-change: auto !important;
}
/* ============================================================================
* 2026-09-12 · 移动端改用自研常驻底栏 xt-mobile-tabbar(挂 xt-app-shell 移动分支)
* · 原生 uni tabBar 只在 5 个 tab 页渲染 + 真机多次"消失" → 全站统一用自研底栏
* · 隐藏原生底栏,避免 tab 页出现双栏
* · shell 移动内容区 .xt-shell-mwrap 底部留白,防内容被固定底栏遮挡
* ==========================================================================*/
html[data-bp="mobile"] uni-tabbar,
html[data-bp="mobile"] .uni-tabbar-bottom {
display: none !important;
}
html[data-bp="mobile"] .xt-shell-mwrap.has-mtab {
padding-bottom: calc(100rpx + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
}
/* 旧的原生 tabBar 占位在移动端归零 · 底栏清空间统一由上面的 .has-mtab 承担 · 防双倍空白 */
html[data-bp="mobile"] .xt-tabbar-space {
height: 0 !important;
}
/* v11 银行系 · 同治顶部固定/粘性导航(顶栏)· 保留其自身过渡(如阴影淡入)· 仅补稳定合成层
* · .xt-bh-mnav = 首页移动顶栏(fixed)· .xt-hmt = hub 子页移动顶栏(sticky)
* · translateZ 提升独立层 · 消除滚动时子像素抖动;不加 transition:none 以保留阴影过渡 */
html[data-bp="mobile"] .xt-bh-mnav,
html[data-bp="mobile"] .xt-hmt {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* ============================================================================
* TA v2 · PC / 大屏 · 隐藏 uni-app 原生 tabBar(shell 顶栏已完全替代)
* · CSS 层强制隐藏(uni.hideTabBar 在 App.vue mounted + xt:bp:change 中调用兜底)
* · 兼容 uni-app 多种 tabbar dom 结构(v2/v3/自定义)
* ==========================================================================*/
html[data-bp="desktop"] uni-tabbar,
html[data-bp="wide"] uni-tabbar,
html[data-bp="desktop"] .uni-tabbar,
html[data-bp="wide"] .uni-tabbar,
html[data-bp="desktop"] .uni-tabbar-bottom,
html[data-bp="wide"] .uni-tabbar-bottom,
html[data-bp="desktop"] uni-page-wrapper > uni-page > uni-tabbar,
html[data-bp="wide"] uni-page-wrapper > uni-page > uni-tabbar {
display: none !important;
height: 0 !important;
overflow: hidden !important;
}
/* tab 页面 body 底部安全预留在 PC 端归 0,防止残留空白 */
html[data-bp="desktop"] .xt-safe-bottom,
html[data-bp="wide"] .xt-safe-bottom {
height: 0 !important;
padding-bottom: 0 !important;
}
/* ============================================================================
* v3 · shell.is-pc 内 unset mine>* max-width
* · mine tab 已被 shell-main(900px 中间列)包裹,不再需要页内二次限宽
* · 否则出现"手机屏浮在桌面白卡里"的双重 boxing 效果
* ==========================================================================*/
.xt-shell.is-pc .xt-mine > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-rc > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-wd > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-bb > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-fd > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-position > *:not(.xt-nav-bar),
.xt-shell.is-pc uni-page-body > .xt-mc > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-wl > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-sc > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-cm > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-mp > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-mm > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-set > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-da > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-mine-membercard {
max-width: none;
margin: 0;
}
/* shell PC 内 mine hero 顶部不需要 statusBarHeight 补偿(shell topbar 已占 60) */
.xt-shell.is-pc .xt-mine-hero {
padding-top: 32px !important;
}
/* v3 · tablet(768-1023)也隐藏 uni tabBar + topnav,因为 xt-app-shell 已把 tablet 视作 PC */
html[data-bp="tablet"] .xt-topnav { display: none !important; }
html[data-bp="tablet"] uni-tabbar,
html[data-bp="tablet"] .uni-tabbar,
html[data-bp="tablet"] .uni-tabbar-bottom,
html[data-bp="tablet"] uni-page-wrapper > uni-page > uni-tabbar {
display: none !important; height: 0 !important; overflow: hidden !important;
}
html[data-bp="tablet"] .xt-safe-bottom { height: 0 !important; padding-bottom: 0 !important; }
/* ============================================================================
* v3 · shell.is-pc 内隐藏页面 xt-nav-bar(shell 顶栏已提供主导航)
* ==========================================================================*/
.xt-shell.is-pc .xt-nav-bar { display: none !important; }
/* ============================================================================
* v3 · 缺失类补:.xt-bl(bankList) .xt-ct(contract) .xt-kefu .xt-inv(invitation)
* .xt-mt(myTeam) .xt-holdings .xt-ipo-detail .xt-ipo-apply .xt-ipo-lottery
* .xt-ipo-sell .xt-bond-detail .xt-bond-apply .xt-bond-holdings .xt-bond-sell
* .xt-bond-lottery .xt-steady-detail .xt-conf .xt-team 全套 PC 卡片规则
* ==========================================================================*/
@media (min-width: 768px) and (min-width: 99999px) {
.xt-bl, .xt-ct, .xt-kefu, .xt-inv, .xt-mt,
.xt-holdings, .xt-ipo-detail, .xt-ipo-apply, .xt-ipo-lottery, .xt-ipo-sell,
.xt-bond-detail, .xt-bond-apply, .xt-bond-holdings, .xt-bond-sell, .xt-bond-lottery,
.xt-steady-detail, .xt-conf, .xt-team,
.xt-invitation, .xt-news, .xt-market, .xt-strategy, .xt-cal,
.xt-msg-center, .xt-msg-detail, .xt-shiming, .xt-risk,
.xt-marketing, .xt-tier, .xt-income, .xt-recharge2, .xt-withdraw2 {
min-height: 100vh;
background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--xt-divider-warm) 100%);
}
.xt-bl > *:not(.xt-nav-bar),
.xt-ct > *:not(.xt-nav-bar),
.xt-kefu > *:not(.xt-nav-bar),
.xt-inv > *:not(.xt-nav-bar),
.xt-mt > *:not(.xt-nav-bar),
.xt-holdings > *:not(.xt-nav-bar),
.xt-ipo-detail > *:not(.xt-nav-bar),
.xt-ipo-apply > *:not(.xt-nav-bar),
.xt-ipo-lottery > *:not(.xt-nav-bar),
.xt-ipo-sell > *:not(.xt-nav-bar),
.xt-bond-detail > *:not(.xt-nav-bar),
.xt-bond-apply > *:not(.xt-nav-bar),
.xt-bond-holdings > *:not(.xt-nav-bar),
.xt-bond-sell > *:not(.xt-nav-bar),
.xt-bond-lottery > *:not(.xt-nav-bar),
.xt-steady-detail > *:not(.xt-nav-bar),
.xt-conf > *:not(.xt-nav-bar),
.xt-team > *:not(.xt-nav-bar),
.xt-invitation > *:not(.xt-nav-bar),
.xt-news > *:not(.xt-nav-bar),
.xt-marketing > *:not(.xt-nav-bar),
.xt-tier > *:not(.xt-nav-bar) {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1024px) and (min-width: 99999px) {
.xt-bl > *:not(.xt-nav-bar),
.xt-ct > *:not(.xt-nav-bar),
.xt-kefu > *:not(.xt-nav-bar),
.xt-inv > *:not(.xt-nav-bar),
.xt-mt > *:not(.xt-nav-bar),
.xt-holdings > *:not(.xt-nav-bar),
.xt-ipo-detail > *:not(.xt-nav-bar),
.xt-ipo-apply > *:not(.xt-nav-bar),
.xt-ipo-lottery > *:not(.xt-nav-bar),
.xt-ipo-sell > *:not(.xt-nav-bar),
.xt-bond-detail > *:not(.xt-nav-bar),
.xt-bond-apply > *:not(.xt-nav-bar),
.xt-bond-holdings > *:not(.xt-nav-bar),
.xt-bond-sell > *:not(.xt-nav-bar),
.xt-bond-lottery > *:not(.xt-nav-bar),
.xt-steady-detail > *:not(.xt-nav-bar),
.xt-conf > *:not(.xt-nav-bar),
.xt-team > *:not(.xt-nav-bar),
.xt-invitation > *:not(.xt-nav-bar),
.xt-news > *:not(.xt-nav-bar),
.xt-marketing > *:not(.xt-nav-bar),
.xt-tier > *:not(.xt-nav-bar) {
max-width: 800px;
}
}
/* shell PC 内所有这些页也 unset,让内容撑满 shell-main */
.xt-shell.is-pc .xt-bl > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-ct > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-kefu > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-inv > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-mt > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-holdings > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-ipo-detail > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-ipo-apply > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-ipo-lottery > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-ipo-sell > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-bond-detail > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-bond-apply > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-bond-holdings > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-bond-sell > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-bond-lottery > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-steady-detail > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-conf > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-team > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-invitation > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-news > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-marketing > *:not(.xt-nav-bar),
.xt-shell.is-pc .xt-tier > *:not(.xt-nav-bar) {
max-width: none;
margin: 0;
}
/* ============================================================================
* v3 · IPO/Bond 底部 fixed footer-bar 在 shell.is-pc 内变 static
* ==========================================================================*/
.xt-shell.is-pc .xt-ipo-footer-wrap,
.xt-shell.is-pc .xt-bond-footer-wrap {
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
transform: none !important;
max-width: none !important;
width: auto !important;
margin-top: 24rpx;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding: 12rpx 0 24rpx !important;
border-radius: 0 !important;
}
/* ============================================================================
* v3 · shell.is-pc 内页面 hero 顶部收敛(去除 statusBarHeight)
* ==========================================================================*/
.xt-shell.is-pc .xt-ipo-hero-slim,
.xt-shell.is-pc .xt-bond-hero-slim,
.xt-shell.is-pc .xt-product-hero,
.xt-shell.is-pc .xt-kefu-hero {
padding-top: 32px !important;
margin-top: 0 !important;
min-height: auto !important;
}
/* ============================================================================
* 响应式治理 v1.0 · 全局工具类(responsive-frontend.mdc §4)
* ---------------------------------------------------------------------------
* 唯一新名 · 零碰撞(已 rg 校验无 .xt-num / .xt-dtile / .xt-gtable 旧定义)
* ⚠ 禁止在此定义裸 .xt-card{} / .xt-btn{}(已被多页 scoped 使用 · 会级联污染)
* 颜色一律 CSS 变量 + fallback · 见 design-system.mdc 权威色表
* ==========================================================================*/
/* ---- .xt-num · 金融数字等宽(资产/涨跌/金额/代码/时间戳)---- */
/* ============================================================
金融数字字号阶 · design-system.mdc §二
参照稿实测(figma-ref/EXTRACT.md §4):金融数字 20px/lh20/w700/DIN/红,
紧邻标签 12px/w400/#8F97AA(全稿最高频 ×222)。
= 1.67 倍字号 + 300 字重差 + 红对灰 三重对比。
禁在组件内自写金融数字字号,一律用以下工具类。
============================================================ */
/* 基类 · 只管字体与等宽,不管字号颜色 */
.xt-num {
/* 走令牌(DIN Alternate 优先)· 原先硬编码 'IBM Plex Mono' 使参照稿要求的 DIN 从未生效 */
font-family: var(--font-numeric, 'DIN Alternate', 'DIN Pro', 'IBM Plex Mono', monospace);
font-variant-numeric: tabular-nums;
}
/* 展示级 · 单焦点大数(详情页收益率 / 安全分)· 每页至多 1 处(线上实测 40/44/46/48) */
.xt-num-display {
font-family: var(--font-numeric, 'DIN Alternate', 'DIN Pro', 'IBM Plex Mono', monospace);
font-variant-numeric: tabular-nums;
font-size: 40px;
line-height: 1.05;
font-weight: 700;
}
/* hero 级 · 详情页 hero 收益率 / 资产总额(2026-09-22:28→30 · 贴合线上 8 处主力档) */
.xt-num-hero {
font-family: var(--font-numeric, 'DIN Alternate', 'DIN Pro', 'IBM Plex Mono', monospace);
font-variant-numeric: tabular-nums;
font-size: 30px;
line-height: 1.1;
font-weight: 700;
}
/* 锚点级 · 列表卡收益率 / 发行价 / 金额 —— 参照稿基准档 · 最常用 */
.xt-num-anchor {
font-family: var(--font-numeric, 'DIN Alternate', 'DIN Pro', 'IBM Plex Mono', monospace);
font-variant-numeric: tabular-nums;
font-size: 20px;
line-height: 1;
font-weight: 700;
}
/* 行内级 · 表格内数值 / 次要金额 */
.xt-num-inline {
font-family: var(--font-numeric, 'DIN Alternate', 'DIN Pro', 'IBM Plex Mono', monospace);
font-variant-numeric: tabular-nums;
font-size: 14px;
line-height: 1.2;
font-weight: 500;
color: var(--color-text-primary);
}
/* 微数级 · 角标 / 占比 / 次要数字 —— 真值包最高频 ×222(2026-09-22 新增) */
.xt-num-micro {
font-family: var(--font-numeric, 'DIN Alternate', 'DIN Pro', 'IBM Plex Mono', monospace);
font-variant-numeric: tabular-nums;
font-size: 12px;
line-height: 1.3;
font-weight: 500;
color: var(--color-text-tertiary);
}
/* 数字的配套标签 · 12px/w400/辅助灰 —— 对比的另一半,必须成对使用 */
.xt-num-label {
font-size: 12px;
line-height: 1.4;
font-weight: 400;
color: var(--color-text-tertiary);
}
/* % 号比数字本体小一号(参照稿 `5.50 %` 排版特征)· 用法 5.50% */
.xt-num-pct {
font-size: 0.7em;
font-weight: 600;
margin-left: 1px;
}
/* ============================================================
按压反馈 · .xt-tap-hl (design-system.mdc §四点五 · 2026-09-22)
------------------------------------------------------------
全站唯一按压态 · 只作用于 uni (hover mixin
仅 View 组件有 · / 上静默无效 · 见 §4.1)。
两处 -webkit-tap-highlight-color:transparent 关掉了浏览器默认高亮却无替代,
此类补上原生 App 的「按下即压暗」手感。
⚠ 禁各页 scoped 重复定义(会遮蔽全局版 → 页面间手感不一致)。
⚠ iOS 前提:App.vue onLaunch 的 touchstart 空监听不可删,否则 :active 不触发。
============================================================ */
.xt-tap-hl {
opacity: .6;
transition: opacity 120ms ease;
}
/* / 上 hover-class 无效(§4.1)→ 用常驻 class .xt-tap + 原生 CSS :active。
:active 在 H5 对任意元素生效,但 iOS 需 App.vue 的 touchstart 空监听才触发。 */
.xt-tap:active {
opacity: .55;
transition: opacity 120ms ease;
}
/* ============================================================
风格色调层 · .xt-tone-* (2026-09-13)
------------------------------------------------------------
页面底色是 navy 单色,业务卡靠这一层表达「梯度 / 状态」。
用法(任何组件 · 任何区域都可复用):
1) 容器加 class :class="'xt-tone-' + tone"
2) 组件 scoped 里消费变量,永远带 fallback:
background: var(--xt-tone-wash, var(--color-bg-surface));
.chip { background: var(--xt-tone-chip-bg); color: var(--xt-tone-fg); }
为什么给变量而不直接写 background:
全局 CSS 与 Vue scoped 样式同特异性时由加载顺序决胜,scoped 往往后插入会盖掉
全局规则。改成「全局只投变量 · 组件自己消费」后与加载顺序无关,且同一个 tone
能同时驱动卡面、chip、进度条、图标底,不必为每种元素再写一套类。
tone 取值(6 档 · 禁自增):
mint 稳健/已完成 · apricot 进行中/今日可申 · peach 预告/温和
coral 待办/积极 · rose 高收益/热 · vip 会员专享
派生逻辑集中在 common/format.js::getFundTone / getMarketTone,
**禁**在页面里自己 if-else 判色(会各页漂移)。
============================================================ */
.xt-tone-mint {
--xt-tone-wash: var(--tone-mint-wash);
--xt-tone-chip-bg: var(--tone-mint-chip-bg);
--xt-tone-fg: var(--tone-mint-fg);
}
.xt-tone-apricot {
--xt-tone-wash: var(--tone-apricot-wash);
--xt-tone-chip-bg: var(--tone-apricot-chip-bg);
--xt-tone-fg: var(--tone-apricot-fg);
}
.xt-tone-peach {
--xt-tone-wash: var(--tone-peach-wash);
--xt-tone-chip-bg: var(--tone-peach-chip-bg);
--xt-tone-fg: var(--tone-peach-fg);
}
.xt-tone-coral {
--xt-tone-wash: var(--tone-coral-wash);
--xt-tone-chip-bg: var(--tone-coral-chip-bg);
--xt-tone-fg: var(--tone-coral-fg);
}
.xt-tone-rose {
--xt-tone-wash: var(--tone-rose-wash);
--xt-tone-chip-bg: var(--tone-rose-chip-bg);
--xt-tone-fg: var(--tone-rose-fg);
}
.xt-tone-vip {
--xt-tone-wash: var(--tone-vip-wash);
--xt-tone-chip-bg: var(--tone-vip-chip-bg);
--xt-tone-fg: var(--tone-vip-fg);
}
/* ---- .xt-dtile · 数据看板格 · 移动 2 列 / PC 4 列 / 超宽更大 gap ---- */
.xt-dtile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16rpx;
}
@media (min-width: 768px) and (min-width: 99999px) { .xt-dtile-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1600px) and (min-width: 99999px) { .xt-dtile-grid { gap: 20px; } }
.xt-dtile {
background: var(--color-bg-surface, #FFFFFF);
border: 1px solid var(--ivory-200, #EDEFF2);
border-radius: 12rpx;
padding: 20rpx;
display: flex; flex-direction: column; gap: 8rpx;
min-width: 0;
}
.xt-dtile-label {
font-size: 22rpx;
color: var(--color-text-tertiary, #666);
letter-spacing: .04em;
}
.xt-dtile-value {
font-size: 40rpx;
font-weight: 600;
line-height: 1.1;
color: var(--color-text-primary, #222);
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
}
.xt-dtile-value.xt-up { color: var(--color-quote-up, #D6493F); }
.xt-dtile-value.xt-down { color: var(--color-quote-down, #5A9587); }
.xt-dtile-value.gold { color: var(--xt-gold, #077BE5); }
/* ---- .xt-gtable · PC 数据表格(列表→表格)· 移动端由页面自身卡片流承担 ---- */
.xt-gtable { width: 100%; }
.xt-gtable table { width: 100%; border-collapse: collapse; }
.xt-gtable th, .xt-gtable td {
padding: 12px 14px;
text-align: left;
font-size: 14px;
border-bottom: 1px solid var(--ivory-200, #EDEFF2);
}
.xt-gtable th {
color: var(--color-text-tertiary, #666);
font-weight: 500;
background: var(--ivory-50, #F7F7F7);
}
.xt-gtable td { color: var(--color-text-primary, #222); }
.xt-gtable td.num, .xt-gtable .xt-num {
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
text-align: right;
}
.xt-gtable tr:hover td { background: var(--color-bg-muted, #F0F4FA); }
/* 页面按 html[data-bp] 决定 PC 用表格 / 移动用卡片:表格加 --pc-only 修饰 · 移动隐藏 */
html[data-bp="mobile"] .xt-gtable--pc-only { display: none; }
/* ============================================================================
* 质感原语层 · qc-* (p34 · design-system v4 银行系 · 零新色 · 只组合现有令牌)
* ---------------------------------------------------------------------------
* 解决「颜色换了但页面扁平」:统一 elevation / section 头 / 图标容器 / 分隔 / 数字
* 唯一 qc-* 前缀 · 零碰撞 · 严禁在此定义裸 .xt-card{} / .xt-btn{}(会级联污染)
* 圆角遵守 design-system 主卡 8px 铁律(禁 12px+ 塑料圆角)
* ==========================================================================*/
/* ---- 卡片三级层次 ---- */
.qc-card {
position: relative;
background: linear-gradient(180deg, var(--color-bg-surface, #FFFFFF) 0%, #FFFFFF 100%);
border-radius: 8px;
box-shadow: var(--xt-shadow-card), var(--xt-hairline);
transition: transform 200ms ease, box-shadow 200ms ease;
}
/* 运营卡 · 略强阴影 */
.qc-card--op {
box-shadow: var(--xt-shadow-float), var(--xt-hairline-strong);
}
/* VIP 卡 · 桃底微渐变 */
.qc-card--vip {
background: linear-gradient(180deg, var(--xt-vip-bg, #FFECDA) 0%, #FFF6EE 100%);
}
/* 可上浮(主品牌卡)· 账户工具卡加 .qc-card--tool 抑制上浮 */
.qc-card--hover:hover {
transform: translateY(-3px);
box-shadow: var(--xt-shadow-float), var(--xt-hairline-strong);
}
.qc-card--tool:hover { transform: none; }
/* 左侧标记条 · 加 .qc-card--bar(默认 navy · .qc-bar-gold 金) */
.qc-card--bar::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; border-radius: 8px 0 0 8px;
background: var(--xt-primary, #1D2C4E);
}
.qc-card--bar.qc-bar-gold::before { background: var(--xt-gold, #FFA900); }
/* ---- section 头部(eyebrow + 标题 + 更多右锚)---- */
.qc-sec-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin: 0 1px 12px;
}
.qc-sec-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qc-sec-eyebrow {
font-family: var(--font-sans, sans-serif);
font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; line-height: 1.2;
color: var(--color-text-tertiary, #8F97AA);
}
.qc-sec-title {
font-family: var(--font-sans, sans-serif);
font-size: 16px; font-weight: 600; letter-spacing: .3px;
color: var(--xt-primary, #1D2C4E);
}
.qc-sec-more {
display: flex; align-items: center; gap: 2px;
font-size: 12px; color: var(--xt-blue, #077BE5); white-space: nowrap;
}
/* ---- 图标容器 · 淡底方角单色 ---- */
.qc-icon-box {
width: 40px; height: 40px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
border-radius: 8px;
background: var(--xt-hover-bg, #F0F4FA);
color: var(--xt-primary, #1D2C4E);
}
.qc-icon-box--vip { background: var(--xt-vip-bg, #FFECDA); color: var(--xt-vip, #754424); }
@media (max-width: 767px), (min-width: 0px) { .qc-icon-box { width: 36px; height: 36px; } }
/* ---- 分隔 hairline ---- */
.qc-hairline { height: 1px; background: var(--xt-divider-warm, #EDEFF2); border: 0; margin: 12px 0; }
/* ---- 金融数字 · DIN 优先等宽(继承 --font-numeric)---- */
.qc-num {
font-family: var(--font-numeric, 'IBM Plex Mono', monospace);
font-variant-numeric: tabular-nums;
font-weight: 700;
}