/* ========================================================================== 商拍工坊 · 全站样式（暖玉香槟 · Warm Ivory × Champagne） 设计语言：暖白通透打底 · 墨玉暖黑书写 · 香槟金点睛 铁律：浅色为主 / 深色只做文字与少量点缀 / 香槟金只做按钮·选中·细线 高端极简 · 大留白 · 细字重 ========================================================================== */ /* ---------- 字体 ---------- 西文/数字 Inter · 中文正文 Noto Sans SC · 中文标题(品牌感) Noto Serif SC 由各 HTML 页 引入 Google Fonts，此处声明 font-family 与回退栈。 */ :root { /* 中性色 · Neutral（暖调，从象牙白到墨玉暖黑） */ --bg: #F7F6F2; /* 全局背景 · 暖白 */ --fg: #22201B; /* 主文字 · 墨玉暖黑 */ --card: #FDFDFC; /* 卡片表面 · 暖白（比纯白柔和） */ --muted: #F5F3EF; /* 弱化区 / 内嵌区 / 禁用态背景 */ --muted-fg: #7C766A; /* 次级文字 */ --subtle: #A09B92; /* 更浅文字 / 占位符 */ --border: #E5E2DC; /* 边框 / 分割线 */ --border-soft: #EAE7E0; /* 更浅边框（hover 前默认态） */ /* 香槟金 · Champagne（只做按钮·选中·细线，禁铺大面积） */ --primary: #947D42; /* 主 CTA / 链接 / 选中态 · 暗香槟金 */ --primary-hover: #846E3A; /* 主按钮 hover */ --primary-fg: #FCFBF7; /* 金色按钮上的暖白文字 */ --gold: #C7B075; /* 亮金 · hover 高光 / 图标 / 细线 */ --gold-soft: #F5F0E0; /* 浅金底 · 选中态背景 / 标签底 */ --gold-deep: #655429; /* 深金 · 金色细线 / 描边 / 文字级金色 */ /* 状态色 · Status（暖调） */ --success: #3B7257; /* 成功 · 暖绿 */ --destructive: #BD3C28; /* 错误 / 删除 · 暖红 */ --warning: #D09125; /* 警告 · 暖橙 */ /* 圆角刻度 */ --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; /* 阴影（极轻，卡片默认靠 1px 边框，hover 才加轻阴影） */ --shadow: 0 1px 2px rgba(34, 32, 27, .04), 0 4px 16px rgba(34, 32, 27, .04); --shadow-hover: 0 2px 4px rgba(34, 32, 27, .05), 0 12px 32px rgba(34, 32, 27, .07); --ring: 0 0 0 3px rgba(148, 125, 66, .16); /* 动效 */ --ease: cubic-bezier(.4, 0, .2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } /* 确保 hidden 属性始终生效（防止 display 声明覆盖 hidden 导致遮罩常驻） */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif; background: var(--bg); color: var(--fg); line-height: 1.7; font-size: 15px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; } ::selection { background: var(--gold-soft); color: var(--gold-deep); } /* ========================================================================== 布局骨架：左侧功能栏 + 右侧主内容 ========================================================================== */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 236px; flex: 0 0 236px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px; gap: 22px; background: rgba(247, 246, 242, 0.82); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-right: 1px solid var(--border); } .side-logo { padding: 6px 12px; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); flex: none; } .logo-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--primary); color: var(--primary-fg); font-size: 15px; font-weight: 500; border-radius: 9px; flex: none; letter-spacing: 0; } .logo-text { font-size: 16px; font-weight: 500; letter-spacing: .02em; font-family: 'Noto Serif SC', 'Inter', sans-serif; } .side-nav { display: flex; flex-direction: column; gap: 3px; } .side-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 400; color: var(--muted-fg); text-decoration: none; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); white-space: nowrap; position: relative; } .side-item:hover { background: var(--muted); color: var(--fg); } .side-item.active { background: var(--gold-soft); color: var(--gold-deep); font-weight: 500; } .side-item.active::before { content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 2px; background: var(--primary); } .side-item .new-dot { margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--primary); background: transparent; border: 1px solid rgba(148, 125, 66, .4); padding: 1px 7px; border-radius: 980px; line-height: 1.5; } .side-icon { font-size: 17px; width: 22px; text-align: center; flex: none; color: var(--subtle); } .side-icon svg { width: 18px; height: 18px; display: block; margin: 0 auto; } .side-item.active .side-icon { color: var(--primary); } .side-item:hover .side-icon { color: var(--muted-fg); } .side-item.active:hover .side-icon { color: var(--primary); } .side-foot { margin-top: auto; font-size: 11.5px; color: var(--subtle); padding: 10px 14px; letter-spacing: .04em; border-top: 1px solid var(--border); padding-top: 16px; } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ========================================================================== 顶栏 ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 100; background: rgba(247, 246, 242, 0.82); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 1024px; margin: 0 auto; padding: 0 32px; height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .page-title { font-size: 15px; font-weight: 500; color: var(--fg); letter-spacing: .02em; } .main-nav { display: flex; align-items: center; gap: 32px; } .nav-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; color: var(--muted-fg); text-decoration: none; padding: 8px 0; transition: color .25s var(--ease); white-space: nowrap; } .nav-item svg { width: 15px; height: 15px; flex: none; } .nav-item:hover { color: var(--fg); } .nav-item.active { color: var(--gold-deep); font-weight: 500; } .mode-badge { flex: none; padding: 5px 14px; border-radius: 980px; font-size: 12px; font-weight: 500; white-space: nowrap; } .mode-badge.mock { background: var(--muted); color: var(--muted-fg); } .mode-badge.real { background: var(--gold-soft); color: var(--gold-deep); } /* ========================================================================== 内容容器 ========================================================================== */ .container { max-width: 920px; margin: 0 auto; padding: 0 32px 120px; } /* ========================================================================== Hero（超大纤细标题 + 大量留白） ========================================================================== */ .hero { text-align: center; padding: 64px 20px 36px; } .hero h1 { font-size: clamp(34px, 4.5vw, 48px); font-weight: 300; /* 纤细字重，衬线标题更有品牌感 */ letter-spacing: .01em; line-height: 1.18; color: var(--fg); font-family: 'Noto Serif SC', 'Inter', sans-serif; } .hero p { font-size: 15px; font-weight: 400; color: var(--muted-fg); line-height: 1.6; margin-top: 16px; max-width: 640px; margin-left: auto; margin-right: auto; } /* ========================================================================== 步骤条 ========================================================================== */ .steps { display: flex; gap: 32px; list-style: none; margin: 0 auto 40px; flex-wrap: wrap; justify-content: center; } .step { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 400; color: var(--muted-fg); } .step-num { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 12px; font-weight: 500; color: var(--muted-fg); flex: none; font-variant-numeric: tabular-nums; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .step.active { color: var(--fg); } .step.active .step-num { border-color: var(--primary); color: var(--primary); background: var(--gold-soft); } .step.done { color: var(--fg); } .step.done .step-num { border-color: var(--primary); color: var(--primary-fg); background: var(--primary); } .step.clickable { cursor: pointer; transition: color .25s var(--ease); } .step.clickable:hover { color: var(--fg); } .step.clickable:hover .step-num { border-color: var(--primary); color: var(--primary); } .step-panel { animation: panelIn .3s var(--ease); } @keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ========================================================================== 卡片（暖白浮于暖白底 · 1px 细边框 · 靠边框留白撑质感） ========================================================================== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; margin-bottom: 40px; transition: box-shadow .25s var(--ease), border-color .25s var(--ease); } .card:hover { border-color: var(--border); box-shadow: var(--shadow); } .card-title { font-size: 20px; font-weight: 500; letter-spacing: .01em; margin-bottom: 24px; color: var(--fg); } /* ========================================================================== 上传区 ========================================================================== */ .upload-zone { border: 1.5px dashed #D6CFC0; border-radius: var(--radius); padding: 40px 32px; text-align: center; cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease); background: var(--muted); } .upload-inner p { margin-top: 12px; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--gold-soft); } .upload-icon { color: var(--primary); width: 36px; height: 36px; } .upload-inner p { font-size: 16px; margin-top: 18px; color: var(--fg); } .upload-inner .hint { font-size: 13px; color: var(--muted-fg); margin-top: 8px; } .preview-row { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; } .preview-row figure { flex: 1; min-width: 260px; } .preview-row figcaption { font-size: 13px; color: var(--muted-fg); margin-bottom: 12px; } .preview-row img { width: 100%; max-height: 320px; object-fit: contain; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); } .checker { background-image: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 20px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; min-height: 140px; } .checker img { border: none; max-height: 320px; width: 100%; object-fit: contain; } /* ========================================================================== 风格网格 ========================================================================== */ .style-grid { display: flex; flex-direction: column; gap: 8px; } .style-item { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px 7px 7px; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); background: var(--card); } .style-item:hover { border-color: var(--gold); box-shadow: var(--shadow); } .style-item.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .style-swatch { flex: 0 0 108px; width: 108px; height: 56px; position: relative; border-radius: var(--radius-xs); border: 1px solid var(--border-soft); overflow: hidden; background: var(--muted); } .style-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; } .style-item .name { flex: 1 1 auto; font-size: 14px; font-weight: 500; color: var(--fg); } .style-check { flex: 0 0 auto; width: 18px; height: 18px; color: var(--primary); opacity: 0; transition: opacity .2s var(--ease); } .style-item.selected .style-check { opacity: 1; } .style-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 9px; background: rgba(34, 32, 27, 0.55); color: #fff; font-size: 11px; font-weight: 500; line-height: 1.6; border-radius: 980px; letter-spacing: .02em; pointer-events: none; } /* ========================================================================== 风格转换（图生图 · 照片风格化） ========================================================================== */ .stylize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .stylize-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 14px; text-align: center; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); background: var(--card); } .stylize-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .stylize-item.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .stylize-item .stylize-icon { font-size: 30px; display: block; margin-bottom: 10px; } .stylize-item .stylize-name { font-size: 14px; font-weight: 500; color: var(--fg); } .stylize-item .stylize-desc { font-size: 12px; color: var(--muted-fg); margin-top: 4px; } .stylize-result { display: flex; justify-content: center; align-items: center; background: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 20px 20px; border: 1px solid var(--border); border-radius: var(--radius); min-height: 200px; padding: 16px; } .stylize-result img { max-width: 100%; max-height: 560px; border-radius: var(--radius-sm); box-shadow: var(--shadow); cursor: zoom-in; } .mode-note-inline { font-size: 13px; font-weight: 400; color: var(--muted-fg); margin-left: 8px; } /* ========================================================================== 生成方式选择（融合 / 分层） ========================================================================== */ .mode-choose { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .mode-choose-title { font-size: 15px; font-weight: 500; color: var(--fg); margin-bottom: 16px; } .mode-option { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); background: var(--card); margin-bottom: 12px; } .mode-option:last-child { margin-bottom: 0; } .mode-option:hover { border-color: var(--primary); } .mode-option.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .mode-radio { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; flex: none; margin-top: 2px; position: relative; transition: border-color .25s var(--ease); } .mode-option.selected .mode-radio { border-color: var(--primary); } .mode-option.selected .mode-radio::after { content: ''; position: absolute; inset: 3px; background: var(--primary); border-radius: 50%; } .mode-name { font-size: 15px; font-weight: 500; color: var(--fg); margin-bottom: 4px; } .mode-desc { font-size: 13px; color: var(--muted-fg); line-height: 1.6; } .mode-desc b { color: var(--fg); font-weight: 500; } /* ========================================================================== 生成方式卡片（海报页 / 详情页共用） ========================================================================== */ .mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; } .mode-card { position: relative; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .mode-card:hover { border-color: var(--primary); } .mode-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .mode-card-inner { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; } .mode-icon { font-size: 22px; line-height: 1; } .mode-title { font-size: 14.5px; font-weight: 500; color: var(--fg); } .mode-desc { font-size: 12.5px; color: var(--muted-fg); line-height: 1.5; } #modeHint { margin-top: 8px; font-size: 12.5px; color: var(--muted-fg); } /* 可编辑模式专用：文案结构输入网格 */ .editable-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; } .editable-copy-grid .param-row { margin-bottom: 0; } .editable-copy-grid label { display: flex; flex-direction: column; gap: 6px; } .editable-copy-grid .text-input { width: 100%; } @media (max-width: 640px) { .mode-cards { grid-template-columns: 1fr; } .editable-copy-grid { grid-template-columns: 1fr; } } /* 自动分层横幅（主流程，非选择） */ .auto-layer { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--gold-soft); border: 1px solid var(--border); border-radius: var(--radius); } .auto-layer-title { font-size: 15px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 8px; } .auto-layer-icon { color: var(--primary); flex: none; } .auto-layer-badge { font-size: 12px; font-weight: 500; color: var(--gold-deep); background: #fff; border: 1px solid var(--gold); padding: 1px 10px; border-radius: 980px; line-height: 1.6; } /* 高级设置折叠区（融合生成降级藏此处） */ .advanced-box { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; } .advanced-box summary { list-style: none; cursor: pointer; padding: 14px 20px; font-size: 14px; font-weight: 500; color: var(--muted-fg); display: flex; align-items: center; gap: 8px; user-select: none; transition: color .2s var(--ease), background .2s var(--ease); } .advanced-box summary:hover { color: var(--fg); background: var(--muted); } .advanced-box summary::-webkit-details-marker { display: none; } .advanced-box summary::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); } .advanced-box[open] summary::after { transform: rotate(-135deg); } .advanced-box-body { padding: 12px 16px 16px; border-top: 1px solid var(--border); } /* 自定义风格描述 + AI 提示词优化 */ .custom-prompt-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .custom-prompt-label { font-size: 14px; font-weight: 500; color: var(--fg); display: block; margin-bottom: 8px; } .custom-prompt-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--fg); background: var(--bg); resize: vertical; min-height: 56px; box-sizing: border-box; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .custom-prompt-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .custom-prompt-input::placeholder { color: var(--subtle); } .custom-prompt-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .custom-prompt-actions .btn-ghost { padding: 8px 16px; font-size: 13px; } .custom-prompt-hint { font-size: 12px; color: var(--muted-fg); } /* ========================================================================== 数量 / 比例 / 版式 pill（胶囊） ========================================================================== */ .count-row, .ratio-row, .pill-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; } .opt-pill { padding: 10px 22px; border: 1px solid var(--border); border-radius: 980px; cursor: pointer; font-size: 13.5px; font-weight: 400; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); background: var(--card); color: var(--fg); } .opt-pill:hover { border-color: var(--primary); color: var(--primary); } .opt-pill.selected { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); } .layout-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .layout-pill { padding: 10px 22px; border: 1px solid var(--border); border-radius: 980px; cursor: pointer; font-size: 13.5px; font-weight: 400; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); background: var(--card); color: var(--fg); } .layout-pill:hover { border-color: var(--primary); color: var(--primary); } .layout-pill.selected { border-color: var(--primary); background: var(--gold-soft); color: var(--gold-deep); } /* 面板内的小 pill */ .mini-pill { padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; font-weight: 400; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); background: var(--card); color: var(--muted-fg); } .mini-pill:hover { border-color: var(--primary); color: var(--primary); } .mini-pill.selected { border-color: var(--primary); background: var(--gold-soft); color: var(--gold-deep); } .preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; } .preset-grid .mini-pill { text-align: center; } /* ========================================================================== 按钮 ========================================================================== */ .generate-bar { text-align: center; margin: 16px 0 48px; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 44px; font-size: 16px; font-weight: 500; color: var(--primary-fg); background: var(--primary); border: none; border-radius: 980px; cursor: pointer; transition: background .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .btn-primary svg { width: 20px; height: 20px; } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: var(--shadow); } .btn-primary:active:not(:disabled) { transform: scale(.98); } .btn-primary:disabled { opacity: .38; cursor: not-allowed; } .btn-primary.small { padding: 10px 20px; font-size: 14px; border-radius: 980px; } .btn-primary.add-text-btn { width: 100%; padding: 13px 20px; font-size: 15px; border-radius: 980px; margin-bottom: 16px; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border: 1px solid var(--border); border-radius: 980px; background: var(--card); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--fg); transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); text-decoration: none; font-family: inherit; } .btn-ghost svg { width: 16px; height: 16px; } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } .btn-ghost.danger { color: var(--destructive); border-color: rgba(189, 60, 40, .3); background: var(--card); margin-top: 6px; width: 100%; } .btn-ghost.danger:hover { background: var(--destructive); border-color: var(--destructive); color: #fff; } /* 深色主按钮（次要强调，与金色 CTA 交替） */ .btn-ink { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 36px; font-size: 15px; font-weight: 500; color: #fff; background: var(--fg); border: none; border-radius: 980px; cursor: pointer; transition: opacity .25s var(--ease), transform .25s var(--ease); } .btn-ink:hover { opacity: .88; } .btn-ink:active { transform: scale(.98); } /* 上一步 / 下一步 */ .wizard-nav { display: flex; justify-content: center; gap: 20px; margin: 16px 0 96px; } .wizard-btn { padding: 14px 40px; font-size: 15px; } .wizard-btn#nextBtn { padding: 14px 48px; } /* ========================================================================== 结果 ========================================================================== */ .result-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .result-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mode-note { font-size: 14px; color: var(--muted-fg); margin-bottom: 24px; } .result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 36px; } .result-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); transition: box-shadow .25s var(--ease), transform .25s var(--ease); } .result-item:hover { box-shadow: var(--shadow-hover); } .result-item img { width: 100%; height: 160px; object-fit: contain; background: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 16px 16px; display: block; cursor: zoom-in; } .result-actions { padding: 12px; display: flex; gap: 8px; } .result-actions a, .result-actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 9px 6px; font-size: 13px; font-weight: 500; text-decoration: none; border-radius: 980px; border: none; cursor: pointer; font-family: inherit; transition: background .2s var(--ease), color .2s var(--ease); } .result-actions a svg, .result-actions button svg { width: 15px; height: 15px; } .result-actions .dl { background: var(--gold-soft); color: var(--gold-deep); } .result-actions .dl:hover { background: var(--primary); color: var(--primary-fg); } .result-actions .zoom { background: var(--muted); color: var(--fg); } .result-actions .zoom:hover { background: var(--fg); color: #fff; } .result-actions .edit { background: var(--gold-soft); color: var(--gold-deep); } .result-actions .edit:hover { background: var(--primary); color: var(--primary-fg); } .result-actions button:disabled { background: var(--muted); color: var(--muted-fg); opacity: .55; cursor: not-allowed; } .result-actions button:disabled:hover { background: var(--muted); color: var(--muted-fg); } /* ========================================================================== footer / toast / loading ========================================================================== */ .footer { text-align: center; color: var(--subtle); font-size: 13px; padding: 48px 24px; border-top: 1px solid var(--border); margin-top: auto; } .toast { position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--fg); color: #fff; padding: 13px 26px; border-radius: 980px; font-size: 14px; opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); z-index: 300; max-width: 84%; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast.err { background: var(--destructive); } .loading-overlay { position: fixed; inset: 0; background: rgba(34, 32, 27, 0.45); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; z-index: 250; gap: 20px; text-align: center; padding: 24px; } .spinner { width: 44px; height: 44px; border: 3px solid rgba(255,255,255,.3); border-top-color: var(--gold); border-radius: 50%; animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== 表单 / 文案 ========================================================================== */ .optional-tag { display: inline-block; font-size: 11.5px; font-weight: 500; color: var(--muted-fg); background: var(--muted); padding: 3px 11px; border-radius: 980px; vertical-align: middle; margin-left: 10px; letter-spacing: .02em; } .hint-text { font-size: 13.5px; color: var(--muted-fg); margin: -6px 0 24px; line-height: 1.6; } .text-fields { display: flex; flex-direction: column; gap: 22px; } .text-fields label { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--fg); } .text-input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; line-height: 1.6; font-weight: 400; resize: vertical; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); background: var(--bg); color: var(--fg); } .text-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .text-input::placeholder { color: var(--subtle); } .text-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 560px) { .text-row-2 { grid-template-columns: 1fr; } } .custom-size-block { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .custom-size-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .custom-size-label { display: block; font-size: 14px; font-weight: 500; } .custom-size-head .custom-size-label { margin-bottom: 0; } .custom-size-inputs { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 14px; } .custom-size-inputs input { width: 120px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--bg); color: var(--fg); } .custom-size-inputs input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .custom-size-inputs .times { font-size: 16px; color: var(--muted-fg); } .custom-size-inputs .hint { font-size: 13px; color: var(--muted-fg); } .custom-size-err { color: var(--destructive); margin: 10px 0 0; font-size: 13px; } /* ========================================================================== 版式 / 设计 ========================================================================== */ .design-block { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .design-block .design-label { margin-top: 20px; } .design-block > .design-label:first-child { margin-top: 0; } .design-block .text-fields { margin-top: 24px; } .design-label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 12px; color: var(--fg); } .design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: end; } .design-grid label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fg); } .color-input { width: 100%; height: 44px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--card); } .color-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } @media (max-width: 720px) { .design-grid { grid-template-columns: 1fr; } } /* ========================================================================== lightbox ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(34, 32, 27, 0.88); } .lightbox-body { position: relative; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 16px; } .lightbox-body img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: var(--radius); background: repeating-conic-gradient(#3a3f4b 0 25%, #2b2f3a 0 50%); background-size: 16px 16px; box-shadow: 0 12px 60px rgba(0,0,0,.5); transform-origin: center center; transition: transform .18s ease; will-change: transform; } .lightbox-close { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 980px; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); } .lightbox-close:hover { background: var(--primary); border-color: var(--primary); } .lightbox-body img.dragging { transition: none; cursor: grabbing; } /* ========================================================================== 视频成片模块 ========================================================================== */ .subtitle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; margin-bottom: 24px; } .subtitle-style-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); background: var(--card); } .subtitle-style-item:hover { border-color: var(--primary); } .subtitle-style-item.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .subtitle-style-item .s-name { font-size: 14px; font-weight: 500; color: var(--fg); } .subtitle-style-item .s-desc { font-size: 12.5px; color: var(--muted-fg); margin-top: 6px; line-height: 1.5; } .clip-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .clip-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: var(--card); } .clip-name { font-weight: 500; word-break: break-all; } .clip-meta { color: var(--muted-fg); font-size: 12.5px; white-space: nowrap; } .transcript-box { margin-top: 24px; padding: 20px 24px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); } .transcript-box h3 { font-size: 14px; font-weight: 500; margin-bottom: 10px; } .transcript-text { font-size: 14.5px; color: var(--fg); white-space: pre-wrap; line-height: 1.7; } .copy-input { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; resize: vertical; line-height: 1.6; margin-bottom: 24px; background: var(--bg); color: var(--fg); } .copy-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .copy-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; margin-bottom: 16px; } .copy-toolbar .hint { font-size: 13px; color: var(--muted-fg); } .result-video { width: 100%; max-height: 480px; border-radius: var(--radius); background: #000; display: block; margin-bottom: 24px; } .copy-result { padding: 20px 24px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); } .copy-result h3 { font-size: 14px; font-weight: 500; margin-bottom: 10px; } .copy-result p { font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; } /* ========================================================================== 图片二次编辑（可视化拖拽编辑器） ========================================================================== */ .edit-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; } .edit-backdrop { position: absolute; inset: 0; background: rgba(34, 32, 27, 0.55); } .edit-body { position: relative; width: 100%; max-width: 1240px; max-height: 92vh; background: var(--card); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(34, 32, 27, .28); } .edit-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); gap: 16px; position: relative; } .edit-head h2 { font-size: 17px; font-weight: 500; white-space: nowrap; } .edit-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .edit-hint { font-size: 12px; color: var(--muted-fg); margin-right: 6px; } .tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; font-size: 14px; color: var(--fg); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .tb-btn:hover { border-color: var(--primary); color: var(--primary); } #zoomFitBtn.tb-btn { width: auto; padding: 0 14px; font-size: 13px; } .zoom-val { font-size: 12px; color: var(--muted-fg); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; } .edit-close { border: none; background: var(--muted); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-fg); transition: background .2s var(--ease), color .2s var(--ease); } .edit-close:hover { background: var(--primary); color: var(--primary-fg); } .tb-btn:disabled { opacity: .35; cursor: not-allowed; } /* 图形选择面板 */ .shape-panel { position: absolute; top: calc(100% + 6px); left: 16px; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); max-width: 500px; } .shape-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--muted); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--fg); font-family: inherit; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .shape-item:hover { border-color: var(--primary); color: var(--primary); background: var(--gold-soft); } .shape-item svg { color: var(--muted-fg); } .shape-item:hover svg { color: var(--primary); } .layer-order-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .layer-order-row .tb-btn { width: auto; padding: 0 12px; height: 32px; font-size: 12px; } .dl-format { padding: 9px 12px; border: 1px solid var(--border); border-radius: 980px; font-size: 13px; font-family: inherit; background: var(--card); color: var(--fg); cursor: pointer; } .dl-format:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .edit-layout { display: flex; gap: 24px; padding: 24px; flex: 1; min-height: 0; overflow: hidden; } .edit-canvas-wrap { flex: 1; position: relative; overflow: auto; background: var(--muted); border-radius: var(--radius); border: 1px solid var(--border); min-height: 380px; cursor: grab; } .edit-canvas-wrap.panning { cursor: grabbing; } .edit-canvas { position: relative; transform-origin: 0 0; background: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 16px 16px; } .edit-canvas > img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; } /* 透明选中框（V7：内容由后端渲染图承载，选中框仅做指示与交互） */ .sel-box { position: absolute; box-sizing: border-box; cursor: move; user-select: none; outline: 1px solid transparent; background: transparent !important; } .sel-box:hover { outline: 1px dashed rgba(148, 125, 66, .7); } .sel-box.selected { outline: 2px solid var(--primary); } .sel-box .resize-handle { position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid var(--primary); border-radius: 3px; display: none; z-index: 6; box-sizing: border-box; } .sel-box.selected .resize-handle { display: block; } .sel-box .resize-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; } .sel-box .resize-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; } .sel-box .resize-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; } .sel-box .resize-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; } .sel-box .rotate-handle { position: absolute; left: 50%; top: -26px; width: 13px; height: 13px; margin-left: -6.5px; background: #fff; border: 2px solid var(--primary); border-radius: 50%; display: none; z-index: 7; box-sizing: border-box; cursor: grab; } .sel-box .rotate-handle:active { cursor: grabbing; } .sel-box .rotate-handle::before { content: ''; position: absolute; left: 50%; top: 13px; width: 1px; height: 13px; background: var(--primary); transform: translateX(-50%); } .sel-box.selected .rotate-handle { display: block; } .edit-form { width: 340px; flex: 0 0 340px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-right: 2px; } .edit-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--fg); } .edit-section { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); } .edit-section .pill-row { margin-bottom: 0; } .edit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; } .edit-actions .dl-format { flex: 1 1 100%; order: 1; } .edit-actions #editorDownloadBtn { order: 2; } .edit-actions #editSaveBtn { order: 3; flex: 1 1 auto; padding: 11px 20px; } .edit-actions #editCancelBtn { order: 4; } .prop-field { margin-bottom: 16px; } .prop-field:last-child { margin-bottom: 0; } .prop-field .pill-row { margin-bottom: 0; } /* 特效开关 + 子控件 */ .fx-toggle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .fx-toggle .design-label { margin-bottom: 0; } .fx-sub { padding-left: 4px; } .fx-sub .slider-row { margin-top: 10px; } /* iOS 风格开关 */ .switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 980px; transition: background .25s var(--ease); } .switch .slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s var(--ease); } .switch input:checked + .slider { background: var(--primary); } .switch input:checked + .slider::before { transform: translateX(18px); } .color-custom { margin-top: 4px; display: flex; align-items: center; gap: 10px; } .color-custom input { width: 46px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--card); } .color-custom.inline { margin-top: 10px; } /* 滑块 */ .slider-row { flex-direction: row !important; align-items: center; gap: 14px !important; font-size: 13px !important; font-weight: 500 !important; margin-top: 10px; } .slider-row input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 980px; background: var(--border); outline: none; cursor: pointer; } .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.15); cursor: pointer; } .slider-row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid var(--primary); cursor: pointer; } .slider-row span { min-width: 44px; text-align: right; color: var(--muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; } .slider-row .val-input { width: 54px; min-width: 44px; padding: 3px 6px; text-align: right; color: var(--fg); font-size: 12px; font-variant-numeric: tabular-nums; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xs); outline: none; box-sizing: border-box; transition: border-color .15s; } .slider-row .val-input:hover { border-color: var(--primary); } .slider-row .val-input:focus { border-color: var(--primary); box-shadow: var(--ring); } /* ========================================================================== 平台预设 / 尺寸 / 比例 / 分辨率 ========================================================================== */ .platform-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .platform-item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--card); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .platform-item:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .platform-item.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .pf-logo { width: 34px; height: 34px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #fff; line-height: 1; flex: 0 0 auto; } .pf-name { font-size: 14px; font-weight: 500; color: var(--fg); } .size-summary { margin-top: 24px; padding: 14px 18px; background: var(--gold-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--muted-fg); } .size-summary b { color: var(--gold-deep); font-weight: 500; } .sum-note { color: var(--subtle); font-size: 12.5px; } .ratio-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; } .ratio-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--card); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .ratio-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .ratio-card.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .ratio-thumb { height: 48px; display: grid; place-items: center; } .ratio-shape { border: 2px solid var(--subtle); border-radius: 4px; background: var(--card); transition: border-color .25s var(--ease), background .25s var(--ease); } .ratio-card.selected .ratio-shape { border-color: var(--primary); background: var(--gold-soft); } .ratio-name { font-size: 12.5px; font-weight: 500; color: var(--muted-fg); transition: color .25s var(--ease); } .ratio-card.selected .ratio-name { color: var(--gold-deep); } .resolution-row { display: flex; gap: 14px; flex-wrap: wrap; } .count-section { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .count-block { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); } .count-label { font-size: 16px; font-weight: 500; margin-bottom: 4px; color: var(--fg); } .count-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .count-head .count-label { margin-bottom: 0; } .count-desc { font-size: 13px; color: var(--muted-fg); margin-bottom: 16px; } .count-block.disabled .count-label { opacity: .5; } .count-block.disabled .count-desc, .count-block.disabled .count-row, .count-block.disabled .count-manual, .count-block.disabled .ratio-field, .count-block.disabled .detail-subs { opacity: .45; pointer-events: none; } .count-block .count-row { gap: 10px; margin-bottom: 14px; } .count-block .opt-pill { padding: 9px 16px; font-size: 13px; } .count-manual { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--card); color: var(--fg); } .count-manual:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .ratio-field { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .ratio-field label { font-size: 13px; color: var(--muted-fg); white-space: nowrap; } .detail-subs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .sub-opt { padding: 6px 14px; border: 1px solid var(--border); border-radius: 980px; font-size: 12px; color: var(--muted-fg); cursor: pointer; background: var(--card); transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); } .sub-opt:hover { border-color: var(--primary); color: var(--primary); } .sub-opt.selected { border-color: var(--primary); background: var(--gold-soft); color: var(--gold-deep); } .count-hint { margin-top: 16px; margin-bottom: 0; } /* ========================================================================== 案例展示区 ========================================================================== */ .case-area { margin-top: 8px; padding-top: 16px; text-align: center; } .case-title { font-size: 26px; font-weight: 300; letter-spacing: .02em; color: var(--fg); font-family: 'Noto Serif SC', 'Inter', sans-serif; } .case-sub { font-size: 14px; color: var(--muted-fg); margin: 12px 0 40px; } .case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; text-align: left; } .case-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); transition: box-shadow .25s var(--ease), transform .25s var(--ease); } .case-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .case-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); } .case-img { aspect-ratio: 3 / 4; display: grid; place-items: center; font-size: 13px; color: var(--muted-fg); font-weight: 500; } .case-meta { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-size: 13.5px; color: var(--muted-fg); } .case-meta b { color: var(--fg); font-weight: 500; font-size: 14.5px; } /* ========================================================================== 模板市场 ========================================================================== */ .template-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; } .template-tabs .opt-pill { padding: 9px 22px; } .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; } .template-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); cursor: pointer; transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); } .template-item:hover { box-shadow: var(--shadow-hover); border-color: var(--primary); transform: translateY(-2px); } .template-thumb { position: relative; width: 100%; height: 210px; overflow: hidden; background: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 16px 16px; } .template-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .template-use { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(34, 32, 27, 0.42); color: #fff; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .2s var(--ease); } .template-item:hover .template-use { opacity: 1; } .template-meta { padding: 10px 14px; } .template-name { font-size: 14.5px; font-weight: 500; color: var(--fg); } .template-cat { font-size: 12px; color: var(--primary); margin-bottom: 2px; } .template-desc { font-size: 12px; color: var(--muted-fg); margin-top: 3px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== 历史记录 ========================================================================== */ .history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; } .history-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); transition: box-shadow .25s var(--ease), transform .25s var(--ease); } .history-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .history-thumb { width: 100%; height: 150px; background: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 16px 16px; cursor: zoom-in; overflow: hidden; } .history-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .history-meta { padding: 10px 12px 0; } .history-name { font-size: 12px; color: var(--muted-fg); word-break: break-all; font-variant-numeric: tabular-nums; } .history-time { font-size: 12px; color: var(--subtle); margin-top: 2px; } .history-actions { display: flex; gap: 6px; padding: 10px 12px 12px; } .history-actions a, .history-actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 6px; font-size: 12px; font-weight: 500; border-radius: 980px; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .2s var(--ease), color .2s var(--ease); } .history-actions .dl { background: var(--gold-soft); color: var(--gold-deep); } .history-actions .dl:hover { background: var(--primary); color: var(--primary-fg); } .history-actions .edit { background: var(--gold-soft); color: var(--gold-deep); } .history-actions .edit:hover { background: var(--primary); color: var(--primary-fg); } .history-actions .edit:disabled { opacity: .4; cursor: not-allowed; background: var(--muted); color: var(--subtle); } /* ========================================================================== 电商全套生成（detail.html · 新增 · 对标 Picset） 五步：产品分析 → 结构规划 → 分图生成 → 自动文案 → 风格统一 ========================================================================== */ .detail-hero-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 6px 16px; background: var(--gold-soft); color: var(--gold-deep); font-size: 12.5px; font-weight: 500; border-radius: 980px; letter-spacing: .02em; } /* 流程进度轨道（横向 5 节点） */ .pipeline-track { display: flex; align-items: flex-start; gap: 0; margin: 0 auto 40px; max-width: 720px; } .pipeline-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; } .pipeline-node::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 1px; background: var(--border); } .pipeline-node:first-child::before { display: none; } .pipeline-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--card); color: var(--muted-fg); font-size: 13px; font-weight: 500; position: relative; z-index: 1; transition: all .25s var(--ease); } .pipeline-node.active .pipeline-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); } .pipeline-node.done .pipeline-dot { background: var(--gold-soft); border-color: var(--primary); color: var(--gold-deep); } .pipeline-node.done::before { background: var(--primary); } .pipeline-label { font-size: 12.5px; color: var(--muted-fg); text-align: center; } .pipeline-node.active .pipeline-label { color: var(--gold-deep); font-weight: 500; } /* 产品分析结果（AI 画像卡） */ .analyze-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .analyze-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; background: var(--muted); } .analyze-card .ak { font-size: 12px; color: var(--muted-fg); letter-spacing: .05em; margin-bottom: 8px; font-weight: 500; } .analyze-card .av { font-size: 14.5px; color: var(--fg); line-height: 1.7; } .analyze-tag { display: inline-block; padding: 3px 12px; border-radius: 980px; background: var(--gold-soft); color: var(--gold-deep); font-size: 12.5px; margin: 0 6px 6px 0; } /* 结构规划看板（页面类型卡片） */ .plan-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .page-spec-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; background: var(--card); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); position: relative; } .page-spec-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); } .page-spec-card.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .page-spec-card .ps-type { font-size: 11px; letter-spacing: .08em; color: var(--primary); font-weight: 600; text-transform: uppercase; margin-bottom: 6px; } .page-spec-card .ps-title { font-size: 15px; font-weight: 500; color: var(--fg); margin-bottom: 6px; } .page-spec-card .ps-desc { font-size: 12.5px; color: var(--muted-fg); line-height: 1.6; } .page-spec-card .ps-ratio { display: inline-block; margin-top: 10px; font-size: 11.5px; color: var(--subtle); border: 1px solid var(--border); border-radius: 980px; padding: 2px 10px; } /* 分图生成进度（页面缩略网格） */ .page-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .page-thumb { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); transition: box-shadow .25s var(--ease), transform .25s var(--ease); } .page-thumb:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .page-thumb .pt-img { width: 100%; aspect-ratio: 3/4; background: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 16px 16px; display: grid; place-items: center; color: var(--subtle); font-size: 12px; } .page-thumb .pt-img img { width: 100%; height: 100%; object-fit: contain; } .page-thumb .pt-label { padding: 10px 12px; font-size: 12.5px; color: var(--muted-fg); display: flex; align-items: center; justify-content: space-between; gap: 6px; } .page-thumb .pt-status { font-size: 11px; color: var(--subtle); } .page-thumb .pt-status.ok { color: var(--success); } /* 自动文案面板 */ .copy-panel { display: flex; flex-direction: column; gap: 14px; } .copy-panel-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); } .copy-panel-row .cp-label { flex: 0 0 120px; font-size: 12.5px; color: var(--muted-fg); font-weight: 500; } .copy-panel-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; background: var(--card); color: var(--fg); } .copy-panel-row input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .copy-panel-row .cp-ai { flex: 0 0 auto; font-size: 11px; color: var(--primary); background: var(--gold-soft); padding: 3px 10px; border-radius: 980px; } /* 风格统一 */ .style-unify-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .unify-swatch { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .unify-swatch:hover { border-color: var(--primary); } .unify-swatch.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .unify-swatch .us-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); flex: none; } .unify-swatch .us-name { font-size: 13px; color: var(--fg); font-weight: 500; } /* 详情页底部信息栏（深色点缀示例） */ .ink-bar { height: 52px; background: var(--fg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; margin-top: 16px; } .ink-bar span { color: rgba(255,255,255,.92); font-size: 13px; font-weight: 500; } .ink-bar .tag2 { background: var(--primary); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 7px; } /* ========================================================================== 响应式 ========================================================================== */ @media (max-width: 720px) { .sidebar { width: 64px; flex: 0 0 64px; padding: 16px 8px; } .side-item { justify-content: center; padding: 12px 0; } .side-item span:last-child { display: none; } .side-logo { justify-content: center; padding: 6px 0; } .side-logo .logo-text, .side-foot { display: none; } .topbar-inner { padding: 0 16px; height: 54px; } .main-nav { gap: 16px; } .nav-item svg { width: 18px; height: 18px; } .mode-badge { display: none; } .container { padding: 0 16px 80px; } .hero { padding: 48px 12px 36px; } .card { padding: 24px 18px; margin-bottom: 32px; } .steps { gap: 16px; margin-bottom: 32px; } .style-grid { gap: 14px; } .result-grid { gap: 14px; } .generate-bar { margin: 8px 0 48px; } .count-section { grid-template-columns: 1fr; } .platform-row { grid-template-columns: repeat(2, 1fr); } .case-grid { grid-template-columns: 1fr; } .analyze-grid { grid-template-columns: 1fr; } .edit-layout { flex-direction: column; overflow-y: auto; } .edit-canvas-wrap { min-height: 300px; } .edit-form { width: auto; flex: none; overflow: visible; } .edit-hint { display: none; } } /* ========================================================================== 电商全套生成（detail.html）联调新增样式 ========================================================================== */ .upload-preview { display: flex; gap: 20px; align-items: center; margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); } .upload-preview img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--radius-sm); background: repeating-conic-gradient(#EFEDE7 0 25%, #FDFDFC 0 50%); background-size: 12px 12px; flex: none; } .upload-preview-info { display: flex; flex-direction: column; gap: 10px; } .upload-preview-info .ok-line { color: var(--success); font-size: 13.5px; font-weight: 500; margin: 0; } .style-note { font-size: 13px; color: var(--primary); background: var(--gold-soft); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 16px; } .gen-message { font-size: 13px; color: var(--success); background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .25); border-radius: var(--radius-sm); padding: 12px 14px; margin: 16px 0 0; } .gen-message.warn { color: #b45309; background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .35); } .av-empty { color: var(--subtle); font-size: 12.5px; } .page-thumb.empty .pt-img { color: var(--subtle); } .toast.error { background: #b91c1c; color: #fff; } /* ========================================================================== 海报类型选择（产品海报 / 宣传海报）+ 跳过产品图开关 ========================================================================== */ .poster-type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .poster-type-row { grid-template-columns: 1fr; } } .poster-type-option { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--card); transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .poster-type-option:hover { border-color: var(--primary); } .poster-type-option.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--gold-soft); } .poster-type-radio { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; flex: none; margin-top: 2px; position: relative; transition: border-color .25s var(--ease); } .poster-type-option.selected .poster-type-radio { border-color: var(--primary); } .poster-type-option.selected .poster-type-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); } .poster-type-name { font-size: 15px; font-weight: 600; color: var(--fg); } .poster-type-desc { font-size: 13px; color: var(--muted-fg); margin-top: 4px; line-height: 1.6; } .skip-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .skip-label { font-size: 14px; font-weight: 500; color: var(--fg); } .skip-hint { font-size: 13px; color: var(--muted-fg); } /* 跳过的步骤（宣传海报：上传产品图 / 抠图去背景） */ .step.skipped { color: var(--subtle); text-decoration: line-through; } .step.skipped .step-num { border-color: var(--border); color: var(--subtle); background: var(--muted); } /* ========================================================================== 海报文案策划（AI 生成主标题 / 副标题 / 促销语 / 行动按钮文案） ========================================================================== */ .copy-plan { margin-bottom: 20px; } .copy-plan-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .copy-result { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .copy-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; } @media (max-width: 720px) { .copy-fields { grid-template-columns: 1fr; } } .copy-fields label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fg); } /* ========================================================================== 电商海报 · 双栏工作区（左参数 + 右结果，同页） ========================================================================== */ .container { max-width: 1240px; } .workspace { display: flex; gap: 24px; align-items: flex-start; margin-top: 4px; } @media (max-width: 900px) { .workspace { flex-direction: column; } } .panel { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); } .panel-left { flex: 0 0 300px; } .panel-right { flex: 1 1 auto; min-height: 520px; } /* 左栏紧凑表单：标题小字、控件紧凑、上传区收窄 */ .panel-left .panel-block { margin-bottom: 14px; } .panel-left .panel-title { font-size: 12px; margin: 0 0 6px; color: var(--muted-fg); font-weight: 500; } .panel-left .upload-zone { padding: 14px 10px; } .panel-left .upload-inner p { font-size: 13px; margin-top: 8px; } .panel-left .upload-inner .hint { font-size: 11px; margin-top: 4px; } .panel-left .upload-icon { width: 22px; height: 22px; } .panel-left .select, .panel-left .text-input { padding: 8px 10px; font-size: 13px; } .panel-left .generate-btn { padding: 11px; font-size: 14px; } /* 右栏结果放大：网格更密、单图更大 */ .panel-right .result-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .panel-right .result-item img { height: 220px; } .panel-block { margin-bottom: 20px; } .panel-block:last-child { margin-bottom: 0; } .panel-row { display: flex; gap: 16px; } .panel-half { flex: 1 1 50%; } .panel-title { font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 10px; } .select { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--fg); background: #fff; outline: none; cursor: pointer; } .select:focus { border-color: var(--primary); } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .generate-btn { width: 100%; padding: 14px; font-size: 16px; margin-top: 4px; } .result-empty { color: var(--subtle); font-size: 14px; text-align: center; padding: 64px 0; } .upload-done { display: flex; align-items: center; gap: 16px; } .cutout-checker { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: conic-gradient(#eee 90deg, #f6f6f6 90deg 180deg, #eee 180deg 270deg, #f6f6f6 270deg) 0 0 / 16px 16px; flex: 0 0 auto; } .cutout-checker img { width: 100%; height: 100%; object-fit: contain; } .upload-done-meta { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--fg); } /* ========================================================================== 照 Picset：参数区（上传 + 类型Tab + 参数行） ========================================================================== */ .param-group { margin-bottom: 16px; } .param-label { display: block; font-size: 12px; font-weight: 500; color: var(--muted-fg); margin-bottom: 6px; } .param-count { color: var(--subtle); font-weight: 400; margin-left: 4px; } .param-hint { font-size: 11px; color: var(--subtle); margin-top: 8px; line-height: 1.5; } .type-tabs { display: flex; gap: 6px; background: var(--muted); padding: 4px; border-radius: 10px; margin-bottom: 18px; } .type-tab { flex: 1; padding: 8px 0; border: none; background: transparent; border-radius: 7px; font-size: 13px; color: var(--muted-fg); cursor: pointer; position: relative; } .type-tab.active { background: #fff; color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .type-tab .new-dot { display: inline-block; width: 5px; height: 5px; background: #ff4d4f; border-radius: 50%; margin-left: 2px; vertical-align: super; } .param-row { margin-bottom: 14px; } .param-row .text-input, .param-row .select { width: 100%; } .expert-row { display: flex; align-items: center; gap: 8px; } .expert-row .param-label { margin-bottom: 0; flex: 1; } .expert-hint { font-size: 11px; color: var(--subtle); } .ai-write-btn { margin-top: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--muted); font-size: 12px; color: var(--fg); cursor: pointer; } .ai-write-btn:hover { border-color: var(--primary); color: var(--primary); } .copy-embed-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--subtle); cursor: pointer; user-select: none; } .copy-embed-check input { cursor: pointer; } /* ========================================================================== 顶部导航栏（照 Picset：单条横向导航，无侧边栏） ========================================================================== */ .app-shell-top { flex-direction: column; } .topnav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 32px; height: 60px; padding: 0 32px; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-bottom: 1px solid var(--border); } .topnav .logo { flex: none; } .topnav-links { display: flex; align-items: center; gap: 26px; flex: 1; } .nav-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted-fg); text-decoration: none; padding: 8px 2px; white-space: nowrap; transition: color .2s var(--ease); } .nav-link:hover { color: var(--fg); } .nav-link.active { color: var(--fg); font-weight: 600; } .nav-link .new-dot, .batch-btn .new-dot { font-size: 9px; font-weight: 700; color: #fff; background: #ff4d4f; padding: 1px 6px; border-radius: 980px; line-height: 1.5; letter-spacing: .04em; } /* studio 功能导航 */ .studio-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px 24px; } .studio-title { font-size: 22px; font-weight: 600; color: var(--fg); letter-spacing: .01em; } .batch-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--border); border-radius: 980px; background: #fff; font-size: 13px; color: var(--fg); cursor: pointer; white-space: nowrap; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .batch-btn:hover { border-color: var(--primary); box-shadow: var(--shadow); } /* 去精修链接 */ .refine-link { display: inline-block; font-size: 12px; color: var(--muted-fg); text-decoration: none; margin-top: 6px; } .refine-link b { color: var(--primary); font-weight: 500; } .refine-link:hover b { color: var(--primary-hover); } /* 详情图模块 */ .module-tabs { display: flex; gap: 6px; background: var(--muted); padding: 4px; border-radius: 10px; } .module-tab { flex: 1; padding: 8px 0; border: none; background: transparent; border-radius: 7px; font-size: 13px; color: var(--muted-fg); cursor: pointer; position: relative; } .module-tab.active { background: #fff; color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .module-tab .new-dot { display: inline-block; width: 5px; height: 5px; background: #ff4d4f; border-radius: 50%; margin-left: 2px; vertical-align: super; } /* ========================================================================== 布局覆盖（照 Picset 结构，配色沿用暖玉香槟不变）： 顶部通栏 56px + 左侧导航 240px + 左参数右结果双栏 + 参数区两列并排 ========================================================================== */ .app-shell { flex-direction: column; } /* 顶部通栏（56px，配色沿用原暖玉香槟） */ .topbar { position: sticky; top: 0; z-index: 100; height: 56px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 24px; } .topbar .logo { gap: 9px; } .topbar .logo-text { font-size: 18px; font-weight: 600; } .topbar-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--muted); border: 1px solid var(--border); color: var(--muted-fg); } .topbar-spacer { flex: 1; } /* 下方：侧边栏 + 主内容 横向 */ .body-row { flex: 1; display: flex; min-height: 0; } /* 左侧导航（240px，配色沿用原暖玉香槟浅色） */ .sidebar { width: 240px; flex: 0 0 240px; position: static; height: auto; } .sidebar .side-logo, .sidebar .logo { display: none; } .side-nav { display: flex; flex-direction: column; gap: 4px; } .side-foot { display: none; } /* 主内容 */ .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; } .container { max-width: none; margin: 0; padding: 0; } /* 大标题 + 创建批量任务按钮 */ .studio-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 32px 12px; } .studio-title { font-size: 24px; font-weight: 600; } /* 参数区两列并排（照 Picset：模型｜尺寸比例、清晰度｜生成数量 各一行） */ .param-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; } /* 双栏工作区 */ .workspace { display: flex; gap: 16px; padding: 12px 32px 40px; align-items: stretch; } .panel-left { flex: 0 0 390px; min-width: 0; } .panel-right { flex: 1 1 auto; min-height: 520px; min-width: 0; } /* ========================================================================== 电商海报参数栏：海报类型 / 自定义风格 / 自定义尺寸 ========================================================================== */ .poster-type-tabs { display: flex; gap: 6px; background: var(--muted); padding: 4px; border-radius: 10px; margin-bottom: 14px; } .poster-type-tab { flex: 1; padding: 9px 0; border: none; background: transparent; border-radius: 7px; font-size: 13px; color: var(--muted-fg); cursor: pointer; transition: all .2s var(--ease); } .poster-type-tab.active { background: #fff; color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .promo-hint-bar { display: none; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-deep); font-size: 12px; margin-bottom: 14px; line-height: 1.5; } .promo-hint-bar.show { display: flex; } .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .two-col .param-row { margin-bottom: 0; min-width: 0; } .two-col .select { min-width: 0; } .custom-box { border: 1px dashed var(--border); border-radius: 10px; padding: 10px; overflow: hidden; min-width: 0; } .unit-switch { display: flex; gap: 6px; background: var(--muted); padding: 3px; border-radius: 8px; } .unit-switch .unit { flex: 1; padding: 6px 0; border: none; background: transparent; border-radius: 6px; font-size: 12px; color: var(--muted-fg); cursor: pointer; } .unit-switch .unit.active { background: #fff; color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .wh-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .wh-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--fg); outline: none; } .wh-row .x { color: var(--subtle); flex: none; font-size: 13px; } .dpi-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .dpi-row label { font-size: 12px; color: var(--muted-fg); flex: none; } .dpi-row .select { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; } /* ========================================================================== 电商全套参数栏：生成内容多选卡片 + 平台联动提示条 ========================================================================== */ .content-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .content-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .content-card.on { border-color: var(--primary); background: var(--gold-soft); box-shadow: 0 0 0 3px rgba(148,125,66,.08); } .content-card .content-chk { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; } .content-card.on .content-chk { background: var(--primary); border-color: var(--primary); } .content-card .content-name { font-size: 13px; font-weight: 600; margin-top: 3px; } .content-card .content-num { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--fg); } .content-card .content-num b { font-weight: 600; min-width: 34px; text-align: center; } .content-card .num-btn { border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-size: 14px; line-height: 1.5; color: var(--muted-fg); background: #fff; cursor: pointer; } .content-card .num-btn:hover { border-color: var(--primary); color: var(--primary); } .platform-hint { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 9px 13px; border: 1px solid var(--gold); border-radius: 10px; background: var(--gold-soft); color: var(--gold-deep); font-size: 12px; line-height: 1.5; } /* ========================================================================== 详情页多屏编辑器（任务3）：屏列表 + 排序 + 增删，每屏文案/产品/版式分层编辑 ========================================================================== */ .editor-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; } .editor-backdrop { position: absolute; inset: 0; background: rgba(34, 32, 27, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .editor-dialog { position: relative; width: min(1080px, 96vw); height: min(720px, 92vh); background: var(--bg); border-radius: var(--radius-lg); box-shadow: 0 24px 80px rgba(34, 32, 27, 0.35); display: flex; flex-direction: column; overflow: hidden; } .editor-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .editor-title { font-size: 17px; font-weight: 600; color: var(--fg); } .editor-sub { font-size: 12px; color: var(--muted-fg); font-weight: 400; margin-left: 10px; } .editor-close { border: none; background: transparent; font-size: 18px; color: var(--muted-fg); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; } .editor-close:hover { background: var(--muted); color: var(--fg); } .editor-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .editor-hint { font-size: 12px; color: var(--subtle); } .editor-toolbar-spacer { flex: 1; } .editor-body { flex: 1; display: flex; min-height: 0; } .editor-list-wrap { flex: 0 0 320px; border-right: 1px solid var(--border); overflow-y: auto; padding: 12px; } .editor-list { display: flex; flex-direction: column; gap: 8px; } .screen-row { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); } .screen-row:hover { border-color: var(--gold); } .screen-row.selected { border-color: var(--primary); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--primary); } .screen-idx { flex: 0 0 22px; height: 22px; display: grid; place-items: center; background: var(--muted); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted-fg); } .screen-row.selected .screen-idx { background: var(--primary); color: var(--primary-fg); } .screen-type { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--primary); border: 1px solid rgba(148, 125, 66, .35); padding: 1px 6px; border-radius: 6px; } .screen-name { font-size: 13px; color: var(--fg); font-weight: 500; white-space: nowrap; } .screen-title { flex: 1; min-width: 0; font-size: 12px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .screen-ops { display: flex; gap: 4px; flex: 0 0 auto; } .screen-ops .op { border: 1px solid var(--border); background: #fff; border-radius: 6px; width: 22px; height: 22px; font-size: 11px; color: var(--muted-fg); cursor: pointer; line-height: 1; padding: 0; } .screen-ops .op:hover { border-color: var(--primary); color: var(--primary); } .screen-ops .op.del:hover { border-color: var(--destructive); color: var(--destructive); } .editor-form { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px 24px; } .edit-section { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 14px; } .edit-sec-title { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: .04em; margin-bottom: 12px; } .edit-label { display: block; font-size: 12px; color: var(--muted-fg); font-weight: 500; margin: 12px 0 5px; } .edit-label:first-of-type { margin-top: 0; } .edit-section .text-input, .edit-section .select { width: 100%; } .edit-section .param-hint { margin-bottom: 0; } .edit-slider-row { display: flex; align-items: center; justify-content: space-between; } .edit-slider-row .edit-label { margin: 12px 0 0; } .edit-val { font-size: 12px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; } .edit-section input[type="range"] { width: 100%; accent-color: var(--primary); margin: 4px 0 8px; } .panel-head-actions { display: flex; align-items: center; gap: 8px; } /* 详情页多屏管理弹窗：屏列表占满宽度 */ .editor-body > .editor-list-wrap { flex: 1; border-right: none; } .editor-body > .editor-list-wrap .editor-list { flex-direction: column; } /* ============ 详情页可视化编辑器：左预览 + 屏列表 / 右表单 ============ */ .editor-preview-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); } .editor-preview { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #141412; padding: 18px; overflow: hidden; } .editor-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } .editor-preview .preview-empty { color: var(--muted-fg); font-size: 13px; } /* 屏列表挪到预览图下方：横向紧凑排列，可滚动 */ .editor-preview-wrap .editor-list-wrap { flex: 0 0 auto; max-height: 184px; border-right: none; border-top: 1px solid var(--border); overflow-y: auto; padding: 10px; } .editor-preview-wrap .editor-list { flex-direction: row; flex-wrap: wrap; gap: 8px; } .editor-preview-wrap .screen-row { flex: 0 1 auto; min-width: 150px; } /* 右栏表单固定宽度，独立滚动 */ .editor-body .editor-form { flex: 0 0 380px; max-width: 380px; border-left: 1px solid var(--border); } @media (max-width: 900px) { .editor-body .editor-form { flex: 0 0 320px; max-width: 320px; } }