/** * ============================================ * 爆款详情图页面 - 遵循 Design System 规范 * ============================================ */ /* ======================================== Design System 变量 (与全局保持一致) ======================================== */ :root { --page-padding: 10px; --section-gap: 12px; --card-gap: 12px; --radius-lg: 12px; --radius-md: 12px; --banner-aspect-ratio: 2.1 / 1; --banner-padding: 20px; /* 与 assets/common.css .app-container 同宽，宽屏不横向拉满 */ --h5-app-max-width: 430px; /* 工具页轻量选中态（统一深色 Logo 色系） */ --tool-brand: #1a2a33; --tool-brand-rgb: 26, 42, 51; --tool-brand-soft: rgba(var(--tool-brand-rgb), 0.10); --tool-brand-border: rgba(var(--tool-brand-rgb), 0.28); --tool-brand-ring: rgba(var(--tool-brand-rgb), 0.18); } @media (min-width: 768px) { :root { --h5-app-max-width: 540px; } } @media (min-width: 1024px) { :root { --h5-app-max-width: 640px; } } /* * 手机/WebView 输入：common.css 的 html,body{height:100%;overflow:hidden} + * .main-content 内滚，在软键盘弹起/收起时视口高度不同步，易出现内容被顶上去、底部大块空白。 * 给 加 class="h5-tool-html-scroll"，由 html 承担纵向滚动（与 paint-studio-html-scroll 同思路）。 */ html.h5-tool-html-scroll { overflow-x: hidden !important; overflow-y: auto !important; height: 100% !important; -webkit-overflow-scrolling: touch; } html.h5-tool-html-scroll body.detail-page { height: auto !important; min-height: 100% !important; max-height: none !important; overflow: visible !important; touch-action: manipulation; overscroll-behavior-y: contain; } html.h5-tool-html-scroll body.detail-page .app-container { height: auto !important; overflow: visible !important; min-height: 100vh; min-height: 100dvh; } html.h5-tool-html-scroll body.detail-page .main-content { overflow: visible !important; flex: none !important; min-height: 0; } /* 与全站弧形浮卡一致：外层渐变由 common.css body 提供 */ .detail-page { min-height: 100%; } .detail-page .app-container { background: var(--bg-primary, #fff); } .detail-page .main-content { background: transparent; padding: var(--page-padding); padding-bottom: 40px; } /* z-index 须低于全屏层 .detail-view-page(9999)，避免盖住历史详情 */ .detail-page .nav-header { position: relative; z-index: 100; background: #fff; color: var(--text-primary); border-color: #e5e7eb; box-shadow: 0 1px 0 rgba(0,0,0,0.04); border-radius: 0; } .detail-page .nav-back { color: var(--text-primary); background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; z-index: 3; } .detail-page .nav-title { color: var(--text-primary); pointer-events: none; } .section-card { background: #fff; border-radius: var(--radius-lg); padding: var(--page-padding); margin-bottom: var(--section-gap); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .section-title { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .section-title .hint { font-size: 13px; font-weight: 500; color: var(--tool-brand); background: rgba(var(--tool-brand-rgb), 0.08); padding: 4px 10px; border-radius: 12px; } .section-title i { color: var(--accent); } /* 横向滚动容器 - 修复滑动问题 */ .scroll-row { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: scroll !important; overflow-y: hidden; padding: 8px 4px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .scroll-row::-webkit-scrollbar { display: none; width: 0; height: 0; } /* 选项按钮 - 主色胶囊 */ .chip-btn { flex: 0 0 auto; min-width: fit-content; padding: 10px 18px; background: var(--chip-bg, #f4f5f7); border: 1px solid var(--chip-border, rgba(20, 21, 33, 0.1)); border-radius: 100px; font-size: var(--fs-body); color: var(--text-secondary); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; white-space: nowrap; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .chip-btn.active { background: var(--chip-bg-on, rgba(26, 42, 51, 0.1)); color: var(--primary-dark); border: 1px solid var(--chip-border-on, rgba(28, 48, 56, 0.32)); box-shadow: none; font-weight: 600; } .chip-btn .chip-code { font-weight: 600; opacity: 0.9; margin-right: 4px; letter-spacing: 0.02em; } .chip-btn:active { opacity: 0.9; } /* 上传区域 */ .upload-zone { border: 2px dashed #d1d5db; border-radius: 16px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: #f9fafb; position: relative; } .upload-zone-label { display: block; cursor: pointer; width: 100%; } .upload-zone:hover, .upload-zone:active { border-color: var(--primary); background: rgba(20, 21, 33, 0.05); } .upload-zone.has-image { padding: 12px; border-color: var(--primary); border-style: solid; } .upload-preview { display: none; flex-direction: column; align-items: center; width: 100%; } .upload-zone.has-image .upload-preview { display: flex !important; } .upload-zone.has-image .upload-zone-label { display: none !important; } .upload-zone #fileInput { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .reselect-btn { margin-top: 10px; } .upload-zone.has-image img, .upload-preview img { max-width: 100%; max-height: 200px; border-radius: 12px; object-fit: contain; display: block; } .upload-icon-wrap { width: 64px; height: 64px; margin: 0 auto 16px; background: linear-gradient(135deg, rgba(var(--tool-brand-rgb), 0.12) 0%, rgba(11, 18, 32, 0.05) 100%); border: 1px solid rgba(var(--tool-brand-rgb), 0.14); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--tool-brand); } .upload-icon-wrap svg { width: 30px; height: 30px; } .section-title .h5-ico-inline { display: inline-block; vertical-align: -4px; width: 17px; height: 17px; margin-right: 6px; color: var(--tool-brand); } .upload-text { font-size: var(--fs-module-title); font-weight: 500; color: var(--text-primary); margin-bottom: 6px; } .upload-desc { font-size: var(--fs-label); color: var(--text-muted); } .custom-input-wrap { margin-top: 12px; display: none; } .custom-input-wrap.show { display: block; } .product-note-textarea { width: 100%; min-height: 88px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px; font-size: var(--fs-body); line-height: 1.5; color: var(--text-primary); background: #fff; resize: vertical; box-sizing: border-box; font-family: inherit; } .product-note-textarea:focus { outline: none; border-color: var(--tool-brand); box-shadow: 0 0 0 3px rgba(var(--tool-brand-rgb), 0.12); } .product-note-hint { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 8px; line-height: 1.4; } .detail-bench-hint { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 12px 0 0; padding: 10px 12px; background: rgba(var(--tool-brand-rgb), 0.06); border-radius: 10px; border: 1px solid rgba(var(--tool-brand-rgb), 0.12); } .detail-bench-hint strong { color: var(--tool-brand); font-weight: 700; } .detail-info-value.multiline { white-space: pre-wrap; word-break: break-word; font-weight: 400; } .detail-topics-section { margin-bottom: 20px; } .detail-topics-scroll { max-height: min(280px, 45vh); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; } .detail-topics-scroll::-webkit-scrollbar { width: 6px; } .detail-topics-scroll::-webkit-scrollbar-thumb { background: rgba(20, 21, 33, 0.15); border-radius: 6px; } .detail-topic-item { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px; min-height: 52px; background: #f8f9fa; border-radius: 12px; margin-bottom: 8px; border: 1px solid #e5e7eb; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; max-width: 100%; } .detail-topic-item.selected { border-color: var(--tool-brand); box-shadow: 0 0 0 2px var(--tool-brand-ring); background: #fff; } .detail-topic-item:last-child { margin-bottom: 0; } .detail-topic-num { flex-shrink: 0; width: 24px; height: 24px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3); } .detail-topic-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--text-primary); word-break: break-word; overflow-wrap: anywhere; } .detail-topic-copy { flex-shrink: 0; width: 32px; height: 32px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; font-size: 14px; transition: all 0.15s; } .detail-topic-copy:active { background: rgba(99, 102, 241, 0.1); color: #6366f1; border-color: rgba(99, 102, 241, 0.3); } .detail-topic-copy svg { flex-shrink: 0; } /* 旧的 chip 样式保留兼容 */ .detail-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; } .detail-topic-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 8px 12px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: 13px; color: var(--text-primary); line-height: 1.35; word-break: break-all; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; } .detail-topic-chip.selected { border-color: var(--primary); background: rgba(20, 21, 33, 0.06); font-weight: 500; } .detail-topic-chip:active { opacity: 0.92; } .result-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; } .result-img-wrap { aspect-ratio: 9/16; background: #f4f4f5; border-radius: 12px; overflow: hidden; } .result-images img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; } .img-error { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: #9ca3af; text-align: center; padding: 12px; } .img-error a { color: var(--primary); margin-top: 8px; } .task-status { padding: 16px; background: #f0fdf4; border-radius: 12px; margin-bottom: 16px; text-align: center; } .task-status.running { background: #eff6ff; } .task-status.failed { background: #fef2f2; } /* Tab 切换 - 主色 */ .detail-tabs { display: flex; gap: 0; margin-bottom: 20px; background: #f3f4f6; border-radius: 14px; padding: 4px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } .detail-tab { flex: 1; padding: 12px 20px; border: none; background: transparent; border-radius: 10px; font-size: 15px; font-weight: 500; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; } .detail-tab.active { background: #e4e4e7; color: #0a0a0a; box-shadow: none; border: 1px solid #52525b; font-weight: 700; } .detail-tab .h5-ico-tab { width: 18px; height: 18px; flex-shrink: 0; color: currentColor; opacity: 0.72; } .detail-tab.active .h5-ico-tab { color: #0a0a0a; opacity: 1; } .detail-tab:active { transform: scale(0.98); } /* 历史记录（与 .scroll-row 一致，保证横向可滑；父级含 overflow-x:hidden 时须约束宽度） */ .history-section { display: none; min-width: 0; width: 100%; max-width: 100%; } .history-section.show { display: block; } .create-section { display: block; } .create-section.hide { display: none; } /* 提交后 / 点「历史」：隐藏顶部四步向导，避免仍像停留在创作页 */ body.detail-tab-history-active:not(.page-detail-image-tool--product-max) .detail-wizard-track { display: none !important; } body.detail-tab-history-active .detail-tab[data-tab="history"] { animation: detailHistTabPulse 0.65s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes detailHistTabPulse { 0% { transform: scale(1); box-shadow: none; } 40% { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(29, 79, 255, 0.18); } 100% { transform: scale(1); box-shadow: none; } } .history-section.detail-history-reveal--played { animation: detailHistoryReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes detailHistoryReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.detail-tab-history-active .detail-tab[data-tab="history"] { animation: none; } .history-section.detail-history-reveal--played { animation: none; } } .history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; } .history-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .history-title i { color: var(--primary); } .history-notice { font-size: 12px; color: #9ca3af; margin-bottom: 16px; } .section-hint-swipe { font-size: 11px; color: #9ca3af; font-weight: 400; } .usage-tips { background: transparent; border-radius: 0; padding: 0; margin-top: 0; margin-bottom: 0; border: none; } .usage-tips-title { display: none; } .usage-tips ul { margin: 0; padding-left: 0; color: #9ca3af; font-size: 12px; line-height: 1.6; list-style: none; text-align: center; } .usage-tips li { margin-bottom: 2px; display: inline; } .usage-tips li::after { content: " · "; color: #d1d5db; } .usage-tips li:last-child::after { content: ""; } /* 提交按钮 - 深色（Logo 色系） */ .detail-page .submit-btn { background: linear-gradient(135deg, #1a2a33 0%, #0f172a 100%) !important; color: #fff !important; border: none !important; border-radius: 16px !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25); font-weight: 600; margin-top: 24px; margin-bottom: 16px; } .detail-page .submit-btn:disabled { background: #d1d5db !important; color: #6b7280 !important; box-shadow: none; } /* 提交中：同行参考 — 浅蓝圆角条 + 深色字 + 左侧转圈 */ .detail-page .submit-btn.is-generating:disabled { display: flex !important; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, rgba(26, 42, 51, 0.06), rgba(26, 42, 51, 0.11)) !important; color: var(--primary-dark) !important; border: 1px solid rgba(30, 58, 68, 0.22) !important; box-shadow: 0 2px 10px rgba(26, 42, 51, 0.1) !important; opacity: 1 !important; border-radius: 999px !important; } .detail-page .submit-btn.is-generating:disabled i { color: var(--primary); } .detail-page .submit-btn:not(:disabled):active { transform: scale(0.99); } /* 提交后：参考 — 屏幕中央白底圆角提示（不占满屏） */ .detail-submit-hint { display: none; position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 10050; max-width: min(92vw, 300px); pointer-events: none; } .detail-submit-hint.show { display: block; } .detail-submit-hint-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px 22px; border-radius: 16px; background: #fff; color: var(--text-primary); font-size: var(--fs-module-title); font-weight: 500; line-height: 1.45; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.06); } .detail-submit-hint-spinner { width: 28px; height: 28px; border: 3px solid #e5e7eb; border-top-color: var(--primary); border-radius: 50%; animation: detailSubmitHintSpin 0.7s linear infinite; } .detail-submit-hint-sub { display: block; font-size: 13px; font-weight: 400; color: var(--primary); margin-top: -4px; } @keyframes detailSubmitHintSpin { to { transform: rotate(360deg); } } #toast.detail-toast.toast { bottom: auto !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(255,255,255,0.97) !important; color: var(--text-primary) !important; border-radius: 16px !important; padding: 16px 22px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important; max-width: min(86%, var(--h5-app-max-width)); text-align: center; line-height: 1.5; font-weight: 500; } /* ========== 高级历史记录样式 ========== */ /* 顶部标题栏 */ .history-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; margin-bottom: 8px; } .history-header-left { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-primary); } .history-header-left i { color: var(--primary); } .history-refresh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; min-height: 44px; background: var(--tool-brand); border: none; border-radius: 100px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; box-shadow: 0 2px 10px rgba(var(--tool-brand-rgb), 0.2); transition: transform 0.15s ease, box-shadow 0.2s ease; flex-shrink: 0; } .history-refresh-btn i { font-size: 15px; } .history-refresh-btn:active { transform: scale(0.97); box-shadow: 0 1px 6px rgba(var(--tool-brand-rgb), 0.18); } .history-refresh-btn.loading { opacity: 0.75; pointer-events: none; } .history-refresh-btn.loading .fa-sync-alt { animation: historyRefreshSpin 0.75s linear infinite; } @keyframes historyRefreshSpin { to { transform: rotate(360deg); } } /* 提示条（对标：暖色顶栏 + 时钟） */ .history-notice-bar { font-size: 12px; color: #9ca3af; margin-bottom: 16px; padding: 0 4px; } .history-notice-bar--prominent { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: linear-gradient(105deg, #fff7ed 0%, #ffedd5 48%, #fffbeb 100%); border: 1px solid rgba(251, 146, 60, 0.28); color: #9a3412; font-size: 12px; line-height: 1.5; box-shadow: 0 2px 10px rgba(234, 88, 12, 0.06); } .history-notice-bar--prominent i { flex-shrink: 0; margin-top: 2px; color: #4338CA; font-size: 14px; } /* 处理中 / 已完成 双卡（对标数据看板） */ .history-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .history-stat-card { border-radius: 14px; padding: 12px 10px 14px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } .history-stat-card--run { background: linear-gradient(165deg, #fffbeb 0%, #fff7ed 100%); border-color: rgba(251, 191, 36, 0.35); } .history-stat-card--done { background: linear-gradient(165deg, #ecfdf5 0%, #f0fdf4 100%); border-color: rgba(16, 185, 129, 0.22); } .history-stat-num { display: block; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .history-stat-card--run .history-stat-num { color: #07111f; } .history-stat-card--done .history-stat-num { color: #047857; } .history-stat-label { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: #64748b; } /* 底部：自动刷新说明（对标沙漏条） */ .history-poll-foot { display: none; align-items: center; gap: 10px; margin: 4px 4px 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(105deg, rgba(255, 247, 237, 0.95), rgba(254, 243, 199, 0.55)); border: 1px solid rgba(251, 191, 36, 0.35); color: #9a3412; font-size: 12px; line-height: 1.45; } .history-poll-foot i { color: #4338CA; flex-shrink: 0; } .history-generating-hint { padding: 12px 16px; background: linear-gradient(135deg, #f7f7f9, #eceef2); border-radius: 12px; font-size: 14px; color: var(--text-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(20, 21, 33, 0.1); } .history-generating-hint i { font-size: 16px; color: var(--primary); } /* 已不再在 HTML 中输出；兜底隐藏，避免 CDN 缓存旧页仍露出进度/编号区 */ .detail-history-live { display: none !important; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); border: 1px solid rgba(79, 70, 229, 0.18); box-shadow: 0 2px 12px rgba(79, 70, 229, 0.06); } .detail-history-live-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .detail-history-live-title { font-size: 14px; font-weight: 700; color: #1e293b; } .detail-history-live-title i { color: #4f46e5; margin-right: 4px; } .detail-history-live-task { font-size: 12px; font-weight: 600; color: #64748b; } .detail-history-live-status { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 10px; line-height: 1.4; } .detail-history-live-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; gap: 6px; } .detail-history-live-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #94a3b8; font-weight: 600; } .detail-history-live-step-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; } .detail-history-live-step--done { color: #059669; } .detail-history-live-step--done .detail-history-live-step-dot { background: #10b981; box-shadow: 0 0 0 1px #a7f3d0; } .detail-history-live-step--active { color: #4f46e5; } .detail-history-live-step--active .detail-history-live-step-dot { background: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25); animation: detail-live-pulse 1.2s ease-in-out infinite; } @keyframes detail-live-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.85; } } .detail-history-live-eid { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.85); border: 1px dashed rgba(79, 70, 229, 0.35); } .detail-history-live-eid-label { font-size: 11px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 0.02em; } .detail-history-live-eid-val { flex: 1; min-width: 0; font-size: 11px; word-break: break-all; color: #0f172a; background: transparent; padding: 0; } .detail-history-live-eid-copy { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(79, 70, 229, 0.35); background: #fff; color: #4f46e5; cursor: pointer; } .history-card-eid { display: none !important; margin-top: 6px; font-size: 10px; font-weight: 600; color: #4f46e5; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(79, 70, 229, 0.2); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-submitting-banner { display: none; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; background: linear-gradient(135deg, #f7f7f9, #eceef2); border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-primary); border: 1px solid rgba(20, 21, 33, 0.12); } .history-submitting-banner i { color: var(--primary); } /* 生成记录：双列网格（一行两张），纵向浏览 */ .history-scroll-container { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: visible; padding: 0; margin: 0; } .history-scroll-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 0 16px; align-items: stretch; } /* 卡片样式 - 高级设计 */ .history-card { width: 100%; min-width: 0; max-width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.04); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; touch-action: manipulation; -webkit-tap-highlight-color: rgba(20, 21, 33, 0.08); display: flex; flex-direction: column; } .history-card:active { transform: scale(0.98); } .history-card-inner { position: relative; aspect-ratio: 3/4; overflow: hidden; } .history-thumb { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, #f8f9fa, #e9ecef); } .history-card--busy .history-thumb { background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 45%, #fde68a 100%); } /* 图生万物等共用页：缩略图角标（爆款详情图历史已改用 .history-platform-pill） */ .history-platform-tag { position: absolute; bottom: 8px; left: 8px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; background: rgba(0, 0, 0, 0.6); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* 状态标签 - 右上角 */ .history-status-tag { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .history-status-tag.generating { background: rgba(245, 158, 11, 0.95); color: #fff; border: 1px solid rgba(217, 119, 6, 0.35); } .history-status-tag.completed { background: rgba(16, 185, 129, 0.9); color: #fff; } .history-status-tag.partial { background: linear-gradient(135deg, rgba(251, 146, 60, 0.95) 0%, rgba(234, 88, 12, 0.9) 100%); color: #fff; } .history-status-tag.failed { background: rgba(239, 68, 68, 0.9); color: #fff; } .history-status-tag.missing { background: rgba(217, 119, 6, 0.92); color: #fff; border: 1px solid rgba(180, 83, 9, 0.35); } .lh-history-fail-hint { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #fef2f2; border: 1px solid rgba(248, 113, 113, 0.35); color: #b91c1c; font-size: 11px; line-height: 1.45; font-weight: 500; } .history-card--failed .history-card-inner { outline: 1px solid rgba(248, 113, 113, 0.35); } .history-fail-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; background: rgba(254, 242, 242, 0.55); color: #dc2626; font-size: 22px; } /* 删除按钮 - 左上角 */ .history-card-delete { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, background 0.2s, transform 0.15s; z-index: 10; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .history-card:hover .history-card-delete, .history-card:focus-within .history-card-delete { opacity: 1; } .history-card-delete:hover { background: rgba(239, 68, 68, 0.9); transform: scale(1.1); } .history-card-delete:active { transform: scale(0.95); } /* 移动端始终显示删除按钮 */ @media (hover: none) and (pointer: coarse) { .history-card-delete { opacity: 0.85; } } .history-card-hint { margin-top: 10px; padding: 8px 10px; font-size: 11px; line-height: 1.45; color: #9a3412; background: rgba(254, 243, 199, 0.95); border: 1px solid rgba(251, 191, 36, 0.45); border-radius: 10px; } .detail-result-alert { margin-bottom: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; border-radius: 12px; } .detail-result-alert--warn { color: #9a3412; background: rgba(254, 243, 199, 0.98); border: 1px solid rgba(251, 191, 36, 0.5); } /* 卡片标题区（平台 pill + 相对时间，对标信息层级） */ .history-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary, #0f172a); margin-bottom: 6px; letter-spacing: 0.01em; } .history-card-subrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .history-platform-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-platform-pill--tb { background: rgba(29, 79, 255, 0.12); color: #07111f; border: 1px solid rgba(29, 79, 255, 0.28); } .history-platform-pill--xhs { background: rgba(255, 36, 66, 0.1); color: #be123c; border: 1px solid rgba(255, 36, 66, 0.22); } .history-platform-pill--dy { background: rgba(15, 23, 42, 0.08); color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.12); } .history-platform-pill--def { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.25); } /* 生成中遮罩：半透明暗层压底图，商品/人像仍清晰可见（对齐常见同行历史卡） */ .history-generating-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.14) 0%, rgba(15, 23, 42, 0.42) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .history-ai-dots { display: flex; gap: 6px; align-items: center; } .history-ai-dots span { width: 7px; height: 7px; border-radius: 50%; background: #4F46E5; opacity: 0.35; animation: historyAiDot 1.1s ease-in-out infinite; } .history-ai-dots span:nth-child(2) { animation-delay: 0.15s; } .history-ai-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes historyAiDot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.92); } 40% { opacity: 1; transform: scale(1.05); } } .history-generating-line { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #0f172a; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18); border: 1px solid rgba(255, 255, 255, 0.75); } .history-generating-overlay.hide { display: none; } /* 底部信息 */ .history-card-info { padding: 12px; background: #fff; } .history-card-meta { font-size: 12px; color: #6b7280; display: flex; align-items: center; gap: 4px; } .history-card-meta--dim { margin-top: 6px; font-size: 11px; color: #94a3b8; } .history-card-duration { margin-top: 4px; font-size: 11px; color: #64748b; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .history-card-time { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #64748b; font-weight: 500; font-variant-numeric: tabular-nums; } .history-card-time i { font-size: 11px; color: #94a3b8; } /* 空状态 */ .history-empty { text-align: center; padding: 60px 20px; color: #9ca3af; font-size: 14px; } .history-empty i { font-size: 48px; margin-bottom: 16px; opacity: 0.4; display: block; } /* 详情全屏页面（与 .app-container 同宽居中，避免 PC 整屏过宽） */ .detail-view-page { position: fixed; inset: 0; background: var(--bg-secondary, #f7f7f8); z-index: 9999; display: none; flex-direction: column; align-items: center; overflow: hidden; } .detail-view-page.show { display: flex; } .detail-view-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; width: 100%; max-width: var(--h5-app-max-width); margin: 0 auto; background: #fff; box-sizing: border-box; } @media (min-width: 431px) { .detail-view-shell { box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); } } /* 小红薯 / 抖音 调起全屏动效（与参考稿：深色星空 + 渐变环 + 底部提示条） */ .detail-app-jump-overlay { position: absolute; inset: 0; z-index: 10001; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; background: radial-gradient(120% 90% at 50% 20%, #2d1b4e 0%, #0f1020 45%, #070814 100%); overflow: hidden; } .detail-app-jump-overlay.show { display: flex; } .detail-app-jump-overlay--dy { background: radial-gradient(120% 90% at 50% 18%, #0a1628 0%, #050a12 50%, #020308 100%); } .detail-app-jump-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; background-image: radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 55%), radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, 0.75) 0%, transparent 55%), radial-gradient(1px 1px at 32% 68%, rgba(255, 255, 255, 0.65) 0%, transparent 55%), radial-gradient(1px 1px at 88% 55%, rgba(255, 255, 255, 0.8) 0%, transparent 55%), radial-gradient(1px 1px at 55% 38%, rgba(255, 255, 255, 0.5) 0%, transparent 55%), radial-gradient(1px 1px at 22% 42%, rgba(255, 255, 255, 0.45) 0%, transparent 55%), radial-gradient(1px 1px at 65% 82%, rgba(255, 255, 255, 0.55) 0%, transparent 55%), radial-gradient(1px 1px at 40% 88%, rgba(255, 255, 255, 0.4) 0%, transparent 55%); } .detail-app-jump-stars--dy { opacity: 0.45; background-image: radial-gradient(1px 1px at 15% 25%, rgba(120, 220, 255, 0.85) 0%, transparent 55%), radial-gradient(1px 1px at 70% 15%, rgba(255, 120, 200, 0.55) 0%, transparent 55%), radial-gradient(1px 1px at 50% 60%, rgba(255, 255, 255, 0.35) 0%, transparent 55%), radial-gradient(1px 1px at 85% 70%, rgba(100, 200, 255, 0.5) 0%, transparent 55%); } .detail-app-jump-card { position: relative; z-index: 1; text-align: center; max-width: 320px; width: 100%; } .detail-app-jump-hero { position: relative; width: 112px; height: 112px; margin: 0 auto 22px; } .detail-app-jump-ring-glow { position: absolute; inset: -12px; border-radius: 50%; filter: blur(18px); opacity: 0.75; animation: detailAppJumpGlowPulse 2.2s ease-in-out infinite; } .detail-app-jump-ring-glow--xhs { background: radial-gradient(circle at 40% 40%, rgba(56, 189, 248, 0.55), rgba(244, 63, 94, 0.35) 55%, transparent 70%); } .detail-app-jump-ring-glow--dy { background: radial-gradient(circle at 35% 45%, rgba(34, 211, 238, 0.5), rgba(244, 114, 182, 0.35) 50%, transparent 68%); } @keyframes detailAppJumpGlowPulse { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 0.9; transform: scale(1.04); } } .detail-app-jump-ring-outer { position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #22d3ee, #a78bfa, #f43f5e, #22d3ee); animation: detailAppJumpRingSpin 1.35s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .detail-app-jump-ring-outer--dy { background: conic-gradient(from 120deg, #22d3ee, #f472b6, #38bdf8, #818cf8, #22d3ee); } @keyframes detailAppJumpRingSpin { to { transform: rotate(360deg); } } .detail-app-jump-ring-dashed { position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.22); animation: detailAppJumpDashSpin 8s linear infinite; } @keyframes detailAppJumpDashSpin { to { transform: rotate(-360deg); } } .detail-app-jump-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .detail-app-jump-icon--xhs { background: linear-gradient(145deg, #fb7185 0%, #e11d48 45%, #be123c 100%); font-family: ui-sans-serif, system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; } .detail-app-jump-icon--dy { background: linear-gradient(145deg, #0f172a 0%, #020617 50%, #000 100%); border: 1px solid rgba(56, 189, 248, 0.35); font-size: 26px; line-height: 1; color: #67e8f9; text-shadow: 0 0 12px rgba(34, 211, 238, 0.55); } .detail-app-jump-main { margin: 0 0 14px 0; font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.96); letter-spacing: 0.04em; } .detail-app-jump-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; } .detail-app-jump-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); animation: detailAppJumpDot 1.1s ease-in-out infinite; } .detail-app-jump-dots span:nth-child(1) { animation-delay: 0s; } .detail-app-jump-dots span:nth-child(2) { animation-delay: 0.15s; } .detail-app-jump-dots span:nth-child(3) { animation-delay: 0.3s; } .detail-app-jump-dots span:nth-child(4) { animation-delay: 0.45s; } .detail-app-jump-dots--dy span { background: rgba(103, 232, 249, 0.35); } @keyframes detailAppJumpDot { 0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1.05); background: rgba(255, 255, 255, 0.95); } } .detail-app-jump-dots--dy span { animation-name: detailAppJumpDotDy; } @keyframes detailAppJumpDotDy { 0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1.08); background: rgba(167, 243, 208, 0.95); } } .detail-app-jump-sub { margin: 0 0 18px 0; font-size: 13px; line-height: 1.55; color: rgba(226, 232, 240, 0.78); font-weight: 400; max-width: 280px; margin-left: auto; margin-right: auto; } .detail-app-jump-divider { height: 2px; max-width: 220px; margin: 0 auto 12px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(244, 63, 94, 0.95), rgba(251, 113, 133, 0.6), transparent); box-shadow: 0 0 16px rgba(244, 63, 94, 0.45); } .detail-app-jump-divider--dy { background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.85), rgba(244, 114, 182, 0.65), transparent); box-shadow: 0 0 18px rgba(34, 211, 238, 0.35); } .detail-app-jump-hint { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(248, 250, 252, 0.82); max-width: 300px; margin-left: auto; margin-right: auto; } .detail-view-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; } .detail-view-back { display: flex; align-items: center; gap: 8px; background: none; border: none; font-size: 15px; color: var(--text-primary); cursor: pointer; padding: 8px 0; } .detail-view-back i { font-size: 18px; } .detail-view-title { font-size: 16px; font-weight: 600; color: var(--text-primary); } .detail-view-actions { display: flex; gap: 12px; } .detail-view-body { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } /* 详情配图：双列网格（一行两张），纵向浏览；历史条仍用横向滚动 */ .detail-images-section { margin-bottom: 16px; min-width: 0; max-width: 100%; } .detail-images-section.detail-card-block { padding: 16px 16px 16px; } .detail-images-scroll-outer { width: 100%; max-width: 100%; min-width: 0; overflow: visible; box-sizing: border-box; } .detail-images-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; max-width: 100%; min-width: 0; padding: 4px 0 14px; box-sizing: border-box; align-items: stretch; } .detail-image-select-hint { margin: 0 0 10px; padding: 10px 12px; font-size: 12px; line-height: 1.55; color: #475569; background: #f1f5f9; border-radius: 10px; border: 1px solid #e2e8f0; } .detail-image-select-hint strong { color: #0f172a; font-weight: 700; } .detail-image-item { width: 100%; min-width: 0; height: auto; border-radius: 12px; overflow: hidden; background: #f4f4f5; cursor: default; position: relative; } .detail-image-item:not(.detail-stitch-entry) .detail-image-thumb { aspect-ratio: 9 / 16; flex: 0 0 auto; } .detail-stitch-entry { grid-column: 1 / -1; min-height: 108px; aspect-ratio: auto; } /** 含「选用」底栏：缩略图与按钮分区，避免按钮叠在图上难发现 */ .detail-image-item:not(.detail-stitch-entry) { display: flex; flex-direction: column; } .detail-image-thumb { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; border-radius: 12px 12px 0 0; } .detail-image-item:not(.detail-stitch-entry) .detail-image-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; position: relative; z-index: 0; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .detail-image-item:not(.detail-stitch-entry):active .detail-image-thumb img { transform: scale(1.02); } .detail-image-item .img-index { display: none !important; } .detail-image-item.selected { outline: 3px solid var(--tool-brand); outline-offset: -3px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9); } .detail-image-item.selected .detail-image-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(var(--tool-brand-rgb), 0.12); pointer-events: none; z-index: 1; } .detail-image-item.img-load-failed .detail-image-thumb img { opacity: 0.12; filter: grayscale(1); } .detail-image-item.img-load-failed .detail-image-thumb::after { content: '加载失败'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(244,244,245,0.94); color: #9ca3af; font-size: 11px; font-weight: 500; z-index: 3; pointer-events: none; } .detail-image-check { position: absolute; bottom: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--tool-brand); color: #fff; font-size: 12px; display: none; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 1px 4px rgba(var(--tool-brand-rgb), 0.35); } .detail-image-item.selected .detail-image-check { display: flex; } .detail-image-item.selected .detail-image-check::before { content: '✓'; } /** 点缩略图 = 大图预览；底栏「选用」= 加入发布配图 */ .detail-image-item:not(.detail-stitch-entry) .detail-image-pick { position: relative; flex: 0 0 auto; left: auto; bottom: auto; width: 100%; z-index: 4; margin: 0; padding: 7px 6px; font-size: 11px; font-weight: 700; border: none; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #334155 0%, #1e293b 100%); color: #fff; cursor: pointer; line-height: 1.25; display: flex; align-items: center; justify-content: center; gap: 4px; -webkit-tap-highlight-color: transparent; } .detail-image-item:not(.detail-stitch-entry) .detail-image-pick i { font-size: 10px; opacity: 0.95; } .detail-image-item:not(.detail-stitch-entry) .detail-image-pick:active { background: linear-gradient(180deg, #0f172a 0%, #020617 100%); } .detail-download-btn { width: 100%; padding: 14px; background: var(--tool-brand); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 10px rgba(var(--tool-brand-rgb), 0.2); } .detail-download-btn:active { transform: scale(0.98); } /* 标题列表 */ /* ============ 详情结果卡片块统一样式 ============ */ .detail-card-block { background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } html[data-h5-appearance='dark'] .detail-card-block { background: rgba(30, 41, 59, 0.7); border-color: rgba(255, 255, 255, 0.08); } .detail-titles-section { margin-bottom: 20px; } .detail-title-item { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px; min-height: 56px; background: #f8f9fa; border-radius: 12px; margin-bottom: 8px; border: 1px solid #e5e7eb; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; max-width: 100%; } .detail-title-item.selected { border-color: var(--tool-brand); box-shadow: 0 0 0 2px var(--tool-brand-ring); background: #fff; } .detail-title-item:last-child { margin-bottom: 0; } .detail-titles-scroll { max-height: min(260px, 42vh); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; margin-bottom: 2px; } .detail-titles-scroll::-webkit-scrollbar { width: 6px; } .detail-titles-scroll::-webkit-scrollbar-thumb { background: rgba(20, 21, 33, 0.15); border-radius: 6px; } .detail-title-empty { font-size: 13px; color: #9ca3af; padding: 12px 14px; background: #f9fafb; border-radius: 12px; border: 1px dashed #e5e7eb; line-height: 1.5; } .detail-content-empty { font-size: 13px; color: #9ca3af; padding: 12px 14px; background: #f9fafb; border-radius: 12px; border: 1px dashed #e5e7eb; line-height: 1.6; } .detail-topic-empty { font-size: 13px; color: #9ca3af; padding: 12px 14px; background: #f9fafb; border-radius: 12px; border: 1px dashed #e5e7eb; line-height: 1.5; } .detail-title-num { flex-shrink: 0; width: 26px; height: 26px; background: linear-gradient(135deg, var(--tool-brand) 0%, rgba(var(--tool-brand-rgb), 0.8) 100%); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(var(--tool-brand-rgb), 0.25); } .detail-title-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--text-primary); word-break: break-word; overflow-wrap: anywhere; } .detail-title-copy { flex-shrink: 0; width: 32px; height: 32px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; font-size: 14px; transition: all 0.15s; } .detail-title-copy:active { background: var(--tool-brand-soft); color: var(--tool-brand); border-color: var(--tool-brand-border); } .detail-title-copy svg { flex-shrink: 0; } /* 文案标签 */ .detail-content-section { margin-bottom: 20px; } .detail-content-tabs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; } .detail-content-tabs-wrap::-webkit-scrollbar { display: none; } .detail-content-tags { display: flex; gap: 8px; flex-wrap: nowrap; white-space: nowrap; width: max-content; } .detail-content-tag { flex: 0 0 auto; padding: 10px 16px; background: #f3f4f6; border: 1px solid transparent; border-radius: 20px; text-align: center; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all 0.2s ease; } .detail-content-tag:active { transform: scale(0.96); } .detail-content-tag.active { background: linear-gradient(135deg, var(--tool-brand) 0%, rgba(var(--tool-brand-rgb), 0.85) 100%); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(var(--tool-brand-rgb), 0.25); } .detail-content-box { background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%); border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; font-size: 15px; line-height: 1.85; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-height: min(420px, 52vh); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 分段排版：段内 br，整体更易读 */ .detail-content-box.detail-content-box--rich { white-space: normal; } .detail-content-box .detail-content-para { margin: 0 0 14px; padding: 0 0 0 12px; border-left: 3px solid rgba(var(--tool-brand-rgb), 0.28); font-size: 15px; line-height: 1.78; letter-spacing: 0.01em; color: var(--text-primary); } .detail-content-box .detail-content-para:last-child { margin-bottom: 0; } .detail-content-box .detail-content-para--lead { font-size: 15px; font-weight: 400; color: var(--text-primary); } html[data-h5-appearance='dark'] .detail-content-box { background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%); border-color: rgba(255, 255, 255, 0.1); } html[data-h5-appearance='dark'] .detail-content-box .detail-content-para { border-left-color: rgba(var(--tool-brand-rgb), 0.45); color: #e2e8f0; } html[data-h5-appearance='dark'] .detail-content-box .detail-content-para--lead { color: #f1f5f9; } .detail-content-copy-btn { margin-top: 12px; width: 100%; padding: 12px 16px; background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; font-weight: 500; color: #4b5563; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s ease; } .detail-content-copy-btn:active { background: var(--tool-brand-soft); border-color: var(--tool-brand-border); color: var(--tool-brand); } .detail-content-copy-btn svg { flex-shrink: 0; } /* 发布到红薯 / 抖抖 */ .detail-publish-section { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 16px; margin-bottom: 20px; } .detail-publish-block { margin-bottom: 0; } .detail-publish-block-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 12px; } .detail-publish-block-icon { font-size: 14px; line-height: 1; } .detail-publish-block-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .detail-publish-block-desc { font-size: 12px; color: #9ca3af; font-weight: 400; } .detail-publish-divider { height: 1px; background: #e5e7eb; margin: 16px 0; } .detail-publish-manual-check { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; background: #f8fafc; border-radius: 10px; font-size: 13px; color: #4b5563; } .detail-publish-manual-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--tool-brand); flex-shrink: 0; cursor: pointer; } .detail-publish-manual-check label { cursor: pointer; user-select: none; } .detail-publish-xhs-progress { display: none; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; background: linear-gradient(135deg, #fff5f5, #fef2f2); border: 1px solid #fecaca; border-radius: 10px; font-size: 12px; line-height: 1.5; color: #9f1239; } .detail-publish-xhs-progress.show { display: flex; } .detail-publish-xhs-progress .detail-publish-xhs-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #e11d48; animation: detailXhsPulse 1s ease-in-out infinite; } @keyframes detailXhsPulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } } .detail-publish-btns { display: flex; gap: 10px; } .detail-publish-btn { flex: 1; padding: 12px 10px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .detail-publish-btn:active:not(:disabled) { transform: scale(0.98); } .detail-publish-btn.xhs { background: linear-gradient(135deg, #ff2442, #e11d48); } .detail-publish-btn.dy { background: linear-gradient(135deg, #111827, #000); } .detail-publish-btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; } .detail-publish-copy-all { width: 100%; padding: 12px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } .detail-publish-copy-all:active { background: #e5e7eb; } /* 任务信息 */ .detail-info-section { margin-bottom: 20px; } .detail-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .detail-info-item { background: #f8f9fa; border-radius: 10px; padding: 12px; } .detail-info-label { font-size: 12px; color: #9ca3af; margin-bottom: 4px; } .detail-info-value { font-size: 14px; font-weight: 500; color: var(--text-primary); } /* 原图 */ .detail-original-section { margin-bottom: 20px; } .detail-original-img { max-width: 100%; max-height: 200px; border-radius: 12px; object-fit: contain; display: block; } /* 图片查看器：勿用 max-height:100% 依赖父高（部分浏览器解析为 0 → 大图高度为 0 黑屏） */ .image-viewer { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; background: rgba(15, 15, 18, 0.92); z-index: 10050; display: none; flex-direction: column; align-items: stretch; box-sizing: border-box; } .image-viewer.show { display: flex; } .image-viewer-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; } .image-viewer-close { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; color: #fff; font-size: 20px; cursor: pointer; } .image-viewer-counter { font-size: 14px; color: rgba(255,255,255,0.8); } .image-viewer-download { padding: 8px 16px; background: var(--primary); border: none; border-radius: 20px; color: #fff; font-size: 13px; cursor: pointer; } .image-viewer-body { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow: auto; overflow-x: hidden; position: relative; z-index: 1; } .image-viewer-body img#imageViewerImg { display: block; position: relative; z-index: 2; max-width: min(96vw, calc(var(--h5-app-max-width) + 40px)); width: auto; height: auto; min-width: 100px; min-height: 100px; max-height: 85vh; object-fit: contain; object-position: center; border-radius: 8px; background: #2d2d32; box-shadow: 0 8px 36px rgba(0, 0, 0, 0.55); } .image-viewer-body img#imageViewerImg[src=""], .image-viewer-body img#imageViewerImg:not([src]) { min-width: 200px; min-height: 200px; } .image-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255,255,255,0.18); border: none; border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; z-index: 5; } /* 与详情页同宽居中：大屏上箭头贴在「手机列」两侧，不靠显示器最边缘 */ .image-viewer-nav.prev { left: max(12px, calc(50% - (var(--h5-app-max-width) / 2) - 4px)); } .image-viewer-nav.next { right: max(12px, calc(50% - (var(--h5-app-max-width) / 2) - 4px)); } .image-viewer-nav:active { background: rgba(255,255,255,0.25); } /* 提交成功引导弹窗 */ .guide-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; } .guide-modal.show { display: flex; } .guide-box { background: #fff; border-radius: 20px; width: 100%; max-width: 320px; text-align: center; padding: 32px 24px 24px; animation: guideIn 0.3s ease; } @keyframes guideIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .guide-icon { width: 72px; height: 72px; margin: 0 auto 20px; background: var(--page-hero-gradient, linear-gradient(135deg, #1a2a33 0%, #1e3a44 52%, #1c323b 100%)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; } .guide-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .guide-desc { font-size: var(--fs-body); color: var(--text-secondary); margin-bottom: 24px; line-height: 1.65; text-align: center; } .guide-desc p { margin: 0 0 10px; } .guide-desc p:last-child { margin-bottom: 0; } .guide-time-hint { color: #4b5563; } .guide-done-tip { color: #059669; font-weight: 500; } .guide-btns { display: flex; flex-direction: column; gap: 12px; } .guide-btn { padding: 14px 20px; border-radius: 100px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; } .guide-btn.primary { background: var(--tool-brand); color: #fff; box-shadow: 0 2px 10px rgba(var(--tool-brand-rgb), 0.2); } .guide-btn.primary:active { transform: scale(0.98); } .guide-btn.secondary { background: #f3f4f6; color: #4b5563; } .guide-btn.secondary:active { transform: scale(0.98); } /* ============ 拼接长图入口卡片 ============ */ .detail-stitch-entry { background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%) !important; border: 2px dashed rgba(16, 185, 129, 0.4) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; } .detail-stitch-entry:hover, .detail-stitch-entry:active { border-color: #10b981 !important; background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%) !important; transform: scale(1.02); } .stitch-entry-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 8px; } .stitch-entry-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 4px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .stitch-entry-text { font-size: 14px; font-weight: 600; color: #059669; white-space: nowrap; } .stitch-entry-sub { font-size: 12px; color: #10b981; opacity: 0.85; } /* 拼接中加载状态 */ .stitch-loading .stitch-loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(16, 185, 129, 0.2); border-top-color: #10b981; border-radius: 50%; animation: stitch-spin 0.8s linear infinite; margin-bottom: 8px; } @keyframes stitch-spin { to { transform: rotate(360deg); } } /* 拼接完成状态 */ .stitch-done { position: relative; } .stitch-preview-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; position: absolute; top: 0; left: 0; } .stitch-done-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(16, 185, 129, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4); } .stitch-done .stitch-entry-text, .stitch-done .stitch-entry-sub { position: relative; z-index: 2; background: rgba(255,255,255,0.9); padding: 2px 8px; border-radius: 4px; margin-top: auto; } .detail-stitch-entry .stitch-done { width: 100%; height: 100%; } /* ============ 一键保存全部图片按钮 ============ */ .detail-save-all-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; margin-top: 12px; background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); border: none; border-radius: 13px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 6px 18px rgba(79, 70, 229, .22); } .detail-save-all-btn:hover, .detail-save-all-btn:active { background: linear-gradient(135deg, #4F46E5 0%, #312E81 100%); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4); } .detail-save-all-btn svg { flex-shrink: 0; } /* ============ section-title图标 ============ */ .section-title-icon { display: inline-block; vertical-align: -4px; margin-right: 6px; color: var(--tool-brand); } /* ============ 拼接长图弹窗 ============ */ .stitch-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.5); display: none; align-items: flex-end; justify-content: center; padding: 0; } .stitch-modal.show { display: flex; } .stitch-modal-content { width: 100%; max-width: 540px; max-height: 90vh; background: #fff; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; animation: stitch-slide-up 0.3s ease; } @keyframes stitch-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .stitch-modal-header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; gap: 12px; } .stitch-modal-close { width: 36px; height: 36px; border: none; background: #f3f4f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; transition: all 0.15s; } .stitch-modal-close:active { background: #e5e7eb; } .stitch-modal-title { flex: 1; font-size: 17px; font-weight: 600; color: #1f2937; } .stitch-modal-actions { display: flex; gap: 8px; } .stitch-action-btn { padding: 6px 12px; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; font-size: 13px; color: #4b5563; cursor: pointer; transition: all 0.15s; } .stitch-action-btn:active { background: #f3f4f6; } .stitch-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; } .stitch-hint { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; background: #fef3c7; border: 1px solid #fde68a; border-radius: 10px; font-size: 13px; color: #92400e; line-height: 1.5; margin-bottom: 16px; } .stitch-hint svg { flex-shrink: 0; margin-top: 2px; color: #d97706; } .stitch-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stitch-image-item { position: relative; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: #f4f4f5; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; } .stitch-image-item img { width: 100%; height: 100%; object-fit: cover; } .stitch-image-item.selected { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2); } .stitch-img-index { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .stitch-check-icon { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; display: none; } .stitch-image-item.selected .stitch-check-icon { display: flex; } .stitch-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid #e5e7eb; background: #fafafa; } .stitch-selected-info { font-size: 14px; color: #6b7280; } .stitch-selected-info strong { color: #0f766e; font-weight: 600; } .stitch-generate-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, #0f766e 0%, #0d5c52 100%); border: none; border-radius: 10px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3); } .stitch-generate-btn:disabled { background: #d1d5db; color: #9ca3af; box-shadow: none; cursor: not-allowed; } .stitch-generate-btn:not(:disabled):active { transform: scale(0.98); } .stitch-btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: stitch-spin 0.8s linear infinite; } @keyframes stitch-spin { to { transform: rotate(360deg); } } .stitch-progress { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px; text-align: center; } .stitch-progress-bar { width: 100%; max-width: 200px; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; position: relative; } .stitch-progress-bar::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: linear-gradient(90deg, #0f766e, #10b981); border-radius: 2px; animation: stitch-progress-move 1.2s ease-in-out infinite; } @keyframes stitch-progress-move { 0% { left: -40%; } 100% { left: 100%; } } .stitch-progress span { font-size: 14px; color: #6b7280; } .stitch-result-area { margin-top: 16px; padding: 16px; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; } .stitch-result-preview { max-height: 300px; overflow: auto; border-radius: 8px; margin-bottom: 12px; } .stitch-result-preview img { width: 100%; display: block; border-radius: 8px; } .stitch-download-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; background: linear-gradient(135deg, #0f766e 0%, #0d5c52 100%); border: none; border-radius: 10px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3); } .stitch-download-btn:active { transform: scale(0.98); } .stitch-regenerate-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-weight: 500; color: #475569; cursor: pointer; transition: all 0.2s ease; } .stitch-regenerate-btn:active { transform: scale(0.98); background: #e2e8f0; } /* 深色模式适配 */ html[data-h5-appearance='dark'] .stitch-modal-content { background: #1e293b; } html[data-h5-appearance='dark'] .stitch-modal-header { border-color: #334155; } html[data-h5-appearance='dark'] .stitch-modal-title { color: #f1f5f9; } html[data-h5-appearance='dark'] .stitch-modal-close { background: #334155; color: #94a3b8; } html[data-h5-appearance='dark'] .stitch-action-btn { background: #334155; border-color: #475569; color: #cbd5e1; } html[data-h5-appearance='dark'] .stitch-hint { background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.3); color: #fde68a; } html[data-h5-appearance='dark'] .stitch-image-item { background: #334155; } html[data-h5-appearance='dark'] .stitch-modal-footer { background: #0f172a; border-color: #334155; } html[data-h5-appearance='dark'] .stitch-result-area { background: #0f172a; border-color: #334155; } /* —— 创建向导步骤条 —— */ .detail-wizard-track { margin: 0 0 12px; padding: 10px 12px; background: rgba(var(--tool-brand-rgb), 0.06); border: 1px solid var(--tool-brand-border); border-radius: var(--radius-lg); } .detail-wizard-inner { display: flex; align-items: center; justify-content: space-between; gap: 4px; max-width: var(--h5-app-max-width, 430px); margin: 0 auto; } .detail-wiz-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: none; border-radius: 10px; background: transparent; color: var(--text-primary, #1f2937); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease; } .detail-wiz-item:active { background: rgba(var(--tool-brand-rgb), 0.12); } .detail-wiz-num { width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; font-size: 12px; font-weight: 700; background: #fff; color: var(--tool-brand); border: 1px solid var(--tool-brand-border); } .detail-wiz-t { font-size: 11px; font-weight: 600; color: var(--text-secondary, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .detail-wiz-line { flex: 0 0 12px; height: 2px; border-radius: 1px; background: rgba(var(--tool-brand-rgb), 0.2); align-self: flex-start; margin-top: 15px; } /* —— 提交前配置摘要 —— */ .detail-submit-summary { margin-bottom: 14px; padding: 12px 14px; background: linear-gradient(180deg, rgba(var(--tool-brand-rgb), 0.06) 0%, #fff 48%); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius-lg); } .detail-submit-summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .detail-submit-summary-title { font-size: 15px; font-weight: 700; color: var(--text-primary); } .detail-submit-summary-badge { font-size: 11px; font-weight: 600; color: var(--tool-brand); background: var(--tool-brand-soft); padding: 3px 8px; border-radius: 999px; } .detail-submit-summary-list { list-style: none; margin: 0; padding: 0; } .detail-submit-summary-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.06); font-size: 14px; } .detail-submit-summary-list li:last-child { border-bottom: none; } .detail-sum-k { color: var(--text-secondary, #64748b); flex-shrink: 0; } .detail-sum-v { font-weight: 600; color: var(--text-primary); text-align: right; word-break: break-word; } .detail-submit-summary-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary, #64748b); } /* —— 历史卡片产出摘要 —— */ .history-card-deliver { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--tool-brand); line-height: 1.4; word-break: break-word; } html[data-h5-appearance='dark'] .detail-wizard-track { background: rgba(148, 163, 184, 0.08); border-color: #334155; } html[data-h5-appearance='dark'] .detail-wiz-num { background: #1e293b; color: #e2e8f0; border-color: #475569; } html[data-h5-appearance='dark'] .detail-wiz-t { color: #94a3b8; } html[data-h5-appearance='dark'] .detail-submit-summary { background: linear-gradient(180deg, rgba(148, 163, 184, 0.08) 0%, #1e293b 45%); border-color: #334155; } html[data-h5-appearance='dark'] .detail-submit-summary-note, html[data-h5-appearance='dark'] .detail-sum-k { color: #94a3b8; } html[data-h5-appearance='dark'] .detail-sum-v, html[data-h5-appearance='dark'] .detail-submit-summary-title { color: #f1f5f9; } html[data-h5-appearance='dark'] .history-card-deliver { color: #7dd3fc; }