/* ========================================================================== style.css —— 亿联财 · 智企方舟 静态站样式 科技蓝紫配色，与计划书 PPT 保持一致 ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================================== 三套主题：三个域名 → 三种云厂商视觉风格 由 index.html 的内联脚本按访问域名自动给 加 class，无需维护三份代码 web.yiliancai.com → 腾讯云风格（科技蓝） web.yiliancai.cn → 华为云风格（稳重红） web.yiliancai.online → 阿里云风格（活力橙） 想调整某个站点的风格？改下面对应主题块的颜色值即可。 ========================================================================== */ /* ---------- 基础变量（默认：腾讯云风格） ---------- */ :root { --brand: #006EFF; /* 腾讯云品牌蓝 */ --brand2: #0052D9; --purple: #7b5cd6; /* 公益色：三个站点统一，强化星语同行品牌 */ --bg: #f4f6fa; --card: #fff; --text: #1f2329; --muted: #8a94a6; --line: #e6e9f0; --ok: #0fa968; --warn: #f5a623; --err: #e5533d; --radius: 8px; /* 腾讯云：偏方正 */ --brand-rgb: 0, 110, 255; /* 品牌色的 RGB 分量，用于半透明阴影/背景 */ --purple-rgb: 123, 92, 214; /* 公益紫（三站统一，不随主题变） */ --shadow: 0 2px 8px rgba(0, 110, 255, .12); --hero-grad: linear-gradient(135deg, #0052D9, #006EFF); } /* ---------- 华为云风格：稳重红，小圆角 ---------- */ html.theme-huawei { --brand: #C7000B; /* 华为云品牌红 */ --brand2: #8E0008; --bg: #faf6f6; /* 微暖灰底，配合红色 */ --line: #f0e4e4; --radius: 4px; /* 华为云：更方正、稳重 */ --brand-rgb: 199, 0, 11; --shadow: 0 2px 8px rgba(199, 0, 11, .12); --hero-grad: linear-gradient(135deg, #8E0008, #C7000B); } /* ---------- 阿里云风格：活力橙，大圆角 ---------- */ html.theme-ali { --brand: #FF6A00; /* 阿里云品牌橙 */ --brand2: #D95200; --bg: #fdf8f3; /* 微暖底，配合橙色 */ --line: #f5e8dc; --radius: 14px; /* 阿里云：圆润、活泼 */ --brand-rgb: 255, 106, 0; --shadow: 0 2px 10px rgba(255, 106, 0, .14); --hero-grad: linear-gradient(135deg, #D95200, #FF6A00); } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------- 顶栏 ---------------- */ header { background: var(--hero-grad); color: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 2px 12px rgba(var(--brand-rgb), .18); position: sticky; top: 0; z-index: 100; } .logo { display: flex; align-items: center; gap: 12px; } .logo .mark { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 20px; } .logo h1 { font-size: 18px; font-weight: 600; } .logo .sub { font-size: 12px; opacity: .85; } .badge { font-size: 11px; background: rgba(255,255,255,.22); padding: 4px 10px; border-radius: 12px; } nav { display: flex; gap: 6px; flex-wrap: wrap; } nav button { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 7px 15px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all .2s; font-family: inherit; } nav button:hover { background: rgba(255,255,255,.25); } nav button.active { background: #fff; color: var(--brand2); font-weight: 600; } /* ---------------- 主体容器 ---------------- */ .container { max-width: 1180px; margin: 0 auto; padding: 24px; } .view { display: none; } .view.active { display: block; animation: fade .3s; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------------- Hero ---------------- */ .hero { background: var(--hero-grad); color: #fff; border-radius: 16px; padding: 44px 36px; margin-bottom: 28px; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.08); } .hero h2 { font-size: 30px; font-weight: 700; margin-bottom: 12px; position: relative; } .hero p { font-size: 15px; opacity: .93; max-width: 640px; position: relative; } .hero-stats { display: flex; gap: 32px; margin-top: 26px; position: relative; flex-wrap: wrap; } .hero-stats .item .num { font-size: 26px; font-weight: 700; } .hero-stats .item .lbl { font-size: 12px; opacity: .85; } /* ---------------- 智能体族群 ---------------- */ .group { margin-bottom: 32px; } .group-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin-bottom: 14px; padding-left: 12px; border-left: 4px solid var(--brand); } .group-title .cnt { font-size: 12px; font-weight: 400; color: var(--muted); background: #fff; padding: 2px 9px; border-radius: 10px; border: 1px solid var(--line); } .group-title.welfare { border-left-color: var(--purple); } .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); } /* ---------------- 智能体卡片 ---------------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all .22s; position: relative; } .card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(var(--brand-rgb), .14); border-color: var(--brand); } .card.welfare:hover { border-color: var(--purple); box-shadow: 0 8px 24px rgba(var(--purple-rgb), .16); } .card .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .card .ico { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg, var(--brand2), var(--brand)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; } .card.welfare .ico { background: linear-gradient(135deg, var(--purple), #9b7be8); } .card .nm { font-size: 15px; font-weight: 600; } .card .md { font-size: 10px; color: var(--muted); font-family: monospace; background: #f4f6fa; padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 2px; } .card .desc { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .card .pts { font-size: 11.5px; color: #6b7488; } .card .pts li { list-style: none; padding-left: 12px; position: relative; margin-bottom: 3px; } .card .pts li::before { content: "·"; position: absolute; left: 2px; color: var(--brand); font-weight: 700; } .free-tag { position: absolute; top: 14px; right: 14px; background: var(--purple); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 8px; } /* ---------------- 咨询区 ---------------- */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; } .panel h3 { font-size: 16px; margin-bottom: 6px; } .panel .hint { font-size: 13px; color: var(--muted); margin-bottom: 16px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .field label .req { color: var(--err); } .field input, .field select, .field textarea { width: 100%; padding: 11px 13px; font-size: 14px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; transition: border-color .2s; background: #fff; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); } .field textarea { min-height: 120px; resize: vertical; } .field .tip { font-size: 12px; color: var(--muted); margin-top: 5px; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .row { grid-template-columns: 1fr; } } .btn { background: linear-gradient(135deg, var(--brand2), var(--brand)); color: #fff; border: none; padding: 13px 30px; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; } .btn:hover { opacity: .92; transform: translateY(-1px); } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand); } /* ---------------- 回答展示 ---------------- */ .answer { background: #f8fafd; border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-top: 18px; white-space: pre-wrap; font-size: 14px; line-height: 1.85; display: none; } .answer.show { display: block; } .meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); } .meta .tag { background: #fff; border: 1px solid var(--line); padding: 3px 10px; border-radius: 12px; } .meta .tag.ok { color: var(--ok); border-color: #b7e8d0; background: #f0fbf6; } .meta .tag.warn { color: var(--warn); border-color: #f5dcae; background: #fdf8ee; } .evidences { margin-top: 14px; } .ev-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; font-size: 13px; } .ev-card .ev-t { font-weight: 600; margin-bottom: 4px; } .ev-card .ev-c { color: #5a6478; } .disclaimer { margin-top: 14px; padding: 11px 14px; background: #fff8f0; border: 1px solid #f5dcae; border-radius: 8px; font-size: 12.5px; color: #8a6d3b; } .loading { text-align: center; padding: 30px; color: var(--muted); display: none; } .loading.show { display: block; } .spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------- 消息提示 ---------------- */ .msg { padding: 12px 16px; border-radius: 9px; margin-top: 14px; font-size: 13.5px; display: none; } .msg.show { display: block; } .msg.ok { background: #f0fbf6; border: 1px solid #b7e8d0; color: #0a7a4c; } .msg.err { background: #fdf2f1; border: 1px solid #f5c6c0; color: #c0392b; } .msg.info { background: #f0f6fd; border: 1px solid #c5dcf5; color: #1a5fd0; } /* ---------------- 记录列表 ---------------- */ .rec-item { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 14px; margin-bottom: 10px; font-size: 13px; } .rec-item .rh { display: flex; justify-content: space-between; margin-bottom: 6px; flex-wrap: wrap; gap: 8px; } .rec-item .rn { font-weight: 600; } .rec-item .rt { color: var(--muted); font-size: 12px; } .rec-item .rq { color: #4a5468; white-space: pre-wrap; } /* ---------------- 友情链接 ---------------- */ .friendlinks { background: #fff; border-top: 1px solid var(--line); padding: 26px 24px; margin-top: 40px; } .fl-inner { max-width: 1180px; margin: 0 auto; } .fl-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 14px; letter-spacing: .5px; } .fl-list { display: flex; gap: 12px; flex-wrap: wrap; } .fl-item { flex: 1 1 240px; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--bg); transition: all .2s; text-decoration: none; color: inherit; display: block; } .fl-item:hover { border-color: var(--brand); background: #fff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(var(--brand-rgb), .12); text-decoration: none; } .fl-item.current { border-color: var(--brand); border-left: 3px solid var(--brand); background: linear-gradient(90deg, #f0f6fd, #fff); cursor: default; } .fl-item.current:hover { transform: none; box-shadow: none; } .fl-nm { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fl-item.current .fl-nm { color: var(--brand2); } .fl-badge { font-size: 10px; background: var(--brand); color: #fff; padding: 2px 7px; border-radius: 8px; font-weight: 400; } .fl-desc { font-size: 12px; color: var(--muted); margin-top: 4px; } .fl-url { font-size: 11px; color: #9aa4b6; margin-top: 6px; font-family: monospace; } @media (max-width: 640px) { .fl-item { flex: 1 1 100%; } } /* ---------------- 页脚 ---------------- */ footer { text-align: center; padding: 30px 20px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); margin-top: 40px; } footer .co { font-weight: 600; color: #5a6478; margin-bottom: 4px; } /* ---------------- 模式提示条 ---------------- */ .mode-bar { background: #fff8f0; border: 1px solid #f5dcae; color: #8a6d3b; padding: 10px 16px; border-radius: 9px; font-size: 12.5px; margin-bottom: 20px; } .mode-bar.ok { background: #f0fbf6; border-color: #b7e8d0; color: #0a7a4c; } /* ========================================================================== 补充样式：机器人回答区 / 转人工 / 族群描述 / 小按钮 ========================================================================== */ /* 族群描述 */ .group-desc { font-size: 13px; color: var(--muted); margin: -8px 0 14px; padding-left: 12px; } .card .nick { font-size: 11px; color: var(--muted); background: var(--bg); padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 3px; } /* 回答区 */ .answer { display: none; } .answer.show { display: block; } .ans-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .ans-badge { font-size: 14px; font-weight: 600; color: var(--brand2); background: rgba(var(--brand-rgb), .08); padding: 5px 13px; border-radius: 20px; } .ans-meta { font-size: 12px; color: var(--muted); } .ans-body { white-space: pre-wrap; font-size: 14.5px; line-height: 1.9; color: var(--text); } .ans-related { margin-top: 18px; padding: 14px 16px; background: var(--bg); border-radius: 9px; } .ar-title { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; } .ar-item { font-size: 13px; color: var(--brand); cursor: pointer; padding: 5px 0; transition: color .2s; } .ar-item:hover { color: var(--brand2); text-decoration: underline; } .ans-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); } .btn.small { padding: 8px 18px; font-size: 13px; } /* 转人工 */ .transfer { text-align: center; padding: 26px 20px; background: linear-gradient(180deg, #fff, var(--bg)); border: 1px solid var(--line); border-radius: var(--radius); } .tf-icon { font-size: 40px; margin-bottom: 10px; } .tf-title { font-size: 17px; font-weight: 600; color: var(--brand2); margin-bottom: 8px; } .tf-msg { font-size: 14px; color: #5a6478; margin-bottom: 16px; line-height: 1.8; } .tf-contact { display: inline-block; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 22px; font-size: 14px; line-height: 2; } .tf-contact strong { color: var(--brand2); font-size: 15px; } .tf-time { font-size: 12.5px; color: var(--muted); margin-top: 14px; } /* 记录里的"转人工"标记 */ .tag-warn { font-size: 11px; background: #fdf8ee; color: var(--warn); border: 1px solid #f5dcae; padding: 1px 8px; border-radius: 8px; } /* 证据卡 */ .evidences { margin-top: 16px; } .ev-t { font-size: 13px; font-weight: 600; margin-bottom: 8px; } .ev-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; font-size: 13px; } .ev-tt { font-weight: 600; margin-bottom: 4px; } .ev-c { color: var(--muted); font-size: 12px; } /* ========================================================================== 补充样式：语言切换按钮 / 提示条 / 页脚标语 ========================================================================== */ /* 语言切换按钮：与导航按钮区分开（描边更明显） */ nav button.lang-btn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .55); font-weight: 600; min-width: 68px; } nav button.lang-btn:hover { background: rgba(255, 255, 255, .3); } /* 首页提示条 */ .hint-box { font-size: 13px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 11px 16px; margin-bottom: 20px; } /* 页脚标语 */ .foot-motto { margin-top: 8px; opacity: .8; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }