/* 手机端行情列表页(P2a):表格引擎 + 六个池/榜页 + 抽屉/详情 Sheet */ #m-view.m-view-feature { padding: 0; } .m-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: calc(100vh - var(--mobile-header-height) - var(--mobile-tabbar-height) - var(--mobile-safe-bottom)); height: calc(100dvh - var(--mobile-header-height) - var(--mobile-tabbar-height) - var(--mobile-safe-bottom)); } /* 顶部日期按钮 */ .m-date-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), background-color var(--motion-press-release) var(--ease-press), color var(--motion-pop) var(--ease-press); } .m-date-btn:active { background: var(--surface-hover); transform: scale(0.96); transition-duration: var(--motion-press); } .m-date-btn svg { flex: 0 0 auto; } .m-date-btn-text { font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; } /* 顶栏七项单行数据栏 */ .m-top { flex: 0 0 auto; } .m-strip { display: flex; align-items: stretch; margin: 10px 12px; height: 54px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); overflow: hidden; } .m-strip-cell { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; } .m-strip-cell + .m-strip-cell::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 1px; background: var(--border); } .m-strip-label { font-size: 10px; font-weight: 400; line-height: 1; color: var(--text-secondary); white-space: nowrap; } .m-strip-value { display: inline-flex; align-items: baseline; gap: 2px; font-size: 12px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; } .m-strip-value b { font-weight: 600; } .m-strip-phase { font-size: 9px; font-weight: 400; color: var(--text-tertiary); } .m-strip-unit { font-size: 9.5px; font-weight: 400; color: var(--text-tertiary); } .m-strip-up .m-strip-value { color: var(--market-up); } .m-strip-down .m-strip-value { color: var(--market-down); } .m-strip-warn .m-strip-value { color: var(--warning); } .m-strip-sm .m-strip-value { font-size: 11px; } .m-strip-sm .m-strip-unit { font-size: 8.5px; } .m-strip--skeleton .m-strip-cell { justify-content: center; } .m-strip-skeleton-bar { width: 60%; height: 20px; border-radius: 4px; background: var(--surface-muted); animation: m-skeleton-breathe 1200ms ease-in-out infinite; } @media (max-width: 359px) { .m-strip { margin-left: 10px; margin-right: 10px; } .m-strip-label { font-size: 9.5px; } .m-strip-value { font-size: 10px; } .m-strip-phase { font-size: 8px; } .m-strip-unit { font-size: 9px; } .m-strip-sm .m-strip-value { font-size: 9px; } .m-strip-sm .m-strip-unit { font-size: 8px; } } .m-conclusion { padding: 4px 12px 0; font-size: var(--font-size-label); color: var(--text-secondary); line-height: 1.5; flex: 0 0 auto; } .m-conclusion b { color: var(--text-primary); } /* 人气榜来源切换 */ .m-source-tabs { display: flex; gap: 8px; padding: 8px 12px; flex: 0 0 auto; } .m-source-tab { flex: 1; height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-secondary); font-size: var(--font-size-label); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), background-color var(--motion-press-release) var(--ease-press), color var(--motion-pop) var(--ease-press); } .m-source-tab:active { background: var(--surface-hover); transform: scale(0.96); transition-duration: var(--motion-press); } .m-source-tab.active { background: var(--action-soft); border-color: var(--action); color: var(--action); font-weight: 600; } /* 表格横向滚动容器 */ .m-table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; /* 有意用 pan-x pan-y:横滑看其余列,纵向滚动看长列表,二者共存不互斥 */ touch-action: pan-x pan-y; overscroll-behavior: contain; background: var(--surface); } .m-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; } .m-table th, .m-table td { box-sizing: border-box; padding: 0 8px; white-space: nowrap; font-size: var(--font-size-table); border-bottom: 1px solid var(--border); } .m-table thead th { position: sticky; top: 0; z-index: 2; height: var(--mobile-table-header-height); background: var(--surface); color: var(--text-secondary); font-size: var(--font-size-caption); font-weight: 500; border-bottom: 1px solid var(--border-strong); } .m-table tbody td { height: var(--mobile-table-row-height); background: var(--surface); transition: background-color var(--motion-press-release) var(--ease-press); } .m-table tbody tr:active td { background: var(--surface-selected); transition-duration: var(--motion-press); } .m-table .m-frozen { position: sticky; z-index: 1; background: var(--surface); } .m-table thead .m-frozen { z-index: 3; } .m-table .m-frozen { box-shadow: 1px 0 0 var(--border-strong), 6px 0 10px -8px rgba(0, 0, 0, 0.28); } .m-table tbody .m-frozen { box-shadow: 1px 0 0 var(--border-strong), 6px 0 10px -8px rgba(0, 0, 0, 0.18); } .m-align-right { text-align: right; } .m-align-left { text-align: left; } .m-align-center { text-align: center; } /* 列头排序 */ .m-th-inner { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; } .m-th.m-sortable { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .m-th.m-sortable:active { background: var(--surface-hover); } .m-sort { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 0; color: var(--text-tertiary); opacity: 0.38; } .m-sort svg { display: block; } .m-th.is-sorted .m-th-inner { color: var(--action); font-weight: 600; } .m-th.is-sorted .m-sort { color: var(--action); opacity: 1; } /* 单元格内容 */ .m-stock { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; } .m-stock-name { font-size: var(--font-size-table); font-weight: 500; color: var(--text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .m-stock-code { font-size: var(--font-size-aux); color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .m-rank { display: inline-flex; align-items: center; justify-content: center; gap: 3px; } .m-rank b { font-size: var(--font-size-table); font-weight: 600; font-variant-numeric: tabular-nums; } .m-rank.is-top b { font-size: var(--font-size-card-title); font-weight: 600; color: var(--warning); } .m-rank-hot { font-size: 10px; line-height: 1.4; color: var(--warning); background: var(--warning-soft); border-radius: 4px; padding: 0 3px; } .m-pill { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: var(--font-size-aux); background: var(--action-soft); color: var(--action); font-weight: 500; } .m-pill.is-high { background: var(--market-up-soft); color: var(--market-up); } .m-pill--plain { background: var(--surface-muted); color: var(--text-secondary); } .m-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: var(--font-size-aux); font-weight: 500; } .m-tag--advance { background: var(--market-up-soft); color: var(--market-up); } .m-tag--fail { background: var(--surface-muted); color: var(--text-secondary); } .m-tag--broken { background: var(--warning-soft); color: var(--warning); } .m-tag--down { background: var(--market-down-soft); color: var(--market-down); } .m-tag--dual { background: var(--action-soft); color: var(--action); } .m-num { font-variant-numeric: tabular-nums; color: var(--text-primary); } .m-num.up { color: var(--market-up); } .m-num.down { color: var(--market-down); } .m-num.is-active { color: var(--market-up); font-weight: 600; } .m-num.is-warning { color: var(--warning); font-weight: 600; } .m-num.is-neutral { color: var(--text-secondary); font-weight: 600; } .m-num.is-new { color: var(--action); } .m-cell-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); } /* 骨架屏 */ .m-skeleton { padding: 0; } .m-skeleton-row { display: flex; align-items: center; height: var(--mobile-table-row-height); padding: 0 12px; border-bottom: 1px solid var(--border-subtle); } .m-skeleton-bar { display: block; width: 100%; height: 14px; border-radius: 4px; background: var(--surface-muted); animation: m-skeleton-breathe 1200ms ease-in-out infinite; } @keyframes m-skeleton-breathe { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } } /* 空态 / 错误态 */ .m-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 100%; padding: 40px 20px; text-align: center; } .m-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--surface-muted); color: var(--text-tertiary); } .m-state p { margin: 0; font-size: var(--font-size-card-title); font-weight: 600; color: var(--text-primary); } .m-state small { font-size: var(--font-size-label); color: var(--text-secondary); } .m-state--error p { color: var(--warning); } .m-btn-retry { width: auto; min-width: 120px; padding: 0 24px; margin-top: 8px; } /* 底部抽屉 / Sheet */ .m-sheet-root { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 120; /* 空根节点常驻 #m-app,关闭后不再拦截指针(否则会挡住顶栏/表格/底栏) */ pointer-events: none; } .m-sheet-root.is-open { pointer-events: auto; } .m-sheet-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--backdrop); opacity: 0; transition: opacity 160ms linear; } .m-sheet-root.is-open .m-sheet-backdrop { opacity: 1; transition: opacity 200ms linear; } .m-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0; transform: translateY(100%); transition: transform var(--motion-exit) var(--ease-exit); padding-bottom: var(--mobile-safe-bottom); } .m-sheet--detail { height: 85vh; } .m-sheet-root.is-open .m-sheet { transform: translateY(0); transition: transform var(--motion-enter) var(--ease-enter); } .m-sheet-handle { display: flex; align-items: center; justify-content: center; height: 28px; flex: 0 0 auto; cursor: grab; } .m-sheet-handle::before { content: ""; width: 32px; height: 4px; border-radius: 2px; background: var(--border-strong); } .m-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; } .m-sheet-head h2 { margin: 0; font-size: var(--font-size-page-title); font-weight: 600; } .m-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: var(--mobile-touch-size); height: var(--mobile-touch-size); flex: 0 0 var(--mobile-touch-size); border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), background-color var(--motion-press-release) var(--ease-press); } .m-sheet-close:active { background: var(--surface-hover); transform: scale(0.94); transition-duration: var(--motion-press); } .m-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; -webkit-overflow-scrolling: touch; } /* 日期抽屉 */ .m-quick-row { display: flex; gap: 8px; margin-bottom: 16px; } .m-quick { flex: 1; height: 44px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-size: var(--font-size-label); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), background-color var(--motion-press-release) var(--ease-press); } .m-quick:active { background: var(--surface-hover); transform: scale(0.96); transition-duration: var(--motion-press); } .m-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .m-cal-title { font-size: var(--font-size-card-title); font-weight: 600; } .m-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: var(--mobile-touch-size); height: var(--mobile-touch-size); border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .m-cal-nav:disabled { opacity: 0.35; cursor: default; } .m-cal-nav:active:not(:disabled) { background: var(--surface-hover); } .m-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .m-cal-week span { height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-caption); color: var(--text-tertiary); } .m-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .m-cal-cell { height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-size: var(--font-size-body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), background-color var(--motion-press-release) var(--ease-press); } .m-cal-cell:active:not(:disabled) { background: var(--surface-hover); transform: scale(0.94); transition-duration: var(--motion-press); } .m-cal-cell:disabled { color: var(--text-tertiary); opacity: 0.4; cursor: default; } .m-cal-cell.is-selected { background: var(--action); color: var(--text-inverse); font-weight: 600; } .m-cal-cell.is-empty { cursor: default; } /* 详情 Sheet */ .m-detail-head-left { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; } .m-detail-head-name { font-size: var(--font-size-page-title); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .m-detail-head-code { font-size: var(--font-size-label); color: var(--text-tertiary); font-weight: 400; font-variant-numeric: tabular-nums; } .m-detail-head-right { display: inline-flex; align-items: center; flex: 0 0 auto; } .m-detail-star { display: inline-flex; align-items: center; justify-content: center; width: var(--mobile-touch-size); height: var(--mobile-touch-size); flex: 0 0 var(--mobile-touch-size); border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), color var(--motion-pop) var(--ease-press), background-color var(--motion-press-release) var(--ease-press); } .m-detail-star:active { background: var(--surface-hover); transform: scale(0.94); transition-duration: var(--motion-press); } .m-detail-star.is-added { color: var(--warning); } .m-detail-star:disabled { opacity: 0.5; cursor: default; } .m-detail-top { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); } .m-detail-quote { display: flex; align-items: baseline; gap: 10px; } .m-detail-price { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; } .m-detail-price.up { color: var(--market-up); } .m-detail-price.down { color: var(--market-down); } .m-detail-change { font-size: var(--font-size-card-title); font-weight: 600; font-variant-numeric: tabular-nums; } .m-detail-change.up { color: var(--market-up); } .m-detail-change.down { color: var(--market-down); } .m-detail-meta { font-size: var(--font-size-label); color: var(--text-secondary); } .m-detail-tabs { display: flex; align-items: center; gap: 8px; padding: 12px 0 8px; } .m-detail-tab { height: 32px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: var(--font-size-label); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), background-color var(--motion-press-release) var(--ease-press), color var(--motion-pop) var(--ease-press); } .m-detail-tab:active { background: var(--surface-hover); transform: scale(0.96); transition-duration: var(--motion-press); } .m-detail-tab.active { background: var(--action-soft); border-color: var(--action); color: var(--action); font-weight: 600; } .m-detail-chart-caption { margin-left: auto; font-size: var(--font-size-aux); color: var(--text-tertiary); text-align: right; } .m-detail-chart { position: relative; height: var(--mobile-chart-height); border-radius: 8px; background: var(--surface-subtle); overflow: hidden; } .m-detail-chart svg { width: 100%; height: 100%; display: block; } .m-detail-note { margin-top: 12px; font-size: var(--font-size-aux); color: var(--text-tertiary); } /* 行情图 SVG */ .m-chart-empty { height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-label); color: var(--text-tertiary); } .m-chart-line { fill: none; } .m-chart-price { stroke: var(--action); stroke-width: 1.5; } .m-chart-avg { stroke: var(--warning); stroke-width: 1; } .m-chart-prev-close { stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.6; } .m-chart-axis { font-size: 10px; fill: var(--text-tertiary); font-variant-numeric: tabular-nums; } .m-chart-axis.is-up { fill: var(--market-up); } .m-chart-axis.is-down { fill: var(--market-down); } .m-chart-candle { stroke-width: 1; } .m-chart-candle.is-up { stroke: var(--chart-up); fill: var(--chart-up); } .m-chart-candle.is-down { stroke: var(--chart-down); fill: var(--chart-down); } .m-chart-ma { fill: none; stroke-width: 1.2; } .m-chart-ma.is-ma5 { stroke: var(--warning); } .m-chart-ma.is-ma10 { stroke: var(--action); } .m-chart-legend { position: absolute; top: 6px; left: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text-secondary); pointer-events: none; } .m-chart-legend-ma5::before, .m-chart-legend-ma10::before { content: ""; display: inline-block; width: 10px; height: 2px; margin-right: 3px; border-radius: 1px; vertical-align: middle; } .m-chart-legend-ma5::before { background: var(--warning); } .m-chart-legend-ma10::before { background: var(--action); } /* 自选提示条 */ .m-toast { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%) translateY(8px); padding: 10px 16px; border-radius: 8px; background: var(--text-primary); color: var(--canvas); font-size: var(--font-size-label); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 130; transition: opacity var(--motion-fade) var(--ease-press), transform var(--motion-fade) var(--ease-press); } .m-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* 减少动画降级 */ @media (prefers-reduced-motion: reduce) { .m-sheet { transition: opacity var(--motion-fade) var(--ease-press); } .m-sheet-root .m-sheet { transform: none; opacity: 0; } .m-sheet-root.is-open .m-sheet { transform: none; opacity: 1; } .m-skeleton-bar { animation-duration: 2000ms; } .m-date-btn:active, .m-source-tab:active, .m-quick:active, .m-cal-cell:active, .m-sheet-close:active, .m-detail-tab:active, .m-detail-star:active { transform: none; } } /* ===== 复杂行情页(P2b):情绪周期 / 天梯 / 轮动 / 竞价 / 题材库 / 龙虎榜 ===== */ .m-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--canvas); } .m-table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; } .m-section-title { display: flex; align-items: center; justify-content: space-between; margin: 14px 12px 8px; font-size: var(--font-size-label); font-weight: 600; color: var(--text-secondary); } .m-card, .m-chart-card, .m-sent-card, .m-apex { margin: 0 12px; padding: 14px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); } .m-chart-card { padding: 8px 6px; height: var(--mobile-chart-height-compact); } .m-chart-card svg { width: 100%; height: 100%; display: block; } .m-inline-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 60px; font-size: var(--font-size-label); color: var(--text-tertiary); } /* 情绪周期 */ .m-sent-score-row { display: flex; align-items: center; gap: 10px; } .m-sent-score { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .m-sent-score-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .m-phase { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .m-phase--ice { background: var(--action-soft); color: var(--action); } .m-phase--repair { background: var(--market-down-soft); color: var(--market-down); } .m-phase--fermentation { background: var(--warning-soft); color: var(--warning); } .m-phase--climax { background: var(--market-up-soft); color: var(--market-up); } .m-phase--divergence { background: var(--surface-muted); color: var(--text-secondary); } .m-phase--retreat { background: var(--surface-muted); color: var(--text-tertiary); } .m-sent-direction { font-size: 12px; font-weight: 600; } .m-sent-dir--up { color: var(--market-up); } .m-sent-dir--down { color: var(--market-down); } .m-sent-dir--new { color: var(--action); } .m-sent-dir--flat { color: var(--text-secondary); } .m-sent-label { margin-top: 6px; font-size: var(--font-size-card-title); color: var(--text-secondary); } .m-sent-metrics { display: flex; gap: 6px; margin-top: 12px; flex-wrap: nowrap; } .m-sent-metric { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 6px; background: var(--surface-muted); } .m-sent-metric span { font-size: var(--font-size-aux); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-sent-metric b { font-size: var(--font-size-card-title); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-sent-up b { color: var(--market-up); } .m-sent-warn b { color: var(--warning); } .m-sent-down b { color: var(--market-down); } @media (max-width: 359px) { .m-sent-metrics { gap: 4px; } .m-sent-metric { padding: 8px 4px; } .m-sent-metric span { font-size: 10.5px; } .m-sent-metric b { font-size: 14px; } } .m-sent-advice { margin-top: 10px; font-size: var(--font-size-label); color: var(--text-secondary); line-height: 1.5; } .m-sentiment-line { fill: none; stroke: var(--action); stroke-width: 2; } .m-sentiment-area { fill: var(--action-soft); stroke: none; } .m-components { margin: 0 12px; padding: 4px 14px 14px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); } .m-component { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); } .m-component:last-child { border-bottom: 0; } .m-component-head { display: flex; align-items: center; justify-content: space-between; } .m-component-head span { font-size: var(--font-size-label); font-weight: 500; } .m-component-head b { font-size: var(--font-size-card-title); font-variant-numeric: tabular-nums; } .m-component-track { height: 6px; margin: 8px 0 6px; border-radius: 3px; background: var(--surface-muted); overflow: hidden; } .m-component-track i { display: block; height: 100%; border-radius: 3px; background: var(--action); } .m-component small { font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-range-tabs { display: inline-flex; gap: 4px; } .m-range-tab { height: 26px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: var(--font-size-aux); cursor: pointer; -webkit-tap-highlight-color: transparent; } .m-range-tab.active { background: var(--action-soft); border-color: var(--action); color: var(--action); font-weight: 600; } /* 市场天梯 */ .m-apex-head { display: flex; align-items: baseline; gap: 8px; } .m-apex-head span { font-size: var(--font-size-label); color: var(--text-secondary); } .m-apex-head strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .m-apex-head em { font-size: var(--font-size-aux); color: var(--text-tertiary); font-style: normal; } .m-apex p { margin: 8px 0 4px; font-size: var(--font-size-label); line-height: 1.5; } .m-apex p b { color: var(--text-primary); } .m-apex small { font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-ladder-tier { margin: 8px 12px 0; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); overflow: hidden; } .m-ladder-tier-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); } .m-ladder-tier-level { font-size: var(--font-size-card-title); font-weight: 600; } .m-ladder-tier-count { font-size: var(--font-size-label); color: var(--text-secondary); white-space: nowrap; } .m-ladder-rate { flex: 0 0 auto; font-size: var(--font-size-aux); color: var(--text-tertiary); white-space: nowrap; } .m-ladder-stocks { padding: 4px 0; } .m-ladder-stock { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--motion-press-release) var(--ease-press); } .m-ladder-stock:active { background: var(--surface-hover); } .m-ladder-stock-main { display: flex; align-items: center; gap: 6px; } .m-ladder-stock-main strong { font-size: var(--font-size-table); font-weight: 500; } .m-ladder-stock-main small { font-size: var(--font-size-aux); color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .m-ladder-tag { font-style: normal; font-size: 10px; padding: 1px 4px; border-radius: 3px; background: var(--action-soft); color: var(--action); } .m-ladder-tag.is-broken { background: var(--warning-soft); color: var(--warning); } .m-ladder-stock-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .m-ladder-stock-sub b { font-size: var(--font-size-label); font-weight: 400; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-ladder-stock-sub small { font-size: var(--font-size-aux); color: var(--text-tertiary); flex: 0 0 auto; } .m-ladder-gap { padding: 12px 14px; font-size: var(--font-size-label); color: var(--text-tertiary); } .m-ladder-fold { margin-left: auto; flex: 0 0 auto; min-height: 32px; padding: 0 2px; border: 0; background: transparent; color: var(--action); font-size: var(--font-size-aux); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press); } .m-ladder-fold:active { transform: scale(0.94); transition-duration: var(--motion-press); } .m-rate-list { margin: 0 12px; padding: 12px 14px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); } .m-rate-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .m-rate-row span { width: 76px; flex: 0 0 auto; font-size: var(--font-size-label); color: var(--text-secondary); } .m-rate-row i { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; } .m-rate-row i b { display: block; height: 100%; background: var(--action); } .m-rate-row strong { width: 52px; flex: 0 0 auto; text-align: right; font-size: var(--font-size-label); font-variant-numeric: tabular-nums; } /* 主题轮动 */ .m-rotation-day { margin: 0 12px 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); } .m-rotation-day.is-latest { border: 1px solid var(--action-soft); } .m-rotation-day header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .m-rotation-day header time { font-size: var(--font-size-card-title); font-weight: 600; } .m-rotation-day header span { font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-rotation-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .m-rotation-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press), background-color var(--motion-press-release) var(--ease-press); } .m-rotation-chip:active { transform: scale(0.96); background: var(--surface-hover); } .m-rotation-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .m-rotation-chip strong { font-size: var(--font-size-label); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-rotation-chip small { font-size: var(--font-size-aux); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-rotation-chip.heat-strong { border-color: var(--market-up); } .m-rotation-chip.heat-warm { border-color: var(--warning); } .m-rotation-rank { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 600; background: var(--surface-muted); color: var(--text-secondary); } .m-rotation-rank.rank-1 { background: var(--market-up-soft); color: var(--market-up); } .m-rotation-rank.rank-2 { background: var(--warning-soft); color: var(--warning); } .m-rotation-rank.rank-3 { background: var(--market-down-soft); color: var(--market-down); } .m-rotation-rank.rank-4 { background: var(--action-soft); color: var(--action); } /* 竞价 */ .m-phase-notice { margin: 10px 12px; padding: 10px 12px; border-radius: 8px; background: var(--action-soft); display: flex; flex-direction: column; gap: 2px; } .m-phase-notice strong { font-size: var(--font-size-label); color: var(--action); } .m-phase-notice span { font-size: var(--font-size-aux); color: var(--text-secondary); } .m-phase-notice--selection { background: var(--warning-soft); } .m-phase-notice--selection strong { color: var(--warning); } .m-sum-strip { display: flex; margin: 10px 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); overflow: hidden; } .m-sum-metric { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 2px; text-align: center; } .m-sum-metric + .m-sum-metric { border-left: 1px solid var(--border); } .m-sum-metric span { font-size: var(--font-size-aux); color: var(--text-secondary); white-space: nowrap; } .m-sum-metric strong { font-size: var(--font-size-card-title); font-weight: 600; font-variant-numeric: tabular-nums; } .m-sum-metric strong small { font-size: 10px; font-weight: 400; color: var(--text-tertiary); } .m-sum-up strong { color: var(--market-up); } .m-sum-down strong { color: var(--market-down); } .m-sum-warn strong { color: var(--warning); } .m-mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 100%; padding: 0 6px; } .m-mini-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; } .m-mini-bar span { width: 100%; max-width: 18px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--action-soft); } .m-mini-bar.current span { background: var(--action); } .m-mini-bar small { font-size: 9px; color: var(--text-tertiary); white-space: nowrap; } .m-carry-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); } .m-carry-row:last-child { border-bottom: 0; } .m-carry-name { flex: 1; min-width: 0; font-size: var(--font-size-label); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-carry-leader { font-size: var(--font-size-aux); color: var(--text-tertiary); flex: 0 0 auto; } .m-carry-status { font-size: 10px; padding: 1px 6px; border-radius: 4px; flex: 0 0 auto; } .m-carry-status.strong { background: var(--market-up-soft); color: var(--market-up); } .m-carry-status.steady { background: var(--action-soft); color: var(--action); } .m-carry-status.mixed { background: var(--warning-soft); color: var(--warning); } .m-carry-status.weak { background: var(--surface-muted); color: var(--text-secondary); } .m-carry-median { flex: 0 0 auto; font-size: var(--font-size-label); font-weight: 600; font-variant-numeric: tabular-nums; } .m-carry-median.up { color: var(--market-up); } .m-carry-median.down { color: var(--market-down); } /* 题材库 */ .m-theme-list { margin: 0 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); overflow: hidden; } .m-theme-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--motion-press-release) var(--ease-press); } .m-theme-item:last-child { border-bottom: 0; } .m-theme-item:active { background: var(--surface-hover); } .m-theme-rank { flex: 0 0 auto; width: 22px; text-align: center; font-size: var(--font-size-aux); color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .m-theme-item:nth-child(-n+3) .m-theme-rank { color: var(--warning); font-weight: 600; } .m-theme-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .m-theme-copy strong { font-size: var(--font-size-table); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-theme-copy small { font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-theme-item > b { flex: 0 0 auto; font-size: var(--font-size-label); font-weight: 600; font-variant-numeric: tabular-nums; } .m-theme-item > b.up { color: var(--market-up); } .m-theme-item > b.down { color: var(--market-down); } .m-theme-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .m-theme-detail-head strong { font-size: var(--font-size-page-title); font-weight: 600; } .m-theme-detail-head b { font-size: var(--font-size-card-title); font-weight: 600; font-variant-numeric: tabular-nums; } .m-theme-detail-head b.up { color: var(--market-up); } .m-theme-detail-head b.down { color: var(--market-down); } .m-theme-detail-code { margin-top: 2px; font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-sheet-meta { margin-bottom: 8px; font-size: var(--font-size-aux); color: var(--text-tertiary); } /* 龙虎榜 */ .m-dragon-list { margin: 0 12px; display: flex; flex-direction: column; gap: 8px; } .m-dragon-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press-release) var(--ease-press); } .m-dragon-card:active { transform: scale(0.98); } .m-dragon-card-rank { flex: 0 0 auto; font-size: var(--font-size-aux); color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .m-dragon-card-mono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--action-soft); color: var(--action); font-size: 13px; font-weight: 600; } .m-dragon-card-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .m-dragon-card-copy strong { font-size: var(--font-size-table); font-weight: 500; } .m-dragon-card-copy small { font-size: var(--font-size-aux); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-dragon-card-stats { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .m-dragon-card-stats small { font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-dragon-card-stats b { font-size: var(--font-size-label); font-weight: 600; font-variant-numeric: tabular-nums; } .m-dragon-card-stats b.up { color: var(--market-up); } .m-dragon-card-stats b.down { color: var(--market-down); } .m-dragon-unclassified { margin: 8px 12px 0; font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-dragon-trader-totals { display: flex; gap: 8px; margin-bottom: 10px; } .m-total { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 6px; background: var(--surface-muted); } .m-total span { font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-total b { font-size: var(--font-size-label); font-weight: 600; font-variant-numeric: tabular-nums; } .m-total b.up { color: var(--market-up); } .m-total b.down { color: var(--market-down); } .m-profile-list { margin: 0 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--elevation-card); overflow: hidden; } .m-profile-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .m-profile-row:last-child { border-bottom: 0; } .m-profile-row:active { background: var(--surface-hover); } .m-profile-mono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--action-soft); color: var(--action); font-size: 13px; font-weight: 600; } .m-profile-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .m-profile-copy strong { font-size: var(--font-size-table); font-weight: 500; } .m-profile-copy small { font-size: var(--font-size-aux); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-profile-seat { flex: 0 0 auto; font-size: var(--font-size-aux); color: var(--text-secondary); } .m-profile-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .m-profile-detail-head .m-profile-mono { width: 44px; height: 44px; font-size: 16px; } .m-profile-detail-head strong { font-size: var(--font-size-page-title); } .m-profile-detail-head small { font-size: var(--font-size-aux); color: var(--text-tertiary); } .m-profile-desc { font-size: var(--font-size-label); color: var(--text-secondary); line-height: 1.6; } .m-profile-orgs { display: flex; flex-wrap: wrap; gap: 8px; } .m-profile-orgs span { font-size: var(--font-size-label); padding: 6px 10px; border-radius: 6px; background: var(--surface-muted); color: var(--text-primary); } .m-profile-notice { margin-top: 12px; font-size: var(--font-size-aux); color: var(--warning); } .m-tag--exp-above { background: var(--market-up-soft); color: var(--market-up); } .m-tag--exp-matched { background: var(--surface-muted); color: var(--text-secondary); } .m-tag--exp-below { background: var(--market-down-soft); color: var(--market-down); } .m-tag--exp-one { background: var(--warning-soft); color: var(--warning); } .m-tag--dir-up { background: var(--market-up-soft); color: var(--market-up); } .m-tag--dir-down { background: var(--market-down-soft); color: var(--market-down); } .m-tag--dir-flat { background: var(--surface-muted); color: var(--text-secondary); } /* ===== 第四批(P3):智能选股 / 策略跟踪 / 复盘助手 / 问师 ===== */ /* 日期按钮右侧文本 */ .m-date-btn .m-date-btn-label { font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; } /* 通用:旋转动画(用于刷新按钮/等待 spinner) */ @keyframes m-spin { to { transform: rotate(360deg); } } .is-spinning { animation: m-spin 800ms linear infinite; transform-origin: 50% 50%; } /* ============== 聊天工作台(复盘助手 + 问师)============== */ .m-chat-page { display: flex; flex-direction: column; height: calc(100vh - var(--mobile-header-height) - var(--mobile-tabbar-height) - var(--mobile-safe-bottom)); height: calc(100dvh - var(--mobile-header-height) - var(--mobile-tabbar-height) - var(--mobile-safe-bottom)); background: var(--canvas); overflow: hidden; } .m-chat-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 0; } .m-chat-msg { display: flex; max-width: 82%; margin-top: 12px; word-break: break-word; white-space: pre-wrap; } .m-chat-msg:first-child { margin-top: 12px; } .m-chat-msg--user + .m-chat-msg--user, .m-chat-msg--ai + .m-chat-msg--ai { margin-top: 4px; } .m-chat-msg--user { align-self: flex-end; } .m-chat-msg--ai { align-self: flex-start; } .m-chat-bubble { padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; } .m-chat-msg--user .m-chat-bubble { background: var(--action); color: var(--text-inverse); border-top-right-radius: 4px; } .m-chat-msg--ai .m-chat-bubble { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-top-left-radius: 4px; } .m-chat-bubble p { margin: 0 0 6px; white-space: normal; } .m-chat-bubble p:last-child { margin-bottom: 0; } .m-chat-bubble ul { margin: 0; padding-left: 16px; } .m-chat-bubble li { margin: 2px 0; } .m-chat-bubble h4 { margin: 6px 0 4px; font-size: 14px; font-weight: 600; } .m-chat-bubble blockquote { margin: 4px 0; padding-left: 8px; border-left: 3px solid var(--border-strong); color: var(--text-secondary); } .m-chat-bubble--error { background: var(--warning-soft); border-color: var(--warning-soft); color: var(--text-primary); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .m-chat-retry { appearance: none; border: none; background: transparent; color: var(--action); font-size: 13px; padding: 0; cursor: pointer; font-weight: 600; } .m-chat-stamp { align-self: center; font-size: 11.5px; color: var(--text-tertiary); margin: 12px 0 4px; } .m-chat-skeleton { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; } .m-chat-bubble-skel { height: 44px; background: var(--surface-muted); border-radius: 12px; animation: m-skeleton 1.2s ease-in-out infinite; } .m-chat-bubble-skel--ai { align-self: flex-start; } .m-chat-bubble-skel--user { background: var(--action-soft); } @keyframes m-skeleton { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* 流式光标 */ .m-chat-cursor { display: inline-block; width: 8px; height: 16px; background: var(--action); vertical-align: text-bottom; margin-left: 2px; animation: m-cursor-blink 800ms steps(1) infinite; } @keyframes m-cursor-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .m-chat-cursor { animation: none; } .m-chat-typing i { animation: none; } } /* 等待三点 */ .m-chat-typing { display: inline-flex; align-items: center; gap: 4px; } .m-chat-typing i { display: inline-block; width: 6px; height: 6px; background: var(--text-tertiary); border-radius: 50%; animation: m-typing 1.2s ease-in-out infinite; } .m-chat-typing i:nth-child(2) { animation-delay: 0.15s; } .m-chat-typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes m-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-3px); opacity: 1; } } /* 引导问题胶囊(空态时渲染在消息区内,横滑) */ .m-chat-presets { flex: 0 0 auto; width: 100%; margin-top: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .m-chat-presets::-webkit-scrollbar { display: none; } .m-chat-preset-list { display: inline-flex; gap: 8px; padding-bottom: 4px; white-space: nowrap; } .m-chat-preset-list .m-source-tab { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); height: 32px; border-radius: 999px; padding: 0 14px; font-size: 13px; font-weight: 400; display: inline-flex; align-items: center; } .m-chat-followup-row { margin-top: 8px; align-self: flex-start; display: flex; flex-wrap: wrap; gap: 8px; max-width: 82%; } .m-chat-followup-row .m-source-tab { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); height: 32px; border-radius: 999px; padding: 0 14px; font-size: 13px; font-weight: 400; display: inline-flex; align-items: center; } .m-chat-empty-hint { margin-top: 8px; font-size: 12.5px; color: var(--text-tertiary); align-self: center; } /* 输入区 */ .m-chat-input-bar { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px calc(8px + var(--mobile-safe-bottom)); background: var(--surface); border-top: 1px solid var(--border); /* 键盘弹起时由 --m-keyboard-inset 推上 */ transform: translateY(calc(-1 * var(--m-keyboard-inset, 0px))); padding-bottom: calc(8px + var(--mobile-safe-bottom) + var(--m-keyboard-inset, 0px)); } .m-chat-input-wrap { flex: 1 1 auto; background: var(--surface-muted); border-radius: 12px; padding: 4px 12px; display: flex; align-items: center; } .m-chat-input { width: 100%; min-height: 36px; max-height: 116px; resize: none; border: none; background: transparent; color: var(--text-primary); font-size: 14px; /* 防止 iOS 聚焦自动放大 */ line-height: 1.5; font-family: inherit; outline: none; padding: 8px 0; } .m-chat-input::placeholder { color: var(--text-tertiary); } .m-chat-send { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--action); color: var(--text-inverse); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press) var(--ease-press), background-color var(--motion-press-release) var(--ease-press), opacity var(--motion-press-release) var(--ease-press); } .m-chat-send:active { transform: scale(0.94); } .m-chat-send:disabled { opacity: 0.4; cursor: default; } .m-chat-send--stop { background: var(--surface-muted); color: var(--text-secondary); } .m-chat-send--stop svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; } /* 导师胶囊条(消息区顶部) */ .m-chat-mentor-bar { flex: 0 0 auto; padding: 8px 12px 0; display: flex; gap: 8px; } .m-mentor-pill { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--action-soft); color: var(--action); border: none; font-size: 13px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; } .m-mentor-pill:active { transform: scale(0.97); } .m-mentor-pill-close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; font-size: 14px; line-height: 1; color: var(--action); background: transparent; cursor: pointer; } .m-mentor-grade { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-left: 6px; } .m-mentor-grade--a { background: var(--warning-soft); color: var(--warning); } .m-mentor-grade--b { background: var(--action-soft); color: var(--action); } .m-mentor-grade--c { background: var(--surface-muted); color: var(--text-secondary); } /* ============== 导师抽屉 ============== */ .m-mentor-drawer-body { padding-bottom: 16px; } .m-mentor-drawer-search { position: relative; margin: 0 0 12px; } .m-mentor-drawer-search .m-form-field, .m-mentor-drawer-search.m-form-field { padding-left: 36px; } .m-mentor-drawer-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); display: inline-flex; align-items: center; } .m-mentor-drawer-list { display: flex; flex-direction: column; } .m-mentor-row { appearance: none; background: var(--surface); border: none; border-bottom: 1px solid var(--border); padding: 12px 4px; display: flex; align-items: center; gap: 10px; min-height: 64px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .m-mentor-row:active { background: var(--surface-hover); } .m-mentor-row.is-current { background: var(--surface-selected); } .m-mentor-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .m-mentor-row-name { font-size: 15px; font-weight: 600; color: var(--text-primary); } .m-mentor-row-tag { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-mentor-row-grade { margin-left: auto; } .m-mentor-row-check { color: var(--action); display: inline-flex; } /* ============== 智能选股 ============== */ .m-screener-stage { margin: 12px 12px 8px; padding: 12px; border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; } .m-screener-stage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .m-screener-stage-label { font-size: 12px; color: var(--text-secondary); } .m-screener-stage-time { font-size: 11.5px; color: var(--text-tertiary); } .m-screener-stage-name { font-size: 15px; font-weight: 600; color: var(--action); } .m-screener-stage-conf { font-size: 12px; color: var(--text-tertiary); margin-left: 8px; } .m-screener-stage-reason { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .m-screener-views { margin: 0 12px 8px; flex-wrap: wrap; } .m-screener-strategy { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 0 12px; height: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; appearance: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--text-primary); } .m-screener-strategy:active { background: var(--surface-hover); } .m-screener-strategy-icon { color: var(--action); display: inline-flex; } .m-screener-strategy-name { font-size: 14px; font-weight: 600; } .m-screener-strategy-status { font-size: 12px; color: var(--text-tertiary); margin-left: auto; } .m-screener-strategy-chevron { color: var(--text-tertiary); display: inline-flex; } .m-screener-foot { margin: 12px 12px 24px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; } .m-screener-drawer-search { position: relative; margin-bottom: 12px; } .m-screener-drawer-search .m-form-field, .m-screener-drawer-search.m-form-field { padding-left: 36px; } .m-screener-drawer-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); display: inline-flex; align-items: center; } .m-screener-drawer-cats { margin-bottom: 8px; flex-wrap: wrap; } .m-screener-drawer-list { display: flex; flex-direction: column; } .m-screener-drawer-row { appearance: none; background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 12px 4px; display: flex; align-items: center; gap: 8px; min-height: 56px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--text-primary); } .m-screener-drawer-row:active { background: var(--surface-hover); } .m-screener-drawer-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .m-screener-drawer-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-screener-drawer-sub { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-strategy-status { font-size: 12px; color: var(--text-primary); } .m-strategy-status--warn { color: var(--warning); } .m-strategy-status--muted { color: var(--text-secondary); } .m-strategy-check { color: var(--action); display: inline-flex; } .m-score-up { color: var(--market-up); font-weight: 600; } /* 详情 Sheet 内嵌的选股 / 跟踪分组 */ .m-detail-foot { margin-top: 16px; padding: 0 12px 16px; } .m-detail-group { margin-bottom: 16px; } .m-detail-group-title { margin: 0 0 8px; font-size: var(--font-size-label); font-weight: 600; color: var(--text-secondary); } .m-detail-group-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 12px; background: var(--surface); border-radius: 8px; margin-bottom: 4px; font-size: 13.5px; gap: 12px; } .m-detail-group-label { color: var(--text-secondary); flex: 0 0 auto; } .m-detail-group-value { color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; } .m-detail-group-value.up { color: var(--market-up); } .m-detail-group-value.down { color: var(--market-down); } .m-screener-detail-actions, .m-tracking-detail-actions { margin-top: 16px; padding: 0 4px; } .m-screener-detail-actions .m-btn-primary, .m-tracking-detail-actions .m-btn-primary { width: 100%; } .m-btn-danger { background: var(--market-up); } .m-btn-danger:active { background: var(--market-up); transform: scale(0.97); } .m-btn-disabled, .m-btn-primary:disabled { background: var(--surface-muted); color: var(--text-secondary); cursor: not-allowed; transform: none; } /* 确认抽屉 */ .m-confirm-body { padding-bottom: 8px; } .m-confirm-text { font-size: 14px; color: var(--text-primary); line-height: 1.5; margin: 0 0 16px; } .m-confirm-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 8px; } .m-confirm-actions .m-btn-cancel { background: var(--surface-muted); color: var(--text-primary); } .m-confirm-actions .m-btn-cancel:active { background: var(--surface-hover); } /* ============== 策略跟踪 ============== */ .m-strip--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 360px) { .m-strip--5 .m-strip-value { font-size: 11px; } .m-strip--5 .m-strip-label { font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .m-rotation-chip:active, .m-dragon-card:active, .m-range-tab:active, .m-screener-strategy:active, .m-mentor-pill:active, .m-chat-send:active, .m-screener-drawer-row:active, .m-mentor-row:active { transform: none; } }