/* ============================================================ 月神 · 电商主题样式 (yueshen) 参考「追风」风格，融入月/夜/星视觉语言与可玩性配置。主题氛围通过切换，语法见文件末尾。 ============================================================ */ :root { /* 月光主题（默认） */ --zm-primary: #6d9eea; /* 主色 */ --zm-primary-deep: #507bc0; /* 深主色 */ --zm-primary-soft: #edf4ff; /* 浅主色底 */ --zm-accent: #e75c4d; /* 价格 / 强调 */ --zm-success: #57b38f; --zm-warning: #f0a148; --zm-text: #343b48; --zm-muted: #7b8494; --zm-border: #e8edf4; --zm-page: #f5f6f8; --zm-surface: #ffffff; --zm-surface-soft: #f8fafc; --zm-shadow: 0 10px 30px rgba(31, 47, 70, 0.06); --zm-shadow-hover: 0 14px 32px rgba(31, 47, 70, 0.1); --zm-glow: none; /* 卡片光晕（可选） */ } /* 星夜氛围：主色转向紫调 */ body[data-theme="star"] { --zm-primary: #8a6fea; --zm-primary-deep: #6b51c8; --zm-primary-soft: #f0edff; --zm-shadow: 0 10px 30px rgba(75, 52, 140, 0.08); --zm-shadow-hover: 0 14px 32px rgba(75, 52, 140, 0.14); } /* 夜幕主题：深色 */ html[data-theme="night"], body[data-theme="night"] { --zm-primary: #82a7ef; --zm-primary-deep: #9cbcf6; --zm-primary-soft: #25304d; --zm-accent: #f0725f; --zm-text: #e6e9f0; --zm-muted: #9aa3b2; --zm-border: #2c3450; --zm-page: #151a26; --zm-surface: #1c2233; --zm-surface-soft: #232a3d; --zm-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); --zm-shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.4); background: var(--zm-page); color: var(--zm-text); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; } .zf-body { display: flex; flex-direction: column; min-height: 100vh; background: var(--zm-page); color: var(--zm-text); font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; line-height: 1.6; transition: background .3s ease, color .3s ease; } body.open { overflow: hidden; } .zf-main { flex: 1 0 auto; width: 100%; padding: 24px 0 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, textarea { font: inherit; } .container { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 18px; } #mask { position: fixed; inset: 0; display: none; background: rgba(16, 24, 40, 0.45); z-index: 998; } body.open #mask { display: block; } /* ---- PJAX 进度条 ---- */ .zf-pjax-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--zm-primary), var(--zm-accent)); z-index: 1200; opacity: 0; transition: width .2s ease, opacity .2s ease; } .zf-pjax-bar.running { opacity: 1; } .zf-pjax-bar.done { width: 100%; opacity: 0; } /* ============ 顶部导航 ============ */ .zf-header-bar { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--zm-border); box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06); backdrop-filter: blur(10px); z-index: 999; transition: background .3s ease, box-shadow .3s ease; } body[data-theme="night"] .zf-header-bar { background: rgba(28, 34, 51, 0.96); } .zf-header-bar.scrolled { box-shadow: 0 8px 26px rgba(15, 23, 42, 0.12); } .zf-header-bar > .container { display: flex; align-items: center; gap: 20px; min-height: 78px; } .zf-logo { flex: 0 0 auto; display: flex; align-items: center; } .zf-logo img { max-height: 52px; max-width: 180px; } .zf-logo .zf-logo-text { font-size: 28px; font-weight: 700; color: #3f4d69; letter-spacing: 1px; white-space: nowrap; } body[data-theme="night"] .zf-logo .zf-logo-text { color: #cdd8ea; } .zf-nav-wrap { flex: 1 1 auto; min-width: 0; } .zf-nav-list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .zf-nav-list::-webkit-scrollbar { display: none; } .zf-nav-item { position: relative; list-style: none; } .zf-nav-item > a { display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 16px; border-radius: 10px; color: #516074; font-size: 14px; font-weight: 600; transition: all .22s ease; white-space: nowrap; } body[data-theme="night"] .zf-nav-item > a { color: #c3cad6; } .zf-nav-item > a:hover, .zf-nav-item > a.active { background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .zf-nav-caret { font-size: 10px; margin-left: 2px; } .zf-nav-sub { position: absolute; top: 46px; left: 50%; min-width: 180px; padding: 8px 0; margin: 0; list-style: none; border: 1px solid var(--zm-border); border-radius: 12px; background: var(--zm-surface); box-shadow: var(--zm-shadow); transform: translateX(-50%) translateY(8px); opacity: 0; visibility: hidden; transition: all .2s ease; z-index: 10; } .zf-nav-item:hover > .zf-nav-sub { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; } .zf-nav-sub a { display: block; padding: 8px 16px; border-radius: 0; font-size: 13px; color: var(--zm-text); } .zf-nav-sub a:hover { background: var(--zm-surface-soft); color: var(--zm-primary-deep); } .zf-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; } .zf-order-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface-soft); color: var(--zm-primary-deep); font-size: 14px; font-weight: 600; transition: all .22s ease; } .zf-order-link:hover { background: var(--zm-primary-soft); } .zf-auth-links { display: flex; align-items: center; gap: 8px; } .zf-auth-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: all .22s ease; } .zf-auth-btn.is-ghost { border: 1px solid var(--zm-border); background: var(--zm-surface-soft); color: #4d5970; } .zf-auth-btn.is-ghost:hover { background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .zf-auth-btn.is-solid { background: linear-gradient(135deg, #83b1f6, var(--zm-primary)); color: #fff; box-shadow: 0 10px 18px rgba(109, 158, 234, 0.24); } .zf-auth-btn.is-solid:hover { transform: translateY(-1px); } .zf-user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border: 1px solid var(--zm-border); border-radius: 999px; background: var(--zm-surface-soft); } .zf-user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .zf-user-info { display: flex; flex-direction: column; line-height: 1.2; } .zf-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; } .zf-user-balance { font-size: 12px; color: var(--zm-muted); } .zf-menu-btn { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; border: 1px solid var(--zm-border); background: var(--zm-surface-soft); color: #556072; cursor: pointer; } .zf-menu-btn i { font-size: 16px; } /* ---- 移动端抽屉 ---- */ .m-nav { position: fixed; top: 0; left: -300px; width: 280px; height: 100vh; background: var(--zm-surface); box-shadow: 20px 0 40px rgba(15, 23, 42, 0.12); overflow-y: auto; z-index: 1000; transition: left .25s ease; } body.open .m-nav { left: 0; } .m-nav .m-wrap { padding: 64px 0 32px; } .m-nav > .m-btn { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--zm-border); background: var(--zm-surface-soft); color: #556072; cursor: pointer; } .m-nav ul { margin: 0; padding: 0; list-style: none; } .m-nav li a { display: block; padding: 0 24px; line-height: 48px; border-bottom: 1px solid var(--zm-border); color: var(--zm-text); font-weight: 600; } .m-nav li a:hover { background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .m-nav ul li > ul { display: block; } .m-nav ul li > ul li { background: var(--zm-surface-soft); } .m-nav ul li > ul li a { padding-left: 36px; font-weight: 500; } /* ============ 底部 ============ */ .zf-footer { margin-top: 30px; padding: 20px 0 24px; border-top: 1px solid var(--zm-border); background: var(--zm-surface); flex-shrink: 0; } .zf-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .zf-footer-brand { display: inline-flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; color: #2f3543; } body[data-theme="night"] .zf-footer-brand { color: var(--zm-text); } .zf-footer-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; color: var(--zm-muted); font-size: 13px; } .zf-footer-meta a { color: var(--zm-muted); } /* ---- 移动端底部导航 ---- */ .zf-mobile-nav { display: none; } /* ============ 通用卡片 / 组件 ============ */ .zf-marquee-card, .zf-toolbar-card, .zf-subtabs-card, .zf-section-card, .zf-side-card, .zf-product-panel, .zf-content-panel, .zf-summary-card { background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 14px; box-shadow: var(--zm-shadow); } .zf-marquee-card { display: flex; align-items: center; gap: 16px; padding: 10px 16px; margin-bottom: 14px; } .zf-marquee-label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 15px; font-weight: 700; color: #e28b3f; } .zf-marquee-content { min-width: 0; color: var(--zm-muted); font-size: 14px; line-height: 1.7; } .zf-marquee-content > * { margin: 0; } .zf-toolbar-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; margin-bottom: 14px; } .zf-toolbar-tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zf-tab-chip, .zf-subtab-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface); color: var(--zm-text); font-size: 15px; font-weight: 700; transition: all .22s ease; cursor: pointer; } .zf-tab-chip:hover, .zf-subtab-chip:hover { border-color: #d6e2f6; background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .zf-tab-chip.is-active, .zf-subtab-chip.is-active { border-color: var(--zm-primary); background: linear-gradient(135deg, #7fb0f4, var(--zm-primary)); color: #fff; box-shadow: 0 10px 20px rgba(109, 158, 234, 0.22); } .zf-search-form { flex: 0 0 340px; max-width: 100%; } .zf-search-box { position: relative; height: 44px; border: 1px solid var(--zm-border); border-radius: 12px; background: var(--zm-surface-soft); padding: 0 110px 0 38px; transition: all .2s ease; } .zf-search-box:focus-within { border-color: var(--zm-primary); box-shadow: 0 0 0 4px rgba(109, 158, 234, 0.12); background: var(--zm-surface); } .zf-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #97a1af; } .zf-search-input { width: 100%; height: 100%; border: 0; background: transparent; outline: none; color: var(--zm-text); font-size: 14px; } .zf-search-input::placeholder { color: #97a1af; } .zf-search-clear { position: absolute; top: 50%; right: 92px; transform: translateY(-50%); display: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #91a0b0; cursor: pointer; } .zf-search-clear.is-visible { display: inline-flex; align-items: center; justify-content: center; } .zf-search-submit { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 78px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #7fb0f4, var(--zm-primary)); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } .zf-subtabs-card { padding: 12px 14px; margin-bottom: 14px; } .zf-subtabs-card.is-hidden { display: none; } .zf-subtabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zf-list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .zf-list-main { min-width: 0; } .zf-list-sidebar { min-width: 0; position: sticky; top: 98px; } .zf-section-card { padding: 18px; } .zf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--zm-border); margin-bottom: 18px; } .zf-section-title { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: #2f3746; } body[data-theme="night"] .zf-section-title { color: var(--zm-text); } .zf-section-title i { color: #394250; } .zf-section-desc { color: var(--zm-muted); font-size: 14px; text-align: right; } .zf-goods-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .zf-product-card, .zf-skeleton-card { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--zm-border); border-radius: 12px; background: var(--zm-surface); transition: all .22s ease; } .zf-product-card:hover { transform: translateY(-2px); box-shadow: var(--zm-shadow-hover); } .zf-product-thumb, .zf-skeleton-thumb { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--zm-surface-soft); } .zf-product-thumb img { width: 100%; height: 100%; object-fit: cover; } .zf-product-body { min-width: 0; flex: 1 1 auto; } .zf-product-name { font-size: 15px; font-weight: 700; line-height: 1.6; color: #2f3746; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body[data-theme="night"] .zf-product-name { color: var(--zm-text); } .zf-product-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .zf-mini-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; border: 1px solid transparent; } .zf-mini-badge.is-auto { color: var(--zm-success); background: #ecfaf4; border-color: #bde7d4; } .zf-mini-badge.is-manual { color: var(--zm-warning); background: #fff6ea; border-color: #ffd9ab; } .zf-mini-badge.is-stock, .zf-mini-badge.is-sales { color: var(--zm-accent); background: #fff3f1; border-color: #ffd4cf; } .zf-product-price-row { display: flex; align-items: baseline; gap: 8px; } .zf-product-price { color: var(--zm-accent); font-size: 18px; font-weight: 700; } .zf-product-market { color: #9ba4b1; font-size: 12px; text-decoration: line-through; } .zf-side-card { padding: 18px; } .zf-side-card + .zf-side-card { margin-top: 16px; } .zf-side-card.is-soft { background: linear-gradient(180deg, var(--zm-primary-soft), var(--zm-surface)); } .zf-side-title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #2f3746; margin-bottom: 16px; } body[data-theme="night"] .zf-side-title { color: var(--zm-text); } .zf-side-content { color: var(--zm-muted); font-size: 14px; line-height: 1.9; } .zf-side-content > *:first-child { margin-top: 0; } .zf-side-content > *:last-child { margin-bottom: 0; } .zf-side-content img { border-radius: 10px; max-width: 100%; } .zf-default-note { margin: 0; padding-left: 18px; } .zf-default-note li + li { margin-top: 6px; } /* 侧栏：商品分类 */ .zf-side-cats { display: flex; flex-direction: column; } .zf-side-cat-group + .zf-side-cat-group { margin-top: 4px; } .zf-side-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--zm-text); transition: all .15s ease; } .zf-side-cat:hover { background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .zf-side-cat--parent { font-weight: 600; } .zf-side-cat--child { padding-left: 22px; font-size: 13px; color: var(--zm-muted); } .zf-side-cat__count { font-style: normal; font-size: 11px; color: var(--zm-muted); background: var(--zm-surface-soft); border: 1px solid var(--zm-border); border-radius: 9px; padding: 1px 7px; } .zf-side-cat-children { display: flex; flex-direction: column; } /* 侧栏：最新/热门商品小卡 */ .zf-side-goods { display: flex; flex-direction: column; gap: 10px; } .zf-side-good { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; transition: background .15s ease; } .zf-side-good:hover { background: var(--zm-surface-soft); } .zf-side-good__img { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; border-radius: 10px; overflow: hidden; background: var(--zm-surface-soft); } .zf-side-good__img img { width: 100%; height: 100%; object-fit: cover; } .zf-side-good__info { min-width: 0; flex: 1; } .zf-side-good__name { font-size: 13px; color: var(--zm-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .zf-side-good__price { font-size: 13px; font-weight: 700; color: var(--zm-accent); margin-top: 4px; } /* 侧栏搜索框 */ .zf-side-search { margin-bottom: 16px; } .zf-side-search .zf-search-box { padding: 0 92px 0 36px; } .zf-side-search .zf-search-submit { width: 70px; } .zf-side-search .zf-search-clear { right: 84px; } .zf-service-list { display: grid; gap: 12px; margin-bottom: 16px; } .zf-service-item { display: flex; gap: 12px; align-items: flex-start; } .zf-service-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--zm-primary-soft); color: var(--zm-primary-deep); display: flex; align-items: center; justify-content: center; } .zf-service-text { display: flex; flex-direction: column; gap: 2px; } .zf-service-text strong { font-size: 14px; color: var(--zm-text); } .zf-service-text span { font-size: 13px; color: var(--zm-muted); } .zf-side-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border-radius: 10px; background: #515671; color: #fff; font-size: 15px; font-weight: 700; transition: all .22s ease; } .zf-side-button:hover { opacity: .94; } .zf-side-button.is-light { background: var(--zm-surface-soft); color: #556072; border: 1px solid var(--zm-border); } .zf-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 70px 20px; color: var(--zm-muted); text-align: center; } .zf-empty-state i { font-size: 44px; color: #c2cad7; } .zf-empty-state .zf-side-button { max-width: 160px; } .zf-skeleton-thumb, .zf-skeleton-line { position: relative; overflow: hidden; background: #edf1f6; } .zf-skeleton-thumb::after, .zf-skeleton-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); transform: translateX(-100%); animation: zf-shimmer 1.3s infinite; } .zf-skeleton-line { height: 12px; margin-bottom: 12px; border-radius: 999px; } .zf-skeleton-line.short { width: 70%; } .zf-skeleton-line.price { width: 40%; } @keyframes zf-shimmer { to { transform: translateX(100%); } } /* ============ 商品详情 ============ */ .zf-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } .zf-detail-main { min-width: 0; } .zf-detail-side { min-width: 0; position: sticky; top: 98px; } .zf-product-panel { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; padding: 18px; } .zf-product-media { border-radius: 14px; overflow: hidden; background: var(--zm-surface-soft); border: 1px solid var(--zm-border); } .zf-product-media .goods-cover { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--zm-surface-soft); cursor: zoom-in; } .zf-product-title { margin: 0 0 12px; font-size: 24px; line-height: 1.45; font-weight: 700; color: #3a4457; } body[data-theme="night"] .zf-product-title { color: var(--zm-text); } .zf-product-brief { margin: 0 0 18px; color: var(--zm-muted); font-size: 14px; } .zf-inline-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .zf-inline-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--zm-border); background: var(--zm-surface-soft); font-size: 13px; font-weight: 700; } .zf-inline-chip.is-stock { color: var(--zm-primary-deep); } .zf-inline-chip.is-sales { color: var(--zm-success); } .zf-inline-chip.is-delivery { color: #8a5b18; } .zf-form-block { margin-bottom: 20px; } .zf-form-block.is-side:last-of-type { margin-bottom: 18px; } .zf-form-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #465063; } body[data-theme="night"] .zf-form-title { color: var(--zm-text); } .zf-form-title i { margin-right: 6px; } /* 规格（兼容 goods.js 的 .spec-* 类，套成 zf 外观） */ .spec-options { display: flex; flex-wrap: wrap; gap: 10px; } .spec-group { margin-bottom: 18px; } .spec-group-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #465063; } body[data-theme="night"] .spec-group-label { color: var(--zm-text); } .spec-group-options { display: flex; flex-wrap: wrap; gap: 10px; } .spec-item { position: relative; } .spec-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .spec-tag { font-size: 11px; color: var(--zm-primary-deep); background: var(--zm-primary-soft); border-radius: 4px; padding: 1px 6px; } .spec-btn { min-width: 68px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface-soft); color: #4e5b70; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s ease; text-align: center; } body[data-theme="night"] .spec-btn { color: var(--zm-text); } .spec-btn:hover { border-color: #d7e2f4; background: var(--zm-primary-soft); } .spec-btn.active { border-color: var(--zm-primary); background: #f2f7ff; color: var(--zm-primary-deep); box-shadow: 0 0 0 3px rgba(109, 158, 234, 0.12); } .spec-btn.disabled, .spec-btn:disabled { cursor: not-allowed !important; opacity: .45 !important; text-decoration: line-through; } /* 数量选择（goods.js 的 .detail-qty-* + zf 样式） */ .detail-qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .detail-qty-label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #465063; } body[data-theme="night"] .detail-qty-label { color: var(--zm-text); } .detail-qty-wrap { display: flex; align-items: center; gap: 10px; } .detail-qty-selector { display: inline-flex; align-items: center; border: 1px solid var(--zm-border); border-radius: 10px; overflow: hidden; background: var(--zm-surface-soft); } .detail-qty-btn { width: 42px; height: 42px; border: 0; background: transparent; color: #556072; cursor: pointer; font-size: 16px; } .detail-qty-input { width: 64px; height: 42px; border: 0; border-left: 1px solid var(--zm-border); border-right: 1px solid var(--zm-border); background: var(--zm-surface); text-align: center; outline: none; font-weight: 700; color: var(--zm-text); -moz-appearance: textfield; } .detail-qty-input::-webkit-outer-spin-button, .detail-qty-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .detail-stock-info, .detail-min-buy { font-size: 13px; color: var(--zm-muted); } /* 支付方式（goods.js 的 .detail-payment-item + zf 外观） */ .detail-payment-section { margin-bottom: 20px; } .detail-payment-title { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #465063; } body[data-theme="night"] .detail-payment-title { color: var(--zm-text); } .detail-payment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .detail-payment-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 14px; border: 1px solid var(--zm-border); border-radius: 12px; background: var(--zm-surface-soft); cursor: pointer; transition: all .22s ease; font-size: 14px; font-weight: 700; color: #394250; } body[data-theme="night"] .detail-payment-item { color: var(--zm-text); } .detail-payment-item:hover, .detail-payment-item.active { border-color: #d7e2f4; background: var(--zm-primary-soft); } .detail-payment-item img { width: 24px; height: 24px; object-fit: contain; } .detail-payment-item.is-disabled { opacity: .5; cursor: not-allowed; } /* 优惠券（goods.js 的 .detail-coupon-*） */ .detail-coupon { margin-bottom: 20px; } .detail-coupon-title { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #465063; } body[data-theme="night"] .detail-coupon-title { color: var(--zm-text); } .detail-coupon-input-row { display: flex; gap: 8px; } .detail-coupon-input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface-soft); padding: 0 14px; color: var(--zm-text); outline: none; } .detail-coupon-input:focus { border-color: var(--zm-primary); box-shadow: 0 0 0 4px rgba(109, 158, 234, 0.12); } .detail-coupon-btn { height: 44px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700; } .detail-coupon-btn.is-primary, .detail-coupon-btn.detail-coupon-btn--primary { background: linear-gradient(135deg, #7fb0f4, var(--zm-primary)); color: #fff; } .detail-coupon-guest-tip { margin-top: 8px; font-size: 12px; color: var(--zm-muted); } .detail-coupon-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .detail-coupon-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zm-primary-deep); cursor: pointer; } .detail-coupon-applied { margin-top: 10px; font-size: 13px; color: var(--zm-success); } /* 操作区 + 购买按钮 */ .detail-actions { margin: 4px 0 20px; } .detail-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: #4f536f; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 22px rgba(79, 83, 111, 0.18); transition: all .22s ease; } .detail-actions .btn:hover { transform: translateY(-1px); } /* 商品详情：缩略图 + 表单字段 + 徽章（goods.js 相关钩子） */ .detail-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; } .detail-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--zm-border); cursor: pointer; opacity: .6; } .detail-thumb.active { border-color: var(--zm-primary); opacity: 1; } .detail-thumb img { width: 100%; height: 100%; object-fit: cover; } .detail-form-field { margin-bottom: 12px; } .detail-form-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--zm-text); margin-bottom: 6px; } .detail-form-field-input { height: 44px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface-soft); padding: 0 14px; color: var(--zm-text); outline: none; width: 100%; } .detail-form-field-input:focus { border-color: var(--zm-primary); box-shadow: 0 0 0 4px rgba(109, 158, 234, 0.12); } .detail-guest-find-section { margin-bottom: 8px; } .goods-badge--auto { color: var(--zm-success); } .goods-badge--manual { color: var(--zm-warning); } /* 详情信息 meta */ .detail-meta-tabs { margin-top: 6px; } .detail-meta-tab-nav { display: flex; gap: 8px; margin-bottom: 12px; } .detail-meta-tab-btn { padding: 8px 16px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface-soft); cursor: pointer; font-size: 14px; font-weight: 600; color: #4b5668; } .detail-meta-tab-btn.active { background: var(--zm-primary-soft); color: var(--zm-primary-deep); border-color: #d6e2f6; } .detail-meta-tab-pane { display: none; } .detail-meta-tab-pane.active { display: block; } .detail-meta { display: flex; flex-direction: column; gap: 8px; } .detail-meta-row { display: flex; gap: 10px; font-size: 14px; } .detail-meta-label { color: var(--zm-muted); } .detail-meta-value { color: var(--zm-text); } .detail-discount-list { display: flex; flex-direction: column; gap: 8px; } .detail-discount-item { font-size: 14px; color: var(--zm-text); } .detail-discount-tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: var(--zm-accent); color: #fff; font-size: 12px; } /* 商品描述内容 */ .zf-content-panel { margin-top: 16px; padding: 18px; } .zf-content-panel.is-mobile { display: none; } .zf-panel-title { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 18px; font-weight: 700; color: #2f3746; } body[data-theme="night"] .zf-panel-title { color: var(--zm-text); } .zf-panel-title i { margin-right: 2px; } .intro { color: #4d5666; font-size: 16px; line-height: 1.9; word-break: break-word; } body[data-theme="night"] .intro { color: var(--zm-text); } .intro > *:first-child { margin-top: 0; } .intro > *:last-child { margin-bottom: 0; } .intro img { max-width: 100%; height: auto; margin: 12px 0; border-radius: 12px; } /* 右侧汇总卡 */ .zf-summary-card { padding: 20px; } .zf-summary-topline { display: inline-flex; align-items: center; gap: 8px; color: #8c6223; font-size: 15px; font-weight: 700; margin-bottom: 16px; } body[data-theme="night"] .zf-summary-topline { color: var(--zm-warning); } .zf-summary-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; color: var(--zm-accent); font-weight: 700; } .zf-summary-price-unit { font-size: 24px; } .zf-summary-price .dynamic-price { font-size: 42px; line-height: 1; } .zf-summary-original { color: #8f97a5; font-size: 16px; text-decoration: line-through; } .zf-side-meta { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--zm-border); } .zf-side-meta-title { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 18px; font-weight: 700; color: #2f3746; } body[data-theme="night"] .zf-side-meta-title { color: var(--zm-text); } .zf-side-meta-item { display: flex; gap: 12px; align-items: flex-start; } .zf-side-meta-item + .zf-side-meta-item { margin-top: 14px; } .zf-side-meta-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; background: var(--zm-primary-soft); color: var(--zm-primary-deep); display: flex; align-items: center; justify-content: center; } .zf-side-meta-item strong { display: block; font-size: 15px; color: var(--zm-text); margin-bottom: 2px; } .zf-side-meta-item span { color: var(--zm-muted); font-size: 14px; } .zf-service-tip { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--zm-primary-soft); color: #47566c; font-size: 14px; font-weight: 700; } body[data-theme="night"] .zf-service-tip { color: var(--zm-text); } /* 面包屑 */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zm-muted); margin: 0 0 14px; flex-wrap: wrap; } .breadcrumb a { color: var(--zm-primary-deep); } .breadcrumb .sep { color: #c2cad7; } /* 分页（服务端渲染的 .pagination-*） */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; } .pagination-btn, .pagination-num, .pagination-dots { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface); color: var(--zm-text); font-size: 14px; font-weight: 600; } a.pagination-btn:hover, a.pagination-num:hover { border-color: #d6e2f6; background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .pagination-num.active { border-color: var(--zm-primary); background: linear-gradient(135deg, #7fb0f4, var(--zm-primary)); color: #fff; } .pagination-btn.disabled { opacity: .45; cursor: not-allowed; } .pagination-dots { border: 0; background: transparent; } /* ============ 兼容 default 回退页的通用类 ============ */ .card { background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 12px; } .wrapper { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 18px; } .page-body { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 18px; } .section { margin-bottom: 20px; } .section-title { font-size: 18px; font-weight: 700; color: var(--zm-text); } .section-header { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .site-announcement { background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; } .site-announcement__head { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #e28b3f; } .empty-state { padding: 50px 20px; text-align: center; color: var(--zm-muted); } .empty-state h3 { color: var(--zm-text); margin: 12px 0 8px; } .empty-state p { margin: 0; } .empty-state .empty-icon { font-size: 44px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 600; } .btn-primary { background: linear-gradient(135deg, #7fb0f4, var(--zm-primary)); color: #fff; } .btn-lg { min-height: 46px; font-size: 15px; } /* 侧面栏回到顶部占位 */ .zf-list-sidebar { align-self: start; } /* 首页最新文章 */ .zf-article-list { display: flex; flex-direction: column; gap: 12px; } .zf-article-row { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--zm-border); border-radius: 12px; background: var(--zm-surface); transition: all .2s ease; } .zf-article-row:hover { transform: translateY(-2px); box-shadow: var(--zm-shadow-hover); } .zf-article-thumb { flex: 0 0 96px; width: 96px; height: 66px; border-radius: 10px; object-fit: cover; background: var(--zm-surface-soft); } .zf-article-body { min-width: 0; flex: 1 1 auto; } .zf-article-title { font-size: 15px; font-weight: 700; color: var(--zm-text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zf-article-meta { font-size: 12px; color: var(--zm-muted); } /* ============================================================ 月神 · 卡片光晕（默认开启，由 body 类名 zs-glow 触发） ============================================================ */ body.zs-glow .zf-product-panel, body.zs-glow .zf-toolbar-card, body.zs-glow .zf-section-card, body.zs-glow .zf-summary-card { box-shadow: var(--zm-shadow), 0 0 24px rgba(109, 158, 234, 0.14); } /* ============ 响应式 ============ */ @media (max-width: 1200px) { .zf-header-actions .zf-order-link { display: none; } .zf-list-layout { grid-template-columns: 1fr 300px; } .zf-product-panel { grid-template-columns: 320px minmax(0, 1fr); } } @media (max-width: 992px) { .zf-menu-btn { display: inline-flex; } .zf-header-bar > .container { flex-wrap: wrap; gap: 12px; padding: 12px 18px; } .zf-order-link { display: none; } .zf-nav-wrap { width: 100%; order: 3; padding-top: 8px; } .zf-nav-item > ul.zf-nav-sub { position: static; min-width: 0; margin-top: 6px; padding: 4px 0 0 12px; background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .zf-nav-item:hover > .zf-nav-sub { transform: none; } .zf-list-layout, .zf-detail-layout, .zf-product-panel { grid-template-columns: 1fr; } .zf-list-sidebar, .zf-detail-side { position: static; } .zf-search-form { flex: 1 1 100%; } .zf-toolbar-card { flex-direction: column; align-items: stretch; } .zf-section-head { flex-direction: column; align-items: flex-start; } .zf-section-desc { text-align: left; } } @media (max-width: 768px) { .container { padding: 0 14px; } .zf-logo .zf-logo-text { font-size: 24px; } .zf-marquee-card, .zf-toolbar-card, .zf-subtabs-card, .zf-section-card, .zf-side-card, .zf-product-panel, .zf-content-panel, .zf-summary-card { border-radius: 12px; } .zf-goods-grid { grid-template-columns: 1fr; } .zf-product-card, .zf-skeleton-card { padding: 12px; } .zf-product-thumb, .zf-skeleton-thumb { flex-basis: 82px; width: 82px; height: 82px; } .zf-product-title { font-size: 22px; } .zf-detail-side .zf-summary-card { width: 100%; } .zf-content-panel.is-desktop { display: none; } .zf-content-panel.is-mobile { display: block; margin-top: 0; } .zf-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; justify-content: space-around; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--zm-border); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); z-index: 997; } body[data-theme="night"] .zf-mobile-nav { background: rgba(28, 34, 51, 0.96); } .zf-body { padding-bottom: 56px; } .zf-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .zf-mobile-nav .nav-item { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; color: #8a93a1; font-size: 11px; font-weight: 600; } .zf-mobile-nav .nav-item.active { color: var(--zm-primary-deep); } .zf-mobile-nav .nav-icon { font-size: 20px; } } @media (max-width: 560px) { .zf-tab-chip, .zf-subtab-chip { min-height: 38px; padding: 0 14px; font-size: 14px; } .zf-toolbar-tabs, .zf-subtabs { gap: 8px; } .zf-marquee-card { align-items: flex-start; flex-direction: column; gap: 8px; } .zf-product-card { gap: 12px; } .zf-footer-inner, .zf-footer-meta { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .zf-footer-meta { gap: 6px; } } /* ============================================================ 博客 / 优惠券 / 登录注册 / 找回密码 / 评论 zf 样式 ============================================================ */ /* ---- 博客布局 ---- */ .zf-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .zf-blog-main { min-width: 0; } .zf-blog-side { min-width: 0; position: sticky; top: 98px; } .zf-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .zf-blog-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zf-blog-card { display: block; background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 12px; overflow: hidden; box-shadow: var(--zm-shadow); transition: all .22s ease; } .zf-blog-card:hover { transform: translateY(-2px); box-shadow: var(--zm-shadow-hover); } .zf-blog-card__img { width: 100%; height: 150px; object-fit: cover; background: var(--zm-surface-soft); } .zf-blog-card__body { padding: 14px 16px 16px; } .zf-blog-card__title { font-size: 16px; font-weight: 700; color: var(--zm-text); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zf-blog-card__excerpt { font-size: 13px; color: var(--zm-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } .zf-blog-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .zf-blog-card__meta { display: flex; gap: 12px; font-size: 12px; color: var(--zm-muted); flex-wrap: wrap; } .zf-blog-card__meta i { margin-right: 3px; } /* ---- 文章详情 ---- */ .zf-blog-detail { background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 14px; padding: 24px 26px; box-shadow: var(--zm-shadow); } .zf-blog-detail__title { font-size: 24px; font-weight: 700; color: var(--zm-text); margin-bottom: 12px; } .zf-blog-detail__meta { display: flex; gap: 16px; font-size: 13px; color: var(--zm-muted); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--zm-border); flex-wrap: wrap; } .zf-blog-detail__body { color: var(--zm-text); font-size: 15px; line-height: 1.9; word-break: break-word; } .zf-blog-detail__body > *:first-child { margin-top: 0; } .zf-blog-detail__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; } .zf-blog-detail__tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; } .zf-blog-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 18px; background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 12px; font-size: 14px; flex-wrap: wrap; } .zf-blog-nav a { color: var(--zm-primary-deep); } .zf-blog-nav span { color: #c2cad7; } /* ---- 评论（沿用评论 JS 生成的 .comment-* 类，套 zf 外观） ---- */ .comment-section { background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 14px; margin-top: 16px; padding: 22px 24px; box-shadow: var(--zm-shadow); } .comment-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .comment-header-left { display: flex; align-items: center; gap: 8px; } .comment-title { font-size: 18px; font-weight: 700; color: var(--zm-text); } .comment-count { font-size: 12px; color: var(--zm-muted); background: var(--zm-surface-soft); border: 1px solid var(--zm-border); border-radius: 9px; padding: 2px 9px; } .comment-sort { display: flex; gap: 6px; } .comment-sort-btn { padding: 4px 10px; border-radius: 8px; font-size: 12px; color: var(--zm-muted); cursor: pointer; } .comment-sort-btn.active { background: var(--zm-primary-soft); color: var(--zm-primary-deep); font-weight: 600; } .comment-form-box { margin-bottom: 18px; } .comment-form-wrapper { display: flex; gap: 12px; } .comment-form-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--zm-primary-soft); color: var(--zm-primary-deep); display: flex; align-items: center; justify-content: center; font-size: 18px; } .comment-form-avatar img { width: 100%; height: 100%; object-fit: cover; } .comment-form-body { flex: 1; min-width: 0; } .comment-textarea { width: 100%; min-height: 70px; border: 1px solid var(--zm-border); border-radius: 12px; background: var(--zm-surface-soft); padding: 12px; color: var(--zm-text); outline: none; resize: vertical; font-family: inherit; font-size: 14px; } .comment-textarea:focus { border-color: var(--zm-primary); box-shadow: 0 0 0 4px rgba(109, 158, 234, 0.12); } .comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .comment-char-count { font-size: 12px; color: var(--zm-muted); } .comment-submit-btn { padding: 8px 20px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #7fb0f4, var(--zm-primary)); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } .comment-submit-btn:hover { filter: brightness(.95); } .comment-login-tip { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--zm-border); border-radius: 12px; color: var(--zm-muted); font-size: 14px; } .comment-login-btn { margin-left: auto; padding: 7px 18px; border-radius: 10px; background: var(--zm-primary); color: #fff; } .comment-list { display: flex; flex-direction: column; gap: 18px; } .comment-loading { color: var(--zm-muted); font-size: 13px; padding: 12px 0; } .comment-empty { color: var(--zm-muted); text-align: center; padding: 24px 0; font-size: 14px; } .comment-item { display: flex; gap: 12px; } .comment-item--reply { margin-left: 34px; } .comment-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--zm-primary-soft); color: var(--zm-primary-deep); display: flex; align-items: center; justify-content: center; font-size: 16px; } .comment-avatar img { width: 100%; height: 100%; object-fit: cover; } .comment-body { flex: 1; min-width: 0; } .comment-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .comment-author { font-size: 14px; font-weight: 700; color: var(--zm-text); } .comment-reply-to { font-size: 12px; color: var(--zm-muted); } .comment-reply-to b { color: var(--zm-muted); } .comment-time { font-size: 12px; color: var(--zm-muted); } .comment-content { font-size: 14px; color: var(--zm-text); line-height: 1.7; } .comment-actions { display: flex; gap: 14px; margin-top: 6px; } .comment-action-btn { font-size: 12px; color: var(--zm-muted); cursor: pointer; } .comment-action-btn:hover { color: var(--zm-primary-deep); } .comment-replies { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--zm-border); display: flex; flex-direction: column; gap: 14px; } .comment-load-more-replies { font-size: 12px; } .comment-load-replies-btn { color: var(--zm-primary-deep); cursor: pointer; } .comment-reply-form { margin-top: 10px; } .comment-cancel-btn { margin-left: 8px; padding: 8px 16px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface); color: var(--zm-muted); cursor: pointer; font-size: 14px; } .comment-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 18px; } .comment-page-btn { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--zm-border); border-radius: 8px; color: var(--zm-text); font-size: 13px; cursor: pointer; } .comment-page-btn.active { border-color: var(--zm-primary); background: var(--zm-primary); color: #fff; } .comment-page-dots { color: var(--zm-muted); } /* ---- 领券中心 ---- */ .zf-coupon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .zf-coupon-card { display: flex; background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 12px; overflow: hidden; box-shadow: var(--zm-shadow); transition: all .2s ease; } .zf-coupon-card:hover { transform: translateY(-2px); box-shadow: var(--zm-shadow-hover); } .zf-coupon-card__left { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(160deg, var(--zm-primary-soft), var(--zm-surface)); border-right: 1px dashed var(--zm-border); } .zf-coupon-card__value { font-size: 24px; font-weight: 800; color: var(--zm-primary-deep); } .zf-coupon-card__caption { font-size: 12px; color: var(--zm-muted); } .zf-coupon-card__right { flex: 1; min-width: 0; padding: 14px 16px; } .zf-coupon-card__title { font-size: 15px; font-weight: 700; color: var(--zm-text); margin-bottom: 6px; } .zf-coupon-card__desc { font-size: 12px; color: var(--zm-muted); margin-bottom: 10px; } .zf-coupon-card__meta { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .zf-coupon-card__tag { font-size: 11px; color: var(--zm-primary-deep); background: var(--zm-primary-soft); border-radius: 6px; padding: 2px 8px; } .zf-coupon-card__valid { font-size: 11px; color: var(--zm-muted); } .zf-coupon-card__code { font-size: 12px; color: var(--zm-muted); margin-bottom: 12px; } .zf-coupon-card__code-val { font-family: Menlo, Consolas, monospace; color: var(--zm-text); } .zf-coupon-card__actions { display: flex; gap: 8px; } .zf-coupon-btn { padding: 7px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .zf-coupon-btn--ghost { border-color: var(--zm-border); background: var(--zm-surface); color: var(--zm-muted); } .zf-coupon-btn--ghost:hover { border-color: #d6e2f6; background: var(--zm-primary-soft); color: var(--zm-primary-deep); } .zf-coupon-btn--primary { background: var(--zm-primary); color: #fff; } .zf-coupon-btn--primary:hover { filter: brightness(.95); } .zf-coupon-btn.is-disabled { opacity: .5; cursor: not-allowed; } /* ---- 登录 / 注册 / 找回密码 ---- */ .zf-auth-page { display: flex; justify-content: center; padding: 30px 16px 0; } .zf-auth-card { width: 100%; max-width: 420px; background: var(--zm-surface); border: 1px solid var(--zm-border); border-radius: 16px; padding: 30px 28px; box-shadow: var(--zm-shadow); } .zf-auth-title { font-size: 22px; font-weight: 700; color: var(--zm-text); margin: 0 0 4px; text-align: center; } .zf-auth-subtitle { font-size: 14px; color: var(--zm-muted); margin: 0 0 22px; text-align: center; } .zf-auth-field { margin-bottom: 16px; } .zf-auth-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; } body[data-theme="night"] .zf-auth-label { color: var(--zm-text); } .zf-auth-input-wrap { position: relative; } .zf-auth-input-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9aa3af; font-size: 15px; } .zf-auth-input-wrap input { width: 100%; height: 46px; padding: 0 42px 0 40px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface-soft); color: var(--zm-text); outline: none; font-size: 14px; } .zf-auth-input-wrap input:focus { border-color: var(--zm-primary); box-shadow: 0 0 0 4px rgba(109, 158, 234, 0.12); } .zf-auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: #9aa3af; cursor: pointer; font-size: 15px; } .zf-auth-forgot { text-align: right; margin-bottom: 16px; } .zf-auth-forgot a { color: var(--zm-muted); font-size: 13px; } .zf-auth-forgot a:hover { color: var(--zm-primary-deep); } .zf-auth-submit { width: 100%; height: 46px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #7fb0f4, var(--zm-primary)); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 18px rgba(109, 158, 234, 0.24); } .zf-auth-submit:hover { filter: brightness(.95); } .zf-auth-submit.is-loading { opacity: .7; } .zf-auth-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--zm-muted); } .zf-auth-footer a { color: var(--zm-primary-deep); margin-left: 4px; } .zf-auth-footer a:hover { text-decoration: underline; } .zf-captcha { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--zm-border); border-radius: 10px; background: var(--zm-surface-soft); } .zf-captcha:focus-within { border-color: var(--zm-primary); background: var(--zm-surface); } .zf-captcha__expr { flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--zm-text); user-select: none; } .zf-captcha__input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 15px; color: var(--zm-text); outline: none; } .zf-captcha__refresh { flex-shrink: 0; border: none; background: none; color: var(--zm-muted); cursor: pointer; padding: 4px; font-size: 14px; } .zf-captcha__refresh:hover { color: var(--zm-primary-deep); } @media (max-width: 992px) { .zf-blog-layout { grid-template-columns: 1fr; } .zf-blog-side { position: static; } .zf-blog-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .zf-blog-grid, .zf-blog-grid--3col { grid-template-columns: 1fr; } .zf-coupon-grid { grid-template-columns: 1fr; } .zf-blog-detail { padding: 18px 16px; } .comment-section { padding: 16px 14px; } }