/* ============================================================ 智我销售AI工作台 · WiseMe Sales Pilot Platform · 交互原型设计系统 明亮医疗 SaaS：白底 + 青/蓝渐变 + 大圆角 + 柔和阴影 ============================================================ */ :root { /* 品牌色（主题变量，由顶栏颜色模板切换） */ --brand-a: #34d399; /* 薄荷绿（默认） */ --brand-b: #0d9488; --brand-grad: linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 100%); --brand-soft: linear-gradient(135deg, rgba(var(--primary-rgb),.10), rgba(var(--primary-rgb),.08)); --primary: #0d9488; --primary-hover: #0f766e; --primary-rgb: 13, 148, 136; } /* 颜色模板（作用于 ） */ [data-theme="business"] { --brand-a: #60a5fa; --brand-b: #2563eb; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-rgb: 37, 99, 235; } [data-theme="ink"] { --brand-a: #64748b; --brand-b: #0f172a; --primary: #334155; --primary-hover: #1e293b; --primary-rgb: 51, 65, 85; } [data-theme="orange"] { --brand-a: #fb923c; --brand-b: #ea580c; --primary: #ea580c; --primary-hover: #c2410c; --primary-rgb: 234, 88, 12; } [data-theme="grape"] { --brand-a: #a78bfa; --brand-b: #7c3aed; --primary: #7c3aed; --primary-hover: #6d28d9; --primary-rgb: 124, 58, 237; } :root { /* 语义色 */ --success: #10b981; --success-soft: #ecfdf5; --warn: #f59e0b; --warn-soft: #fffbeb; --danger: #ef4444; --danger-soft: #fef2f2; /* 文本 */ --text-1: #18181b; --text-2: #52525b; --text-3: #71717a; /* 表面（shadcn 中性色阶） */ --bg: #f6f6f7; --card: #ffffff; --line: #e4e4e7; --line-strong: #d4d4d8; /* 几何（shadcn 圆角体系） */ --r-lg: 12px; --r-md: 8px; --r-sm: 6px; --r-pill: 999px; /* 阴影（shadcn 淡阴影） */ --shadow-sm: 0 1px 2px 0 rgba(24,24,27,.04); --shadow-md: 0 4px 14px -4px rgba(24,24,27,.10); --shadow-lg: 0 12px 32px -10px rgba(24,24,27,.16); --sidebar-w: 248px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* hidden 属性必须始终隐藏（防止被 display:flex/grid 等覆盖） */ [hidden] { display: none !important; } html, body { height: 100%; } body { font-family: var(--font); font-size: 14px; color: var(--text-1); background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden; } #app { display: flex; height: 100vh; } ::selection { background: rgba(var(--primary-rgb),.16); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } ::-webkit-scrollbar-track { background: transparent; } /* ============ 侧边栏 ============ */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 14px; gap: 8px; } .brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; } .brand-logo { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-grad); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(var(--primary-rgb),.55); } .brand-logo svg { width: 22px; height: 22px; } .brand-name { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: .2px; } .brand-sub { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; } .nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; } .nav-group-label { font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: .08em; padding: 14px 10px 6px; text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 13.5px; transition: background .16s, color .16s, transform .1s; position: relative; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; } .nav-item:disabled { cursor: not-allowed; } .nav-item svg { width: 19px; height: 19px; flex-shrink: 0; } .nav-item:hover { background: #f4f4f5; color: var(--text-1); } .nav-item.active { background: #f4f4f5; color: var(--text-1); font-weight: 600; } .nav-item.active::before { content: ""; position: absolute; left: -14px; top: 20%; bottom: 20%; width: 3px; border-radius: 2px; background: var(--primary); } .nav-item.is-soon { opacity: .55; cursor: not-allowed; } .soon-tag { margin-left: auto; font-size: 10px; font-weight: 500; color: #71717a; background: #f4f4f5; padding: 2px 7px; border-radius: var(--r-pill); } .nav-count { margin-left: auto; min-width: 22px; text-align: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--primary); border-radius: var(--r-pill); padding: 2px 6px; } .sidebar-footer { padding-top: 10px; border-top: 1px solid var(--line); } .user-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; } .user-card:hover { background: #f4f6fb; } .user-meta { flex: 1; min-width: 0; } .user-name { display: block; font-weight: 700; font-size: 13.5px; } .user-role { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============ 头像 ============ */ .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #38bdf8, #6366f1); flex-shrink: 0; user-select: none; } .avatar-lg { width: 38px; height: 38px; font-size: 15px; } .avatar-sm { width: 30px; height: 30px; font-size: 12.5px; } .avatar.c1 { background: linear-gradient(135deg,#38bdf8,#6366f1); } .avatar.c2 { background: linear-gradient(135deg,#34d399,#0ea5e9); } .avatar.c3 { background: linear-gradient(135deg,#fbbf24,#f97316); } .avatar.c4 { background: linear-gradient(135deg,#f472b6,#8b5cf6); } .avatar.c5 { background: linear-gradient(135deg,#a3e635,#14b8a6); } /* ============ 颜色模板 ============ */ .theme-wrap { position: relative; } .theme-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 168px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 80; overflow: hidden; animation: modalIn .18s cubic-bezier(.2,.8,.3,1); } .theme-pop-head { padding: 10px 14px 6px; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; } .theme-grid { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 2px; } .theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border: none; background: none; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-1); cursor: pointer; text-align: left; transition: background .13s; } .theme-opt:hover { background: #f4f6fb; } .theme-opt.active { background: rgba(var(--primary-rgb),.10); color: var(--primary); font-weight: 600; } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15,23,42,.12); } .theme-opt .theme-check { margin-left: auto; width: 14px; height: 14px; color: currentColor; } .theme-opt.active .theme-check { display: block; } /* ============ 顶栏 ============ */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { position: relative; z-index: 60; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; background: rgba(244,246,251,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); gap: 16px; } .topbar-left { min-width: 0; } .page-title { font-size: 19px; font-weight: 800; letter-spacing: -.2px; } .page-sub { font-size: 12px; color: var(--text-3); margin-left: 8px; font-weight: 500; } .topbar-right { display: flex; align-items: center; gap: 12px; } .search-box { position: relative; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 14px; width: 250px; transition: border .16s, box-shadow .16s; } .search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); } .search-box svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; } .search-box input { border: none; outline: none; font: inherit; width: 100%; background: transparent; color: var(--text-1); } /* ============ 内容区 ============ */ .content { flex: 1; overflow-y: auto; padding: 30px 34px 52px; } .view { animation: viewIn .28s cubic-bezier(.2,.7,.3,1); } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ============ 按钮 ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--primary); color: #fff; transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s, background .15s; } .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(var(--primary-rgb),.45); } .btn-primary:active { transform: translateY(0); box-shadow: none; } .btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--text-2); } .btn-ghost:hover { border-color: var(--line-strong); color: var(--text-1); background: #f4f4f5; } .btn-soft { background: #f4f4f5; color: #3f3f46; } .btn-soft:hover { background: #e4e4e7; color: #18181b; } .btn-danger-soft { background: var(--danger-soft); color: var(--danger); } .btn-danger-soft:hover { background: #fee2e2; } .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; } .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; } .btn-pill { border-radius: var(--r-pill); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .icon-btn { width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } .icon-btn:hover { background: #eef1f8; color: var(--text-1); } .icon-btn svg { width: 17px; height: 17px; } .icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); } /* ============ 卡片与布局 ============ */ /* 卡片入场动感：依次上浮浮现 */ @keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .grid > .card, .grid > .plan-card, .grid > .course-card, .grid > .persona-card, .grid > .client-card, .grid-2c > .card, .grid-4c > .card { animation: cardIn .5s cubic-bezier(.2,.7,.3,1) backwards; } .grid > :nth-child(1), .grid-2c > :nth-child(1), .grid-4c > :nth-child(1) { animation-delay: .02s; } .grid > :nth-child(2), .grid-2c > :nth-child(2), .grid-4c > :nth-child(2) { animation-delay: .07s; } .grid > :nth-child(3), .grid-2c > :nth-child(3), .grid-4c > :nth-child(3) { animation-delay: .12s; } .grid > :nth-child(4), .grid-2c > :nth-child(4), .grid-4c > :nth-child(4) { animation-delay: .17s; } .grid > :nth-child(5), .grid-2c > :nth-child(5), .grid-4c > :nth-child(5) { animation-delay: .22s; } .grid > :nth-child(6), .grid-2c > :nth-child(6), .grid-4c > :nth-child(6) { animation-delay: .27s; } .grid > :nth-child(7), .grid-2c > :nth-child(7), .grid-4c > :nth-child(7) { animation-delay: .32s; } .grid > :nth-child(8), .grid-2c > :nth-child(8), .grid-4c > :nth-child(8) { animation-delay: .37s; } /* 交互卡片 hover 立体上浮 */ .scenario-card, .course-card, .plan-card, .persona-card, .stat { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s cubic-bezier(.2,.7,.3,1), border-color .2s; } .scenario-card:hover, .course-card:hover, .plan-card:hover, .persona-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -12px rgba(24,24,27,.20); } .persona-card:hover { border-color: var(--line-strong); } .stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(24,24,27,.16); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(24,24,27,.05), 0 4px 14px -6px rgba(24,24,27,.12); } .card-pad { padding: 24px; } /* 标题栏：去掉图标与分隔线，标题融入卡片主体 */ .card-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 4px; gap: 12px; } .card-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; display: flex; align-items: center; gap: 8px; } .card-title svg { display: none; } .card-body { padding: 20px 24px 24px; } .card-body.flush { padding: 0 0 8px; } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-main { grid-template-columns: minmax(0, 1fr) 340px; } .grid-main-rev { grid-template-columns: 340px minmax(0, 1fr); } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .flex { display: flex; align-items: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .wrap { flex-wrap: wrap; } .muted { color: var(--text-3); } .hint { font-size: 12px; color: var(--text-3); } .strong { font-weight: 700; } /* ============ 徽章 / 标签 ============ */ .badge { background: #f4f4f5; color: #52525b; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); line-height: 1.5; } .badge-blue { background: #f4f4f5; color: #52525b; } .badge-cyan { background: #f4f4f5; color: #52525b; } .badge-green { background: var(--success-soft); color: var(--success); } .badge-orange { background: var(--warn-soft); color: #d97706; } .badge-red { background: var(--danger-soft); color: var(--danger); } .badge-purple { background: #f4f4f5; color: #52525b; } .badge-gray { background: #f1f5f9; color: var(--text-2); } .badge-grad { background: var(--primary); color: #fff; } .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 6px; background: #f4f4f5; color: #52525b; cursor: pointer; transition: all .13s; border: 1px solid transparent; } .tag:hover { border-color: var(--line-strong); } .tag.active { background: rgba(var(--primary-rgb),.10); color: var(--primary); font-weight: 600; border-color: transparent; } .tag svg { width: 12px; height: 12px; } .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 6px; background: #f4f4f5; color: #71717a; } .chip svg { width: 12px; height: 12px; } /* ============ 表单 ============ */ .field { margin-bottom: 14px; } .field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .input, .select, .textarea { width: 100%; font: inherit; font-size: 13.5px; color: var(--text-1); padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; outline: none; transition: border .15s, box-shadow .15s; } .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); } .textarea { resize: vertical; min-height: 76px; line-height: 1.55; } .select { appearance: none; 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.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; cursor: pointer; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ============ 进度条 ============ */ .bar { height: 8px; border-radius: 99px; background: #eef1f7; overflow: hidden; position: relative; } .bar > i { display: block; height: 100%; border-radius: 99px; background: var(--primary); transition: width .8s cubic-bezier(.2,.7,.3,1); } .bar.thin { height: 5px; } .bar.green > i { background: linear-gradient(90deg,#34d399,#10b981); } .bar.orange > i { background: linear-gradient(90deg,#fbbf24,#f59e0b); } .bar.red > i { background: linear-gradient(90deg,#f87171,#ef4444); } /* ============ 评分环 ============ */ .ring { position: relative; width: 92px; height: 92px; } .ring svg { transform: rotate(-90deg); } .ring .ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 21px; font-weight: 800; } .ring .ring-num small { font-size: 11px; color: var(--text-3); font-weight: 600; } /* ============ 统计卡 ============ */ .stat { padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; } .stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 96px; height: 96px; border-radius: 50%; background: #f4f4f5; } .stat .stat-label { font-size: 12.5px; color: var(--text-2); font-weight: 500; display: flex; align-items: center; gap: 7px; } .stat .stat-label svg { width: 15px; height: 15px; color: var(--text-3); } .stat .stat-value { font-size: 30px; font-weight: 800; letter-spacing: -.6px; } .stat .stat-delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; } .stat .stat-delta.up { color: var(--success); } .stat .stat-delta.down { color: var(--danger); } .stat .stat-delta.flat { color: var(--text-3); } /* ============ 客户列表 ============ */ .cm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 16px -8px rgba(15,23,42,.10); } .cm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cm-search { display: flex; align-items: center; gap: 6px; background: #f4f4f5; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; color: var(--text-3); transition: border .15s, background .15s; } .cm-search:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); } .cm-search input { border: none; outline: none; background: transparent; font: inherit; font-size: 12.5px; width: 130px; } .select-sm { width: auto; padding: 6px 28px 6px 10px; font-size: 12.5px; border-radius: 8px; } .view-switch { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; } .vs-btn { width: 30px; height: 30px; display: grid; place-items: center; border: none; background: transparent; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s; } .vs-btn:hover { background: #f4f4f5; color: var(--text-1); } .vs-btn.active { background: rgba(var(--primary-rgb),.10); color: var(--primary); } /* 客户卡：立体科技感 */ .client-card { position: relative; overflow: hidden; background: linear-gradient(165deg, #ffffff 0%, #fafbfe 100%); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 6px 20px -10px rgba(15,23,42,.14); cursor: pointer; transform: perspective(900px) rotateX(2deg); transform-origin: bottom; transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .2s; display: flex; flex-direction: column; gap: 10px; } .client-card:hover { transform: perspective(900px) rotateX(0deg) translateY(-4px); border-color: rgba(var(--primary-rgb),.35); box-shadow: 0 18px 40px -16px rgba(var(--primary-rgb),.3); } .client-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.8), transparent); opacity: .8; } .cc-glow { position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--primary-rgb),.12), transparent 70%); transition: transform .3s; } .client-card:hover .cc-glow { transform: scale(1.25); } .cc-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .cc-name { font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .cc-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; } .cc-tags { display: flex; gap: 6px; flex-wrap: wrap; } .cc-diff { margin-top: 2px; } .cc-offer { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); background: rgba(var(--primary-rgb),.07); border: 1px solid rgba(var(--primary-rgb),.15); border-radius: 8px; padding: 6px 10px; } .cc-offer svg { color: var(--primary); flex-shrink: 0; } .cc-offer b { color: var(--primary); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-3); margin-top: 2px; border-top: 1px dashed var(--line); padding-top: 10px; } .cc-foot span { display: inline-flex; align-items: center; gap: 5px; } .cc-foot svg { width: 13px; height: 13px; } .client-row { display: flex; align-items: center; gap: 16px; padding: 17px 24px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .13s; } .client-row:last-child { border-bottom: none; } .client-row:hover { background: #fafafa; } .client-row:focus-visible, .hist-row:focus-visible, .scenario-card:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; background: #f8faff; } .client-main { flex: 1; min-width: 0; } .client-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; } .client-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .client-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); } /* 难度评分条 */ .diff { display: flex; flex-direction: column; gap: 9px; } .diff-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .diff-row .diff-label { width: 84px; color: var(--text-2); flex-shrink: 0; } .diff-row .bar { flex: 1; } .diff-row .diff-num { width: 30px; text-align: right; font-weight: 700; font-size: 12.5px; } /* ============ 我的训练 ============ */ .mt-24 { margin-top: 24px; } .section-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; color: var(--text-1); } .section-title svg { width: 17px; height: 17px; color: var(--primary); } /* 训练模块容器 */ .train-module { margin-top: 24px; background: #fafafa; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 22px; box-shadow: 0 1px 2px rgba(24,24,27,.05), 0 8px 24px -12px rgba(24,24,27,.16); } .train-module-accent { border-left: 3px solid var(--primary); } .train-module-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .train-module.collapsed .train-module-head { margin-bottom: 0; } .train-module-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.1px; display: flex; align-items: center; gap: 8px; color: var(--text-1); } .train-module-title svg { width: 17px; height: 17px; color: var(--primary); } .train-module-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .module-toggle { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--text-2); cursor: pointer; transition: background .15s, transform .2s, color .15s; } .module-toggle:hover { background: #f4f4f5; color: var(--text-1); } .module-toggle svg { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.2,.7,.3,1); } .train-module.collapsed .module-toggle svg { transform: rotate(-90deg); } .train-module-body { margin-top: 14px; } .train-module.collapsed .train-module-body { margin-top: 0; } .module-collapsed-hint { margin-top: 10px; font-size: 12px; color: var(--text-3); padding: 8px 12px; background: #fff; border: 1px dashed var(--line-strong); border-radius: 8px; display: flex; align-items: center; gap: 8px; } .module-collapsed-hint svg { width: 14px; height: 14px; } /* 课程进度：右上角百分比 + 底部进度条 */ .course-pct { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--primary); background: #fff; border: 1px solid rgba(var(--primary-rgb),.3); padding: 1px 8px; border-radius: var(--r-pill); } .course-cover-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(24,24,27,.08); } .course-cover-bar i { display: block; height: 100%; background: var(--primary); transition: width .6s cubic-bezier(.2,.7,.3,1); } /* 课程内容页 */ .course-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; } .course-step { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s; } .course-step:hover { background: #f4f4f5; } .course-step.active { background: rgba(var(--primary-rgb),.08); border-color: rgba(var(--primary-rgb),.25); } .course-step.done .cs-num { background: var(--primary); color: #fff; } .course-step + .course-step { margin-top: 4px; } .cs-num { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: #f4f4f5; color: #52525b; } .course-step.active .cs-num { background: var(--primary); color: #fff; } .cs-title { font-size: 13px; font-weight: 600; line-height: 1.4; } .cs-type { font-size: 11.5px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; } .cs-type svg { width: 13px; height: 13px; } .course-main .card-body { min-height: 320px; } .course-video { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0f172a; color: #fff; display: flex; align-items: center; gap: 16px; padding: 26px 24px; cursor: pointer; transition: transform .15s, box-shadow .15s; } .course-video:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(24,24,27,.3); } .cv-play { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--primary); display: grid; place-items: center; font-size: 18px; padding-left: 3px; } .cv-title { font-size: 15px; font-weight: 700; } .cv-duration { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 4px; } .course-text { font-size: 13.5px; color: var(--text-2); line-height: 1.7; } .course-article { display: flex; flex-direction: column; gap: 12px; } .course-article p { font-size: 13.5px; color: var(--text-2); line-height: 1.75; padding-left: 14px; border-left: 3px solid var(--line-strong); } .course-quiz { display: flex; flex-direction: column; gap: 14px; } .cq-question { font-size: 15.5px; font-weight: 700; line-height: 1.6; } .cq-options { display: flex; flex-direction: column; gap: 10px; } .cq-opt { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; background: #fff; color: var(--text-1); line-height: 1.5; transition: border-color .15s, background .15s, transform .1s; } .cq-opt:hover { border-color: var(--line-strong); background: #fafafa; } .cq-opt .cq-key { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #f4f4f5; color: #52525b; } .cq-opt.correct { border-color: var(--success); background: var(--success-soft); } .cq-opt.correct .cq-key { background: var(--success); color: #fff; } .cq-opt.wrong { border-color: var(--danger); background: var(--danger-soft); } .cq-opt.wrong .cq-key { background: var(--danger); color: #fff; } .cq-opt.reveal { border-color: var(--success); } .cq-ico { margin-left: auto; } .cq-feedback { border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.65; background: #fafafa; border: 1px solid var(--line); } .cq-feedback.ok { background: var(--success-soft); border-color: rgba(16,185,129,.3); color: #065f46; } .cq-feedback.no { background: var(--warn-soft); border-color: rgba(245,158,11,.3); color: #92400e; } .course-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); } .train-hero { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--brand-grad); color: #fff; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 18px 40px -14px rgba(15,23,42,.35); } .train-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.09); } .train-hero h2 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; } .train-hero p { margin-top: 8px; font-size: 13.5px; opacity: .92; max-width: 560px; line-height: 1.65; } .train-hero .hero-tags { margin-top: 16px; } .train-hero-right { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; flex-shrink: 0; } .train-hero-right .btn-white { background: #fff; color: var(--primary); } .train-hero-right .btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.3); } .train-hero-right .ring-num small { color: rgba(255,255,255,.75); } .course-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s, border-color .16s; } .course-card:hover { border-color: var(--line-strong); } .course-cover { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; color: #fff; position: relative; } .course-cover svg { width: 20px; height: 20px; } .course-done-badge { margin-left: auto; font-size: 11px; font-weight: 600; background: rgba(var(--primary-rgb),.10); color: var(--primary); padding: 2px 9px; border-radius: var(--r-pill); } .course-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .course-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .course-name { font-weight: 700; font-size: 14.5px; line-height: 1.4; } .course-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; flex: 1; } .course-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } /* ============ 工作台 · WiseMe Pilot 驾驶舱 ============ */ .cockpit { position: relative; overflow: hidden; background: radial-gradient(1100px 480px at 75% -10%, rgba(var(--primary-rgb),.10), transparent 62%), radial-gradient(700px 300px at 10% 110%, rgba(var(--primary-rgb),.05), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%); border-radius: 18px; border: 1px solid var(--line); padding: 26px 28px 30px; color: #1e293b; box-shadow: 0 24px 60px -28px rgba(15,23,42,.18), inset 0 1px 0 #fff; } .cockpit-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%); } .cockpit-glow { position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--primary-rgb),.14), transparent 65%); } .cockpit-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cockpit-greeting { font-size: 12.5px; color: var(--primary); font-weight: 700; letter-spacing: .04em; } .cockpit-headline { font-size: 27px; font-weight: 800; letter-spacing: -.5px; margin-top: 5px; color: #0f172a; } .cockpit-sub { font-size: 13px; color: var(--text-3); margin-top: 6px; } .cockpit-sub b { color: var(--text-1); } .cockpit-actions { display: flex; gap: 10px; position: relative; z-index: 2; } .cockpit-btn-primary { background: var(--primary); color: #fff; border: 1px solid transparent; box-shadow: 0 8px 22px -8px rgba(var(--primary-rgb),.5); } .cockpit-btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); } .cockpit-btn-ghost { background: #fff; color: var(--text-2); border: 1px solid var(--line-strong); } .cockpit-btn-ghost:hover { background: #f4f4f5; color: var(--text-1); } .cockpit-main { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 18px; flex-wrap: wrap; } .cockpit-speed { flex-shrink: 0; display: grid; place-items: center; filter: drop-shadow(0 12px 30px rgba(var(--primary-rgb),.25)); } .cockpit-hud { flex: 1; min-width: 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hud-cell { position: relative; overflow: hidden; background: linear-gradient(160deg, #ffffff, #fafbfe); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; box-shadow: 0 10px 26px -14px rgba(15,23,42,.16); transform: perspective(900px) rotateX(3deg); transform-origin: bottom; transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s; display: flex; flex-direction: column; gap: 3px; } .hud-cell:hover { transform: perspective(900px) rotateX(0deg) translateY(-3px); box-shadow: 0 16px 34px -14px rgba(var(--primary-rgb),.28); } .hud-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.65), transparent); } .hud-label { font-size: 11.5px; color: var(--text-3); font-weight: 700; letter-spacing: .05em; } .hud-value { font-size: 30px; font-weight: 800; line-height: 1.1; color: #0f172a; } .hud-value.down { color: #dc2626; } .hud-sub { font-size: 11px; color: var(--text-3); } /* HUD 卡右侧动态立体装饰 */ .hud-deco { position: absolute; right: 14px; top: 50%; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(var(--primary-rgb),.16), rgba(var(--primary-rgb),.03)); border: 1px solid rgba(var(--primary-rgb),.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px -10px rgba(var(--primary-rgb),.4); color: var(--primary); transform: translateY(-50%) perspective(600px) rotateY(-16deg) rotateX(5deg); transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; pointer-events: none; } .hud-deco::before { content: ""; position: absolute; inset: 6px; border-radius: 12px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), transparent 55%); opacity: .5; } .hud-deco svg { width: 26px; height: 26px; position: relative; z-index: 1; } .hud-cell:hover .hud-deco { transform: translateY(-50%) perspective(600px) rotateY(-6deg) rotateX(2deg) scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 30px -10px rgba(var(--primary-rgb),.55); } .hud-deco-inner { display: grid; place-items: center; position: relative; z-index: 1; } .deco-users .hud-deco-inner { animation: hudFloat 3.4s ease-in-out infinite; } .deco-fire .hud-deco-inner { animation: hudPulse 2.6s ease-in-out infinite; } .deco-flag .hud-deco-inner { animation: hudSway 3.6s ease-in-out infinite; } .deco-trend .hud-deco-inner { animation: hudRise 2.8s ease-in-out infinite; } @keyframes hudFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes hudPulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } } @keyframes hudSway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } } @keyframes hudRise { 0%,100% { transform: translateY(4px); opacity: .8; } 50% { transform: translateY(-5px); opacity: 1; } } .cockpit-section { position: relative; margin-top: 24px; } .cockpit-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .cockpit-sec-title { font-size: 15.5px; font-weight: 800; color: var(--text-1); letter-spacing: -.1px; } .cockpit-route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cockpit-route-stop { position: relative; background: linear-gradient(165deg, #ffffff, #fafbfe); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 14px 34px -16px rgba(15,23,42,.16); transform: perspective(900px) rotateX(4deg); transform-origin: bottom; transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .2s; } .cockpit-route-stop:hover { transform: perspective(900px) rotateX(0deg) translateY(-4px); border-color: rgba(var(--primary-rgb),.4); box-shadow: 0 20px 44px -16px rgba(var(--primary-rgb),.3); } .route-pin { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 60%), var(--primary); box-shadow: 0 0 0 5px rgba(var(--primary-rgb),.15), 0 6px 16px -4px rgba(var(--primary-rgb),.6); } .route-title { font-size: 14px; font-weight: 700; color: var(--text-1); margin-top: 12px; line-height: 1.45; } .route-desc { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.6; } .route-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .route-tag { font-size: 11px; color: var(--text-2); background: #f4f4f5; border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; } .cockpit-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: start; } .cockpit-panel { position: relative; background: linear-gradient(170deg, #ffffff, #fafbfe); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 12px; box-shadow: 0 16px 38px -18px rgba(15,23,42,.16); overflow: hidden; } .cockpit-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.7), transparent); } .cockpit-panel-title { font-size: 13.5px; font-weight: 800; color: var(--text-1); letter-spacing: .01em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .cockpit-legend .legend-item { color: var(--text-2); } .cockpit-legend .legend-item b { color: var(--text-1); } /* 深色面板内的列表适配 */ .cockpit .hist-row { border-color: var(--line); padding: 12px 4px; } .cockpit .hist-row:hover { background: #fafafa; } .cockpit .hist-row .client-name { color: var(--text-1); } .cockpit .hist-row .client-meta { color: var(--text-3); } .cockpit .hist-row .hint, .cockpit .hist-row .muted { color: var(--text-3); } .cockpit .hist-row .badge-gray { background: #f4f4f5; color: var(--text-2); } .cockpit .hist-row .badge-blue { background: #f4f4f5; color: var(--text-2); } .cockpit-client { border-bottom: 1px solid var(--line); padding: 12px 4px; border-radius: 0; } .cockpit-client:hover { background: #fafafa; } .cockpit-client .client-name { color: var(--text-1); } .cockpit-client .client-meta { color: var(--text-3); } .cockpit-empty { color: var(--text-3); } /* 响应式 */ @media (max-width: 1180px) { .cockpit-route { grid-template-columns: 1fr; } .cockpit-grid-3 { grid-template-columns: 1fr; } } /* ============ 设置页 ============ */ .provider-card { position: relative; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 13px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; } .provider-card:hover { border-color: var(--line-strong); transform: translateY(-1px); } .provider-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); background: rgba(var(--primary-rgb),.04); } .pc-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-1); } .pc-desc { display: block; font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.45; } .pc-check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; } /* 滑杆 */ .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: #e4e4e7; outline: none; cursor: pointer; margin: 10px 0 4px; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb),.4); transition: transform .12s; } .slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb),.4); } /* 默认主题选择 */ .theme-pick { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .15s; } .theme-pick:hover { border-color: var(--line-strong); } .theme-pick.selected { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb),.05); } /* 新增客户：特质维度滑杆 */ .dim-sliders { display: flex; flex-direction: column; gap: 9px; } .dim-slider-row { display: flex; align-items: center; gap: 12px; } .ds-label { width: 64px; font-size: 12.5px; color: var(--text-2); font-weight: 600; flex-shrink: 0; } .dim-slider-row .slider { flex: 1; margin: 6px 0; } .ds-val { width: 34px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--primary); } /* ============ 客户详情 ============ */ .detail-card { position: relative; animation: cardIn .5s cubic-bezier(.2,.7,.3,1) backwards; transition: box-shadow .22s, transform .22s; } .detail-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.55), transparent); opacity: .7; } .detail-main > .detail-card:nth-child(1) { animation-delay: .02s; } .detail-main > .detail-card:nth-child(2) { animation-delay: .08s; } .detail-main > .detail-card:nth-child(3) { animation-delay: .14s; } .detail-main > .detail-card:nth-child(4) { animation-delay: .2s; } .detail-side > .detail-card:nth-child(1) { animation-delay: .1s; } .detail-side > .detail-card:nth-child(2) { animation-delay: .16s; } .detail-side > .detail-card:nth-child(3) { animation-delay: .22s; } .detail-card.folded { box-shadow: 0 2px 10px -6px rgba(15,23,42,.10); } .detail-card.folded::before { opacity: .35; } .detail-fold-head { padding: 16px 24px 4px; } .fold-toggle { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f4f4f5; border: 1px solid var(--line); color: var(--text-2); cursor: pointer; transition: background .15s, transform .2s, color .15s; } .fold-toggle:hover { background: #e4e4e7; color: var(--text-1); } .fold-toggle svg { width: 14px; height: 14px; transition: transform .25s cubic-bezier(.2,.7,.3,1); } .detail-card.folded .fold-toggle svg { transform: rotate(-90deg); } /* 模拟拜访悬浮按钮 */ .sim-fab { position: fixed; right: 30px; top: 90px; z-index: 70; display: flex; align-items: center; gap: 8px; background: var(--primary); color: #fff; border: none; cursor: pointer; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .01em; box-shadow: 0 12px 30px -8px rgba(var(--primary-rgb),.65), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; animation: simFabIn .5s cubic-bezier(.2,.8,.3,1.1) backwards; } @keyframes simFabIn { from { opacity: 0; transform: translateY(-14px) scale(.92); } to { opacity: 1; transform: none; } } .sim-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px -8px rgba(var(--primary-rgb),.8); } .sim-fab:active { transform: translateY(0) scale(1); } /* ============ 推荐产品 ============ */ .offer-row { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fafafa; transition: border .15s; } .offer-row:hover { border-color: var(--line-strong); } .offer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .offer-tag { font-size: 11px; color: var(--text-3); margin-top: 5px; } .offer-reason { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6; } /* ============ 时间线 ============ */ .timeline { position: relative; padding-left: 22px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); border-radius: 2px; } .tl-item { position: relative; padding: 0 0 22px 12px; } .tl-item:last-child { padding-bottom: 2px; } .tl-item::before { content: ""; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); } .tl-item.green::before { border-color: var(--success); } .tl-item.orange::before { border-color: var(--warn); } .tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tl-title { font-weight: 700; font-size: 13.5px; } .tl-time { font-size: 11.5px; color: var(--text-3); } .tl-body { font-size: 12.5px; color: var(--text-2); margin-top: 5px; line-height: 1.55; } /* ============ 弹窗 ============ */ .modal-mask { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.42); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fadeIn .18s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); animation: modalIn .24s cubic-bezier(.2,.8,.3,1.1); } .modal-wide { max-width: 780px; } .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-items: start; } .modal-grid .mg-col { display: flex; flex-direction: column; gap: 2px; } @media (max-width: 720px) { .modal-grid { grid-template-columns: 1fr; } } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; border-radius: 20px 20px 0 0; } .modal-title { font-size: 16px; font-weight: 800; } .modal-body { padding: 24px 26px; } .modal-foot { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 10px; } /* ============ Toast ============ */ #toast-root { position: fixed; top: 76px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-md); font-weight: 600; font-size: 13.5px; animation: toastIn .3s cubic-bezier(.2,.8,.3,1.1); max-width: 340px; } .toast svg { width: 18px; height: 18px; flex-shrink: 0; } .toast.ok svg { color: var(--success); } .toast.info svg { color: var(--primary); } .toast.out { animation: toastOut .3s ease forwards; } @keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(30px); } } /* ============ 欢迎横幅 ============ */ .hero { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--brand-grad); color: #fff; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 26px; box-shadow: 0 18px 40px -14px rgba(var(--primary-rgb),.5); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; } .hero::before { width: 260px; height: 260px; right: -60px; top: -120px; } .hero::after { width: 160px; height: 160px; right: 140px; bottom: -90px; background: rgba(255,255,255,.07); } .hero h2 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; } .hero p { margin-top: 8px; font-size: 14px; opacity: .9; max-width: 520px; line-height: 1.6; } .hero .hero-actions { display: flex; gap: 12px; position: relative; z-index: 1; flex-shrink: 0; } .hero .btn-white { background: #fff; color: var(--primary); } .hero .btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.3); } .hero .btn-glass { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); } .hero .btn-glass:hover { background: rgba(255,255,255,.26); } .hero-tags { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; } .hero-tag { font-size: 12px; font-weight: 600; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: 4px 11px; border-radius: var(--r-pill); backdrop-filter: blur(4px); } /* ============ 雷达图 ============ */ .radar-wrap { position: relative; } .radar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; } .radar-center .rc-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; } .radar-center .rc-label { font-size: 11.5px; color: var(--text-3); font-weight: 600; } .legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 500; } .legend-dot { width: 9px; height: 9px; border-radius: 3px; } /* ============ 维度行 ============ */ .dim-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line); } .dim-row:last-child { border-bottom: none; } .dim-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #f4f4f5; color: #52525b; flex-shrink: 0; } .dim-icon svg { width: 17px; height: 17px; } .dim-info { flex: 1; min-width: 0; } .dim-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; } .dim-name .dim-score { margin-left: auto; font-weight: 800; font-size: 14px; } .dim-name .dim-score small { font-weight: 600; color: var(--text-3); font-size: 11px; } .dim-bar { margin-top: 6px; } .dim-hint { font-size: 11.5px; color: var(--text-3); margin-top: 5px; } .dim-tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } .dim-tag.low { background: var(--danger-soft); color: var(--danger); } .dim-tag.mid { background: var(--warn-soft); color: #d97706; } .dim-tag.high { background: var(--success-soft); color: var(--success); } /* ============ 演练 ============ */ .grid-4c { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-2c { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .scenario-card { cursor: pointer; transition: all .18s; overflow: hidden; } .scenario-card:hover { border-color: var(--line-strong); } .scenario-cover { height: 42px; display: grid; place-items: center; position: relative; } .scenario-cover svg { width: 17px; height: 17px; opacity: .8; } .scenario-body { padding: 18px 20px; } .scenario-name { font-weight: 700; font-size: 14.5px; } .scenario-desc { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .scenario-meta { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .persona-card { border: 2px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer; transition: all .16s; background: #fff; } .persona-card:hover { border-color: var(--line-strong); } .persona-card.selected { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12); } .persona-head { display: flex; align-items: center; gap: 10px; } .persona-name { font-weight: 700; font-size: 13.5px; } .persona-trait { font-size: 11.5px; color: var(--text-3); margin-top: 1px; } .persona-desc { font-size: 12px; color: var(--text-2); margin-top: 9px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .persona-tags { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; } /* 对话区 */ .chat-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* 演练两列布局：左 80% 答题 / 右 20% 评估，固定高度独立滚动 */ .chat-layout { display: flex; gap: 20px; align-items: stretch; height: calc(100vh - 64px - 82px); min-height: 480px; animation: cardIn .45s cubic-bezier(.2,.7,.3,1) backwards; } .chat-col { flex: 0 0 80%; min-width: 0; display: flex; } .chat-col .chat-shell { width: 100%; } .rail-col { flex: 1; min-width: 0; display: flex; } /* 实时评估：右侧固定列 */ .score-rail { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 10px 26px -14px rgba(15,23,42,.18); display: flex; flex-direction: column; overflow: hidden; } .rail-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #fafbfe, #fff); } .rail-head .rail-score { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; } .rail-body { flex: 1; overflow-y: auto; padding: 16px 16px; display: flex; flex-direction: column; gap: 11px; } .rail-body::-webkit-scrollbar { width: 6px; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; border-radius: var(--r-lg) var(--r-lg) 0 0; } .chat-ai-avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; } .chat-ai-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 1.6s infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); } } .chat-ai-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .chat-body { flex: 1; overflow-y: auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; background: radial-gradient(1200px 400px at 80% -10%, rgba(var(--primary-rgb),.05), transparent), #fbfcfe; } .msg { display: flex; gap: 12px; max-width: 76%; animation: msgIn .3s cubic-bezier(.2,.7,.3,1); } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .msg.user { align-self: flex-end; flex-direction: row-reverse; } .msg-bubble { padding: 11px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.65; position: relative; } .msg.ai .msg-bubble { background: #fff; border: 1px solid var(--line); border-top-left-radius: 5px; box-shadow: var(--shadow-sm); } .msg.user .msg-bubble { background: var(--brand-grad); color: #fff; border-top-right-radius: 5px; box-shadow: 0 6px 16px -6px rgba(var(--primary-rgb),.5); } .msg-label { font-size: 10.5px; color: var(--text-3); margin-top: 4px; display: flex; gap: 8px; } .msg.user .msg-label { justify-content: flex-end; } .cursor-blink { display: inline-block; width: 7px; height: 15px; background: var(--primary); border-radius: 2px; margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* 快捷选项 */ .options { display: flex; flex-direction: column; gap: 8px; max-width: 78%; align-self: flex-end; width: 100%; } .opt { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 13px; padding: 11px 14px; cursor: pointer; transition: all .14s; font: inherit; font-size: 13px; text-align: left; color: var(--text-1); line-height: 1.5; } .opt:hover { border-color: rgba(var(--primary-rgb),.4); background: rgba(var(--primary-rgb),.05); transform: translateX(-2px); } .opt .opt-key { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; background: var(--brand-soft); color: var(--primary); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; } /* 实时评估：右侧固定列（浮动与折叠样式已移除） */ .rail-dim { display: flex; align-items: center; gap: 8px; } .rail-dim .dim-name-sm { width: 74px; font-size: 11.5px; color: var(--text-2); font-weight: 600; flex-shrink: 0; } .rail-dim .bar { flex: 1; } .rail-dim .rail-num { width: 26px; text-align: right; font-size: 11.5px; font-weight: 700; } .rail-feedback { background: #fafafa; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #52525b; line-height: 1.6; } .rail-feedback.good { border-left-color: var(--success); background: var(--success-soft); } .rail-feedback.warn { border-left-color: var(--warn); background: var(--warn-soft); } .rail-feedback b { color: var(--text-1); } /* 演练报告 */ .report-hero { border-radius: var(--r-lg); padding: 24px 26px; color: #fff; background: var(--brand-grad); box-shadow: 0 18px 40px -14px rgba(var(--primary-rgb),.5); position: relative; overflow: hidden; } .report-hero::after { content: ""; position: absolute; right: -50px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.09); } .report-score-big { font-size: 46px; font-weight: 800; letter-spacing: -2px; line-height: 1; } .verdict { font-weight: 700; font-size: 15px; margin-top: 6px; } .verdict-sub { font-size: 12.5px; opacity: .88; margin-top: 4px; line-height: 1.55; } .utterance { display: flex; gap: 10px; } .utt-role { width: 52px; flex-shrink: 0; font-size: 11px; font-weight: 700; padding-top: 3px; } .utt-role.ai { color: var(--primary); } .utt-role.user { color: var(--success); } .utt-text { flex: 1; font-size: 13px; line-height: 1.6; color: var(--text-1); } .utt-note { margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .utt-comment { font-size: 12px; color: var(--text-2); background: #f8faff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; line-height: 1.55; flex: 1; min-width: 200px; } /* 演练报告：浅色虚线割线 */ .utt-group { border-bottom: 1px dashed var(--line); padding-bottom: 20px; } .utt-group:last-child { border-bottom: none; padding-bottom: 0; } .ab-delta-row { border-bottom: 1px dashed var(--line); padding-bottom: 9px; } .ab-delta-row:last-child { border-bottom: none; padding-bottom: 0; } /* 空状态 */ .empty { padding: 56px 24px; text-align: center; color: var(--text-3); } .empty svg { width: 52px; height: 52px; opacity: .4; margin-bottom: 12px; } .empty .empty-title { font-weight: 700; font-size: 15px; color: var(--text-2); } .empty .empty-sub { font-size: 12.5px; margin-top: 5px; } /* 训练计划卡 */ .plan-card { display: flex; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: all .16s; } .plan-card:hover { border-color: var(--line-strong); } .plan-num { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: #f4f4f5; color: #52525b; } .plan-body { flex: 1; min-width: 0; } .plan-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .plan-desc { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.55; } .plan-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; } /* 搜索下拉 */ .search-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; z-index: 60; animation: modalIn .18s cubic-bezier(.2,.8,.3,1); }.search-pop-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; } .search-pop-item:hover { background: #fafafa; } .search-pop-item .sp-name { font-weight: 600; font-size: 13px; } .search-pop-item .sp-sub { font-size: 11px; color: var(--text-3); } .search-pop-head { padding: 9px 14px; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; border-bottom: 1px solid var(--line); } /* 演练历史卡 */ .hist-row { display: flex; align-items: center; gap: 16px; padding: 17px 22px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .13s; } .hist-row:last-child { border-bottom: none; } .hist-row:hover { background: #fafafa; } .hist-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; } .hist-icon svg { width: 18px; height: 18px; } /* 无障碍焦点 */ .btn:focus-visible, .nav-item:focus-visible, .opt:focus-visible, .input:focus-visible, .tag:focus-visible, .icon-btn:focus-visible, .persona-card:focus-visible, .scenario-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* 响应式 */ @media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-main, .grid-main-rev { grid-template-columns: 1fr; } .grid-4c { grid-template-columns: repeat(2, 1fr); } .grid-2c { grid-template-columns: 1fr; } .course-grid { grid-template-columns: 1fr; } .chat-layout { flex-direction: column; height: auto; } .chat-col { flex: none; width: 100%; } .chat-col .chat-shell { height: 60vh; } .rail-col { width: 100%; } .rail-body { max-height: 280px; } } @media (max-width: 900px) { .sidebar { display: none; } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .search-box { width: 160px; } .hero { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .grid-4c { grid-template-columns: 1fr; } }