/* ===================================================================== 导航站 · 前台样式（深色 / 浅色双主题，蓝 + 绿品牌色） 图标：Font Awesome 6.5（本地 assets/fontawesome/） --------------------------------------------------------------------- 配色约定： 深色 = 墨黑底座 + 卡片冷调层次（不用纯黑） 浅色 = 暖白米色底座 + 纯白卡片（去 AI 化：不铺氛围光、不收彩色发光） 蓝 = 主色：导航 / 链接 / 交互 / 次级按钮 绿 = 辅色：状态 / 成功 / 进度 / 品牌点缀（与蓝组成 --grad 渐变） 主题切换：系统设置 → 主题颜色 → 前端主题（写入 site_theme 配置项）。 模板在 上输出 data-site-theme="dark|light"（不是 data-theme —— 那个属性归后台主题，而「我的分类 / 我的产品 / 留言反馈」这几个前台页面 会额外加载 admin.css，同名会互相踩）。 :root 是深色基准；浅色只覆盖 :root[data-site-theme="light"] 里的令牌值， 组件规则一律只引用令牌、禁止写死色值 —— 新增组件也必须走令牌。 卡片 = background-color 走 --card / --card-2 + background-image 挂 --card-grad； 装饰件（氛围光 / 发光 / 白色提亮）统一走本文件「装饰件令牌」那一组。 ===================================================================== */ :root { /* ---------- 底色：墨黑（非纯黑，留出层次） ---------- */ --bg: #0c141b; --bg-soft: #0f1922; --bg-2: #17242e; /* 图片 / 代码块占位底 */ --card: #131f28; --card-2: #1a2933; /* 卡片悬停时的更亮表层 */ /* 卡片顶部受光：让深色卡片不再是一块死黑，悬停时只换底色、保留这层光 */ --card-grad: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, 0) 44%); /* ---------- 半透明表层（吸顶头 / 侧栏 / 广告位） ---------- */ --surf: rgba(15, 24, 31, .88); --surf-2: rgba(19, 31, 40, .92); --surf-dark: rgba(11, 18, 24, .94); /* ---------- 元素底色 ---------- */ --el: rgba(255, 255, 255, .045); --el-2: rgba(255, 255, 255, .075); --el-3: rgba(255, 255, 255, .11); /* ---------- 描边 ---------- */ --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15); /* ---------- 文字 ---------- */ --text: #e8eef2; --text-2: #c3d1d8; --muted: #93a6ae; --muted-2: #637680; /* ---------- 主色：蓝 ---------- */ --brand: #2f7cf6; --brand-2: #6da8ff; --brand-soft: rgba(47, 124, 246, .16); /* ---------- 辅色：绿 ---------- */ --green: #16c47f; --green-2: #4ade9f; --green-soft: rgba(22, 196, 127, .14); /* ---------- 渐变（蓝 → 绿，品牌识别核心） ---------- */ --grad: linear-gradient(135deg, var(--brand), var(--green)); --grad-soft: linear-gradient(135deg, rgba(47, 124, 246, .22), rgba(22, 196, 127, .18)); --grad-bar: linear-gradient(180deg, var(--brand), var(--green)); --grad-line: linear-gradient(90deg, var(--brand), var(--green)); /* ---------- 语义色 ---------- */ --danger: #f2545b; --warn: #f3b13c; --warn-soft: rgba(243, 177, 60, .14); /* 收藏/置顶等警示色的软底（与后台同名令牌同值） */ --ok: var(--green); /* ---------- 装饰件令牌（浅色下必须换成中性或收敛，故单独提出来） ---------- 深色下这些是「氛围光 / 彩色发光 / 白色提亮」，直接写死在组件里的话， 浅色主题会变成一片脏兮兮的蓝绿光晕 + 看不见的白边。 */ --bg-glow: /* 首页 / 普通页的整体氛围光 */ radial-gradient(1100px 680px at 6% -14%, rgba(47, 124, 246, .16), transparent 62%), radial-gradient(900px 560px at 96% -8%, rgba(22, 196, 127, .11), transparent 60%); --bg-glow-shell: /* 外壳页（左导航 + 右框架） */ radial-gradient(900px 620px at 0% -10%, rgba(47, 124, 246, .12), transparent 62%), radial-gradient(700px 500px at 100% 108%, rgba(22, 196, 127, .09), transparent 60%); --bg-glow-frame: /* 框架内页 */ radial-gradient(900px 600px at 8% -12%, rgba(47, 124, 246, .10), transparent 62%), radial-gradient(700px 480px at 100% 106%, rgba(22, 196, 127, .08), transparent 60%); --deco-glow: /* 时钟卡：大字号落在纯底色上会显得空，给一层柔光 */ radial-gradient(120% 100% at 50% -14%, rgba(47, 124, 246, .18), transparent 64%), radial-gradient(120% 100% at 50% 118%, rgba(22, 196, 127, .12), transparent 62%); --muyu-glow: radial-gradient(circle at 50% 35%, rgba(22, 196, 127, .24), rgba(47, 124, 246, .08) 62%, transparent); --side-glow: linear-gradient(180deg, rgba(47, 124, 246, .07), rgba(47, 124, 246, 0) 32%); --cover-grad: linear-gradient(135deg, rgba(47, 124, 246, .28), rgba(22, 196, 127, .18)); --inset-hi: inset 0 0 0 1px rgba(255, 255, 255, .06); /* 图标方块的内圈提亮 */ --glow-a: rgba(22, 196, 127, .20); /* 主按钮常驻柔光 */ --glow-b: rgba(22, 196, 127, .30); /* 主按钮 hover 柔光 */ --glow-c: rgba(22, 196, 127, .45); /* Logo 圆点光晕 */ --num-glow: 0 0 26px rgba(47, 124, 246, .38); /* 时钟数字背后的蓝光 */ --scrim: rgba(9, 15, 19, .72); /* 压在图标上的深色小按钮底 */ --dot-hover: rgba(255, 255, 255, .55); --hl: rgba(47, 124, 246, .35); /* 选区高亮 */ --hl-text: #fff; --faint: rgba(255, 255, 255, .17); /* 月历里「非本月」的日期 */ --on-brand-2: #0b1116; /* 压在 --brand-2 上的文字色 */ --radius: 12px; --shadow: 0 1px 2px rgba(0, 0, 0, .40); --shadow-h: 0 10px 28px rgba(0, 0, 0, .50); --ring: 0 0 0 3px rgba(47, 124, 246, .18); color-scheme: dark; } /* ===================================================================== 浅色主题：只覆盖令牌值（选择器优先级高于 :root，顺序放哪都生效） 基调是「暖白米色」而不是冷灰白：前台是给人看的展示型页面， 暖底配纯白卡片比冷灰底更柔和，也和后台工作台的冷灰区分开。 去 AI 化：不铺氛围光（--bg-glow* / --deco-glow / --side-glow 一律 none）、 不收彩色发光（--glow-* 换成中性低透明度投影）、不用毛玻璃。 ===================================================================== */ :root[data-site-theme="light"] { /* 底色：暖白米色（卡片纯白，靠亮度差 + 1px 描边分层） */ --bg: #faf8f5; --bg-soft: #f4f1ec; --bg-2: #ece7df; --card: #ffffff; --card-2: #f8f5f1; --card-grad: none; /* 半透明表层（吸顶头 / 侧栏 / 广告位） */ --surf: rgba(255, 255, 255, .90); --surf-2: rgba(252, 250, 247, .95); --surf-dark: rgba(255, 255, 255, .98); /* 元素底色：浅底上用深墨低透明度压暗 */ --el: rgba(28, 25, 23, .04); --el-2: rgba(28, 25, 23, .07); --el-3: rgba(28, 25, 23, .12); /* 描边 */ --line: rgba(28, 25, 23, .10); --line-2: rgba(28, 25, 23, .18); /* 文字 */ --text: #241f1a; --text-2: #4a423a; --muted: #6b6259; --muted-2: #8a8177; /* 主色：压暗一档的蓝，浅底上作文字也够对比度 */ --brand: #2b6fd6; --brand-2: #1f5ab0; --brand-soft: rgba(43, 111, 214, .10); /* 辅色：压暗一档的绿 */ --green: #0f8f5c; --green-2: #0b7549; --green-soft: rgba(15, 143, 92, .12); /* 渐变：不加亮度，保证压在上面的白字仍有对比度 */ --grad: linear-gradient(135deg, #2b6fd6, #0f8f5c); --grad-soft: linear-gradient(135deg, rgba(43, 111, 214, .14), rgba(15, 143, 92, .10)); --grad-bar: linear-gradient(180deg, #2b6fd6, #0f8f5c); --grad-line: linear-gradient(90deg, #2b6fd6, #0f8f5c); /* 语义色 */ --danger: #cf3b46; --warn: #a16207; --warn-soft: rgba(161, 98, 7, .12); --shadow: 0 1px 2px rgba(28, 25, 23, .06); --shadow-h: 0 8px 24px rgba(28, 25, 23, .10); --ring: 0 0 0 3px rgba(43, 111, 214, .16); /* ---------- 装饰件 ---------- */ --bg-glow: none; --bg-glow-shell: none; --bg-glow-frame: none; --deco-glow: none; --muyu-glow: radial-gradient(circle at 50% 35%, rgba(15, 143, 92, .12), rgba(43, 111, 214, .05) 62%, transparent); --side-glow: none; --cover-grad: linear-gradient(135deg, rgba(43, 111, 214, .14), rgba(15, 143, 92, .10)); --inset-hi: inset 0 0 0 1px rgba(28, 25, 23, .06); --glow-a: rgba(28, 25, 23, .10); --glow-b: rgba(28, 25, 23, .16); --glow-c: rgba(15, 143, 92, .22); --num-glow: none; --scrim: rgba(255, 255, 255, .88); --dot-hover: rgba(28, 25, 23, .32); --hl: rgba(43, 111, 214, .20); --hl-text: #241f1a; --faint: rgba(28, 25, 23, .22); --on-brand-2: #ffffff; color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-glow), var(--bg); background-attachment: fixed; color: var(--text); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } button { font-family: inherit; } /* 深色滚动条（外壳/长列表里统一观感） */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--el-2); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--el-3); background-clip: content-box; } /* 键盘可访问性：统一焦点环 */ :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .dsearch-q:focus-visible, .fld input:focus-visible { outline: none; } /* 选中态文字 */ ::selection { background: var(--hl); color: var(--hl-text); } /* 满屏布局：不再用 max-width 居中收窄（>1600px 时只留一点边距，避免文字贴到屏幕边缘） */ .wrap { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 20px; } /* ---------------- 顶部 ---------------- */ .hd { position: sticky; top: 0; z-index: 20; background: var(--surf); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); } .hd-in { display: flex; align-items: center; gap: 18px; height: 58px; } .logo { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; white-space: nowrap; } .logo-dot { width: 11px; height: 11px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 10px var(--glow-c); display: inline-block; } .logo-img { height: 30px; width: auto; display: block; border-radius: 6px; } .nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; } .nav a { padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px; white-space: nowrap; } .nav a:hover { background: var(--el-2); color: var(--text); } .nav a.on { background: var(--brand-soft); color: var(--brand-2); } .sbox { display: flex; align-items: center; background: var(--el); border: 1px solid var(--line); border-radius: 9px; padding: 0 4px 0 10px; } .sbox input { border: 0; background: transparent; outline: none; width: 150px; padding: 8px 0; font-size: 13.5px; color: var(--text); } .sbox input::placeholder { color: var(--muted-2); } .sbox button { border: 0; background: var(--brand); color: #fff; border-radius: 7px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .sbox button:hover { opacity: .9; } .um { display: flex; align-items: center; gap: 10px; font-size: 13.5px; white-space: nowrap; } .um a { color: var(--muted); } .um a:hover { color: var(--brand-2); } .um .btn { background: var(--grad); color: #fff; padding: 6px 14px; border-radius: 8px; box-shadow: 0 2px 10px var(--glow-a); } .um .btn:hover { color: #fff; opacity: .92; } /* ---------------- 主体 ---------------- */ .main { padding: 22px 0 60px; } .notice { background: var(--warn-soft); border: 1px solid rgba(243, 177, 60, .26); color: var(--warn); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 18px; font-size: 13.5px; } .hero { position: relative; overflow: hidden; background-color: var(--card); background-image: var(--card-grad); border: 1px solid var(--line); border-radius: 16px; padding: 34px 24px; text-align: center; margin-bottom: 26px; box-shadow: var(--shadow); } /* 顶部蓝绿描边：与 logo / 按钮同一套品牌色 */ .hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-line); opacity: .8; } .hero-t { margin: 0 0 8px; font-size: 24px; font-weight: 600; } .hero-d { margin: 0 0 20px; color: var(--muted); font-size: 14px; } .hero-s { display: flex; max-width: 520px; margin: 0 auto 18px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--el); transition: border-color .15s ease, box-shadow .15s ease; } .hero-s:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .hero-s input { flex: 1; border: 0; outline: none; padding: 12px 14px; font-size: 14px; color: var(--text); background: transparent; } .hero-s input::placeholder { color: var(--muted-2); } .hero-s button { border: 0; background: var(--grad); color: #fff; padding: 0 22px; font-size: 14px; cursor: pointer; } .hero-s button:hover { opacity: .92; } /* 框架内页不再显示搜索框：与外壳左侧搜索重复 */ body.dz-frame .hero-s { display: none; } .hero-stats { display: flex; justify-content: center; gap: 26px; color: var(--muted); font-size: 13px; } .hero-stats b { color: var(--text); font-weight: 600; font-size: 15px; } /* 首页分类快捷标签 */ .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--el); border: 1px solid var(--line); font-size: 13px; color: var(--muted); transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; } .chip:hover { border-color: var(--brand); color: var(--text); background: var(--brand-soft); transform: translateY(-1px); } .chip-i { display: inline-flex; font-size: 13px; color: var(--brand-2); } .chip:hover .chip-i { color: var(--brand-2); } .chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); } .chip-c { font-size: 11px; color: var(--muted-2); } /* 分类页的二级分类切换 */ .subchips { justify-content: flex-start; margin: 0 0 18px; } /* ---------------- 区块 ---------------- */ .sec { margin-bottom: 30px; } .sec-h { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-left: 12px; font-size: 15px; font-weight: 600; } .sec-h::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 4px; border-radius: 3px; background: var(--grad-bar); } .sec-i { font-size: 14px; color: var(--brand-2); width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); } .sec-n { color: var(--text); display: inline-flex; align-items: baseline; gap: 6px; } .sec-p { font-size: 12px; color: var(--muted-2); font-weight: 400; } .sec-p::after { content: "·"; margin-left: 6px; } .sec-c { font-size: 12px; color: var(--muted); background: var(--el-2); border-radius: 20px; padding: 1px 8px; font-weight: 400; } .sec-more { margin-left: auto; font-size: 13px; color: var(--brand-2); font-weight: 400; } /* ---------------- 卡片 ---------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .card { position: relative; background-color: var(--card); background-image: var(--card-grad); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease, background-color .16s ease; } .card:hover { background-color: var(--card-2); box-shadow: var(--shadow-h); border-color: rgba(47, 124, 246, .45); transform: translateY(-2px); } .card-a { display: block; flex: 1; padding: 14px 14px 34px; } /* 同一行内若混有「带封面 / 不带封面」的卡片，网格会把它们拉到等高； 不带封面的卡片把内容垂直居中，免得下方空出一大块 */ .card:not(.has-cover) .card-a { display: flex; flex-direction: column; justify-content: center; } /* 图标 + 标题同一行：标题在 logo 右侧，垂直居中对齐 */ .card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .card-ico { flex: none; } .dz-ico-img { border-radius: 9px; object-fit: cover; display: block; } .dz-ico-emoji, .dz-ico-txt { display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 20px; background: var(--brand-soft); color: var(--brand-2); font-weight: 500; } .dz-ico-emoji { background: var(--el); font-size: 22px; } .dz-ico-box { display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: var(--brand-2); background: var(--grad-soft); box-shadow: var(--inset-hi); } .dz-ico-fa { color: var(--brand-2); line-height: 1; } .dz-ico-fa-txt { color: var(--brand-2); font-weight: 500; } .card-t { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-top { flex: none; font-style: normal; font-size: 11px; font-weight: 400; background: rgba(243, 177, 60, .14); color: var(--warn); border-radius: 4px; padding: 0 5px; line-height: 16px; } .card-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: var(--muted); min-height: 34px; } .card.has-cover .card-a { padding-top: 0; } .card-cover { display: block; margin: 0 0 12px; } /* 封面通栏：抵消 .card-a 的左右内边距，让封面铺满卡片宽度，左右不留白（只留卡片自身的 1px 描边） */ .card.has-cover .card-cover { margin-left: -14px; margin-right: -14px; } .card-cover img { width: 100%; height: 116px; object-fit: cover; display: block; border-radius: var(--radius) var(--radius) 0 0; background: var(--bg-2); } /* 未上传封面：默认渐变背景 + 产品名称文字（已上传时以图片为准） */ .card-cover--txt { height: 116px; display: flex; align-items: center; justify-content: center; padding: 0 20px; text-align: center; border-radius: var(--radius) var(--radius) 0 0; background-color: var(--bg-2); background-image: var(--cover-grad); } .card-cover--txt .card-cover-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text); word-break: break-word; } .card-b { display: block; } .card-meta { position: absolute; left: 14px; right: 12px; bottom: 9px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted-2); } .card-meta .clicks { margin-left: auto; } .card-meta .clicks i { margin-right: 3px; font-size: 10.5px; } /* 卡片右上角角标组（当前只有「需登录」；pointer-events:none 点击穿透到卡片链接） */ .card-badges { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; } /* 「需登录」角标（原直接绝对定位在卡片右上角，现改为角标组内的普通子元素） */ .card-lock { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-size: 11px; line-height: 1.2; color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(243, 177, 60, .35); } .card-lock i { font-size: 10px; } /* 产品价格角标：淡琥珀柔光底 + 细描边 + 琥珀文字，与「需登录」「置顶」共用同一套标签语言 （靠位置与字重区分）；后台留空时不渲染。 现位于卡片底部左侧（原「系统介绍」的位置），贴在卡片底色上而非封面上，故不加投影。 padding 比实心底时代各收 1px，抵消新增的 1px 描边，标签整体尺寸不变 */ .card-price { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 7px; white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(243, 177, 60, .35); } .fav { border: 0; background: transparent; cursor: pointer; padding: 2px 2px; font-size: 14px; line-height: 1; color: var(--muted-2); transition: color .14s ease, background-color .14s ease, transform .1s ease; } .fav:hover { color: var(--warn); } .fav:active { transform: scale(.9); } .fav:focus-visible { outline: none; box-shadow: var(--ring); } .fav.on { color: var(--warn); } /* 卡片内的收藏：22px 圆形可点区域，未收藏灰星（hover 琥珀）， 收藏后常态就是琥珀实心 + 软底，扫一眼就能看出哪些是自己收藏的。 ⚠️ 尺寸只能限定在 .card-meta 里：详情页的「☆ 收藏」是同一个 .fav 类的大按钮 */ .card-meta .fav { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; padding: 0; border-radius: 50%; font-size: 13px; } .card-meta .fav:hover { background: var(--warn-soft); } .card-meta .fav.on { background: var(--warn-soft); } /* ---------------- 面包屑 / 标题 ---------------- */ .crumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; } .crumb a:hover { color: var(--brand-2); } .crumb .sep { margin: 0 6px; color: var(--muted-2); } .crumb b { color: var(--text); font-weight: 500; } /* 面包屑中的「当前层级」文字（detail.php 用 .cur，category.php 用 ，两者统一观感） */ .crumb .cur { color: var(--text-2); font-weight: 500; } .pg-h { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 19px; font-weight: 600; } .pg-i { font-size: 17px; color: var(--brand-2); } .pg-c { font-size: 12.5px; color: var(--muted-2); font-weight: 400; } .pg-tag { font-size: 11px; font-weight: 400; color: var(--brand-2); background: var(--brand-soft); border-radius: 5px; padding: 2px 7px; } .empty { background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 40px 20px; text-align: center; color: var(--muted); } .empty-i { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 14px; font-size: 20px; color: var(--brand-2); background: var(--grad-soft); } .empty p { margin: 0 0 6px; } .empty .sub { font-size: 13px; color: var(--muted-2); } .empty a { color: var(--brand-2); } .empty a:hover { text-decoration: underline; } /* 空态里的行动按钮（.btn-lg 默认 inline-block 且会占行，这里再给点上间距） */ .empty-a { margin-top: 16px !important; } .empty-a .btn-lg { text-decoration: none; } /* ---------------- 我的收藏 ---------------- */ /* 收藏页说明行 + 数量文案 */ .fav-note { display: flex; align-items: center; gap: 6px; margin: -8px 0 18px; font-size: 12.5px; color: var(--muted); } .fav-note i { color: var(--brand-2); font-size: 12px; } /* ---------------- 分页 ---------------- */ .pager { display: flex; justify-content: center; gap: 6px; margin: 28px 0 0; flex-wrap: wrap; } .pager a, .pager span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; color: var(--muted); } .pager a:hover { border-color: var(--brand); color: var(--brand-2); } .pager .on { background: var(--grad); border-color: transparent; color: #fff; } .pager .gap { border: 0; background: transparent; } /* ---------------- 详情页 ---------------- */ .detail { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); } .detail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-line); opacity: .75; } /* 头部整行上下居中：标题信息在左、靠左对齐，与右侧封面/图标在同一行内垂直居中 */ .detail-h { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; } /* 图标容器不参与收缩，窄屏下也不会被文字挤扁 */ .detail-ico { flex: none; display: inline-flex; } .detail-m { flex: 1; min-width: 0; } .detail-m h1 { margin: 0 0 8px; font-size: 21px; font-weight: 600; } .detail-d { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; } .detail-s { margin: 0; font-size: 12.5px; color: var(--muted-2); display: flex; gap: 14px; flex-wrap: wrap; } .detail-s i { color: var(--green); margin-right: 3px; } .detail-a { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); } .backline { margin-top: 20px; font-size: 13px; } /* 封面：头部右上角 320×150 规格（统一比例，上传图按比例裁切），不参与压缩。 宽走 width、高走 aspect-ratio 联动 —— 窄屏改成通栏时高度自动同比缩放，不会把图压扁 */ .detail-cover { flex: none; width: 320px; margin: 0; } .detail-cover img { width: 100%; height: auto; aspect-ratio: 320 / 150; object-fit: cover; display: block; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); } /* 未上传封面：默认渐变背景 + 产品名称文字（已上传时以图片为准），尺寸与图片态完全一致 */ .detail-cover--txt { height: auto; aspect-ratio: 320 / 150; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; border-radius: 12px; border: 1px solid var(--line); background-color: var(--bg-2); background-image: var(--cover-grad); } .detail-cover--txt .detail-cover-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); word-break: break-word; } /* 产品三块：产品介绍 / 系统介绍 / 前往查看 */ .pblock { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; margin-top: 16px; box-shadow: var(--shadow); } .pblock-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; } .pblock-h i { color: var(--brand-2); font-size: 14px; } .pblock-b { font-size: 13.5px; color: var(--muted); line-height: 1.8; } .pblock-b p { margin: 0 0 10px; } .pblock-b p:last-child { margin-bottom: 0; } .pblock-b .muted { color: var(--muted-2); } /* 图文正文（后台富文本，已做标签白名单过滤） */ .pblock-b.rich img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; display: block; } .pblock-b.rich video { display: block; max-width: 100%; height: auto; margin: 10px 0; border-radius: 10px; background: #000; } .pblock-b.rich ul, .pblock-b.rich ol { margin: 0 0 10px; padding-left: 22px; } .pblock-b.rich li { margin-bottom: 4px; } .pblock-b.rich h2, .pblock-b.rich h3, .pblock-b.rich h4, .pblock-b.rich h5 { font-size: 14.5px; font-weight: 600; color: var(--text); margin: 14px 0 8px; } .pblock-b.rich a { color: var(--brand-2); text-decoration: underline; } .pblock-b.rich blockquote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 8px 8px 0; } .pblock-b.rich code, .pblock-b.rich pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; } .pblock-b.rich pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; } .pblock-b.rich table { border-collapse: collapse; margin-bottom: 10px; font-size: 12.5px; } .pblock-b.rich th, .pblock-b.rich td { border: 1px solid var(--line); padding: 6px 10px; } .tut-more { margin-top: 14px !important; } .btn-lg.sm { padding: 8px 16px; font-size: 13px; border-radius: 9px; } .backline a { color: var(--muted); } .backline a:hover { color: var(--brand-2); } /* ---------------- 按钮 ---------------- */ .btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--grad); color: #fff; border: 1px solid transparent; border-radius: 10px; padding: 10px 26px; font-size: 14px; cursor: pointer; box-shadow: 0 3px 14px var(--glow-a); transition: box-shadow .16s ease, transform .16s ease, opacity .16s ease; } .btn-lg:hover { opacity: .94; color: #fff; box-shadow: 0 5px 20px var(--glow-b); } .btn-lg:active { transform: translateY(1px); } .btn-lg.full { width: 100%; padding: 11px; margin-top: 6px; } .btn-lg[disabled], .btn-lg:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--muted); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 18px; font-size: 13.5px; cursor: pointer; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-2); } .btn-ghost.on { border-color: rgba(243, 177, 60, .5); color: var(--warn); background: rgba(243, 177, 60, .08); } /* 详情页按钮行里的产品价格：淡琥珀柔光底 + 细描边 + 琥珀文字，与卡片价格同一视觉身份。 min-height 含描边，盒子高度与实心底时代一致；不可点时是 span，可点（询价）时是 button */ .detail-price { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(243, 177, 60, .35); } /* 后台配了客服二维码时价格标签变成按钮：点一下弹「联系客服」。外观与纯展示版保持一致， 只补上按钮该有的字体继承、手型和交互反馈（不额外加图标，避免撑宽按钮行）。 */ .detail-price--kefu { font-family: inherit; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .detail-price--kefu:hover { border-color: var(--warn); background: rgba(243, 177, 60, .22); } .detail-price--kefu:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; } /* ---------------- 登录 / 注册 ---------------- */ .auth { display: flex; justify-content: center; padding: 28px 0 40px; } .auth-c { position: relative; overflow: hidden; width: 100%; max-width: 392px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px 26px; box-shadow: var(--shadow); } .auth-c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-line); } /* 顶部品牌标识 */ .auth-brand { display: flex; justify-content: center; margin: 0 0 12px; } .auth-brand .logo-dot { width: 34px; height: 34px; border-radius: 11px; } /* 已上传 Logo：按自身比例缩放，与默认圆点同高 */ .auth-brand .logo-img { height: 34px; width: auto; max-width: 100%; border-radius: 9px; } .auth-t { margin: 0 0 6px; font-size: 19px; font-weight: 600; text-align: center; } .auth-d { margin: 0 0 20px; font-size: 13px; color: var(--muted); text-align: center; } .auth-d a { color: var(--brand-2); } .auth-d a:hover { text-decoration: underline; } .auth-f { margin: 16px 0 0; text-align: center; font-size: 13px; } .auth-f a { color: var(--muted); } .auth-f a:hover { color: var(--brand-2); } .alert { background: rgba(242, 84, 91, .1); border: 1px solid rgba(242, 84, 91, .3); color: var(--danger); border-radius: 9px; padding: 9px 12px; font-size: 13px; margin-bottom: 16px; } .alert i { margin-right: 4px; } /* 错误：红（与 .alert 基类一致，显式别名便于语义化） */ .alert-err { background: rgba(242, 84, 91, .1); border-color: rgba(242, 84, 91, .3); color: var(--danger); } /* 成功：绿 */ .alert-ok { background: rgba(22, 196, 127, .10); border-color: rgba(22, 196, 127, .32); color: var(--green); } .alert-ok i { color: var(--green); } .fld { display: block; margin-bottom: 14px; } /* 字段标题用 .fld-t（不要用 .fld span，否则会连带命中 .fld-in 包裹层） */ .fld-t { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .fld input { width: 100%; border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; font-size: 14px; color: var(--text); outline: none; background: var(--el); transition: border-color .15s ease, box-shadow .15s ease; } .fld input:focus { border-color: var(--brand); box-shadow: var(--ring); } /* 带前置图标的输入框 */ .fld-in { position: relative; display: block; } .fld-i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted-2); pointer-events: none; } .fld-in input { padding-left: 34px; } .fld-in:focus-within .fld-i { color: var(--brand-2); } /* ---------------- 个人中心 ---------------- */ .prof { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 26px; box-shadow: var(--shadow); } .prof::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-line); opacity: .75; } .prof-av { width: 56px; height: 56px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--grad-soft); color: var(--brand-2); font-size: 22px; font-weight: 500; box-shadow: var(--inset-hi); } .prof-m { flex: 1; min-width: 160px; } .prof-m h1 { margin: 0 0 4px; font-size: 17px; font-weight: 600; } .prof-a { margin: 0; font-size: 12.5px; color: var(--muted-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prof-a .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); display: inline-block; } .prof-quote { margin: 7px 0 0; font-size: 12.5px; color: var(--muted-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.6; } .prof-quote > i { color: var(--brand-2); font-size: 11px; opacity: .85; } .prof-quote .prof-q-f { font-style: normal; opacity: .7; } .prof-stats { display: flex; gap: 26px; } .prof-stats a, .prof-stats .stat { text-align: center; display: block; } .prof-stats b { display: block; font-size: 19px; font-weight: 600; } .prof-stats span { font-size: 12px; color: var(--muted-2); } .prof-stats span i { color: var(--green); margin-right: 3px; font-size: 11px; } .prof-stats a:hover b { color: var(--brand-2); } .prof-stats a:hover span i { color: var(--brand-2); } .recent { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .recent a { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; transition: border-color .15s ease, background .15s ease; } .recent a:hover { border-color: var(--brand); background: var(--card-2); } .recent-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .recent-i { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--brand-2); background: var(--grad-soft); } .recent-d { font-size: 11.5px; color: var(--muted-2); flex: none; } /* ---------------- 个人中心：我的内容入口卡片 ---------------- */ .my-entry { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .my-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); background-image: var(--card-grad, none); transition: border-color .14s ease, background .14s ease, transform .14s ease; } .my-card:hover { border-color: var(--brand); background: var(--card-2, var(--card)); transform: translateY(-2px); } .my-ci { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--brand-2); background: var(--grad-soft, rgba(47, 124, 246, .12)); } .my-ct { font-size: 15px; font-weight: 600; color: var(--text); } .my-cd { font-size: 12.5px; color: var(--muted-2); line-height: 1.6; margin: 0; } /* ---------------- 页脚 ---------------- */ .ft { border-top: 1px solid var(--line); background: var(--surf); padding: 26px 0 20px; margin-top: 12px; } .ft-in { display: flex; flex-direction: column; gap: 14px; } .ft-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; } .ft-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; } .ft-brand .logo-dot { width: 10px; height: 10px; } .ft-txt { min-width: 0; } .ft-d { margin: 6px 0 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.75; max-width: 560px; } .ft-links { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; } .ft-links a { color: var(--muted); } .ft-links a:hover { color: var(--brand-2); } .ft-c { width: 100%; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: 12.5px; color: var(--muted-2); } .ft-in p { margin: 0; font-size: 12.5px; color: var(--muted-2); } .ft-in a:hover { color: var(--brand-2); } /* ---------------- 框架式外壳（左导航 + 广告位 + 内容框架） ---------------- */ body.dz-shell { display: flex; height: 100vh; overflow: hidden; background: var(--bg-glow-shell), var(--bg-soft); } /* 左侧导航条 */ .side { width: 236px; flex: none; display: flex; flex-direction: column; background: var(--surf-dark); border-right: 1px solid var(--line); } .side-brand { height: 58px; flex: none; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: .2px; } .side-brand a { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text); } .side-brand-t { /* 站点名是外壳页唯一的 h1（利于搜索引擎理解页面主体）， 这里显式设回 17px 并把浏览器默认的 h1 外边距清零，视觉与原先的 span 完全一致 */ margin: 0; font-size: 17px; color: var(--text); font-weight: 600; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-brand .logo-img { height: 30px; width: auto; max-width: 100%; } .side-search { display: flex; gap: 6px; padding: 12px 14px; flex: none; border-bottom: 1px solid var(--line); } .side-search input[type="search"] { flex: 1; min-width: 0; outline: none; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--text); background: var(--el); transition: border-color .15s ease, box-shadow .15s ease; } .side-search input[type="search"]:focus { border-color: var(--brand); box-shadow: var(--ring); } .side-search input[type="search"]::placeholder { color: var(--muted-2); } .side-search button { border: 0; background: var(--grad); color: #fff; border-radius: 8px; padding: 0 12px; font-size: 13px; cursor: pointer; } .side-search button:hover { opacity: .92; } .side-nav { flex: 1; overflow-y: auto; padding: 10px 10px 16px; } .side-nav::-webkit-scrollbar { width: 6px; } .side-nav::-webkit-scrollbar-thumb { background: var(--el-3); border-radius: 3px; } .side-it { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px; border-radius: 9px; font-size: 13.5px; color: var(--text-2); } .side-it:hover { background: var(--el); color: var(--text); } .side-it.on { background: var(--brand-soft); color: var(--brand-2); } .side-it.on::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 0 2px 2px 0; background: var(--grad-bar); } .side-i { width: 22px; flex: none; text-align: center; font-size: 15px; line-height: 1.2; } .side-it.on .side-i { color: var(--brand-2); } .side-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; } .side-it.on .side-n { color: var(--brand-2); } .side-c { flex: none; font-size: 11px; color: var(--muted); background: var(--el-2); border-radius: 10px; padding: 0 7px; line-height: 17px; } .side-it.on .side-c { background: rgba(47, 124, 246, .30); color: var(--brand-2); } .side-sep { display: block; padding: 14px 12px 6px; font-size: 11.5px; color: var(--muted-2); } /* 分类 → 链接 树形导航 */ .side-row { display: flex; align-items: center; } .side-row .side-it { flex: 1; min-width: 0; padding-right: 4px; } .side-tg { flex: none; width: 24px; height: 24px; margin-right: 6px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--muted-2); font-size: 10px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .side-tg:hover { background: var(--el-2); color: var(--text); } .side-tg i { transition: transform .16s ease; } .side-grp.closed .side-tg i { transform: rotate(-90deg); } .side-sub { padding: 0 8px 4px 32px; } .side-grp.closed .side-sub { display: none; } .side-lk { display: flex; align-items: center; gap: 7px; padding: 5px 9px; margin-bottom: 1px; border-radius: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.45; } .side-lk:hover { background: var(--el); color: var(--text); } .side-lk.on { background: var(--brand-soft); color: var(--brand-2); } .side-lk-d { width: 4px; height: 4px; border-radius: 50%; flex: none; background: var(--muted-2); } .side-lk:hover .side-lk-d, .side-lk.on .side-lk-d { background: var(--brand-2); } .side-lk-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-lk .fa-lock { flex: none; font-size: 9px; color: var(--warn); } /* 二级分类分组（一级 → 二级 → 产品） */ .side-subg { margin-bottom: 2px; } .side-subh { position: relative; display: flex; align-items: center; gap: 7px; padding: 4px 9px; margin: 2px 0 1px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); } .side-subh:hover { background: var(--el-2); color: var(--text); } .side-subh.on { background: rgba(47, 124, 246, .14); color: var(--brand-2); } .side-subh.on::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 12px; border-radius: 0 2px 2px 0; background: var(--grad-bar); } .side-subh .side-i { width: 16px; font-size: 12px; } .side-subh .side-n { font-size: 12px; font-weight: 500; } .side-subh .side-c { font-size: 10.5px; line-height: 15px; } .side-lk.lv2 { padding-left: 22px; font-size: 12px; } /* 二级分类折叠：与一级分类的「即时显隐 + 箭头转 -90°」区分开， 这里用高度过渡 + 淡入上移，箭头转 180°（默认收起状态由 .closed 标记） */ .side-subh-row { display: flex; align-items: center; } .side-subh-row .side-subh { flex: 1; min-width: 0; } .side-tg2 { flex: none; width: 20px; height: 20px; margin-right: 4px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--muted-2); font-size: 9px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .side-tg2:hover { background: var(--el-2); color: var(--brand-2); } .side-tg2 i { transition: transform .26s ease; } .side-subg:not(.closed) .side-tg2 i { transform: rotate(180deg); } .side-lk-l { padding-bottom: 2px; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-3px); transition: max-height .28s ease, opacity .22s ease, transform .28s ease; } /* JS 展开时会写入精确的 max-height 做过渡，这里给一个兜底高度 */ .side-subg:not(.closed) .side-lk-l { max-height: 1200px; opacity: 1; transform: none; } /* 左侧「我的产品」专区（用户自建、直接跳转外链） */ .side-mine { margin-bottom: 4px; } .side-lk .side-lk-ic { flex: none; width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--el-2); overflow: hidden; font-size: 10px; } .side-lk .side-lk-ic img { width: 100%; height: 100%; object-fit: cover; } .side-lk .mine-ext { flex: none; font-size: 9px; color: var(--muted-2); opacity: 0; transition: opacity .15s; } .side-lk:hover .mine-ext { opacity: 1; } .side-lk .muted { color: var(--muted-2); } .side-lk.mine-empty .fa-plus { flex: none; font-size: 10px; color: var(--brand-2); } .side-manage { display: flex; align-items: center; gap: 6px; margin: 4px 9px 2px; padding: 5px 8px; border-radius: 7px; font-size: 11.5px; color: var(--muted); border: 1px dashed var(--line); } .side-manage:hover { color: var(--brand-2); border-color: var(--brand-2); background: var(--brand-soft); } .side-manage i { font-size: 10px; } /* VIP 标识（侧栏锁定入口） */ .vip-tag { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 4px; padding: 1px 5px; line-height: 14px; box-shadow: 0 1px 4px rgba(245,158,11,.45); } .side-lk-ic.vip-ic { background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(217,119,6,.18)); color: #f59e0b; } .side-lk.mine-lock { cursor: pointer; } /* 页面级 VIP 锁定卡片（我的分类 / 我的产品 / 收藏空态） */ .vip-lock { max-width: 520px; margin: 8px auto 20px; text-align: center; padding: 38px 28px 32px; border: 1px dashed rgba(245,158,11,.45); border-radius: 16px; background: linear-gradient(180deg, rgba(245,158,11,.07), rgba(245,158,11,.02)); } .vip-lock-ic { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 6px 20px rgba(245,158,11,.4); } .vip-lock h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); } .vip-lock p { margin: 0; color: var(--muted-2); font-size: 13.5px; line-height: 1.7; } .vip-lock .vip-lock-tip { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; color: #b45309; font-weight: 600; font-size: 13px; } .vip-lock .empty-a { margin-top: 18px; } /* 个人中心 VIP 横幅与徽章 */ .vip-banner { display: flex; align-items: center; gap: 13px; padding: 13px 18px; margin: 4px 0 20px; border-radius: 13px; border: 1px solid rgba(245,158,11,.4); background: linear-gradient(90deg, rgba(245,158,11,.14), rgba(245,158,11,.05)); } .vip-banner > i { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; background: linear-gradient(135deg, #f59e0b, #d97706); } .vip-banner b { display: block; font-size: 14px; color: #92400e; } .vip-banner span { font-size: 12.5px; color: #b45309; } .vip-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; padding: 2px 9px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 2px 8px rgba(245,158,11,.4); } .vip-badge.plain { color: var(--muted); background: var(--el-2); box-shadow: none; letter-spacing: 0; font-weight: 500; } .vip-mini { font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; } .my-card.locked { position: relative; } .my-card.locked:hover { border-color: rgba(245,158,11,.5); } .my-lock { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #b45309; background: rgba(245,158,11,.14); } .alert-warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #b45309; } .alert-warn i { color: #d97706; } /* 管理员模拟登录提示横条 */ .dz-impbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 12.5px; background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.06)); border-bottom: 1px solid rgba(245,158,11,.35); color: #92400e; } .dz-impbar b { color: #78350f; } .dz-impbar .dz-impbar-x { margin-left: auto; padding: 3px 12px; border-radius: 6px; background: #f59e0b; color: #fff; font-size: 12px; white-space: nowrap; } .dz-impbar .dz-impbar-x:hover { background: #d97706; } .dz-impbar-inframe { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 12.5px; background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.06)); border-bottom: 1px solid rgba(245,158,11,.35); color: #92400e; } .dz-impbar-inframe a { margin-left: auto; padding: 2px 10px; border-radius: 6px; background: #f59e0b; color: #fff; } .side-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; } .side-foot.center { justify-content: center; } .side-foot a { color: var(--muted); } .side-foot a:hover { color: var(--brand-2); } .side-foot .btn { background: var(--grad); color: #fff; padding: 5px 12px; border-radius: 7px; } .side-foot .btn:hover { color: #fff; opacity: .92; } /* 登录后的底部：头像首字 + 账户（可点进个人中心）+ 退出图标按钮 */ .side-u { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 9px; text-decoration: none; color: var(--text); /* 覆盖 .side-foot a 的 muted，账户名用主文字色 */ transition: background-color .14s ease; } .side-u:hover { background: var(--el-2); color: var(--text); } .side-ua { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 600; color: #fff; background-image: var(--grad); } .side-un { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .side-out { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; transition: color .14s ease, background-color .14s ease; } .side-out:hover { color: var(--text); background: var(--el-2); } .side-foot .side-in:hover { color: var(--brand-2); } /* 未登录时收起的「我的收藏 / 个人中心」，登录成功后由 JS 放开 */ .side-it[hidden] { display: none; } /* 右侧内容区 */ .stage { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* 顶部广告位：通栏长条，图片横向铺满、垂直居中裁切 */ .adbar { position: relative; flex: none; overflow: hidden; min-height: 34px; padding: 10px 40px 10px 14px; background: var(--surf-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); } .adbar img { max-width: 100%; vertical-align: middle; border-radius: 6px; } /* 幻灯片轮播（后台「首页幻灯片」上传，多张各自跳转） */ .adslide { position: relative; display: block; width: 100%; } .adslide-i { display: none; } .adslide-i.on { display: block; animation: adslide-in .35s ease; } .adslide-i a { display: block; } .adslide-i img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: cover; object-position: center; border-radius: 10px; } @keyframes adslide-in { from { opacity: 0; } to { opacity: 1; } } .adslide-dots { position: absolute; right: 40px; bottom: 16px; display: inline-flex; align-items: center; gap: 5px; } .adslide-d { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--el-3); cursor: pointer; transition: background .15s ease; } .adslide-d:hover { background: var(--dot-hover); } .adslide-d.on { background: var(--green-2); } .adbar-x { position: absolute; top: 5px; right: 8px; border: 0; background: transparent; cursor: pointer; color: var(--muted-2); font-size: 18px; line-height: 1; padding: 2px 6px; } .adbar-x:hover { color: var(--danger); } /* 首页公告：幻灯片下方的横向流动字幕（后台「首页公告」填写后出现） */ .notibar { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 14px; overflow: hidden; background: var(--surf-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); } .notibar-i { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 1px solid var(--line); color: var(--green-2); font-weight: 500; white-space: nowrap; } .notibar-mv { flex: 1; min-width: 0; overflow: hidden; } .notibar-t { display: inline-flex; white-space: nowrap; animation: notibar-mv 24s linear infinite; } .notibar-t span { padding-right: 72px; } /* 鼠标移上去暂停，方便看清内容 */ .notibar:hover .notibar-t { animation-play-state: paused; } @keyframes notibar-mv { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 内容框架 */ /* 内容框架：外层留白收紧，让 iframe 尽量铺满右侧可视区 */ .framewrap { flex: 1; padding: 6px; min-height: 0; } .dz-frame-el { display: block; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); } /* ---------------- 框架内页（被 iframe 加载时的极简布局） ---------------- */ body.dz-frame { background: var(--bg-glow-frame), var(--bg); } /* 框架内页内容容器：满屏铺满（原先 max-width:1180px 居中，宽屏下左右留大片空白） */ .fr { width: 100%; max-width: none; margin: 0; padding: 14px 18px 40px; } /* 移动端抽屉：按钮与遮罩（桌面端隐藏） */ .side-menu, .side-mask { display: none; } /* ---------------- 响应式 ---------------- */ @media (max-width: 1400px) { .side { width: 212px; } } @media (max-width: 1100px) { .side { width: 192px; } .side-n { font-size: 13px; } } @media (max-width: 900px) { .nav { display: none; } .sbox { flex: 1; } .sbox input { width: 100%; } /* 外壳：左侧栏收起为抽屉，左上角按钮唤出 */ .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: 264px; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .5); } body.side-open .side { transform: none; } .side-mask { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 50; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s ease; } body.side-open .side-mask { opacity: 1; pointer-events: auto; } .side-menu { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 10px; left: 10px; z-index: 40; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surf-2); color: var(--text); font-size: 15px; cursor: pointer; } .side-menu:hover { border-color: var(--brand); color: var(--brand-2); } .adbar { padding-left: 58px; } /* 没有幻灯片时公告条会顶到最上面，给左上角抽屉按钮让位 */ .notibar { padding-left: 58px; } /* 平板宽度头部仍是一行：封面等比收窄，否则 320px 大图会把左侧标题挤成窄条 */ .detail-cover { width: 240px; } } @media (max-width: 640px) { .hd-in { height: auto; flex-wrap: wrap; padding: 10px 0; gap: 10px; } .logo { order: 1; } .um { order: 2; margin-left: auto; } .sbox { order: 3; flex-basis: 100%; } .hero { padding: 24px 16px; } .hero-t { font-size: 20px; } .hero-stats { gap: 16px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .card-a { padding: 12px 12px 32px; } /* 窄屏内边距变小，封面通栏的负边距同步跟随，避免超出卡片描边 */ .card.has-cover .card-cover { margin-left: -12px; margin-right: -12px; } .detail { padding: 18px; } /* 窄屏改为纵向堆叠：align-items 重置为 stretch，保证标题块仍通栏靠左 */ .detail-h { flex-direction: column; align-items: stretch; gap: 12px; } /* 窄屏封面：不再居中留白，通栏铺满卡片内容宽度，高度按 320:150 同比缩放 */ .detail-cover { width: 100%; margin: 0; } .detail-a { flex-direction: column; align-items: stretch; } /* 价格标签是「标签」不是按钮，窄屏纵向排列时不让它被拉成整条色块 */ .detail-price { align-self: flex-start; } .btn-lg { width: 100%; } } /* ===================================================================== 首页仪表盘（dz-dash/v1） 顶栏搜索 + 小工具卡片 + 分类应用宫格 ===================================================================== */ /* ① 顶栏 */ .dhero { text-align: center; padding: 14px 0 22px; } .dhero-t { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: .3px; } .dhero-d { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); } .dsearch { display: flex; align-items: center; gap: 6px; max-width: 720px; margin: 0 auto; padding: 5px; background: var(--el); border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; } .dsearch:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .dsearch-eng { position: relative; flex: none; } .dsearch-cur { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--el-2); color: var(--text); font-size: 13.5px; cursor: pointer; white-space: nowrap; } .dsearch-cur:hover { background: var(--el-3); } .dsearch-cur i { font-size: 9px; color: var(--muted-2); } .dsearch-menu { display: none; position: absolute; left: 0; top: calc(100% + 9px); z-index: 30; min-width: 168px; padding: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-h); } .dsearch-menu.open { display: block; } .dsearch-o { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--muted); cursor: pointer; } .dsearch-o:hover { background: var(--el-2); color: var(--text); } .dsearch-o.on { background: var(--brand-soft); color: var(--brand-2); } .dsearch-o i { width: 15px; text-align: center; font-size: 12px; } .dsearch-q { flex: 1; min-width: 0; height: 36px; border: 0; outline: none; background: transparent; padding: 0 10px; color: var(--text); font-size: 14px; } .dsearch-q::placeholder { color: var(--muted-2); } .dsearch-go { flex: none; width: 46px; height: 36px; border: 0; border-radius: 8px; background: var(--grad); color: #fff; font-size: 14px; cursor: pointer; box-shadow: 0 2px 12px var(--glow-a); } .dsearch-go:hover { opacity: .92; } .dhero-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; } .dhero-q-i { padding: 4px 11px; border-radius: 20px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); transition: border-color .15s ease, color .15s ease, background .15s ease; } .dhero-q-i:hover { border-color: var(--brand); color: var(--brand-2); background: var(--brand-soft); } .dhero-q-s { font-size: 12px; color: var(--muted-2); margin-left: 4px; } /* ② 小工具卡片 */ .tools { display: grid; gap: 12px; margin-bottom: 26px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .tl { position: relative; overflow: hidden; min-height: 152px; display: flex; flex-direction: column; padding: 14px 16px; background-color: var(--card); background-image: var(--card-grad); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .16s ease, background-color .16s ease; } .tl:hover { border-color: var(--line-2); background-color: var(--card-2); } .tl.w2 { grid-column: span 2; } .tl-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex: none; } .tl-i { flex: none; font-size: 14px; color: var(--brand-2); } .tl-t { flex: none; font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; } /* 卡片头右侧的附加信息：必须 nowrap + flex:none， 否则作为可收缩的 flex 项时文字会在自己内部折行（天气卡的城市名曾这样掉到第二行） */ .tl-x { margin-left: auto; flex: none; white-space: nowrap; font-size: 12px; color: var(--muted-2); } .tl-btn { border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--muted); font-size: 12px; font-family: inherit; } .tl-btn:hover { color: var(--brand-2); } .tl-empty { margin: auto 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.7; } /* 时钟：整块给一层柔光，避免大字号落在纯底色上显得空（浅色主题下只有底色） */ .tl-clock { align-items: center; justify-content: center; text-align: center; background: var(--deco-glow), var(--card); } .clock-t { font-size: 34px; font-weight: 600; letter-spacing: 1px; color: var(--text); font-variant-numeric: tabular-nums; text-shadow: var(--num-glow); } .clock-d { margin-top: 6px; font-size: 12.5px; color: var(--muted); } /* 日历 */ .cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-w { margin-bottom: 4px; } .cal-w span { text-align: center; font-size: 11px; color: var(--muted-2); } .cal-g span { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; border-radius: 6px; } .cal-g span.out { color: var(--faint); } .cal-g span.today { background: var(--grad); color: #fff; font-weight: 600; } /* 天气 */ .wt-b { display: flex; align-items: center; gap: 14px; } .wt-i { font-size: 34px; color: var(--brand-2); line-height: 1; } .wt-m { display: flex; flex-direction: column; min-width: 0; } .wt-t { font-size: 26px; font-weight: 600; color: var(--text); line-height: 1.1; } .wt-t i { font-size: 14px; font-style: normal; color: var(--muted); margin-left: 2px; } .wt-x { font-size: 12.5px; color: var(--muted); } .wt-f { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted-2); } /* 热搜榜 */ .hot-tabs { margin-left: auto; display: inline-flex; gap: 4px; } .hot-tab { padding: 2px 8px; border-radius: 20px; font-size: 11.5px; color: var(--muted); cursor: pointer; } .hot-tab:hover { background: var(--el-2); color: var(--text); } .hot-tab.on { background: var(--brand-soft); color: var(--brand-2); } .hot-l { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; } .hot-l::-webkit-scrollbar { width: 6px; } .hot-l::-webkit-scrollbar-thumb { background: var(--el-3); border-radius: 3px; } .hot-i { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13px; } .hot-r { flex: none; width: 18px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted-2); } .hot-r.top { color: var(--danger); } .hot-r.top2 { color: var(--warn); } .hot-n { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hot-i:hover .hot-n { color: var(--brand-2); } .hot-h { flex: none; font-size: 11px; color: var(--muted-2); } .hot-e { padding: 8px 0; font-size: 12.5px; color: var(--muted-2); } /* 节日倒计时 */ .cd-l { list-style: none; margin: 0; padding: 0; } .cd-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--line); } .cd-i:last-child { border-bottom: 0; } .cd-n { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-v { flex: none; font-size: 12px; color: var(--brand-2); } .cd-v.today { color: var(--danger); font-weight: 600; } /* 仪表盘小按钮（不依赖全站 .btn 命名） */ .dash-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border: 1px solid transparent; border-radius: 8px; background: var(--grad); color: #fff; font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; line-height: 1.4; box-shadow: 0 2px 12px var(--glow-a); transition: opacity .16s ease, box-shadow .16s ease; } .dash-btn:hover { opacity: .93; box-shadow: 0 4px 16px var(--glow-b); } .dash-btn:disabled { cursor: default; } .mm-f .dash-btn { flex: none; } /* 每日签到 */ .ci-b { display: flex; gap: 10px; margin-bottom: auto; } .ci-n { flex: 1; text-align: center; padding: 8px 0; background: var(--el); border-radius: 9px; } .ci-n b { display: block; font-size: 20px; font-weight: 600; color: var(--text); } .ci-n span { font-size: 11.5px; color: var(--muted-2); } .ci-btn { margin-top: 12px; } .ci-btn.done { background: var(--green-soft); border-color: rgba(22, 196, 127, .42); color: var(--green-2); cursor: default; box-shadow: none; } /* 电子木鱼 */ .tl-my { align-items: center; text-align: center; } .tl-my .tl-h { align-self: stretch; } .my-k { flex: none; width: 76px; height: 76px; margin: 2px auto 8px; border-radius: 50%; cursor: pointer; font-size: 26px; border: 1px solid var(--line-2); color: var(--green-2); background: var(--muyu-glow); transition: transform .08s ease, box-shadow .16s ease; } .my-k:hover { box-shadow: 0 0 18px var(--glow-b); } .my-k:active, .my-k.hit { transform: scale(.92); } .my-c { font-size: 12.5px; color: var(--muted); } .my-c b { font-size: 15px; color: var(--green-2); } .my-float { position: absolute; left: 50%; top: 58%; font-size: 13px; color: var(--ok); pointer-events: none; animation: my-up .7s ease forwards; } @keyframes my-up { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -34px); } } /* 备忘录 */ .mm-f { display: flex; gap: 8px; margin-bottom: 10px; flex: none; } .mm-f input { flex: 1; min-width: 0; outline: none; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--text); background: var(--el); font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .mm-f input:focus { border-color: var(--brand); box-shadow: var(--ring); } .mm-f input::placeholder { color: var(--muted-2); } .mm-l { list-style: none; margin: 0; padding: 0; max-height: 148px; overflow-y: auto; } .mm-l::-webkit-scrollbar { width: 6px; } .mm-l::-webkit-scrollbar-thumb { background: var(--el-3); border-radius: 3px; } .mm-i { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 13px; border-bottom: 1px dashed var(--line); } .mm-i:last-child { border-bottom: 0; } .mm-t { flex: 1; min-width: 0; color: var(--text); word-break: break-all; } .mm-i.done .mm-t { color: var(--muted-2); text-decoration: line-through; } .mm-b, .mm-x { flex: none; border: 0; background: transparent; cursor: pointer; padding: 0 3px; font-size: 12.5px; line-height: 1; color: var(--muted-2); } .mm-b:hover { color: var(--ok); } .mm-x:hover { color: var(--danger); } .mm-e { padding: 8px 0; font-size: 12.5px; color: var(--muted-2); } /* 每日一句 */ .qt-b { margin: auto 0; } .qt-p { display: none; margin: 0; } .qt-p.on { display: block; animation: qt-in .25s ease; } .qt-c { display: block; font-size: 15px; line-height: 1.75; color: var(--text); } .qt-a { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted-2); text-align: right; } @keyframes qt-in { from { opacity: 0; } to { opacity: 1; } } /* 今年进度 */ .dy-bar { height: 8px; margin: 6px 0 10px; border-radius: 4px; background: var(--el-2); overflow: hidden; } .dy-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--grad-line); transition: width .6s ease; } .dy-m { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); } .dy-m span:first-child { font-weight: 600; color: var(--brand-2); } /* ③ 应用宫格 */ .apps { margin-bottom: 10px; } .apps-h { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 12px; } .apps-ht { margin: 0; font-size: 16px; font-weight: 600; } .apps-hc { font-size: 12.5px; color: var(--muted-2); } .apps-sec { margin-bottom: 22px; } .apps-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 2px; font-size: 14px; font-weight: 500; color: var(--text); } .apps-ti { font-size: 14px; color: var(--brand-2); } .apps-tn { font-size: 14px; font-weight: 500; } .apps-tc { font-size: 11px; color: var(--muted); line-height: 17px; background: var(--el-2); border-radius: 10px; padding: 0 7px; } .apps-more { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--brand-2); } .apps-more:hover { text-decoration: underline; } /* 分类标题整块可点：点了进分类页（大图卡片列表）；$g['id'] 为 0 时退化为不可点的 span */ .apps-th { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; } .apps-th .apps-tn { transition: color .14s ease; } .apps-th:hover .apps-tn, .apps-th:focus-visible .apps-tn { color: var(--brand-2); } .apps-th:hover .apps-tc { background: var(--el-3); } .apps-th:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; } /* ③ 精品推荐：后台「首页配置 → 精品推荐」上传的横条图。 每行张数（3/4）与图片高度由后台配置，模板以 --rec-cols / --rec-h 内联下发； minmax(0,1fr) + width:100% 保证整行总宽永远等于内容区宽度，长图也不会撑破布局。 */ .rec { margin-bottom: 22px; } .rec-g { display: grid; grid-template-columns: repeat(var(--rec-cols, 3), minmax(0, 1fr)); gap: 12px; } .rec-i { display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--card); background-image: var(--card-grad); transition: transform .14s ease, border-color .14s ease; } .rec-i img { display: block; width: 100%; height: var(--rec-h, 110px); object-fit: cover; } a.rec-i:hover { transform: translateY(-2px); border-color: var(--brand); } a.rec-i:focus-visible { outline: none; box-shadow: var(--ring); } /* 窄屏自适应：先降为 2 列，再降为 1 列，图片高度仍按后台设置 */ @media (max-width: 900px) { .rec-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .rec-g { grid-template-columns: minmax(0, 1fr); gap: 10px; } } .agrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .app { position: relative; } .app-a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: var(--radius); background-color: var(--card); background-image: var(--card-grad); border: 1px solid var(--line); transition: transform .14s ease, border-color .14s ease, background-color .14s ease; } .app-a:hover { transform: translateY(-2px); border-color: var(--brand); background-color: rgba(47, 124, 246, .10); } .app-i { display: inline-flex; } .app-n { width: 100%; text-align: center; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-fav { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: var(--scrim); cursor: pointer; color: var(--muted-2); font-size: 12px; line-height: 1; opacity: 0; transition: opacity .14s ease, color .14s ease; } .app:hover .app-fav { opacity: 1; } .app-fav.on { opacity: 1; color: var(--warn); } .app-fav:hover { color: var(--warn); } .app-lock { position: absolute; top: 6px; right: 7px; font-size: 10px; color: var(--warn); } @media (max-width: 640px) { .fr { padding: 12px 12px 32px; } .dhero { padding: 6px 0 18px; } .dhero-t { font-size: 21px; } .dsearch-cur { padding: 0 9px; font-size: 12.5px; } .tools { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .tl.w2 { grid-column: auto; } .tl { min-height: 140px; padding: 12px 13px; } /* 窄屏下把标题栏的附加内容（热搜来源标签等）折到下一行，避免挤扁标题 */ .tl-h { flex-wrap: wrap; } .hot-tabs { margin-left: 0; flex-basis: 100%; } .clock-t { font-size: 27px; } .agrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } .app-a { padding: 11px 6px 10px; } .app-n { font-size: 12px; } } /* ===================================================================== 深色面板统一受光（dz-theme/2） 放在文件末尾，靠源顺序覆盖各组件的 background 简写； 没有 hover 换底色的面板直接在这里补一层顶部受光，避免整屏死黑。 ===================================================================== */ .pblock, .detail, .auth-c, .prof, .empty, .recent a { background-image: var(--card-grad); } /* ===================================================================== dz-dash/2：满屏工具栏 + 小工具拖拽布局 + 详情入口 + 图标按比例显示 ===================================================================== */ /* ---------- 图标图片：按比例缩放（不再拉伸 / 裁切） ---------- 尺寸通过 CSS 变量下发，容器可用更高优先级的 max-width 收窄； width/height:auto + max-width/max-height，浏览器会按原图比例等比缩放到框内。 */ .dz-ico-img { display: block; border-radius: 9px; width: auto; height: auto; object-fit: contain; max-width: var(--iw, 44px); max-height: var(--ih, 44px); } /* 紧凑单元格里不允许溢出（侧栏单元格宽度固定，百分比才有确定的参照） */ .side-i .dz-ico-img { max-width: 100%; } /* ---------- 小工具工具栏 ---------- */ .tools-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 12px; } /* 与「精品推荐 / 应用中心」区块标题（.apps-ht）保持同一字号字重，避免同一页出现两档标题感 */ .tools-t { font-size: 16px; font-weight: 600; color: var(--text); } .tools-s { font-size: 12.5px; color: var(--muted-2); } .tools-a { margin-left: auto; display: flex; align-items: center; gap: 8px; } .tools-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--el); color: var(--muted); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .tools-btn:hover { border-color: var(--brand); color: var(--brand-2); } .tools-btn.primary { background: var(--grad); border-color: transparent; color: #fff; } .tools-btn.primary:hover { color: #fff; opacity: .93; } .tools-btn[hidden] { display: none; } /* ---------- 拖拽排列（编辑态） ---------- */ .tools.editing .tl { cursor: grab; touch-action: none; outline: 1px dashed var(--line-2); outline-offset: 2px; } /* 编辑态下卡片内的交互元素全部让位给拖拽（按钮单独放行） */ .tools.editing .tl * { pointer-events: none; } .tools.editing .tl .tl-size { pointer-events: auto; } .tl.dz-drag { z-index: 5; cursor: grabbing; border-color: var(--brand); background-color: var(--card-2); box-shadow: var(--shadow-h); outline-color: var(--brand); } .tl-size { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surf-2); color: var(--muted); font-size: 11px; cursor: pointer; } .tl-size:hover { border-color: var(--brand); color: var(--brand-2); } /* 时钟卡没有标题栏，尺寸按钮改为绝对定位挂角 */ .tl-size.abs { position: absolute; top: 8px; right: 8px; z-index: 2; } /* ---------- 卡片「详情」入口 ---------- */ /* 卡片「查看」入口：文字取绿色（原「系统介绍」入口的绿色调，该入口已移除） */ .card-more { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line); color: var(--green); font-size: 11.5px; } .card-more:hover { border-color: var(--green); color: var(--green-2); background: var(--green-soft); } /* 卡片 meta 左组：产品价格固定左下角（原「系统介绍」的位置） */ .card-meta-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } /* ---------- 仪表盘宫格「详情」按钮 ---------- */ .app-info { position: absolute; left: 3px; top: 3px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted-2); font-size: 11px; opacity: 0; background: var(--scrim); border: 0; transition: opacity .15s ease, color .15s ease; } .app:hover .app-info { opacity: 1; } .app-info:hover { color: var(--brand-2); } /* 触屏没有 hover，常显 */ @media (hover: none) { .app-info { opacity: 1; } } /* ---------- 详情页：顶部直达教程 + 官网按钮 ---------- */ .detail-jump { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--el); color: var(--text-2); border-radius: 9px; padding: 0 16px; font-size: 13.5px; font-family: inherit; cursor: pointer; min-height: 42px; white-space: nowrap; } .detail-jump:hover { border-color: var(--brand); color: var(--brand-2); background: var(--brand-soft); } .pblock-b.rich :first-child { margin-top: 0; } /* 详情页：锚点定位时给区块留点上边距，按钮行允许折行 */ .pblock { scroll-margin-top: 14px; } .detail-a { flex-wrap: wrap; } .tut-more { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tut-hint { font-size: 12px; color: var(--muted-2); } /* ===================================================================== 右下角「联系客服」悬浮入口 + 二维码弹窗 数据来自后台「系统设置 → 基本信息 → 联系客服」（二维码 / 手机号）， 两项都为空时模板 templates/partials/kefu.php 整块不输出，这里自然也就没有节点。 开合逻辑在 assets/js/app.js。 ===================================================================== */ .kefu { position: fixed; right: 22px; bottom: 22px; z-index: 88; } .kefu-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: var(--brand); color: #fff; font-family: inherit; font-size: 13.5px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .34); transition: background .15s ease; } .kefu-btn i { font-size: 15px; } .kefu-btn:hover { background: var(--brand-2); color: var(--on-brand-2); } .kefu-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 90; background: rgba(4, 8, 12, .58); } .kefu-pop { position: fixed; right: 22px; bottom: 78px; z-index: 91; width: 244px; padding: 16px 16px 14px; border: 1px solid var(--line-2); border-radius: 12px; background-color: var(--card); background-image: var(--card-grad); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); text-align: center; } .kefu-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted-2); font-size: 18px; line-height: 1; cursor: pointer; } .kefu-x:hover { color: var(--text); background: var(--el); } .kefu-t { display: block; margin-bottom: 12px; font-size: 14px; color: var(--text); } .kefu-t i { margin-right: 3px; color: var(--green); } /* 二维码底色固定为白色：部分上传的图带透明背景，放在深色卡片上会扫不出来 */ .kefu-qr { display: block; width: 184px; height: 184px; margin: 0 auto; padding: 6px; object-fit: contain; border-radius: 9px; background: #fff; } .kefu-tip { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); } .kefu-tel { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); } .kefu-tel i { color: var(--green); } .kefu-tel b { letter-spacing: .3px; } /* 窄屏：贴边显示，弹窗改成横向铺满，避免超出屏幕 */ @media (max-width: 640px) { .kefu { right: 14px; bottom: 14px; } .kefu-pop { left: 14px; right: 14px; bottom: 70px; width: auto; } .kefu-qr { width: 168px; height: 168px; } } /* 页头底部：品牌蓝绿细线（全站统一的品牌痕迹） */ .hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad-line); opacity: .38; pointer-events: none; } /* 侧栏顶部一层极淡的蓝，让左侧导航不至于是一块纯黑（浅色主题下不铺） */ .side { background-image: var(--side-glow); } /* 仪表盘标题：蓝→绿渐变字（不支持 background-clip 的浏览器自动退回纯色，不会出现色块）。 .tools-t 是「小工具」栏的标题，视觉上要与 .apps-ht（应用中心 / 精品推荐）完全一致 */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .dhero-t, .apps-ht, .tools-t { background: var(--grad-line); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } /* 应用中心分类标题：图标加个渐变软底方块 */ .apps-ti { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 8px; font-size: 13px; color: var(--brand-2); background: var(--grad-soft); }