/*
* TradeSeek AI — Shared Layout & Design System
* ============================================
* 统一所有页面的侧边栏、表格、按钮、徽章、模态框等组件样式。
* Linear + Vercel + Stripe 融合风格。
*
* 使用方式：每个页面在 中引入此文件即可。
*
*
*/
/* ============================================================
1. Tailwind 扩展配置（通过 JS 加载，此处不重复）
2. 字体 & 全局重置
============================================================ */
@import url('./styles.css');
*,
*::before,
*::after { box-sizing: border-box; }
body {
font-family: var(--font-sans);
background: var(--color-background);
margin: 0;
color: var(--color-text-brand);
-webkit-font-smoothing: antialiased;
}
.tabular-nums { font-variant-numeric: tabular-nums; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ============================================================
3. 侧边栏
============================================================ */
:root {
--sidebar-w: var(--sidebar-width);
--sidebar-collapsed-w: var(--sidebar-collapsed-width);
--ai-panel-w: var(--ai-panel-width);
}
.sidebar {
width: var(--sidebar-w);
min-height: 100vh;
background: var(--color-brand-dark);
position: fixed;
left: 0; top: 0;
z-index: var(--z-sidebar);
display: flex;
flex-direction: column;
border-right: 1px solid #14223e;
overflow-y: auto;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
height: 40px;
margin: 2px 8px;
border-radius: 6px;
color: #c8d2e0;
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: all 0.15s;
white-space: nowrap;
}
.sidebar-nav-item:hover { background: #14223e; color: #e2e8f0; }
.sidebar-nav-item.active { background: #1a3256; color: #ffffff; }
.sidebar-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-nav-item.active svg { color: #5ba8e6; }
.sidebar-section-title {
font-size: 11px;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #4a6080;
padding: 16px 16px 6px 16px;
font-weight: 600;
}
.sidebar-divider {
border-top: 1px solid #1a3256;
margin: 8px 16px;
}
/* ---- 侧边栏子菜单（领英运营分组） ---- */
.sidebar-group { margin: 0; }
.sidebar-group-toggle {
display: flex;
align-items: center;
gap: 10px;
width: calc(100% - 16px);
margin: 2px 8px;
padding: 0 16px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
color: #c8d2e0;
font-size: 14px;
font-family: inherit;
text-align: left;
border-radius: 6px;
transition: all 0.15s;
}
.sidebar-group-toggle:hover { background: #14223e; color: #e2e8f0; }
.sidebar-group-toggle > svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-group-toggle .chevron {
margin-left: auto;
width: 16px; height: 16px;
flex-shrink: 0;
color: #7e93b3;
transition: transform 0.2s ease;
}
.sidebar-group.expanded > .sidebar-group-toggle .chevron { transform: rotate(90deg); }
.sidebar-submenu { display: none; flex-direction: column; }
.sidebar-group.expanded > .sidebar-submenu { display: flex; }
.sidebar-submenu-label {
padding: 12px 14px 5px 46px;
color: #647b99;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
}
.sidebar-submenu-item {
height: 34px !important;
padding-left: 46px !important;
font-size: 13px !important;
color: #9fb0c8 !important;
}
.sidebar-submenu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-submenu-item:hover { background: #14223e !important; color: #e2e8f0 !important; }
.sidebar-submenu-item.active { background: #1a3256 !important; color: #ffffff !important; }
.sidebar-submenu-item.active svg { color: #5ba8e6 !important; }
/* ---- 侧边栏二级子项（采购商/供应商下的子页面） ---- */
.sidebar-sub-item {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px 0 46px;
height: 36px;
margin: 1px 8px;
border-radius: 6px;
color: #9fb0c8;
font-size: 13px;
cursor: pointer;
text-decoration: none;
transition: all 0.15s;
}
.sidebar-sub-item:hover { background: #14223e; color: #e2e8f0; }
.sidebar-sub-item.active { background: #1a3256; color: #ffffff; }
.sidebar-sub-item.active svg { color: #5ba8e6; }
/* ---- 侧边栏账号区 ---- */
.sidebar-account {
display: grid;
gap: 8px;
margin-top: auto;
padding: 12px 16px;
border-top: 1px solid #1a3256;
}
.sidebar-user-info {
display: flex;
min-width: 0;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.sidebar-user-avatar {
display: flex;
width: 32px;
height: 32px;
flex: 0 0 32px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-size: 14px;
font-weight: 600;
}
.sidebar-user-copy {
min-width: 0;
}
.sidebar-user-name {
overflow: hidden;
color: #fff;
font-size: 13px;
font-weight: 500;
text-overflow: ellipsis;
}
.sidebar-user-company {
overflow: hidden;
margin-top: 2px;
color: #7f96b4;
font-size: 11px;
text-overflow: ellipsis;
}
.sidebar-logout-button {
display: flex;
width: 100%;
min-height: 40px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px;
border: 1px solid #2b405f;
border-radius: 7px;
background: transparent;
color: #b9c6d8;
font: inherit;
font-size: 13px;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sidebar-logout-button svg {
width: 18px;
height: 18px;
flex: none;
}
.sidebar-logout-button:hover {
border-color: #f87171;
background: rgba(127, 29, 29, 0.25);
color: #fecaca;
}
.sidebar-logout-button:focus-visible {
outline: 3px solid #7cc4ff;
outline-offset: 2px;
}
.sidebar-logout-button:disabled {
cursor: wait;
opacity: 0.65;
}
.sidebar-logo-text { white-space: nowrap; }
.sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
min-height: 76px;
padding: 16px;
color: #fff;
text-decoration: none;
flex: none;
}
.sidebar-brand:focus-visible {
outline: 2px solid #7cc4ff;
outline-offset: -4px;
border-radius: 10px;
}
.sidebar-brand-mark {
display: block;
width: 41px;
height: 41px;
flex: none;
}
.sidebar-brand-copy {
display: flex;
width: 82px;
flex-direction: column;
justify-content: center;
line-height: 1;
}
.sidebar-brand-name {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
color: #fff;
font-size: 17px;
font-weight: 700;
letter-spacing: 0;
}
.sidebar-brand-en {
width: 100%;
margin-top: 5px;
color: #7f96b4;
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.12em;
}
/* ============================================================
4. 主内容区
============================================================ */
.main-content {
margin-left: var(--sidebar-w);
min-height: 100vh;
background: var(--color-background);
padding: var(--space-6);
transition: margin-left 0.25s;
}
/* ============================================================
5. 移动端头部
============================================================ */
.mobile-header {
display: none;
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 0 var(--space-4);
height: 48px;
align-items: center;
justify-content: space-between;
}
.mobile-menu-button {
width: 40px;
height: 40px;
margin-left: -8px;
padding: 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #334155;
cursor: pointer;
}
.mobile-menu-button:hover { background: #f1f5f9; }
.mobile-menu-button:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 1px;
}
.mobile-brand {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-brand-deep);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.06em;
}
.mobile-brand-mark {
display: block;
width: 30px;
height: 30px;
}
.mobile-header-spacer { width: 32px; }
.sidebar-backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-sidebar) - 1);
border: 0;
background: rgba(15, 23, 42, 0.42);
cursor: pointer;
}
.sidebar-backdrop[hidden] { display: none; }
/* ============================================================
6. 响应式断点
============================================================ */
@media (max-width: 1279px) {
.sidebar {
width: var(--sidebar-collapsed-w);
}
.sidebar .sidebar-nav-item span,
.sidebar .sidebar-section-title,
.sidebar .sidebar-logo-text,
.sidebar .sidebar-user-info,
.sidebar .sidebar-logout-button span,
.sidebar .sidebar-divider,
.sidebar .sidebar-submenu,
.sidebar .sidebar-submenu-label,
.sidebar .sidebar-group-toggle span,
.sidebar .sidebar-group-toggle .chevron,
.sidebar .sidebar-sub-item span {
display: none;
}
.sidebar-nav-item { justify-content: center; padding: 0; }
.sidebar-account { padding: 12px 8px; }
.sidebar-logout-button { padding: 0; }
.sidebar-brand { justify-content: center; padding: 16px 9px; }
.sidebar-brand-mark { width: 38px; height: 38px; }
.sidebar-submenu-item { justify-content: center; padding-left: 0 !important; }
.sidebar-group { margin: 0; }
.sidebar-group-toggle { justify-content: center; padding: 0; width: 100%; margin: 2px 0; }
.main-content { margin-left: var(--sidebar-collapsed-w); }
}
@media (max-width: 1023px) {
body.sidebar-menu-open { overflow: hidden; }
.sidebar {
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
width: var(--sidebar-w);
}
.sidebar.open .sidebar-nav-item span,
.sidebar.open .sidebar-section-title,
.sidebar.open .sidebar-logo-text,
.sidebar.open .sidebar-user-info,
.sidebar.open .sidebar-logout-button span,
.sidebar.open .sidebar-divider,
.sidebar.open .sidebar-group-toggle span,
.sidebar.open .sidebar-group-toggle .chevron {
display: flex;
}
.sidebar.open .sidebar-submenu { display: flex; }
.sidebar.open .sidebar-submenu-label { display: block; padding-left: 46px; }
.sidebar.open .sidebar-submenu-item { padding-left: 46px !important; justify-content: flex-start; }
.sidebar.open .sidebar-nav-item { justify-content: flex-start; padding: 0 16px; }
.sidebar.open .sidebar-account { padding: 12px 16px; }
.sidebar.open .sidebar-logout-button { padding: 0 12px; }
.sidebar.open .sidebar-brand { justify-content: flex-start; padding: 16px; }
.sidebar.open .sidebar-brand-mark { width: 41px; height: 41px; }
.sidebar.open .sidebar-group-toggle { justify-content: flex-start; padding: 0 16px; width: calc(100% - 16px); }
.sidebar.open .sidebar-sub-item span { display: inline; }
.main-content { margin-left: 0; }
.mobile-header { display: flex !important; }
}
/* ============================================================
7. 卡片
============================================================ */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
}
.card:hover {
box-shadow: var(--shadow-card);
}
/* ============================================================
8. 数据表格
============================================================ */
table.data-table {
width: 100%;
border-collapse: collapse;
}
table.data-table th {
background: var(--color-surface-muted);
border-bottom: 2px solid var(--color-border);
padding: 10px var(--space-4);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-muted);
text-align: left;
white-space: nowrap;
}
table.data-table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-background);
font-size: var(--font-size-body);
color: var(--color-text);
}
table.data-table tr:hover td { background: var(--color-surface-muted); }
table.data-table tr.selected td {
background: #e8f2fb;
border-left: 3px solid #256eb3;
}
/* ============================================================
9. 表单输入
============================================================ */
.input-field {
width: 100%;
height: var(--control-height);
padding: 0 14px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
font-size: var(--font-size-body);
color: var(--color-text);
outline: none;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
background: var(--color-surface);
}
.input-field:focus {
border-color: var(--color-brand);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
textarea.input-field {
height: auto;
padding: 10px 14px;
resize: vertical;
min-height: 80px;
}
select.input-field {
appearance: none;
-webkit-appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
/* ============================================================
10. 按钮系统
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--control-height);
padding: 0 18px;
border-radius: var(--radius-lg);
font-size: var(--font-size-body);
font-weight: 600;
cursor: pointer;
transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
border: none;
text-decoration: none;
font-family: inherit;
}
.btn-primary { background: var(--color-brand); color: var(--color-surface); }
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-secondary {
background: var(--color-surface);
color: var(--color-text-muted);
border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover { border-color: var(--color-brand); color: var(--color-brand); }
.btn-text { background: transparent; color: var(--color-text-muted); border: none; }
.btn-text:hover { color: var(--color-text); background: var(--color-background); }
.btn-success { background: var(--color-success); color: var(--color-surface); }
.btn-success:hover { background: #059669; }
.btn-danger { background: var(--color-danger); color: var(--color-surface); }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; color: var(--color-text-muted); border: none; }
.btn-ghost:hover { color: var(--color-text); }
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-sm { min-height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--font-size-sm); }
.btn-lg { min-height: var(--control-height-lg); padding: 0 var(--space-6); font-size: var(--font-size-md); }
.btn:focus-visible,
.tab-btn:focus-visible,
.pagination-btn:focus-visible,
.sidebar-nav-item:focus-visible,
.sidebar-group-toggle:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* ============================================================
11. 选项卡 (Tab)
============================================================ */
.tab-btn {
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border: none;
background: none;
color: #64748b;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.15s;
font-family: inherit;
}
.tab-btn:hover { color: #334155; }
.tab-btn.active {
color: #256eb3;
border-bottom-color: #256eb3;
font-weight: 600;
}
/* ============================================================
12. KPI 卡片
============================================================ */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.kpi-grid.kpi-grid--6 { grid-template-columns: repeat(6, 1fr); }
.kpi-grid.kpi-grid--7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1199px) {
.kpi-grid--6, .kpi-grid--7 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.kpi-grid, .kpi-grid--6, .kpi-grid--7 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
.kpi-grid, .kpi-grid--6, .kpi-grid--7 { grid-template-columns: 1fr; }
}
.kpi-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.kpi-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border-color: #cbd5e1; }
.kpi-card.accent { border-color: #dc2626; }
.kpi-card.accent .kpi-value { color: #dc2626; }
.kpi-label {
font-size: 13px;
font-weight: 500;
color: #475569;
}
.kpi-value {
font-size: 28px;
font-weight: 700;
color: #1a3a5c;
font-variant-numeric: tabular-nums;
line-height: 1.2;
margin-top: 6px;
}
.kpi-trend { font-size: 12px; margin-top: 4px; }
.kpi-trend.up { color: #10b981; }
.kpi-trend.down { color: #ef4444; }
.kpi-trend.neutral { color: #64748b; }
.kpi-unit { font-size: 14px; font-weight: 500; color: #64748b; }
/* ============================================================
13. 评分徽章 (Score Badge)
============================================================ */
.score-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.score-badge.high { background: #d1fae5; color: #065f46; }
.score-badge.medium { background: #fef3c7; color: #92400e; }
.score-badge.low { background: #f1f5f9; color: #64748b; }
.score-badge.xl { width: 48px; height: 48px; font-size: 18px; }
.score-badge-lg { width: 56px; height: 56px; font-size: 20px; }
.score-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
.score-dot.high { background: #d1fae5; color: #065f46; }
.score-dot.medium { background: #fef3c7; color: #92400e; }
.score-dot.low { background: #f1f5f9; color: #64748b; }
/* ============================================================
14. 阶段/状态徽章 (Stage & Status Pills)
============================================================ */
.stage-pill, .stage-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.stage-pill.new, .stage-badge.s0 { background: #dbeafe; color: #1e40af; }
.stage-pill.contacted, .stage-badge.s1 { background: #e0e7ff; color: #3730a3; }
.stage-pill.negotiating, .stage-badge.s2 { background: #fef3c7; color: #92400e; }
.stage-pill.qualified, .stage-badge.s3 { background: #d1fae5; color: #065f46; }
.stage-pill.quoted, .stage-badge.s4 { background: #cffafe; color: #155e75; }
.stage-pill.negotiation, .stage-badge.s5 { background: #fce7f3; color: #9d174d; }
.stage-pill.closed, .stage-badge.s6 { background: #ede9fe; color: #5b21b6; }
.stage-pill.won, .stage-badge.s7 { background: #d1fae5; color: #065f46; font-weight: 700; }
/* ============================================================
15. AI 评分/推荐徽章（统一 Badge 系统）
============================================================ */
/* -- 推荐等级 rec5: S/A/B/C/D -- */
.rec5 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.rec5.s { background: #256eb3; color: #fff; }
.rec5.a { background: #3b82f6; color: #fff; }
.rec5.b { background: #60a5fa; color: #fff; }
.rec5.c { background: #93c5fd; color: #1e40af; }
.rec5.d { background: #dbeafe; color: #1e40af; }
/* -- 推荐等级 rec4: strong/rec/observe/none -- */
.rec4 {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.rec4.strong { background: #d1fae5; color: #065f46; }
.rec4.rec { background: #e8f2fb; color: #1a3a5c; }
.rec4.observe { background: #fef3c7; color: #92400e; }
.rec4.none { background: #f1f5f9; color: #64748b; }
/* -- 意向等级 intent -- */
.intent {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.intent.a { background: #d1fae5; color: #065f46; }
.intent.b { background: #e8f2fb; color: #1a3a5c; }
.intent.c { background: #fef3c7; color: #92400e; }
.intent.d { background: #f1f5f9; color: #64748b; }
.intent.invalid { background: #fee2e2; color: #991b1b; }
/* -- 连接状态 -- */
.conn-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.conn-status.unconnected { background: #f1f5f9; color: #64748b; }
.conn-status.invited { background: #fef3c7; color: #92400e; }
.conn-status.connected { background: #d1fae5; color: #065f46; }
/* -- 消息状态 -- */
.msg-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.msg-status.unsent { background: #f1f5f9; color: #64748b; }
.msg-status.sent { background: #e8f2fb; color: #1a3a5c; }
.msg-status.replied { background: #d1fae5; color: #065f46; }
/* -- 优先级 prio6 -- */
.prio-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.prio-badge.high { background: #fee2e2; color: #991b1b; }
.prio-badge.medium { background: #fef3c7; color: #92400e; }
.prio-badge.low { background: #f1f5f9; color: #64748b; }
/* -- 回复类型（带色点） -- */
.reply-type {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.reply-type .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.reply-type.has-need { background: #d1fae5; color: #065f46; }
.reply-type.has-need .dot { background: #10b981; }
.reply-type.ask-product { background: #d1fae5; color: #065f46; }
.reply-type.ask-product .dot { background: #34d399; }
.reply-type.ask-company { background: #d1fae5; color: #065f46; }
.reply-type.ask-company .dot { background: #6ee7b7; }
.reply-type.ask-material { background: #d1fae5; color: #065f46; }
.reply-type.ask-material .dot { background: #a7f3d0; }
.reply-type.no-need { background: #fef3c7; color: #92400e; }
.reply-type.no-need .dot { background: #f59e0b; }
.reply-type.has-supplier { background: #fef3c7; color: #92400e; }
.reply-type.has-supplier .dot { background: #fbbf24; }
.reply-type.refer { background: #dbeafe; color: #1e40af; }
.reply-type.refer .dot { background: #3b82f6; }
.reply-type.reject { background: #fee2e2; color: #991b1b; }
.reply-type.reject .dot { background: #ef4444; }
.reply-type.auto { background: #f1f5f9; color: #64748b; }
.reply-type.auto .dot { background: #94a3b8; }
.reply-type.invalid { background: #f1f5f9; color: #64748b; }
.reply-type.invalid .dot { background: #cbd5e1; }
/* -- 内容类型 -- */
.content-type {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.content-type.industry { background: #dbeafe; color: #1e40af; }
.content-type.pain { background: #fee2e2; color: #991b1b; }
.content-type.advice { background: #ede9fe; color: #5b21b6; }
.content-type.product { background: #d1fae5; color: #065f46; }
.content-type.delivery { background: #cffafe; color: #155e75; }
.content-type.case { background: #fef3c7; color: #92400e; }
.content-type.insight { background: #fce7f3; color: #9d174d; }
.content-type.expo { background: #e8f2fb; color: #1a3a5c; }
.content-type.strength { background: #d1fae5; color: #065f46; }
.content-type.holiday { background: #fef3c7; color: #92400e; }
/* -- 触达级别 -- */
.reach {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.reach.fit { background: #d1fae5; color: #065f46; }
.reach.golden { background: #fef3c7; color: #92400e; }
.reach.soon { background: #dbeafe; color: #1e40af; }
.reach.not { background: #f1f5f9; color: #64748b; }
.reach.schedulable { background: #e8f2fb; color: #1a3a5c; }
.reach.priority { background: #fee2e2; color: #991b1b; }
/* -- 匹配置信度 -- */
.match-confidence {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.match-confidence.high { background: #d1fae5; color: #065f46; }
.match-confidence.medium { background: #fef3c7; color: #92400e; }
.match-confidence.low { background: #fee2e2; color: #991b1b; }
/* -- 匹配确认 -- */
.match-confirm {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.match-confirm.unconfirmed { background: #f1f5f9; color: #64748b; }
.match-confirm.confirmed { background: #d1fae5; color: #065f46; }
.match-confirm.error { background: #fee2e2; color: #991b1b; }
.match-confirm.review { background: #fef3c7; color: #92400e; }
/* -- 公司状态 -- */
.co-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.co-status.unmatched { background: #f1f5f9; color: #64748b; }
.co-status.matching { background: #fef3c7; color: #92400e; }
.co-status.confirmed { background: #d1fae5; color: #065f46; }
.co-status.discovered { background: #e8f2fb; color: #1a3a5c; }
.co-status.active { background: #d1fae5; color: #065f46; }
.co-status.replied { background: #ede9fe; color: #5b21b6; }
.co-status.won { background: #d1fae5; color: #065f46; font-weight: 700; }
.co-status.paused { background: #f1f5f9; color: #64748b; }
.co-status.invalid { background: #fee2e2; color: #991b1b; }
/* -- 联系人状态 -- */
.contact-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.contact-status.unmatched { background: #f1f5f9; color: #64748b; }
.contact-status.matched { background: #e8f2fb; color: #1a3a5c; }
.contact-status.invited { background: #fef3c7; color: #92400e; }
.contact-status.connected { background: #d1fae5; color: #065f46; }
.contact-status.firstreplied { background: #dbeafe; color: #1e40af; }
.contact-status.firstmsg { background: #e8f2fb; color: #1a3a5c; }
.contact-status.follow2 { background: #c3dff8; color: #1a3a5c; }
.contact-status.follow3 { background: #8fc5f0; color: #1a3a5c; }
.contact-status.silent { background: #f1f5f9; color: #64748b; }
.contact-status.interested { background: #fef3c7; color: #92400e; }
.contact-status.won { background: #d1fae5; color: #065f46; font-weight: 700; }
.contact-status.unsuitable { background: #f1f5f9; color: #64748b; }
.contact-status.rejected { background: #fee2e2; color: #991b1b; }
.contact-status.active { background: #d1fae5; color: #065f46; }
.contact-status.replied { background: #ede9fe; color: #5b21b6; }
/* -- 任务状态 -- */
.task-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.task-badge.todo { background: #f1f5f9; color: #64748b; }
.task-badge.doing { background: #dbeafe; color: #1e40af; }
.task-badge.done { background: #d1fae5; color: #065f46; }
.task-badge.overdue { background: #fee2e2; color: #991b1b; }
/* ============================================================
16. 通用标签 (Tag)
============================================================ */
.tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.tag.blue { background: #e8f2fb; color: #1a3a5c; }
.tag.green { background: #d1fae5; color: #065f46; }
.tag.amber { background: #fef3c7; color: #92400e; }
.tag.purple { background: #ede9fe; color: #5b21b6; }
.tag.red { background: #fee2e2; color: #991b1b; }
.tag.gray { background: #f1f5f9; color: #475569; }
/* -- 来源标签 -- */
.source-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.source-tag.api { background: #dbeafe; color: #1e40af; }
.source-tag.excel { background: #d1fae5; color: #065f46; }
.source-tag.manual { background: #f1f5f9; color: #64748b; }
.source-tag.linkedin { background: #ede9fe; color: #5b21b6; }
/* -- AI 判定标签 -- */
.ai-judge-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.ai-judge-tag.same { background: #fef3c7; color: #92400e; }
.ai-judge-tag.insufficient { background: #f1f5f9; color: #64748b; }
.ai-judge-tag.confirm { background: #d1fae5; color: #065f46; }
.ai-judge-tag.mismatch { background: #fee2e2; color: #991b1b; }
/* -- AI 徽章 -- */
.ai-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
font-weight: 600;
}
.ai-badge.high { background: #d1fae5; color: #065f46; }
.ai-badge.medium { background: #fef3c7; color: #92400e; }
.ai-badge.low { background: #f1f5f9; color: #475569; }
/* -- 部门标签 -- */
.dept-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
background: #f1f5f9;
color: #475569;
}
/* ============================================================
17. 筛选器
============================================================ */
.filter-select {
height: 36px;
padding: 0 32px 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 13px;
color: #334155;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3Csvg%3E") no-repeat right 10px center;
-webkit-appearance: none;
appearance: none;
outline: none;
cursor: pointer;
transition: border 0.15s;
font-family: inherit;
}
.filter-select:focus { border-color: #256eb3; }
.filter-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 6px;
font-size: 13px;
color: #475569;
background: #fff;
border: 1px solid #cbd5e1;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.filter-chip:hover { border-color: #256eb3; color: #256eb3; }
.filter-chip.active {
background: #e8f2fb;
border-color: #256eb3;
color: #1a3a5c;
font-weight: 600;
}
.filter-bar {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px 20px;
margin-bottom: 16px;
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
/* ============================================================
18. 分段控件 & 视图切换
============================================================ */
.seg-btn {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 16px;
font-size: 13px;
font-weight: 500;
color: #64748b;
background: transparent;
border: 1px solid #cbd5e1;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.seg-btn:first-child { border-radius: 8px 0 0 8px; }
.seg-btn:last-child { border-radius: 0 8px 8px 0; }
.seg-btn + .seg-btn { margin-left: -1px; }
.seg-btn.seg-active {
background: #256eb3;
color: #fff;
border-color: #256eb3;
font-weight: 600;
}
.time-btn {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
color: #64748b;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.time-btn:hover { background: #f1f5f9; color: #334155; }
.time-btn.time-active {
background: #256eb3;
color: #fff;
}
/* ============================================================
19. 模态框
============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.48);
z-index: var(--z-overlay);
display: flex;
align-items: center;
justify-content: center;
animation: modal-fadeIn var(--motion-fast) ease;
}
@keyframes modal-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-popover);
padding: var(--space-8);
max-width: 480px;
width: calc(100% - 40px);
position: relative;
animation: modal-slideUp var(--motion-base) ease;
max-height: 90vh;
overflow-y: auto;
}
.modal-card.wide { max-width: 640px; }
@keyframes modal-slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-title {
font-size: var(--font-size-md);
font-weight: 700;
color: var(--color-text-strong);
margin: 0 0 8px 0;
}
.modal-body { font-size: var(--font-size-body); color: var(--color-text-muted); line-height: 1.6; }
.modal-actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-5);
justify-content: flex-end;
}
/* ============================================================
20. 面包屑
============================================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
}
.breadcrumb a {
color: #256eb3;
text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #94a3b8; }
/* ============================================================
21. 时间线
============================================================ */
.timeline-item {
position: relative;
padding-left: 28px;
padding-bottom: 20px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 7px; top: 4px;
width: 10px; height: 10px;
border-radius: 50%;
background: #256eb3;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #256eb3;
}
.timeline-item::after {
content: '';
position: absolute;
left: 11px; top: 18px; bottom: 0;
width: 2px;
background: #e2e8f0;
}
.timeline-item:last-child::after { display: none; }
/* ============================================================
22. 步骤进度条
============================================================ */
.stage-progress {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
}
.stage-step {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.stage-dot {
width: 28px; height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
border: 2px solid #e2e8f0;
background: #fff;
color: #94a3b8;
}
.stage-dot.active { background: #256eb3; border-color: #256eb3; color: #fff; }
.stage-dot.done { background: #10b981; border-color: #10b981; color: #fff; }
.stage-connector {
width: 40px; height: 2px;
background: #e2e8f0;
flex-shrink: 0;
}
.stage-connector.done { background: #10b981; }
.stage-label {
font-size: 12px;
color: #94a3b8;
white-space: nowrap;
}
.stage-label.active { color: #256eb3; font-weight: 600; }
/* ============================================================
23. 步骤向导 (Excel导入等)
============================================================ */
.step-circle {
width: 32px; height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
background: #f1f5f9;
color: #94a3b8;
border: 2px solid #e2e8f0;
}
.step-circle.active { background: #256eb3; border-color: #256eb3; color: #fff; }
.step-circle.done { background: #10b981; border-color: #10b981; color: #fff; }
.step-line {
width: 60px; height: 2px;
background: #e2e8f0;
}
.step-line.done { background: #10b981; }
/* ============================================================
24. 进度条
============================================================ */
.match-bar {
display: flex;
align-items: center;
gap: 8px;
}
.match-bar .bar {
flex: 1;
height: 6px;
background: #e2e8f0;
border-radius: 3px;
overflow: hidden;
}
.match-bar .bar-fill {
height: 100%;
border-radius: 3px;
}
.match-bar .bar-fill.high { background: #10b981; }
.match-bar .bar-fill.medium { background: #f59e0b; }
.match-bar .bar-fill.low { background: #ef4444; }
/* ============================================================
25. 开关 (Toggle Switch)
============================================================ */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.switch input { display: none; }
.switch .slider {
position: absolute;
inset: 0;
background: #cbd5e1;
border-radius: 12px;
cursor: pointer;
transition: background 0.2s;
}
.switch .slider::before {
content: '';
position: absolute;
left: 2px; top: 2px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.switch input:checked + .slider { background: #256eb3; }
.switch input:checked + .slider::before { transform: translateX(20px); }
/* ============================================================
26. AI 面板（右侧浮动助手）
============================================================ */
.ai-panel {
width: var(--ai-panel-w);
min-height: 100vh;
background: #ffffff;
border-left: 1px solid #e2e8f0;
position: fixed;
right: 0; top: 0;
z-index: 260;
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.04);
overflow-y: auto;
transition: transform 0.3s;
}
.ai-panel.collapsed { transform: translateX(100%); }
.ai-float-btn {
display: none;
position: fixed;
bottom: 24px; right: 24px;
width: 48px; height: 48px;
border-radius: 50%;
background: #256eb3;
color: #fff;
border: none;
cursor: pointer;
z-index: 270;
box-shadow: 0 4px 16px rgba(37, 110, 179, 0.3);
align-items: center;
justify-content: center;
}
@media (max-width: 1439px) {
.ai-panel { transform: translateX(100%); }
.ai-panel.open { transform: translateX(0); }
.ai-float-btn { display: flex !important; }
}
/* ============================================================
27. 看板
============================================================ */
.kanban-board {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 16px;
min-height: 400px;
}
.kanban-col {
flex-shrink: 0;
width: 300px;
min-width: 290px;
max-width: 320px;
background: #f1f5f9;
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.kanban-col-title {
font-size: 14px;
font-weight: 600;
color: #1e293b;
display: flex;
align-items: center;
justify-content: space-between;
}
.kanban-col-count {
font-size: 12px;
font-weight: 600;
color: #64748b;
background: #e2e8f0;
border-radius: 9999px;
padding: 2px 8px;
}
.kanban-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px;
cursor: grab;
transition: all 0.15s;
}
.kanban-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
.kanban-card.dragging {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border-color: #256eb3;
opacity: 0.8;
}
.kanban-add-btn {
width: 100%;
padding: 10px;
border: 2px dashed #cbd5e1;
border-radius: 8px;
background: none;
color: #94a3b8;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
text-align: center;
font-family: inherit;
}
.kanban-add-btn:hover {
border-color: #256eb3;
color: #256eb3;
}
.stage-color {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 4px;
flex-shrink: 0;
}
.stage-color.s0, .stage-color.new { background: #3b82f6; }
.stage-color.s1, .stage-color.contact { background: #06b6d4; }
.stage-color.s2, .stage-color.response { background: #f59e0b; }
.stage-color.s3, .stage-color.qualify { background: #8b5cf6; }
.stage-color.s4, .stage-color.quote { background: #ec4899; }
.stage-color.s5, .stage-color.negotiate { background: #f97316; }
.stage-color.s6, .stage-color.commit { background: #14b8a6; }
.stage-color.s7, .stage-color.order { background: #256eb3; }
.stage-color.s8, .stage-color.fulfill { background: #6366f1; }
.stage-color.s9, .stage-color.invoice { background: #84cc16; }
.stage-color.s10, .stage-color.closed { background: #10b981; }
/* ============================================================
28. 骨架屏
============================================================ */
.skeleton {
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ============================================================
29. 空状态
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px var(--space-5);
text-align: center;
}
.empty-state-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--color-background);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
color: var(--color-text-subtle);
}
.empty-state-title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--color-text);
margin: 0 0 var(--space-2) 0;
}
.empty-state-desc {
font-size: var(--font-size-body);
color: var(--color-text-muted);
margin: 0 0 var(--space-5) 0;
max-width: 400px;
}
/* ============================================================
30. 三栏布局（LinkedIn开发桥等）
============================================================ */
.three-col {
display: grid;
grid-template-columns: 280px 1fr 300px;
gap: 16px;
align-items: start;
}
@media (max-width: 1199px) {
.three-col { grid-template-columns: 1fr; }
}
.ops-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 16px;
align-items: start;
}
@media (max-width: 1023px) {
.ops-grid { grid-template-columns: 1fr; }
}
/* ============================================================
31. 通知 Toast
============================================================ */
.toast-container {
position: fixed;
top: var(--space-5); right: var(--space-5);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.toast {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-popover);
font-size: var(--font-size-body);
color: var(--color-text);
animation: toast-slideIn 0.3s ease;
min-width: 280px;
}
.toast.success { border-left: 3px solid var(--color-success); }
.toast.error { border-left: 3px solid var(--color-danger); }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.info { border-left: 3px solid var(--color-info); }
@keyframes toast-slideIn {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
/* ============================================================
32. 表单辅助
============================================================ */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 639px) {
.form-grid { grid-template-columns: 1fr; }
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
margin-bottom: 6px;
}
.form-hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: 4px;
}
.required-star { color: var(--color-danger); }
.form-section {
margin-bottom: var(--space-6);
}
.form-section-title {
font-size: 15px;
font-weight: 600;
color: var(--color-text-strong);
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
/* ============================================================
33. 分页
============================================================ */
.pagination {
display: flex;
align-items: center;
gap: var(--space-1);
}
.pagination-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--control-height-sm); height: var(--control-height-sm);
padding: 0 8px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
cursor: pointer;
transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
font-family: inherit;
}
.pagination-btn:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pagination-btn.active {
background: var(--color-brand);
border-color: var(--color-brand);
color: #fff;
font-weight: 600;
}
.pagination-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination-info {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin: 0 8px;
}
/* ============================================================
34. 搜索框通用
============================================================ */
.search-box {
position: relative;
flex: 1;
min-width: 200px;
}
.search-box svg {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
color: #94a3b8;
pointer-events: none;
}
.search-box input {
width: 100%;
height: var(--control-height);
padding: 0 14px 0 36px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-body);
outline: none;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
font-family: inherit;
}
.search-box input:focus {
border-color: var(--color-brand);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
/* ============================================================
35. 页面标题区域
============================================================ */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.page-title {
font-size: var(--font-size-page-title);
font-weight: 700;
color: var(--color-text-strong);
margin: 0;
}
.page-subtitle {
font-size: var(--font-size-body);
color: var(--color-text-muted);
margin-top: 2px;
}
/* ---- 业务入口页统一三层页头 ---- */
.main-content .app-page-header {
display: flex;
min-height: 86px;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-5);
}
.app-page-header .app-page-copy {
min-width: 0;
max-width: 820px;
}
.app-page-header .app-page-eyebrow {
margin: 0 0 7px;
color: var(--color-brand);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 800;
line-height: 1.35;
letter-spacing: .11em;
text-transform: uppercase;
}
.app-page-header .app-page-title {
margin: 0;
color: var(--color-text-brand);
font-family: var(--font-sans);
font-size: var(--font-size-page-title);
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02em;
}
.app-page-header .app-page-description {
max-width: 820px;
margin: 7px 0 0;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 400;
line-height: 1.65;
}
.app-page-header .app-page-actions {
display: flex;
flex: none;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
flex-wrap: wrap;
}
.main-content.co-page > .app-page-header {
margin-bottom: 0;
}
/* ============================================================
36. 信息行（采购商详情等）
============================================================ */
.info-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 7px 0;
font-size: 13px;
}
.info-row:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
.info-label { color: #64748b; flex-shrink: 0; margin-right: 12px; }
.info-value { color: #1a3a5c; font-weight: 500; text-align: right; word-break: break-word; }
.info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
.info-card-title { font-size: 15px; font-weight: 600; color: #1a3a5c; margin: 0 0 14px 0; }
/* ============================================================
37. 验证模块 (Verification)
============================================================ */
@keyframes verif-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.verif-spinner {
width: 24px; height: 24px;
border: 3px solid #e2e8f0;
border-top-color: #256eb3;
border-radius: 50%;
animation: verif-spin 0.8s linear infinite;
}
.verif-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
animation: modal-fadeIn 0.15s ease;
}
.verif-modal {
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
padding: 32px;
max-width: 480px;
width: calc(100% - 40px);
animation: modal-slideUp 0.2s ease;
}
.verif-modal.wide { max-width: 640px; }
.verif-match-card {
background: #d1fae5;
border-radius: 8px;
padding: 12px;
margin: 16px 0;
}
.verif-match-card dl {
margin: 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
font-size: 13px;
}
.verif-match-card dt { color: #065f46; font-weight: 500; }
.verif-match-card dd { color: #065f46; font-weight: 400; margin: 0; }
.verif-compare-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin: 16px 0;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.verif-compare-table th {
background: #f8fafc;
padding: 10px 14px;
text-align: left;
font-weight: 600;
color: #475569;
border-bottom: 2px solid #e2e8f0;
}
.verif-compare-table td {
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
color: #334155;
}
.verif-compare-table tr.highlight td { background: #fefce8; }
.verif-tip {
font-size: 12px;
color: #64748b;
background: #f8fafc;
padding: 8px 12px;
border-radius: 6px;
margin-top: 12px;
}
/* ============================================================
38. 操作工具栏
============================================================ */
.action-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sticky-bottom {
position: sticky;
bottom: 0;
background: #fff;
border-top: 1px solid #e2e8f0;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0 0 10px 10px;
z-index: 10;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
/* ============================================================
39. 内容预览卡片（预览中心等）
============================================================ */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.entry-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
transition: all 0.2s;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.entry-card:hover {
border-color: #256eb3;
box-shadow: 0 4px 16px rgba(37, 110, 179, 0.1);
transform: translateY(-2px);
}
.entry-card .icon-box {
width: 42px; height: 42px;
border-radius: 10px;
background: #e8f2fb;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
flex-shrink: 0;
}
.entry-card .card-desc {
font-size: 13px;
color: #64748b;
line-height: 1.5;
flex: 1;
}
.entry-card .card-foot {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
font-size: 12px;
color: #94a3b8;
display: flex;
justify-content: space-between;
align-items: center;
}
/* ============================================================
40. 页面底部
============================================================ */
.page-foot {
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
font-size: 12px;
color: #94a3b8;
}
/* ---- 预览中心专用 ---- */
.page-eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #64748b;
margin-bottom: 4px;
}
/* ============================================================
41. 移动端与可访问性收口
============================================================ */
@media (max-width: 720px) {
.main-content .app-page-header {
min-height: 0;
align-items: stretch;
flex-direction: column;
gap: var(--space-4);
}
.app-page-header .app-page-actions {
width: 100%;
justify-content: flex-start;
}
}
@media (max-width: 639px) {
.main-content { padding: var(--space-4); }
.page-title { font-size: var(--font-size-xl); }
.modal-card {
width: calc(100% - 24px);
padding: var(--space-5);
}
.modal-actions {
flex-direction: column-reverse;
}
.modal-actions .btn { width: 100%; }
.btn,
.btn-sm,
.pagination-btn {
min-height: var(--control-height-lg);
}
.pagination-btn {
min-width: var(--control-height-lg);
height: var(--control-height-lg);
}
.input-field,
.search-box input {
font-size: var(--font-size-md);
}
.empty-state { padding: var(--space-8) var(--space-4); }
.toast-container {
top: var(--space-4);
right: var(--space-4);
left: var(--space-4);
}
.toast {
width: 100%;
min-width: 0;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}