iye
086d92991e
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 7s
657 lines
27 KiB
HTML
657 lines
27 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>方案 A · v2 · 模特上身图 · 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; }
|
||
|
||
/* ===== 两栏:左栏(纯商品空间) + 主区 ===== */
|
||
.dmb {
|
||
flex: 1; min-height: 0;
|
||
display: grid;
|
||
grid-template-columns: 260px 1fr;
|
||
}
|
||
|
||
/* ── 左栏 · 商品空间 ── */
|
||
.dmb-side {
|
||
border-right: 1px solid var(--border-faint);
|
||
background: var(--surface);
|
||
display: flex; flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
.dmb-side-h {
|
||
padding: 14px 16px 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
.dmb-side-h .ti {
|
||
font-size: 11px; font-family: var(--font-mono);
|
||
color: var(--black-alpha-48); letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 10px;
|
||
}
|
||
/* 搜索框 */
|
||
.dmb-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);
|
||
}
|
||
.dmb-search:focus-within { border-color: var(--heat-40); background: var(--surface); }
|
||
.dmb-search svg { width: 13px; height: 13px; color: var(--black-alpha-48); flex-shrink: 0; }
|
||
.dmb-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;
|
||
}
|
||
|
||
/* 商品列表 */
|
||
.dmb-list {
|
||
flex: 1; min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 8px 10px 8px;
|
||
display: flex; flex-direction: column; gap: 6px;
|
||
}
|
||
.dmb-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);
|
||
}
|
||
.dmb-prod:hover { background: var(--background-lighter); }
|
||
.dmb-prod.active { background: var(--heat-12); border-color: var(--heat-20); }
|
||
.dmb-prod .thumb {
|
||
flex-shrink: 0;
|
||
width: 44px; height: 44px;
|
||
background: var(--background-lighter);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
overflow: hidden; position: relative;
|
||
display: grid; place-items: center;
|
||
font-family: var(--font-mono); font-size: 9px;
|
||
color: var(--black-alpha-32);
|
||
background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(0,0,0,.04) 4px 5px);
|
||
}
|
||
.dmb-prod.active .thumb { border-color: var(--heat); }
|
||
.dmb-prod .body { flex: 1; min-width: 0; }
|
||
.dmb-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;
|
||
}
|
||
.dmb-prod.active .nm { color: var(--heat); font-weight: 600; }
|
||
.dmb-prod .sub {
|
||
margin-top: 2px;
|
||
font-family: var(--font-mono); font-size: 10px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
}
|
||
|
||
/* 底部 · 全部商品入口 */
|
||
.dmb-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;
|
||
cursor: pointer;
|
||
display: flex; align-items: center; gap: 6px;
|
||
transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
|
||
}
|
||
.dmb-all:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
|
||
.dmb-all .ct { color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 10.5px; margin-left: auto; }
|
||
.dmb-all svg { width: 12px; height: 12px; }
|
||
|
||
/* ── 主区 ── */
|
||
.dmb-main {
|
||
display: flex; flex-direction: column;
|
||
min-height: 0; overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.dmb-main-h {
|
||
flex-shrink: 0;
|
||
padding: 16px 28px 12px;
|
||
border-bottom: 1px solid var(--border-faint);
|
||
background: var(--surface);
|
||
}
|
||
.dmb-main-h .crumb {
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
color: var(--black-alpha-48); letter-spacing: .04em;
|
||
margin-bottom: 4px;
|
||
}
|
||
.dmb-main-h h2 {
|
||
font-size: 22px; font-weight: 600;
|
||
letter-spacing: -.015em;
|
||
color: var(--accent-black);
|
||
}
|
||
.dmb-main-h .row {
|
||
display: flex; align-items: center; gap: 16px;
|
||
margin-top: 6px;
|
||
}
|
||
.dmb-main-h .stats {
|
||
font-family: var(--font-mono); font-size: 11px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
display: flex; gap: 4px;
|
||
}
|
||
.dmb-main-h .stats b { color: var(--accent-black); font-weight: 600; }
|
||
.dmb-main-h .stats .sep { color: var(--black-alpha-24); }
|
||
.dmb-main-h .spacer { flex: 1; }
|
||
|
||
/* 主区 toolbar (筛选条 · 仿 image-optimize 顶部) */
|
||
.dmb-main-tb { display: flex; gap: 8px; align-items: center; }
|
||
.dmb-main-tb .icbtn {
|
||
width: 30px; height: 30px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-sm);
|
||
color: var(--black-alpha-72);
|
||
cursor: pointer; display: grid; place-items: center;
|
||
}
|
||
.dmb-main-tb .icbtn:hover { border-color: var(--heat-20); color: var(--heat); }
|
||
.dmb-main-tb .icbtn svg { width: 13px; height: 13px; }
|
||
.dmb-main-tb .chip {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
height: 30px; padding: 0 10px;
|
||
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;
|
||
}
|
||
.dmb-main-tb .chip:hover { border-color: var(--heat-20); color: var(--heat); }
|
||
.dmb-main-tb .chip svg { width: 10px; height: 10px; opacity: .6; }
|
||
|
||
/* 主区滚动体 · 任务流 */
|
||
.dmb-stream {
|
||
flex: 1; min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 22px 28px 200px; /* 底部留出参数面板高度 */
|
||
background: var(--background-base);
|
||
}
|
||
.dmb-day-h {
|
||
display: flex; align-items: baseline; gap: 8px;
|
||
margin: 6px 0 10px;
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
color: var(--black-alpha-48); letter-spacing: .06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.dmb-day-h::before {
|
||
content: ''; width: 14px; height: 1px;
|
||
background: var(--black-alpha-24);
|
||
display: inline-block; margin-right: 2px;
|
||
}
|
||
.dmb-day-h .ct {
|
||
color: var(--black-alpha-72); font-weight: 500;
|
||
margin-left: auto;
|
||
text-transform: none; letter-spacing: 0;
|
||
}
|
||
|
||
/* 批次卡 */
|
||
.dmb-batch {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: var(--r-md);
|
||
padding: 14px 16px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.dmb-batch-h {
|
||
display: flex; align-items: center; gap: 10px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.dmb-batch-h .pic {
|
||
flex-shrink: 0;
|
||
width: 30px; height: 30px;
|
||
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;
|
||
}
|
||
.dmb-batch-h .meta { flex: 1; min-width: 0; }
|
||
.dmb-batch-h .nm { font-size: 13.5px; font-weight: 600; color: var(--accent-black); }
|
||
.dmb-batch-h .info {
|
||
margin-top: 2px;
|
||
display: flex; flex-wrap: wrap; gap: 4px;
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
}
|
||
.dmb-batch-h .info .sep { color: var(--black-alpha-24); }
|
||
.dmb-batch-h .ops { display: flex; gap: 4px; }
|
||
.dmb-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;
|
||
transition: border-color var(--t-base), color var(--t-base);
|
||
}
|
||
.dmb-batch-h .ops button:hover { border-color: var(--heat-20); color: var(--heat); }
|
||
.dmb-batch-h .ops button svg { width: 13px; height: 13px; }
|
||
|
||
/* 状态 pill 紧贴标题右侧 */
|
||
.dmb-batch-h .stat-pill {
|
||
margin-left: 8px;
|
||
padding: 2px 7px;
|
||
font-size: 10px;
|
||
}
|
||
.dmb-batch-h .stat-pill .dot { width: 4px; height: 4px; }
|
||
|
||
.dmb-batch-grid {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
||
}
|
||
@media (max-width: 1400px) { .dmb-batch-grid { grid-template-columns: repeat(3, 1fr); } }
|
||
.dmb-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;
|
||
}
|
||
.dmb-cell .ph {
|
||
position: absolute; inset: 0;
|
||
display: grid; place-items: center;
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
color: var(--black-alpha-32);
|
||
background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.03) 6px 7px);
|
||
}
|
||
.dmb-cell.gen .ph { animation: dmb-pulse 1.4s ease-in-out infinite; }
|
||
@keyframes dmb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
|
||
.dmb-cell.err { border-color: var(--accent-crimson, #c43d3d); }
|
||
.dmb-cell.err .ph { color: var(--accent-crimson, #c43d3d); background: rgba(196,61,61,.05); }
|
||
.dmb-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);
|
||
}
|
||
|
||
/* ── 底部 fixed 参数面板 ── */
|
||
.dmb-param-wrap {
|
||
position: absolute; left: 0; right: 0; bottom: 0;
|
||
padding: 14px 28px 22px;
|
||
background: linear-gradient(to bottom, transparent 0, var(--background-base) 24px);
|
||
z-index: 5;
|
||
}
|
||
.dmb-param {
|
||
max-width: 1180px; margin: 0 auto;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-faint);
|
||
border-radius: 14px;
|
||
padding: 10px 14px;
|
||
display: flex; align-items: center; gap: 10px;
|
||
box-shadow: 0 6px 24px rgba(0,0,0,.06);
|
||
}
|
||
.dmb-param .label-mono {
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
color: var(--black-alpha-48); letter-spacing: .04em;
|
||
flex-shrink: 0;
|
||
}
|
||
.dmb-param .pchip {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
height: 30px; padding: 0 12px;
|
||
background: var(--background-lighter);
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-pill);
|
||
font-size: 12px; color: var(--black-alpha-72);
|
||
cursor: pointer; font-family: inherit;
|
||
transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
|
||
}
|
||
.dmb-param .pchip:hover { background: var(--surface); border-color: var(--border-faint); }
|
||
.dmb-param .pchip.active { background: var(--heat-12); color: var(--heat); }
|
||
.dmb-param .pchip svg { width: 10px; height: 10px; opacity: .6; }
|
||
.dmb-param .pchip .lbl-mono {
|
||
font-family: var(--font-mono); font-size: 10px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
}
|
||
.dmb-param .pchip.active .lbl-mono { color: var(--heat); }
|
||
.dmb-param .spacer { flex: 1; }
|
||
.dmb-param .meta-right {
|
||
font-family: var(--font-mono); font-size: 10.5px;
|
||
color: var(--black-alpha-48); letter-spacing: .02em;
|
||
margin-right: 6px;
|
||
text-align: right;
|
||
}
|
||
.dmb-param .meta-right .v { color: var(--accent-black); font-weight: 600; }
|
||
.dmb-param .gen-btn {
|
||
height: 38px; padding: 0 20px;
|
||
background: var(--heat); color: #fff;
|
||
border: 0; border-radius: var(--r-md);
|
||
font-size: 13.5px; font-weight: 600; font-family: inherit;
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
box-shadow: var(--shadow-cta);
|
||
}
|
||
.dmb-param .gen-btn svg { width: 14px; height: 14px; }
|
||
|
||
/* 顶部 demo 提示条 */
|
||
.dmb-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;
|
||
}
|
||
.dmb-banner b { color: var(--heat); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="page">
|
||
|
||
<div class="dmb-banner">// DEMO v2 · 方案 A · <b>商品空间(A+B) + 任务流主区</b>。左栏只保留商品空间(搜索+最近6条+全部入口),任务列表搬到主区,筛选放主区顶部 toolbar,参数面板底部 fixed 化(类 image-optimize)。</div>
|
||
|
||
<div class="dmb">
|
||
|
||
<!-- ===== 左栏 · 商品空间 ===== -->
|
||
<aside class="dmb-side">
|
||
<div class="dmb-side-h">
|
||
<div class="ti">商品空间</div>
|
||
<div class="dmb-search">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<input type="text" placeholder="搜索商品 / 分类">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dmb-list">
|
||
<div class="dmb-prod active">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">透真补水面膜</div>
|
||
<div class="sub">美妆个护 · 6 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmb-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">透真清透防晒霜</div>
|
||
<div class="sub">美妆个护 · 3 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmb-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">南卡 Lite Pro 蓝牙耳机</div>
|
||
<div class="sub">数码 3C · 2 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmb-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">滋啦速食牛肉面</div>
|
||
<div class="sub">食品饮料 · 1 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmb-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">三顿半同款冻干咖啡</div>
|
||
<div class="sub">食品饮料 · 1 批</div>
|
||
</div>
|
||
</div>
|
||
<div class="dmb-prod">
|
||
<div class="thumb">主图</div>
|
||
<div class="body">
|
||
<div class="nm">小熊 4L 可视空气炸锅</div>
|
||
<div class="sub">家居家电 · 0 批</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="dmb-all" type="button">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</button>
|
||
</aside>
|
||
|
||
<!-- ===== 主区 ===== -->
|
||
<section class="dmb-main">
|
||
|
||
<!-- 顶部 标题 + stats + toolbar -->
|
||
<div class="dmb-main-h">
|
||
<div class="crumb">// 商品空间 · 模特上身图</div>
|
||
<h2>透真补水面膜</h2>
|
||
<div class="row">
|
||
<div class="stats">
|
||
<span>美妆个护</span><span class="sep">·</span>
|
||
<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 class="spacer"></div>
|
||
<div class="dmb-main-tb">
|
||
<button class="icbtn" type="button" title="搜索批次">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
</button>
|
||
<button class="chip" type="button">时间 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
|
||
<button class="chip" type="button">状态 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
|
||
<button class="chip" type="button">模特 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 任务流 -->
|
||
<div class="dmb-stream">
|
||
|
||
<div class="dmb-day-h">
|
||
<span>今天</span>
|
||
<span class="ct">3 批 · 10 张</span>
|
||
</div>
|
||
|
||
<!-- 批次 1 -->
|
||
<div class="dmb-batch">
|
||
<div class="dmb-batch-h">
|
||
<div class="pic">4×</div>
|
||
<div class="meta">
|
||
<div class="nm">Ava × 4 张 <span class="pill ok stat-pill"><span class="dot"></span>已完成</span></div>
|
||
<div class="info">
|
||
<span>3:4</span><span class="sep">·</span>
|
||
<span>3 分钟前</span><span class="sep">·</span>
|
||
<span>¥1.20</span>
|
||
</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="全部重跑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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.7" 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.7" 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="dmb-batch-grid">
|
||
<div class="dmb-cell"><div class="ph">Ava · #1</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Ava · #2</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Ava · #3</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Ava · #4</div><span class="tag">3:4</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批次 2 -->
|
||
<div class="dmb-batch">
|
||
<div class="dmb-batch-h">
|
||
<div class="pic">4×</div>
|
||
<div class="meta">
|
||
<div class="nm">Zoe × 4 张 <span class="pill ok stat-pill"><span class="dot"></span>已完成</span></div>
|
||
<div class="info">
|
||
<span>3:4</span><span class="sep">·</span>
|
||
<span>12 分钟前</span><span class="sep">·</span>
|
||
<span>¥1.20</span>
|
||
</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="全部重跑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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.7" 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.7" 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="dmb-batch-grid">
|
||
<div class="dmb-cell"><div class="ph">Zoe · #1</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Zoe · #2</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Zoe · #3</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Zoe · #4</div><span class="tag">3:4</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批次 3 · 生成中 -->
|
||
<div class="dmb-batch">
|
||
<div class="dmb-batch-h">
|
||
<div class="pic">2×</div>
|
||
<div class="meta">
|
||
<div class="nm">Ben × 2 张 <span class="pill info stat-pill"><span class="dot"></span>生成中</span></div>
|
||
<div class="info">
|
||
<span>3:4</span><span class="sep">·</span>
|
||
<span>刚刚</span><span class="sep">·</span>
|
||
<span>¥0.60</span>
|
||
</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="取消"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M6 18L18 6"/></svg></button>
|
||
</div>
|
||
</div>
|
||
<div class="dmb-batch-grid">
|
||
<div class="dmb-cell gen"><div class="ph">生成中…</div></div>
|
||
<div class="dmb-cell gen"><div class="ph">生成中…</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 昨天 -->
|
||
<div class="dmb-day-h">
|
||
<span>昨天</span>
|
||
<span class="ct">2 批 · 8 张</span>
|
||
</div>
|
||
|
||
<div class="dmb-batch">
|
||
<div class="dmb-batch-h">
|
||
<div class="pic">4×</div>
|
||
<div class="meta">
|
||
<div class="nm">Lin × 4 张 <span class="pill ok stat-pill"><span class="dot"></span>已完成</span></div>
|
||
<div class="info">
|
||
<span>3:4</span><span class="sep">·</span>
|
||
<span>昨天 18:24</span><span class="sep">·</span>
|
||
<span>¥1.20</span>
|
||
</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="全部重跑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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.7" 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.7" 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="dmb-batch-grid">
|
||
<div class="dmb-cell"><div class="ph">Lin · #1</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Lin · #2</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Lin · #3</div><span class="tag">3:4</span></div>
|
||
<div class="dmb-cell"><div class="ph">Lin · #4</div><span class="tag">3:4</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 更早 -->
|
||
<div class="dmb-day-h">
|
||
<span>更早</span>
|
||
<span class="ct">1 批 · 2 张 · 含 1 失败</span>
|
||
</div>
|
||
|
||
<div class="dmb-batch">
|
||
<div class="dmb-batch-h">
|
||
<div class="pic">2×</div>
|
||
<div class="meta">
|
||
<div class="nm">Ava × 2 张 <span class="pill err stat-pill"><span class="dot"></span>失败</span></div>
|
||
<div class="info">
|
||
<span>3:4</span><span class="sep">·</span>
|
||
<span>2 天前</span>
|
||
</div>
|
||
</div>
|
||
<div class="ops">
|
||
<button type="button" title="全部重跑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg></button>
|
||
</div>
|
||
</div>
|
||
<div class="dmb-batch-grid">
|
||
<div class="dmb-cell err"><div class="ph">失败 · 点重跑</div></div>
|
||
<div class="dmb-cell err"><div class="ph">失败 · 点重跑</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 底部 fixed 参数面板 -->
|
||
<div class="dmb-param-wrap">
|
||
<div class="dmb-param">
|
||
<button class="pchip active" type="button">
|
||
<span class="lbl-mono">模特</span>
|
||
<span>Ava</span>
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
|
||
</button>
|
||
<button class="pchip" type="button">
|
||
<span class="lbl-mono">张数</span>
|
||
<span>4</span>
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
|
||
</button>
|
||
<button class="pchip" type="button">
|
||
<span class="lbl-mono">比例</span>
|
||
<span>3:4</span>
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>
|
||
</button>
|
||
<button class="pchip" type="button">
|
||
<span class="lbl-mono">补充提示词</span>
|
||
<span style="color:var(--black-alpha-48)">+ 添加</span>
|
||
</button>
|
||
<span class="spacer"></span>
|
||
<span class="meta-right">预估 <span class="v">¥1.20</span> · 余额 <span class="v">¥327.40</span></span>
|
||
<button class="gen-btn" type="button">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
|
||
|
||
</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 · v2' }
|
||
]
|
||
});
|
||
|
||
// 商品 / chip 切换
|
||
document.querySelectorAll('.dmb-prod').forEach(el => {
|
||
el.addEventListener('click', () => {
|
||
document.querySelectorAll('.dmb-prod').forEach(x => x.classList.remove('active'));
|
||
el.classList.add('active');
|
||
});
|
||
});
|
||
document.querySelectorAll('.dmb-param .pchip').forEach(el => {
|
||
el.addEventListener('click', () => {
|
||
// demo:只切自己 active(不互斥,每个 chip 都可独立切下拉)
|
||
el.classList.toggle('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|