/* ============================================================ 安全文档库 · 工具箱 公共样式 新工具页面直接 link 本文件，保持整站风格统一 ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f6f8; color: #333; line-height: 1.7; font-size: 15px; } .wrap { max-width: 1080px; margin: 0 auto; padding: 20px 16px 24px; } /* 顶部 */ header { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px; border-bottom: 2px solid #1e87f0; } header .brand { font-size: 20px; font-weight: bold; } header .brand a { color: #222; text-decoration: none; } header .brand span { color: #1e87f0; } header .header-links { display: flex; gap: 14px; } header .header-links a { font-size: 13px; color: #555; text-decoration: none; } header .header-links a:hover { color: #1e87f0; } /* 页面标题 */ h1 { font-size: 24px; font-weight: 700; color: #1a1a1a; margin: 18px 0 6px; } .sub { color: #777; font-size: 13px; margin-bottom: 16px; } /* 面板/卡片通用（对齐主站 category-block） */ .panel { background: #fff; border-radius: 10px; padding: 24px; border: 1px solid #eee; } /* 工具箱首页卡片：桌面一行 4 个，窄屏自动降列 */ .tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 10px; } @media (max-width: 1100px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .tool-grid { grid-template-columns: 1fr; } } .tool-card { background: #fff; border-radius: 10px; padding: 20px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: #222; border: 1px solid #eee; transition: border-color .15s, box-shadow .15s; } a.tool-card:hover { border-color: #1e87f0; box-shadow: 0 4px 14px rgba(0,0,0,.08); } .tool-card .t-name { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; } .tool-card .t-desc { font-size: 13px; color: #666; line-height: 1.6; flex: 1; } .tool-card .t-tag { font-size: 12px; padding: 2px 10px; border-radius: 10px; flex-shrink: 0; } .tool-card .t-tag.online { background: #e8f5e9; color: #2e7d32; } .tool-card .t-tag.plan { background: #eee; color: #999; } .tool-card .t-tag.soon { background: #fff3e0; color: #e65100; } .tool-card.plan { opacity: .65; cursor: default; } /* 按钮 */ .btn { padding: 9px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } .btn-primary { background: #1e87f0; color: #fff; } .btn-ghost { background: #fff; border: 1px solid #999; color: #333; } .btn:hover { opacity: .9; } .btn-primary:hover { background: #1668c9; } /* 打印 */ @media print { .no-print { display: none !important; } body { background: #fff; } .wrap { max-width: none; padding: 0; } } /* 首页"最近生成"（对齐主站 section-title） */ .sec-title { font-size: 20px; font-weight: 600; color: #1a1a1a; border-left: 4px solid #1e87f0; padding-left: 12px; margin: 30px 0 20px; } .recent-list { list-style: none; } .recent-list li { margin-bottom: 8px; } .recent-list a.recent-item { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 6px; padding: 10px 14px; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); text-decoration: none; color: #222; } .recent-list a.recent-item:hover { box-shadow: 0 2px 6px rgba(0,0,0,.12); } .r-tool { font-size: 12px; padding: 2px 10px; border-radius: 10px; background: #e8f5e9; color: #2e7d32; flex-shrink: 0; } .r-company { color: #666; background: #f2f2f2; padding: 2px 8px; border-radius: 4px; font-size: 12px; flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r-tool.zhangtai { background: #e3f2fd; color: #1565c0; } .r-time { margin-left: auto; font-size: 12px; color: #999; flex-shrink: 0; } /* 首页"最近生成"卡片流式（一条跟一条、超出自动换行、分号分隔） */ .sec-more { font-size: 13px; font-weight: normal; color: #1e87f0; text-decoration: none; } .sec-more:hover { text-decoration: underline; } .recent-card { padding: 18px 20px; margin-top: 20px; } .recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; } .recent-title { font-size: 16px; font-weight: 600; color: #1a1a1a; border-left: 4px solid #1e87f0; padding-left: 10px; margin: 0; line-height: 1.4; } .recent-flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; line-height: 2.1; } .recent-flow .rf-item { color: #333; text-decoration: none; font-size: 13px; } .recent-flow .rf-item:hover { color: #1e87f0; text-decoration: underline; } .recent-flow .rf-tool { display: inline-block; font-size: 12px; padding: 0 8px; border-radius: 8px; background: #eef3f8; color: #5a6b7b; margin-right: 4px; } .recent-flow .rf-sep { color: #c8ccd1; margin: 0 6px; font-size: 13px; } /* 公共页脚（首页 / 最近生成 / Beta 页共用） */ #aq-footer { background: #2c3e50; color: #bdc3c7; padding: 30px 20px; margin-top: 30px; text-align: center; font-size: 13px; } #aq-footer .aq-footer-links { margin-bottom: 12px; } #aq-footer .aq-footer-links a { color: #bdc3c7; text-decoration: none; margin: 0 10px; display: inline-block; padding: 4px 0; } #aq-footer .aq-footer-links a:hover { color: #fff; } #aq-footer .aq-footer-copy { margin-bottom: 8px; line-height: 1.8; } #aq-footer .aq-footer-copy a { color: #fff; text-decoration: none; } #aq-footer .aq-footer-copy a:hover { color: #fff; text-decoration: underline; } #aq-footer .aq-footer-copy a.aq-footer-beta { display: inline; font-size: 13px; font-weight: 700; color: #ffd700; text-decoration: none; margin-left: 2px; } #aq-footer .aq-footer-copy a.aq-footer-beta:hover { color: #ffd700; text-decoration: underline; } #aq-footer .aq-footer-icp { margin-top: 8px; font-size: 12px; line-height: 2; } #aq-footer .aq-footer-icp a { color: #7f8c8d; text-decoration: none; margin: 0 6px; } #aq-footer .aq-footer-icp a:hover { color: #fff; } #aq-footer .aq-footer-gongan { display: inline-flex; align-items: center; gap: 4px; } #aq-footer .aq-gongan-icon { width: 14px; height: 14px; vertical-align: middle; } /* 独立页标题旁的 Beta 徽标（如 /?beta=1） */ .beta-tag-page { display: inline-block; font-size: 14px; font-weight: 600; color: #fff; background: #ff7a00; border-radius: 4px; padding: 3px 10px; letter-spacing: 1px; vertical-align: middle; transform: translateY(-2px); } /* ===== 公共页头（hero 大蓝渐变卡片，全站统一） ===== */ .hero { position: relative; background: linear-gradient(135deg, #1e3a5f 0%, #1e87f0 100%); width: 100vw; margin: -20px 0 28px calc(50% - 50vw); padding: 50px 20px 40px; text-align: center; color: #fff; box-sizing: border-box; } .hero .hero-brand { display: inline-block; margin-bottom: 12px; } .hero .hero-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 36px; font-weight: 700; color: #fff; text-decoration: none; } .hero .hero-logo:hover { color: #fff; } .hero .beta-tag { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; vertical-align: super; line-height: 1; margin-left: 4px; } .hero .hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero .hero-decor svg { position: absolute; display: block; fill: none; stroke: #fff; stroke-linejoin: round; } .hero .hd-1 { width: 240px; height: 240px; right: 24px; bottom: -8px; opacity: .05; } .hero .hd-1m { width: 240px; height: 240px; right: 24px; bottom: -128px; opacity: .03; transform: scaleY(-1); filter: blur(5px); } .hero .hd-2 { width: 140px; height: 140px; left: -20px; top: 6px; opacity: .07; } .hero .hd-2m { width: 140px; height: 140px; left: -20px; top: 146px; opacity: .04; transform: scaleY(-1); filter: blur(4px); } .hero .hd-3 { width: 90px; height: 90px; right: 76px; top: 52px; opacity: .06; } .hero .hd-3m { width: 90px; height: 90px; right: 76px; top: 142px; opacity: .03; transform: scaleY(-1); filter: blur(4px); } .hero .hd-4 { width: 60px; height: 60px; left: 26%; bottom: -6px; opacity: .09; } .hero .hd-4m { width: 60px; height: 60px; left: 26%; bottom: -66px; opacity: .04; transform: scaleY(-1); filter: blur(3px); } .hero .hd-5 { width: 42px; height: 42px; right: 30%; top: 118px; opacity: .10; } .hero .hd-5m { width: 42px; height: 42px; right: 30%; top: 160px; opacity: .05; transform: scaleY(-1); filter: blur(3px); } .hero .hero-sub { font-size: 15px; opacity: .9; margin-bottom: 24px; color: #fff; } .hero .hero-search { display: flex; max-width: 640px; width: 100%; margin: 0 auto 16px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.15); box-sizing: border-box; } .hero .hero-search input { flex: 1; min-width: 0; height: 50px; padding: 0 20px; line-height: 50px; border: none; outline: none; font-size: 15px; box-sizing: border-box; border-radius: 8px 0 0 8px; } .hero .hero-search .agg-go { height: 50px; padding: 0 32px; background: #ff7a00; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; border: none; border-radius: 0 8px 8px 0; transition: background .2s; } .hero .hero-search .agg-go:hover { background: #e66a00; } .hero .agg-go-wrap { position: relative; display: flex; } .hero .agg-go-wrap .agg-go { flex: 1; display: flex; align-items: center; justify-content: center; } .hero .agg-drop { position: absolute; top: calc(100% + 1px); left: 0; right: 0; width: auto; background: #ff7a00; border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.22); padding: 0; display: flex; flex-direction: column; z-index: 30; visibility: hidden; } .hero .agg-go-wrap:hover .agg-drop, .hero .agg-go-wrap:focus-within .agg-drop { visibility: visible; } .hero .agg-drop-item { display: none; padding: 9px 0; font-size: 13px; color: #fff; text-decoration: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dotted rgba(255,255,255,.55); opacity: 0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease, background .15s; } .hero .agg-drop-item.on { display: block; opacity: 1; transform: translateY(0); } .hero .agg-drop-item:last-child { border-bottom: none; } .hero .agg-drop-item:hover { background: #e66a00; } .hero .hero-stats { font-size: 13px; opacity: .85; color: #fff; } .hero .hero-stats strong { color: #ffd700; font-size: 15px; } .hero .hero-stats a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.45); transition: border-color .15s; } .hero .hero-stats a:hover { border-bottom-color: #ffd700; } @media (max-width: 640px) { .hero { padding: 30px 16px 24px; } .hero .hero-logo { font-size: 26px; } .hero .hero-sub { font-size: 13px; } .hero .hero-search { flex-direction: column; } .hero .hero-search input { border-radius: 8px 8px 0 0; } .hero .hero-search .agg-go { width: 100%; border-radius: 0 0 8px 8px; } } /* ===== doc 说明页公共样式（由各 doc 页内联