iye
086d92991e
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 7s
666 lines
26 KiB
HTML
666 lines
26 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>方案 A · 商品空间 · 模特上身图 · Airshelf</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/restraint.css?v=2026052607">
|
||
<style>
|
||
.app { height: 100vh; overflow: hidden; }
|
||
main { display: flex; flex-direction: column; min-height: 0; }
|
||
#page-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
|
||
|
||
/* ===== 两栏:左侧栏 / 右侧主区 ===== */
|
||
.dma {
|
||
flex: 1; min-height: 0;
|
||
display: grid;
|
||
grid-template-columns: 260px 1fr;
|
||
}
|
||
|
||
/* ── 左侧栏 · 仅商品空间(搜索 + 列表 + 全部入口) ── */
|
||
.dma-side {
|
||
border-right: 1px solid var(--border-faint);
|
||
background: var(--surface);
|
||
display: flex; flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
.dma-side-h {
|
||
padding: 14px 14px 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
.dma-side-h .ti-row {
|
||
display: flex; align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.dma-side-h .ti {
|
||
font-size: 11px; font-family: var(--font-mono);
|
||
color: var(--black-alpha-48); letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.dma-side-h .ti-row .add {
|
||
margin-left: auto;
|
||
width: 22px; height: 22px;
|
||
display: grid; place-items: center;
|
||
background: var(--heat-12); color: var(--heat);
|
||
border: 0; border-radius: var(--r-sm);
|
||
cursor: pointer;
|
||
}
|
||
.dma-side-h .add svg { width: 11px; height: 11px; }
|
||
/* 搜索框 (Q1-A) */
|
||
.dma-search {
|
||
display: flex; align-items: center; gap: 8px;
|
||
height: 32px; padding: 0 10px;
|
||
background: var(--background-lighter);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
transition: border-color var(--t-base), background var(--t-base);
|
||
}
|
||
.dma-search:focus-within { border-color: var(--heat-40); background: var(--surface); }
|
||
.dma-search svg { width: 13px; height: 13px; color: var(--black-alpha-48); flex-shrink: 0; }
|
||
.dma-search input {
|
||
flex: 1; min-width: 0; height: 100%;
|
||
border: 0; outline: 0; background: transparent;
|
||
font-size: 12.5px; color: var(--accent-black); font-family: inherit;
|
||
}
|
||
|
||
/* 商品空间列表(flex:1 占据中部所有剩余空间) */
|
||
.dma-prod-list {
|
||
flex: 1; min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 4px 10px 10px;
|
||
display: flex; flex-direction: column; gap: 4px;
|
||
}
|
||
.dma-prod {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 8px;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-sm);
|
||
cursor: pointer;
|
||
transition: background var(--t-base), border-color var(--t-base);
|
||
}
|
||
.dma-prod:hover { background: var(--background-lighter); }
|
||
.dma-prod.active { background: var(--heat-12); border-color: var(--heat-20); }
|
||
.dma-prod .thumb {
|
||
flex-shrink: 0;
|
||
width: 40px; height: 40px;
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
overflow: hidden;
|
||
background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(0,0,0,.04) 4px 5px);
|
||
display: grid; place-items: center;
|
||
font-family: var(--font-mono); font-size: 9px;
|
||
color: var(--black-alpha-32);
|
||
}
|
||
.dma-prod.active .thumb { border-color: var(--heat); }
|
||
.dma-prod .body { flex: 1; min-width: 0; }
|
||
.dma-prod .nm {
|
||
font-size: 12.5px;
|
||
color: var(--accent-black); font-weight: 500;
|
||
line-height: 1.3;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.dma-prod.active .nm { color: var(--heat); font-weight: 600; }
|
||
.dma-prod .sub {
|
||
margin-top: 2px;
|
||
font-family: var(--font-mono); font-size: 10px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
}
|
||
|
||
/* 全部商品入口(Q1-B · 固定贴底) */
|
||
.dma-all {
|
||
flex-shrink: 0;
|
||
margin: 0 10px 12px;
|
||
padding: 10px 12px;
|
||
background: var(--background-lighter);
|
||
border: 1px dashed var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
color: var(--black-alpha-72);
|
||
font-size: 12px;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
display: flex; align-items: center; gap: 6px;
|
||
transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
|
||
}
|
||
.dma-all:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
|
||
.dma-all .ct {
|
||
color: var(--black-alpha-48);
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
margin-left: auto;
|
||
}
|
||
.dma-all svg { width: 12px; height: 12px; }
|
||
|
||
/* ── 右侧主区 ── */
|
||
.dma-main {
|
||
display: flex; flex-direction: column;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
.dma-main-h {
|
||
flex-shrink: 0;
|
||
display: flex; align-items: center; gap: 14px;
|
||
padding: 14px 28px;
|
||
border-bottom: 1px solid var(--border-faint);
|
||
background: var(--surface);
|
||
}
|
||
.dma-main-h .crumb {
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
color: var(--black-alpha-48); letter-spacing: .04em;
|
||
}
|
||
.dma-main-h h2 {
|
||
font-size: 20px; font-weight: 600;
|
||
letter-spacing: -.015em;
|
||
color: var(--accent-black);
|
||
}
|
||
.dma-main-h .stats {
|
||
margin-left: auto;
|
||
display: flex; gap: 6px;
|
||
font-family: var(--font-mono); font-size: 11px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
}
|
||
.dma-main-h .stats b { color: var(--accent-black); font-weight: 600; }
|
||
.dma-main-h .stats .sep { color: var(--black-alpha-24); }
|
||
|
||
/* 主区:参数 + 结果横向二栏 */
|
||
.dma-body {
|
||
flex: 1; min-height: 0;
|
||
display: grid;
|
||
grid-template-columns: 320px 1fr;
|
||
gap: 0;
|
||
}
|
||
|
||
/* 左侧参数面板 */
|
||
.dma-form {
|
||
border-right: 1px solid var(--border-faint);
|
||
background: var(--surface);
|
||
display: flex; flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
.dma-form-scroll {
|
||
flex: 1; min-height: 0; overflow-y: auto;
|
||
padding: 16px 18px;
|
||
}
|
||
.dma-field { margin-bottom: 16px; }
|
||
.dma-field-h {
|
||
font-size: 12px; font-weight: 600;
|
||
color: var(--accent-black);
|
||
margin-bottom: 8px;
|
||
}
|
||
.dma-field-h .opt {
|
||
font-weight: 400; font-size: 11px;
|
||
color: var(--black-alpha-48); margin-left: 4px;
|
||
}
|
||
.dma-models {
|
||
display: grid; grid-template-columns: repeat(3, 1fr);
|
||
gap: 8px;
|
||
}
|
||
.dma-model {
|
||
aspect-ratio: 3 / 4;
|
||
border: 1px solid var(--border-faint);
|
||
background: var(--background-lighter);
|
||
border-radius: var(--r-sm);
|
||
position: relative; cursor: pointer;
|
||
overflow: hidden;
|
||
transition: border-color var(--t-base);
|
||
}
|
||
.dma-model:hover { border-color: var(--black-alpha-32); }
|
||
.dma-model.selected { border-color: var(--heat); border-width: 2px; }
|
||
.dma-model .ph {
|
||
position: absolute; inset: 0;
|
||
display: grid; place-items: center;
|
||
font-family: var(--font-mono); font-size: 10px;
|
||
color: var(--black-alpha-32);
|
||
background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px);
|
||
}
|
||
.dma-model .nm {
|
||
position: absolute; bottom: 0; left: 0; right: 0;
|
||
padding: 4px 6px;
|
||
background: linear-gradient(transparent, rgba(0,0,0,.5));
|
||
font-size: 10px; color: #fff; font-weight: 500;
|
||
}
|
||
.dma-model.selected::after {
|
||
content: ''; position: absolute; top: 4px; right: 4px;
|
||
width: 14px; height: 14px;
|
||
background: var(--heat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 9px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.dma-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.dma-chip {
|
||
display: inline-flex; align-items: center;
|
||
height: 28px; padding: 0 11px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
font-size: 12px; color: var(--black-alpha-72);
|
||
font-family: inherit; cursor: pointer;
|
||
transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
|
||
}
|
||
.dma-chip:hover { border-color: var(--black-alpha-32); color: var(--accent-black); }
|
||
.dma-chip.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
|
||
|
||
.dma-form-cta {
|
||
flex-shrink: 0;
|
||
padding: 14px 18px;
|
||
border-top: 1px solid var(--border-faint);
|
||
background: var(--surface);
|
||
}
|
||
.dma-cost {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
font-family: var(--font-mono); font-size: 11px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
}
|
||
.dma-cost .v { color: var(--accent-black); font-weight: 600; }
|
||
.dma-gen {
|
||
width: 100%; height: 42px;
|
||
background: var(--heat); color: #fff;
|
||
border: 1px solid var(--heat); border-radius: var(--r-md);
|
||
font-size: 14px; font-weight: 600; font-family: inherit;
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
box-shadow: var(--shadow-cta);
|
||
}
|
||
.dma-gen svg { width: 15px; height: 15px; }
|
||
|
||
/* 右侧结果区 */
|
||
.dma-result {
|
||
background: var(--background-base);
|
||
min-height: 0; overflow-y: auto;
|
||
padding: 22px 24px;
|
||
}
|
||
.dma-result-h {
|
||
display: flex; align-items: baseline; gap: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.dma-result-h .ti { font-size: 15px; font-weight: 600; color: var(--accent-black); }
|
||
.dma-result-h .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
|
||
|
||
/* 批次卡 */
|
||
.dma-batch {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-md);
|
||
padding: 14px 16px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.dma-batch-h {
|
||
display: flex; align-items: center; gap: 10px;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--border-faint);
|
||
}
|
||
.dma-batch-h .pic {
|
||
width: 28px; height: 28px;
|
||
background: var(--background-lighter);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
display: grid; place-items: center;
|
||
color: var(--heat);
|
||
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
|
||
}
|
||
.dma-batch-h .meta { flex: 1; min-width: 0; }
|
||
.dma-batch-h .nm { font-size: 13px; font-weight: 600; color: var(--accent-black); }
|
||
.dma-batch-h .info { margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; }
|
||
.dma-batch-h .info .sep { color: var(--black-alpha-24); }
|
||
.dma-batch-h .ops { display: flex; gap: 4px; }
|
||
.dma-batch-h .ops button {
|
||
width: 28px; height: 28px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
color: var(--black-alpha-56); cursor: pointer;
|
||
display: grid; place-items: center;
|
||
}
|
||
.dma-batch-h .ops button:hover { border-color: var(--heat-20); color: var(--heat); }
|
||
.dma-batch-h .ops button svg { width: 13px; height: 13px; }
|
||
|
||
.dma-batch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
||
@media (max-width: 1400px) { .dma-batch-grid { grid-template-columns: repeat(3, 1fr); } }
|
||
.dma-cell {
|
||
aspect-ratio: 3 / 4;
|
||
background: var(--background-lighter);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
overflow: hidden; position: relative;
|
||
cursor: pointer;
|
||
}
|
||
.dma-cell .ph {
|
||
position: absolute; inset: 0;
|
||
display: grid; place-items: center;
|
||
font-family: var(--font-mono); font-size: 11px;
|
||
color: var(--black-alpha-32);
|
||
background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px);
|
||
}
|
||
.dma-cell .tag {
|
||
position: absolute; top: 6px; left: 6px;
|
||
padding: 2px 6px;
|
||
background: rgba(0,0,0,.65);
|
||
color: #fff;
|
||
border-radius: var(--r-sm);
|
||
font-size: 10px; font-weight: 500;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
/* 空态 */
|
||
.dma-empty {
|
||
height: 100%;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
gap: 12px;
|
||
color: var(--black-alpha-48);
|
||
text-align: center;
|
||
}
|
||
.dma-empty .ic {
|
||
width: 56px; height: 56px;
|
||
background: var(--surface); border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-md);
|
||
display: grid; place-items: center;
|
||
color: var(--heat);
|
||
}
|
||
.dma-empty .ic svg { width: 22px; height: 22px; }
|
||
.dma-empty .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
|
||
|
||
/* 顶部"提示条" · 这是 demo */
|
||
.dma-banner {
|
||
margin: 12px 28px 0;
|
||
padding: 8px 12px;
|
||
background: var(--heat-12);
|
||
border: 1px dashed var(--heat-20);
|
||
border-radius: var(--r-sm);
|
||
font-size: 12px;
|
||
color: var(--accent-black);
|
||
font-family: var(--font-mono); letter-spacing: .02em;
|
||
}
|
||
.dma-banner b { color: var(--heat); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="page">
|
||
|
||
<div class="dma-banner">// DEMO · 方案 A · <b>商品 = 项目空间</b>(Q1: A+B)。左栏仅商品空间:🔍 搜索 + 最近 6 条 + <b>全部商品</b>兜底入口;历史任务已挪进主区。主区:模特卡 + 张数 + 比例 + 立即生成,生成结果自动绑定到当前商品。</div>
|
||
|
||
<div class="dma">
|
||
|
||
<!-- ===== 左侧栏 · 仅商品空间 (搜索 + 列表 + 全部入口) ===== -->
|
||
<aside class="dma-side">
|
||
<div class="dma-side-h">
|
||
<div class="ti-row">
|
||
<span class="ti">商品空间</span>
|
||
<button class="add" type="button" title="新建商品">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
|
||
</button>
|
||
</div>
|
||
<!-- Q1-A · 搜索框 -->
|
||
<div class="dma-search">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<input type="text" placeholder="搜索商品 / 分类">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商品列表 · 最近 6 条 -->
|
||
<div class="dma-prod-list">
|
||
<div class="dma-prod active">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">透真补水面膜</div>
|
||
<div class="sub">// 美妆个护 · 6 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dma-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">透真清透防晒霜</div>
|
||
<div class="sub">// 美妆个护 · 3 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dma-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">南卡 Lite Pro 蓝牙耳机</div>
|
||
<div class="sub">// 数码 3C · 2 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dma-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">滋啦速食牛肉面</div>
|
||
<div class="sub">// 食品饮料 · 1 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dma-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">三顿半同款冻干咖啡</div>
|
||
<div class="sub">// 食品饮料 · 1 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dma-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">小熊 4L 可视空气炸锅</div>
|
||
<div class="sub">// 家居家电 · 0 批</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Q1-B · 全部商品入口(贴底) -->
|
||
<button class="dma-all" type="button">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M9 4v16"/></svg>
|
||
全部商品
|
||
<span class="ct">24 个</span>
|
||
<svg style="margin-left:4px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</button>
|
||
</aside>
|
||
|
||
<!-- ===== 右侧主区 ===== -->
|
||
<section class="dma-main">
|
||
|
||
<!-- 顶部 · 商品名 + 统计 -->
|
||
<div class="dma-main-h">
|
||
<div>
|
||
<div class="crumb">// 商品空间</div>
|
||
<h2>透真补水面膜</h2>
|
||
</div>
|
||
<div class="stats">
|
||
<span>本商品 <b>6</b> 批</span>
|
||
<span class="sep">·</span>
|
||
<span>累计 <b>22</b> 张图</span>
|
||
<span class="sep">·</span>
|
||
<span>最近 <b>3 分钟前</b></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间:参数面板 + 结果 -->
|
||
<div class="dma-body">
|
||
|
||
<!-- 参数面板(单一职责:挑模特 + 张数) -->
|
||
<div class="dma-form">
|
||
<div class="dma-form-scroll">
|
||
|
||
<div class="dma-field">
|
||
<div class="dma-field-h">选择模特<span class="opt">(已锁定商品 · 透真补水面膜)</span></div>
|
||
<div class="dma-models">
|
||
<div class="dma-model selected">
|
||
<div class="ph">Ava · 3:4</div>
|
||
<div class="nm">Ava</div>
|
||
</div>
|
||
<div class="dma-model">
|
||
<div class="ph">Zoe · 3:4</div>
|
||
<div class="nm">Zoe</div>
|
||
</div>
|
||
<div class="dma-model">
|
||
<div class="ph">Ben · 3:4</div>
|
||
<div class="nm">Ben</div>
|
||
</div>
|
||
<div class="dma-model">
|
||
<div class="ph">Lin · 3:4</div>
|
||
<div class="nm">Lin</div>
|
||
</div>
|
||
<div class="dma-model">
|
||
<div class="ph">Mia · 3:4</div>
|
||
<div class="nm">Mia</div>
|
||
</div>
|
||
<div class="dma-model" style="border-style:dashed;display:flex;align-items:center;justify-content:center;color:var(--black-alpha-48);">
|
||
<span style="font-size:18px">+</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dma-field">
|
||
<div class="dma-field-h">生成张数</div>
|
||
<div class="dma-chip-row">
|
||
<button class="dma-chip" type="button">1 张</button>
|
||
<button class="dma-chip" type="button">2 张</button>
|
||
<button class="dma-chip active" type="button">4 张</button>
|
||
<button class="dma-chip" type="button">8 张</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dma-field">
|
||
<div class="dma-field-h">画面比例</div>
|
||
<div class="dma-chip-row">
|
||
<button class="dma-chip" type="button">1:1</button>
|
||
<button class="dma-chip active" type="button">3:4</button>
|
||
<button class="dma-chip" type="button">9:16</button>
|
||
<button class="dma-chip" type="button">16:9</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dma-field">
|
||
<div class="dma-field-h">补充提示词<span class="opt">(选填)</span></div>
|
||
<textarea style="width:100%;min-height:60px;padding:8px 10px;background:var(--background-lighter);border:1px solid var(--black-alpha-12);border-radius:var(--r-sm);font-family:inherit;font-size:12.5px;outline:none;resize:vertical" placeholder="例:户外阳光、敷面膜的特写、白底产品摄影"></textarea>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="dma-form-cta">
|
||
<div class="dma-cost">
|
||
<span>预估扣费 <span class="v">≈ ¥1.20</span></span>
|
||
<span>余额 ¥327.40</span>
|
||
</div>
|
||
<button class="dma-gen" type="button">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4L12 3z"/></svg>
|
||
立即生成 · 透真补水面膜 × Ava
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧结果 · 当前商品全部批次 -->
|
||
<div class="dma-result">
|
||
<div class="dma-result-h">
|
||
<span class="ti">最近批次 · Ava × 4 张</span>
|
||
<span class="sub">// 3 分钟前 · 已完成</span>
|
||
</div>
|
||
|
||
<!-- 批次 1 -->
|
||
<div class="dma-batch">
|
||
<div class="dma-batch-h">
|
||
<div class="pic">4×</div>
|
||
<div class="meta">
|
||
<div class="nm">Ava × 4 张</div>
|
||
<div class="info">透真补水面膜 <span class="sep">·</span> 3:4 <span class="sep">·</span> 3 分钟前 <span class="sep">·</span> ¥1.20</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="全部重跑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3-6.7L21 8M21 3v5h-5"/></svg></button>
|
||
<button type="button" title="全部下载"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg></button>
|
||
<button type="button" title="加入资产库"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg></button>
|
||
</div>
|
||
</div>
|
||
<div class="dma-batch-grid">
|
||
<div class="dma-cell"><div class="ph">Ava · #1</div><span class="tag">3:4</span></div>
|
||
<div class="dma-cell"><div class="ph">Ava · #2</div><span class="tag">3:4</span></div>
|
||
<div class="dma-cell"><div class="ph">Ava · #3</div><span class="tag">3:4</span></div>
|
||
<div class="dma-cell"><div class="ph">Ava · #4</div><span class="tag">3:4</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批次 2 -->
|
||
<div class="dma-batch">
|
||
<div class="dma-batch-h">
|
||
<div class="pic">4×</div>
|
||
<div class="meta">
|
||
<div class="nm">Zoe × 4 张</div>
|
||
<div class="info">透真补水面膜 <span class="sep">·</span> 3:4 <span class="sep">·</span> 12 分钟前 <span class="sep">·</span> ¥1.20</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="全部重跑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3-6.7L21 8M21 3v5h-5"/></svg></button>
|
||
<button type="button" title="全部下载"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg></button>
|
||
<button type="button" title="加入资产库"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg></button>
|
||
</div>
|
||
</div>
|
||
<div class="dma-batch-grid">
|
||
<div class="dma-cell"><div class="ph">Zoe · #1</div><span class="tag">3:4</span></div>
|
||
<div class="dma-cell"><div class="ph">Zoe · #2</div><span class="tag">3:4</span></div>
|
||
<div class="dma-cell"><div class="ph">Zoe · #3</div><span class="tag">3:4</span></div>
|
||
<div class="dma-cell"><div class="ph">Zoe · #4</div><span class="tag">3:4</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批次 3 -->
|
||
<div class="dma-batch">
|
||
<div class="dma-batch-h">
|
||
<div class="pic">2×</div>
|
||
<div class="meta">
|
||
<div class="nm">Ben × 2 张</div>
|
||
<div class="info">透真补水面膜 <span class="sep">·</span> 3:4 <span class="sep">·</span> 刚刚 <span class="sep">·</span> 生成中</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="取消"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
|
||
</div>
|
||
</div>
|
||
<div class="dma-batch-grid">
|
||
<div class="dma-cell"><div class="ph">生成中…</div></div>
|
||
<div class="dma-cell"><div class="ph">生成中…</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script src="assets/icons.js?v=2026052608"></script>
|
||
<script src="assets/shell.js?v=2026052607"></script>
|
||
<script>
|
||
Shell.render({
|
||
active: 'asset-factory',
|
||
crumbs: [
|
||
{ label: '工作台', href: 'index.html' },
|
||
{ label: '图片生成', href: 'asset-factory.html' },
|
||
{ label: '模特上身图 · 方案 A · Demo' }
|
||
]
|
||
});
|
||
|
||
// 简单交互:点击商品 / 任务切换激活态
|
||
document.querySelectorAll('.dma-prod').forEach(el => {
|
||
el.addEventListener('click', () => {
|
||
document.querySelectorAll('.dma-prod').forEach(x => x.classList.remove('active'));
|
||
el.classList.add('active');
|
||
});
|
||
});
|
||
document.querySelectorAll('.dma-task').forEach(el => {
|
||
el.addEventListener('click', () => {
|
||
document.querySelectorAll('.dma-task').forEach(x => x.classList.remove('active'));
|
||
el.classList.add('active');
|
||
});
|
||
});
|
||
document.querySelectorAll('.dma-model').forEach(el => {
|
||
el.addEventListener('click', () => {
|
||
document.querySelectorAll('.dma-model').forEach(x => x.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
});
|
||
});
|
||
document.querySelectorAll('.dma-chip').forEach(el => {
|
||
el.addEventListener('click', () => {
|
||
// 同组互斥
|
||
el.parentElement.querySelectorAll('.dma-chip').forEach(x => x.classList.remove('active'));
|
||
el.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|