/* ============================================================ 配色方案：通过 切换 默认暗色（对齐 duneq.ai 主色 #33B5E5）｜ light 亮色 ｜ aurora 极光青紫 ============================================================ */ :root, :root[data-theme="dark"] { --bg: #040a18; --bg-soft: #081226; --card: #0c1a36; --accent: #3b9fe0; --accent2: #5cc4ff; --text: #ffffff; --muted: #a9b7d1; --border: #182a4d; --danger: #ff6b6b; --ok: #3b9fe0; --overlay: rgba(2,6,16,0.65); --shadow: 0 10px 30px rgba(0,0,0,0.4); --grad: linear-gradient(90deg, var(--accent), var(--accent2)); --on-accent: #ffffff; --nav-bg: rgba(4,10,24,0.85); --hero-glow: radial-gradient(900px 500px at 80% 30%, rgba(59,159,224,0.2), transparent 60%), radial-gradient(700px 400px at 10% 60%, rgba(59,159,224,0.09), transparent 60%); --fw-purple-rgb: 59,159,224; --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; } /* 亮色主题（商务靛蓝白） */ :root[data-theme="light"] { --bg: #f4f7fc; --bg-soft: #ffffff; --card: #ffffff; --accent: #2f6bd8; --accent2: #4f6bff; --text: #16203a; --muted: #5c6b8a; --border: #e2e8f2; --danger: #e5484d; --ok: #2f6bd8; --overlay: rgba(20,30,50,0.45); --shadow: 0 10px 30px rgba(20,40,80,0.10); --grad: linear-gradient(90deg, var(--accent), var(--accent2)); --on-accent: #ffffff; --nav-bg: rgba(255,255,255,0.88); --hero-glow: radial-gradient(900px 500px at 80% 30%, rgba(47,107,216,0.16), transparent 60%); --fw-purple-rgb: 14,165,164; --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; } /* 极光紫罗兰主题（量子紫，与暗色电光蓝区分：亮紫主色 + 深紫氛围） */ :root[data-theme="aurora"] { --bg: #0a0716; --bg-soft: #130e2a; --card: #1a1240; --accent: #8b5cf6; --accent2: #7c6ef5; --text: #f1edff; --muted: #a99fd0; --border: #312754; --danger: #ff7a9a; --ok: #8b5cf6; --overlay: rgba(10,7,22,0.62); --shadow: 0 10px 34px rgba(110,70,220,0.28); --grad: linear-gradient(90deg, var(--accent), var(--accent2)); --on-accent: #0f0920; --nav-bg: rgba(10,7,22,0.85); --hero-glow: radial-gradient(900px 500px at 80% 30%, rgba(139,92,246,0.24), transparent 60%); --fw-purple-rgb: 139,92,246; --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; } /* 翡翠绿主题（商务墨玉绿，降饱和、更深沉） */ :root[data-theme="jade"] { --bg: #06110c; --bg-soft: #0a2117; --card: #0d2c1e; --accent: #2fb987; --accent2: #1f9d77; --text: #e6f7f0; --muted: #93b9a9; --border: #164a37; --danger: #ff6b6b; --ok: #2fb987; --overlay: rgba(3,14,10,0.62); --shadow: 0 10px 34px rgba(31,157,119,0.26); --grad: linear-gradient(90deg, var(--accent), var(--accent2)); --on-accent: #032018; --nav-bg: rgba(5,16,11,0.85); --hero-glow: radial-gradient(900px 500px at 80% 30%, rgba(47,185,135,0.2), transparent 60%); --fw-purple-rgb: 47,185,135; --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; } /* 落日琥珀主题（商务鎏金铜，低饱和金棕，沉稳高端） */ :root[data-theme="sunset"] { --bg: #0e0a05; --bg-soft: #1c1409; --card: #241a0a; --accent: #c9a227; --accent2: #b8912f; --text: #f7efdc; --muted: #c0ad8d; --border: #453415; --danger: #ff6b6b; --ok: #c9a227; --overlay: rgba(14,10,5,0.62); --shadow: 0 10px 34px rgba(201,162,39,0.22); --grad: linear-gradient(90deg, var(--accent), var(--accent2)); --on-accent: #221500; --nav-bg: rgba(14,10,5,0.85); --hero-glow: radial-gradient(900px 500px at 80% 30%, rgba(201,162,39,0.2), transparent 60%); --fw-purple-rgb: 201,162,39; --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* 主题切换器（下拉） */ .theme-switch { position: relative; display: inline-block; } .ts-current { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 6px 14px; font-size: 14px; cursor: pointer; font-family: inherit; transition: border-color .2s, background .2s; } .ts-current:hover { border-color: var(--accent); } .ts-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .ts-dot.sw-dark { background: linear-gradient(135deg,#0a1530,#3b9fe0); } .ts-dot.sw-light { background: linear-gradient(135deg,#ffffff,#2f6bd8); } .ts-dot.sw-aurora { background: linear-gradient(135deg,#1a1240,#8b5cf6); } .ts-dot.sw-jade { background: linear-gradient(135deg,#0a2117,#2fb987); } .ts-dot.sw-sunset { background: linear-gradient(135deg,#241a0a,#c9a227); } .ts-caret { font-size: 11px; color: var(--muted); transition: transform .2s; } .ts-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 120px; list-style: none; margin: 0; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 60; } .ts-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .ts-menu li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 14px; transition: background .15s; } .ts-menu li:hover, .ts-menu li.active { background: var(--overlay); color: var(--accent); } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; } a { color: inherit; text-decoration: none; } /* 输入聚焦高亮（配色感知） */ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } /* ---------- 导航 ---------- */ html { scroll-behavior: smooth; } .site-nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; } .brand { font-size: 22px; font-weight: 600; letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .brand-logo { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; object-fit: contain; } .brand-q { color: var(--accent); } .brand-zh { color: var(--text); font-size: 14px; font-weight: 400; } /* 右侧整体菜单：导航链接 + 主题切换 */ .nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; } .nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; } .nav-links a { color: var(--muted); transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--text); } /* 亮色主题下导航链接文字偏浅，加强对比度，保证清晰可读 */ :root[data-theme="light"] .nav-links a { color: var(--text); } :root[data-theme="light"] .nav-links a:hover { color: var(--accent); } .nav-user { color: var(--accent); font-size: 14px; } .btn-nav { border: 1px solid var(--accent); color: var(--accent) !important; padding: 6px 16px; border-radius: 20px; font-size: 14px; transition: background .2s, color .2s; } .btn-nav:hover { background: var(--accent); color: var(--on-accent) !important; } .btn-nav:hover { background: var(--accent); color: var(--on-accent) !important; } .nav-cta { background: var(--accent); color: #fff !important; padding: 8px 16px; border-radius: 4px; font-size: 14px; } .nav-cta:hover { background: var(--accent2); } /* ---------- 通用 ---------- */ main { min-height: 70vh; } .site-footer { padding: 30px; color: var(--muted); border-top: 1px solid var(--border); font-size: 14px; margin-top: 60px; } .footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .section-divider { width: 60px; height: 4px; background: var(--accent); margin: 16px 0 40px; border-radius: 2px; } /* ---------- Hero ---------- */ /* ---------- Hero（左侧文字 + 右侧原子轨道动画，对齐官网）---------- */ .hero { position: relative; padding: 130px 24px 110px; background: var(--hero-glow); overflow: hidden; } .hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } .hero-text h1 { font-size: 35px; font-weight: 400; color: var(--accent); margin-bottom: 20px; letter-spacing: .5px; } .hero-text p { font-size: 16px; color: var(--muted); margin-bottom: 32px; max-width: 460px; } .btn-primary { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; padding: 12px 24px; border-radius: 4px; font-size: 15px; transition: background .2s; } .btn-primary:hover { background: var(--accent2); } /* 原子轨道动画 */ .atom { position: relative; width: 320px; height: 320px; margin: 0 auto; } .atom-core { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 24px var(--accent); } .atom-orbit { position: absolute; inset: 0; margin: auto; border: 1px solid rgba(51,181,229,0.55); border-radius: 50%; } .atom-orbit.o1 { width: 130px; height: 130px; animation: spin1 6s linear infinite; } .atom-orbit.o2 { width: 220px; height: 220px; animation: spin2 9s linear infinite; } .atom-orbit.o3 { width: 300px; height: 300px; animation: spin1 12s linear infinite; } .atom-electron { position: absolute; top: 50%; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: translateY(-50%); } @keyframes spin1 { to { transform: rotate(360deg); } } @keyframes spin2 { to { transform: rotate(-360deg); } } @media (max-width: 768px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-text p { margin-left: auto; margin-right: auto; } .atom { width: 240px; height: 240px; } .atom-orbit.o1 { width: 100px; height: 100px; } .atom-orbit.o2 { width: 170px; height: 170px; } .atom-orbit.o3 { width: 230px; height: 230px; } } /* ---------- 板块标题（居中 + 青色下划短线）---------- */ .section-title { position: relative; text-align: center; color: var(--text); font-size: 28px; font-weight: 700; margin-bottom: 14px; letter-spacing: 1px; } .section-title::after { content: ''; display: block; width: 50px; height: 3px; background: var(--accent); margin: 14px auto 0; border-radius: 2px; } .section { padding: 70px 24px; max-width: 1100px; margin: 0 auto; scroll-margin-top: 88px; } /* ---------- 核心技术优势（折叠面板，手风琴）---------- */ .tech-accordion { display: flex; flex-direction: column; gap: 18px; } .ta-item { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: border-color .2s; } .ta-item:hover { border-color: var(--accent); } .ta-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; background: transparent; border: none; cursor: pointer; color: var(--text); font-family: inherit; text-align: left; } .ta-title { color: var(--accent); font-size: 18px; font-weight: 700; } .ta-icon { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: transform .25s ease, background .2s, color .2s; flex: 0 0 auto; } .ta-item.open .ta-icon { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); } .ta-body { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s ease; padding: 0 26px; } .ta-item.open .ta-body { max-height: 600px; padding: 0 26px 22px; } .ta-lead { color: var(--text); font-size: 15px; margin-bottom: 16px; } .ta-block { margin-bottom: 12px; } .ta-block:last-child { margin-bottom: 0; } .ta-block .sub-title { color: var(--accent); font-size: 14px; margin-bottom: 4px; font-weight: 600; } .ta-block p { color: var(--muted); font-size: 14.5px; } @media (max-width: 768px) { .ta-head { padding: 16px 18px; } .ta-title { font-size: 16px; } .ta-item.open .ta-body { padding: 0 18px 18px; } } /* ---------- 联系我们（胶囊形按钮）---------- */ .contact-pill { display: inline-flex; align-items: center; gap: 10px; margin: 6px auto 0; padding: 10px 22px; border: 1px solid var(--accent); border-radius: 999px; color: var(--text); background: transparent; font-size: 15px; transition: background .2s, color .2s, transform .2s; } .contact-pill svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; transition: color .2s; } .contact-pill:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-2px); } .contact-pill:hover svg { color: var(--on-accent); } .section#contact { text-align: center; } .section#contact .contact-pill { display: inline-flex; } /* ---------- 首页区块 ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); transition: transform .2s, border-color .2s; display: flex; gap: 18px; align-items: flex-start; } .feature-card:hover { transform: translateY(-4px); border-color: var(--accent); } .feature-card .icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: transparent; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); } .feature-card .icon svg { width: 26px; height: 26px; } .feature-card .fc-body { flex: 1; } .feature-card h3 { color: var(--accent); font-size: 18.2px; margin-bottom: 8px; font-weight: 700; } .feature-card p { color: var(--muted); font-size: 14.5px; } .feature-card .sub-title { color: var(--accent); font-size: 14px; margin-top: 10px; margin-bottom: 4px; font-weight: 600; } .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); gap: 24px; } .team-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; gap: 18px; box-shadow: var(--shadow); } .avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent2)); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size: 26px; font-weight:700; flex: 0 0 auto; } .team-card h3 { font-size: 18.2px; color: var(--text); } .team-card .role { color: var(--accent); font-size: 14px; margin-bottom: 10px; } .team-card p { color: var(--muted); font-size: 14px; } /* ---------- 飞轮看板 ---------- */ .flywheel-wrap { max-width: 1200px; margin: 0 auto; padding: 50px 24px; } .project-block { margin-bottom: 60px; background: var(--bg-soft); border:1px solid var(--border); border-radius: 16px; padding: 30px; box-shadow: var(--shadow); } .project-head h2 { font-size: 26px; margin-bottom: 6px; } .project-head .lead { color: var(--accent); font-size: 15px; } .project-summary { color: var(--muted); margin: 14px 0 24px; } .wheel { position: relative; width: 320px; height: 320px; margin: 10px auto 40px; border-radius: 50%; background: radial-gradient(circle, rgba(79,209,197,0.08), transparent 70%); border: 1px dashed var(--border); } .wheel-center { position: absolute; inset: 0; margin: auto; width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent2)); color:var(--on-accent); display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; font-size: 15px; padding: 10px; } .wheel-node { position: absolute; width: 110px; text-align:center; font-size: 13px; background: var(--card); border:1px solid var(--accent); border-radius: 10px; padding: 8px; color: var(--text); } .nodes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 22px; } .node-card { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); transition: transform .2s, border-color .2s; } .node-card:hover { transform: translateY(-3px); border-color: var(--accent); } .node-card h3 { font-size: 18px; color: var(--accent); margin-bottom: 8px; } .node-card .desc { color: var(--muted); font-size: 14px; margin-bottom: 14px; } .timeline { border-left: 2px solid var(--border); padding-left: 18px; margin: 14px 0; } .tl-item { position: relative; margin-bottom: 18px; } .tl-item::before { content:''; position:absolute; left:-25px; top:4px; width:10px; height:10px; border-radius:50%; background: var(--accent); } .tl-item .tl-title { font-weight: 600; font-size: 15px; } .tl-item .tl-meta { font-size: 12px; color: var(--muted); margin: 2px 0 6px; } .tl-item .tl-content { font-size: 14px; color: var(--text); } .tl-item .tl-charts { font-size: 13px; color: var(--accent2); margin-top: 6px; } .doc-list { margin-top: 10px; font-size: 13px; } .doc-list a { color: var(--accent2); } .add-form { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 14px; } .add-form input, .add-form textarea, .add-form .rte { width: 100%; background: var(--bg); border:1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; font-family: inherit; } .add-form button { background: var(--accent); color:var(--on-accent); border:none; padding:8px 18px; border-radius: 8px; font-weight:600; cursor:pointer; } .empty { color: var(--muted); font-style: italic; } /* ---------- 登录 ---------- */ .auth-wrap { max-width: 420px; margin: 80px auto; background: var(--card); border:1px solid var(--border); border-radius: 16px; padding: 36px; box-shadow: var(--shadow); } .auth-wrap h2 { text-align: center; margin-bottom: 6px; } .auth-wrap .sub { text-align:center; color: var(--muted); margin-bottom: 24px; font-size: 14px; } .auth-wrap label { display:block; font-size: 14px; margin-bottom: 6px; color: var(--muted); } .auth-wrap input { width:100%; background: var(--bg); border:1px solid var(--border); color: var(--text); border-radius: 8px; padding: 11px 12px; margin-bottom: 16px; font-size: 15px; } .auth-wrap .btn-primary { width:100%; border:none; cursor:pointer; padding: 12px; } .auth-error { color: var(--danger); text-align:center; margin-bottom: 14px; font-size: 14px; } .auth-hint { text-align:center; color: var(--muted); font-size: 13px; margin-top: 16px; } /* ---------- 后台 ---------- */ .admin-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 24px; } .admin-head { display:flex; justify-content: space-between; align-items:center; margin-bottom: 24px; } .admin-nav { display:flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; } .admin-nav a { padding: 8px 18px; border:1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 14px; } .admin-nav a.active { border-color: var(--accent); color: var(--accent); } .stat-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: var(--card); border:1px solid var(--border); border-radius: 12px; padding: 24px; text-align:center; box-shadow: var(--shadow); } .stat-card .num { font-size: 34px; font-weight: 800; color: var(--accent); } .stat-card .label { color: var(--muted); font-size: 14px; } .table { width:100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; } .table th, .table td { padding: 12px 14px; text-align:left; border-bottom: 1px solid var(--border); font-size: 14px; } .table th { background: var(--bg-soft); color: var(--muted); font-weight: 600; } /* 下载记录：筛选条 */ .dl-filter { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 18px; } .dl-filter input[type=text], .dl-filter select, .dl-filter input[type=date] { background: var(--bg); border:1px solid var(--border); color: var(--text); border-radius:8px; padding:8px 10px; font-size:13px; min-width:150px; } .dl-filter input[type=text] { flex:1; min-width:200px; } .dl-filter input[type=date] { min-width:140px; } .dl-tilde { color: var(--muted); } .dl-filter .btn-sm { white-space:nowrap; } .pager { display:flex; align-items:center; gap:14px; margin-top:14px; font-size:13px; color:var(--muted); } .pager a { color:var(--accent); text-decoration:none; padding:6px 12px; border:1px solid var(--border); border-radius:8px; } .pager a:hover { border-color:var(--accent); } .pager .muted { color:var(--muted); padding:6px 12px; } .dash-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:760px){ .dash-cols { grid-template-columns:1fr; } } .dash-list { list-style:none; margin:0; padding:0; } .dash-list li { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; } .dash-list li:last-child { border-bottom:none; } .dash-list li .m { color:var(--muted); font-size:12px; white-space:nowrap; } .dash-list a { color:var(--text); text-decoration:none; } .dash-list a:hover { color:var(--accent); } .badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; } .badge.ok { background: rgba(79,209,197,0.15); color: var(--ok); } .badge.off { background: rgba(255,107,107,0.15); color: var(--danger); } .badge.admin { background: rgba(108,140,255,0.15); color: var(--accent2); } .badge.warn { background: rgba(255,171,0,0.15); color: #ffab00; } .badge.bad { background: rgba(255,107,107,0.15); color: var(--danger); } .badge.invite { background: rgba(var(--fw-purple-rgb),0.18); color: rgb(var(--fw-purple-rgb)); font-weight:600; } .badge.muted { background: rgba(140,140,160,0.15); color: var(--muted); } .form-row { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 14px; } .form-row input, .form-row textarea, .form-row select { width:100%; background: var(--bg); border:1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; } .form-row textarea { min-height: 80px; } .btn-sm { padding: 6px 12px; border-radius: 6px; border:1px solid var(--border); background: var(--bg-soft); color: var(--text); cursor:pointer; font-size: 13px; } .btn-sm.danger { color: var(--danger); border-color: var(--danger); } .btn-sm.ok { color: var(--ok); border-color: var(--ok); } .btn-add { background: var(--accent); color:var(--on-accent); border:none; padding: 10px 20px; border-radius: 8px; font-weight:600; cursor:pointer; } .invite-banner { background: rgba(var(--fw-purple-rgb),0.08); border:1px solid rgba(var(--fw-purple-rgb),0.25); color:var(--text); font-size:13px; line-height:1.6; padding:12px 16px; border-radius:12px; margin-bottom:18px; } .panel { background: var(--card); border:1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow); } .panel h3 { margin-bottom: 16px; font-size: 18px; } .rte-toolbar { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .quill-box { background: var(--bg); border-radius: 0 0 8px 8px; margin-bottom: 14px; min-height: 120px; } .ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--border); } .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: var(--bg-soft); } .ql-container.ql-snow { border-radius: 0 0 8px 8px; } .ql-editor { color: var(--text); min-height: 110px; } .ql-snow .ql-stroke { stroke: var(--muted); } .ql-snow .ql-fill { fill: var(--muted); } .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--accent); } /* ---------- 新增组件样式 ---------- */ .acc-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:8px 16px; margin-bottom:6px; } .acc-check { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text); cursor:pointer; } .acc-check input { accent-color: var(--accent); } /* 人员多选组件 */ .acc-picker { position: relative; } .acc-picker-box { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:42px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); cursor:pointer; } .acc-picker-box:hover { border-color: var(--accent); } .acc-picker-input { flex:1; min-width:140px; border:none; outline:none; background:transparent; color:var(--text); font-size:14px; cursor:pointer; } .acc-tags { display:flex; flex-wrap:wrap; gap:6px; } .acc-tag { display:inline-flex; align-items:center; gap:5px; background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:2px 10px; font-size:13px; } .acc-tag-x { cursor:pointer; font-weight:700; line-height:1; padding:0 2px; color:inherit; opacity:.7; } .acc-tag-x:hover { opacity:1; } .acc-placeholder { color:var(--muted); font-size:13px; } .acc-drop { display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:950; background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden; } .acc-drop-search { padding:8px; border-bottom:1px solid var(--border); } .acc-drop-search input { width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:14px; outline:none; } .acc-drop-search input:focus { border-color: var(--accent); } .acc-drop-list { max-height:220px; overflow-y:auto; padding:6px; } .acc-drop-list .acc-check { padding:7px 8px; border-radius:6px; } .acc-drop-list .acc-check:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); } .acc-empty { padding:16px; text-align:center; color:var(--muted); font-size:13px; } .doc-item { display:inline-flex; align-items:center; gap:4px; } .doc-del { background:none; border:none; color:var(--danger); cursor:pointer; font-size:16px; line-height:1; padding:0 2px; } .tl-ops { float:right; display:inline-flex; gap:6px; } .tl-op { background:var(--bg-soft); border:1px solid var(--border); color:var(--muted); border-radius:5px; font-size:12px; padding:2px 8px; cursor:pointer; } .tl-op.danger { color:var(--danger); border-color:var(--danger); } /* ---------- 移动端适配 ---------- */ .menu-toggle { display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer; } @media (max-width: 768px) { .nav-inner { padding: 0 16px; } .menu-toggle { display:block; } .nav-right { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height .25s ease; } .nav-right.open { max-height: 420px; padding: 8px 16px 16px; } .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .nav-right a, .nav-right .nav-user { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); } .nav-right .theme-switch { padding: 14px 0 6px; justify-content: center; } .nav-right .btn-nav { margin-top: 10px; text-align: center; } .hero { padding: 80px 18px 60px; } .hero h1 { font-size: 32px; } .hero p { font-size: 16px; } .section { padding: 50px 18px; } .section-title { font-size: 24px; } .flywheel-wrap { padding: 30px 14px; } .project-block { padding: 18px; } .wheel { width: 260px; height: 260px; } .nodes-grid { grid-template-columns: 1fr; } .feature-grid, .team { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .acc-grid { grid-template-columns: 1fr; } .auth-wrap { margin: 40px 14px; padding: 24px; } .admin-wrap { padding: 24px 14px; } .admin-nav { gap: 6px; } .admin-nav a { padding: 6px 12px; font-size: 13px; } /* 表格横向滚动 */ .table { display:block; width:100%; overflow-x:auto; white-space:nowrap; } .table thead, .table tbody, .table tr, .table td, .table th { display: revert; } .panel { padding: 16px; } .panel h3 { font-size: 16px; } .btn-add { width:100%; } .tl-ops { float:none; display:flex; margin-top:6px; } #edit-modal > div, #upd-modal > div, #node-modal > div { width: 92vw !important; padding: 18px !important; } .quill-box { min-height: 100px; } } @media (max-width: 480px) { .hero h1 { font-size: 26px; } .wheel { width: 220px; height: 220px; } .wheel-node { width: 90px; font-size: 12px; } } /* ---------- 项目抽屉预览 ---------- */ .click-hint { color: var(--accent); font-size: 14px; margin-top: 10px; } .drawer-nodes { margin-top: 10px; } .drawer-node { background: var(--card); border:1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px; } .drawer-node h3 { color: var(--accent); font-size: 17px; margin-bottom: 6px; } .drawer-node .desc { color: var(--muted); font-size: 14px; margin-bottom: 10px; } .drawer-sub { font-size: 13px; color: var(--muted); margin: 8px 0 4px; font-weight: 600; } .drawer-ul { margin-left: 18px; font-size: 14px; } .drawer-ul a { color: var(--accent2); } .drawer-ul .empty { list-style: none; margin-left: -18px; font-style: italic; } #project-drawer.open { transform: translateX(0); } @media (max-width: 768px) { #project-drawer { width: 100%; max-width: 100vw; } } /* ================= 后台通用右侧抽屉 ================= */ .ad-drawer-mask { position: fixed; inset: 0; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 900; } .ad-drawer-mask.open { opacity: 1; pointer-events: auto; } .ad-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(520px, 96vw); z-index: 901; background: var(--bg-soft); border-left: 1px solid var(--border); transform: translateX(105%); transition: transform .32s cubic-bezier(.25,.46,.45,.94); display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(0,0,0,.35); overflow: hidden; } .ad-drawer.open { transform: translateX(0); } .ad-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex: none; } .ad-drawer-head h3 { margin: 0; font-size: 17px; color: var(--text); } .ad-drawer-close { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; } .ad-drawer-close:hover { color: var(--text); } .ad-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; } .ad-drawer > form { min-height: 0; } /* 抽屉主表单强制为纵向 flex，使其正文可内部滚动、底部按钮固定（排除附件上传等独立表单） */ .ad-drawer > form:has(> .ad-drawer-body) { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } .ad-drawer-foot { flex: none; padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } .ad-field { margin-bottom: 14px; } .ad-field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .ad-field input[type=text], .ad-field input[type=number], .ad-field input[type=password], .ad-field input[type=color], .ad-field textarea, .ad-field select { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 11px; font-size: 13.5px; box-sizing: border-box; } .ad-field textarea { resize: vertical; } .ad-field input[type=color] { width: 64px; height: 40px; padding: 2px; } .ad-field .hint { font-size: 11px; color: var(--muted); margin-top: 4px; } .quill-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } .quill-box .ql-toolbar.ql-snow { border-color: var(--border); border-top-left-radius: 8px; border-top-right-radius: 8px; } .quill-box .ql-container.ql-snow { border-color: var(--border); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; min-height: 180px; } .quill-box .ql-editor { min-height: 180px; color: var(--text); font-size: 14px; } .ad-metrics-grid { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 8px; } .ad-metrics-grid input { width: 100% !important; } .ad-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .ad-tag-chip { background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 14px; font-size: 12px; } .ad-close { display: none; } @media (max-width: 560px) { .ad-drawer { width: 100vw; } } /* ---- 项目进度表格 ---- */ .pg-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .pg-h3 { margin: 0; font-size: 20px; } .pg-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pg-filters { display: inline-flex; margin: 0; } .pg-filters select { font-size: 13px; } .btn-sm.add { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .pg-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } .pg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .pg-table thead th { background: var(--bg-soft); color: var(--muted); font-weight: 600; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .pg-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .pg-table tbody tr:last-child td { border-bottom: none; } .pg-table tbody tr:hover { background: var(--bg-soft); } .pg-title-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-ops { white-space: nowrap; } .pg-ops .btn-sm { margin-right: 4px; margin-bottom: 4px; } .doc-link { color: var(--accent2); margin-right: 8px; white-space: nowrap; } /* 进展附件管理 */ .pg-attach-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .pg-attach-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; } .pg-attach-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pg-attach-form input[type=file] { flex: 1; min-width: 160px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; } /* 详情抽屉内容 */ .vd-row { display: flex; gap: 8px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed var(--border); } .vd-k { color: var(--muted); flex: 0 0 72px; } .vd-v { color: var(--text); } .vd-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 14px 0 8px; } .vd-content { font-size: 14px; line-height: 1.7; color: var(--text); background: var(--bg); border-radius: 8px; padding: 14px; max-height: 50vh; overflow-y: auto; } .vd-content img { max-width: 100%; } .vd-docs { margin-top: 12px; font-size: 13.5px; color: var(--muted); } @media (max-width: 720px) { .pg-table thead { display: none; } .pg-table, .pg-table tbody, .pg-table tr, .pg-table td { display: block; width: 100%; } .pg-table tbody tr { border-bottom: 2px solid var(--border); padding: 6px 0; } .pg-table tbody td { border: none; padding: 6px 14px; } .pg-title-cell { white-space: normal; } } /* ---------- 项目节点管理（复用样式） ---------- */ .proj-summary { display: flex; gap: 16px; flex-wrap: wrap; } .proj-metric-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; text-align: center; } .proj-metric-val { font-weight: 700; color: var(--accent); } .proj-metric-label { font-size: 11px; color: var(--muted); } .proj-tag-badge { background: rgba(124,109,240,.15); color: var(--accent); padding: 2px 10px; border-radius: 14px; font-size: 12px; } .ring-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--card); } .ring-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .ring-card-info { display: flex; align-items: center; gap: 10px; } .ring-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .ring-card-ops { white-space: nowrap; } .ring-child-wrap { margin: 10px 0 0 18px; border-left: 2px solid var(--border); padding-left: 14px; } .ring-child-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .proj-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .proj-page-head h3 { margin: 8px 0 4px 12px; display: inline-block; vertical-align: middle; } /* 尊重减弱动效偏好 */ @media (prefers-reduced-motion: reduce) { .atom-orbit { animation: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }