346 lines
28 KiB
HTML
346 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>自动合成印花服饰效果图工具 — 完整版</title>
|
||
<style>
|
||
:root{
|
||
--win:#f0f0f0;--panel:#fff;--panel-2:#f7f7f7;--line:#d6d6d6;--line-2:#e3e3e3;
|
||
--canvas:#9a9da3;--txt:#202020;--txt-2:#555;--txt-3:#888;
|
||
--accent:#0067c0;--accent-2:#0078d4;--accent-soft:#cfe4f7;--accent-bg:#e8f1fb;
|
||
--green:#107c10;--amber:#b87a00;--red:#c42b1c;--r:3px;
|
||
--font:"Segoe UI","Microsoft YaHei","微软雅黑",sans-serif;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:var(--font);color:var(--txt);font-size:12px;background:#cfcfcf;display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh}
|
||
.app{width:1920px;height:1080px;background:var(--win);display:grid;grid-template-rows:34px 40px 1fr 188px 26px;border:1px solid #b5b5b5;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35);transform-origin:center}
|
||
@media(max-width:2000px){.app{transform:scale(.92)}}
|
||
@media(max-width:1800px){.app{transform:scale(.78)}}
|
||
@media(max-width:1500px){.app{transform:scale(.62)}}
|
||
@media(max-width:1200px){.app{transform:scale(.48)}}
|
||
@media(max-width:950px){.app{transform:scale(.34)}}
|
||
|
||
.title{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 0 0 12px;height:34px}
|
||
.title .ic{width:18px;height:18px;border-radius:3px;background:linear-gradient(135deg,#0078d4,#005a9e);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;margin-right:8px}
|
||
.title .t{font-size:12px;color:var(--txt)}
|
||
.title .ver{font-size:11px;color:var(--txt-3);margin-left:8px}
|
||
.title .gear{margin-left:auto;display:flex;align-items:center;gap:6px;height:100%;padding:0 12px;color:var(--txt-2);border-left:1px solid var(--line-2)}
|
||
.title .gear:hover{background:#f0f0f0}
|
||
.title .win-btns{display:flex;height:34px}
|
||
.title .wb{width:46px;display:grid;place-items:center;color:#444;font-size:11px}
|
||
.title .wb.close:hover{background:#c42b1c;color:#fff}.title .wb:hover{background:#e6e6e6}
|
||
|
||
.tabs{background:var(--win);border-bottom:1px solid var(--line);display:flex;align-items:flex-end;padding:0 12px;gap:4px}
|
||
.tab{display:flex;align-items:center;gap:8px;height:32px;padding:0 18px;background:#e4e4e4;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;color:var(--txt-2);position:relative;top:1px}
|
||
.tab .num{width:18px;height:18px;border-radius:50%;background:#bcbcbc;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
|
||
.tab .nm{font-size:13px}
|
||
.tab.on{background:#fff;color:var(--txt);border-color:var(--line);font-weight:600}
|
||
.tab.on .num{background:var(--accent)}
|
||
.tab:not(.on):hover{background:#ececec}
|
||
.tab .arw{color:var(--txt-3);margin:0 -2px 0 6px;font-size:12px}
|
||
|
||
.toolbar{background:var(--win);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 8px;gap:2px}
|
||
.menu{display:flex;gap:2px;margin-right:10px}
|
||
.menu .m{padding:4px 9px;border-radius:var(--r)}.menu .m:hover{background:#e5e5e5}
|
||
.tsep{width:1px;height:24px;background:var(--line);margin:0 6px}
|
||
.tb{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
|
||
.tb:hover{background:#f3f8fd;border-color:var(--accent-soft)}.tb .g{font-size:13px}
|
||
.spacer{flex:1}
|
||
|
||
.body{display:grid;grid-template-columns:374px 1fr 318px;min-height:0}
|
||
|
||
.left{background:var(--panel);border-right:1px solid var(--line);display:grid;grid-template-rows:1fr 1fr;min-height:0}
|
||
.mat{display:flex;flex-direction:column;min-height:0}.mat+.mat{border-top:1px solid var(--line)}
|
||
.open-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:32px;margin:8px 12px 0;background:var(--accent);color:#fff;border-radius:var(--r);font-size:12px;font-weight:600;border:1px solid var(--accent)}
|
||
.open-btn:hover{background:var(--accent-2)}.open-btn .g{font-size:14px}
|
||
.mat-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 6px;background:var(--panel-2);border-bottom:1px solid var(--line-2)}
|
||
.mat-h .t{font-weight:600}.mat-h .c{color:var(--txt-3);font-size:11px}
|
||
.mat-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;border-bottom:1px solid var(--line-2);font-size:11px;color:var(--txt-2)}
|
||
.ckall{display:flex;align-items:center;gap:5px}
|
||
.cbox{width:13px;height:13px;border:1px solid #999;border-radius:2px;background:#fff;display:inline-block;flex:none}
|
||
.cbox.on{background:var(--accent);border-color:var(--accent)}
|
||
.cbox.on::after{content:"✓";color:#fff;font-size:9px;line-height:12px;display:block;text-align:center}
|
||
.cbox.dash{background:var(--accent);border-color:var(--accent)}
|
||
.cbox.dash::after{content:"–";color:#fff;font-size:11px;line-height:11px;display:block;text-align:center}
|
||
.mat-bar .srt{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--txt-3)}
|
||
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px;align-content:start}
|
||
.th{position:relative;aspect-ratio:1/1.12;border:1px solid var(--line);border-radius:var(--r);background:#fafafa;overflow:hidden}
|
||
.th .im{position:absolute;inset:0}
|
||
.th .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.93);border-top:1px solid var(--line-2);font-size:10px;color:#333;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.th .ck{position:absolute;top:4px;left:4px;width:14px;height:14px;border:1px solid #aaa;border-radius:2px;background:rgba(255,255,255,.92)}
|
||
.th .fld{position:absolute;top:4px;right:4px;background:rgba(40,40,40,.72);color:#fff;font-size:9px;line-height:1;padding:2px 5px;border-radius:8px;max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.th.sel{border:2px solid var(--accent);background:var(--accent-bg)}
|
||
.th.sel .ck,.th.ckd .ck{background:var(--accent);border-color:var(--accent)}
|
||
.th.sel .ck::after,.th.ckd .ck::after{content:"✓";color:#fff;font-size:9px;line-height:12px;display:block;text-align:center}
|
||
|
||
.tee-1{background:radial-gradient(circle at 50% 36%,#fff 0 34%,#ededeb 62%,#dcdcd8 100%)}
|
||
.tee-2{background:radial-gradient(circle at 50% 36%,#3a3f47 0 34%,#2c3037 62%,#202329 100%)}
|
||
.tee-3{background:radial-gradient(circle at 50% 36%,#2f567a 0 34%,#274764 62%,#1d3950 100%)}
|
||
.tee-4{background:radial-gradient(circle at 50% 36%,#883535 0 34%,#6e2a2a 62%,#541f1f 100%)}
|
||
.tee-5{background:radial-gradient(circle at 50% 36%,#46784a 0 34%,#3a623d 62%,#2c4b2f 100%)}
|
||
.tee-6{background:radial-gradient(circle at 50% 36%,#cdb56e 0 34%,#bba258 62%,#a18a45 100%)}
|
||
.pr-1{background:conic-gradient(from 20deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#ff6b6b)}
|
||
.pr-2{background:linear-gradient(135deg,#222 0 50%,#f1f1f1 50%)}
|
||
.pr-3{background:repeating-linear-gradient(45deg,#333 0 7px,#eee 7px 14px)}
|
||
.pr-4{background:radial-gradient(circle at 50% 50%,#ff7e5f,#feb47b)}
|
||
.pr-5{background:linear-gradient(120deg,#5f27cd,#48dbfb)}
|
||
.pr-6{background:radial-gradient(circle at 30% 30%,#10ac84,#222f3e)}
|
||
|
||
.center{background:var(--canvas);display:grid;grid-template-rows:34px 1fr;min-height:0}
|
||
.cbar{display:flex;align-items:center;gap:14px;padding:0 12px;background:#e8e8e8;border-bottom:1px solid var(--line)}
|
||
.cbar .f{color:#444}.cbar .f b{color:#000}
|
||
.vtool{display:flex;gap:2px;margin-left:6px}
|
||
.vtool .v{width:26px;height:24px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--r);color:#444;font-size:13px}
|
||
.vtool .v.on{background:#fff;border-color:var(--line);color:var(--accent)}
|
||
.zoom{margin-left:auto;display:flex;align-items:center;gap:2px}
|
||
.zoom .zb{width:24px;height:24px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:13px}
|
||
.zoom .zv{min-width:46px;text-align:center;color:#444}
|
||
.stage{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(45deg,#90939a 25%,transparent 25%) 0 0/20px 20px,linear-gradient(-45deg,#90939a 25%,transparent 25%) 0 10px/20px 20px,linear-gradient(45deg,transparent 75%,#90939a 75%) 10px -10px/20px 20px,linear-gradient(-45deg,transparent 75%,#90939a 75%) -10px 0/20px 20px,var(--canvas)}
|
||
.garment{position:relative;width:470px;height:574px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.32))}
|
||
.shirt{position:absolute;inset:0;background:#fcfcfa;clip-path:polygon(32% 0%,42% 6%,58% 6%,68% 0%,88% 12%,100% 30%,86% 42%,78% 36%,78% 100%,22% 100%,22% 36%,14% 42%,0% 30%,12% 12%);box-shadow:inset 0 0 50px rgba(0,0,0,.05)}
|
||
.collar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:118px;height:44px;border-radius:0 0 59px 59px;background:var(--canvas)}
|
||
.print{position:absolute;top:170px;left:50%;transform:translateX(-50%) rotate(-8deg);width:174px;height:174px;border-radius:6px;background:conic-gradient(from 20deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#ff6b6b);display:grid;place-items:center}
|
||
.print::after{content:"";width:62%;height:62%;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 6px rgba(255,255,255,.32)}
|
||
.selbox{position:absolute;top:158px;left:50%;transform:translateX(-50%) rotate(-8deg);width:196px;height:196px;border:1.5px solid var(--accent)}
|
||
.hd{position:absolute;width:10px;height:10px;background:#fff;border:1.5px solid var(--accent)}
|
||
.tl{top:-5px;left:-5px}.tr{top:-5px;right:-5px}.bl{bottom:-5px;left:-5px}.br{bottom:-5px;right:-5px}
|
||
.tt{top:-5px;left:50%;transform:translateX(-50%)}.bb{bottom:-5px;left:50%;transform:translateX(-50%)}
|
||
.ll{left:-5px;top:50%;transform:translateY(-50%)}.rr{right:-5px;top:50%;transform:translateY(-50%)}
|
||
.stem{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:1.5px;height:26px;background:var(--accent)}
|
||
.knob{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);display:grid;place-items:center;color:var(--accent);font-size:9px}
|
||
.hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:14px;background:rgba(255,255,255,.94);border:1px solid var(--line);padding:5px 12px;border-radius:4px;font-size:11px;color:#444}
|
||
.hint span{display:flex;align-items:center;gap:5px}.kbd{background:#eee;border:1px solid var(--line);border-radius:2px;padding:0 5px;font-size:10px}
|
||
|
||
.right{background:var(--win);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
|
||
.rscroll{flex:1;overflow:auto;padding:12px}
|
||
.grp{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;position:relative;padding:14px 12px 12px}
|
||
.grp-t{position:absolute;top:-8px;left:9px;background:#fff;padding:0 6px;font-size:11px;font-weight:600;color:var(--txt-2)}
|
||
.row{display:flex;gap:8px;margin-bottom:8px}.row:last-child{margin-bottom:0}.fl{flex:1}
|
||
.fl label{display:block;color:var(--txt-2);margin-bottom:4px;font-size:11px}
|
||
.inp{display:flex;align-items:center;height:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:0 7px}
|
||
.inp input{border:none;outline:none;width:100%;font:inherit;color:var(--txt);background:none}
|
||
.inp.spin{padding-right:0}.inp .u{color:var(--txt-3);font-size:11px}
|
||
.inp .stp{display:flex;flex-direction:column;border-left:1px solid var(--line-2);height:100%}
|
||
.inp .stp i{flex:1;width:18px;display:grid;place-items:center;font-size:8px;color:#666;font-style:normal}
|
||
.inp.focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
|
||
.sel{display:flex;align-items:center;justify-content:space-between;height:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:0 8px}
|
||
.sel .car{color:#666;font-size:10px}
|
||
.ckline{display:flex;align-items:center;gap:6px;color:var(--txt-2);margin:8px 0 0}
|
||
.rotbtns{display:flex;gap:8px}
|
||
.ibtn{flex:1;height:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:flex;align-items:center;justify-content:center;gap:5px}.ibtn:hover{background:#f3f8fd}
|
||
.path{display:flex;align-items:center;height:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
|
||
.path .p{flex:1;padding:0 7px;color:#444;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.path .br{width:30px;height:100%;border-left:1px solid var(--line);display:grid;place-items:center;background:var(--win)}
|
||
.tipbox{display:flex;gap:6px;align-items:flex-start;background:#fff8e6;border:1px solid #f0dca0;border-radius:var(--r);padding:7px 9px;font-size:11px;color:#7a5b00;margin-top:2px}
|
||
.actions{padding:10px 12px;border-top:1px solid var(--line);background:var(--win)}
|
||
.btn{width:100%;height:34px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:600;border:1px solid var(--line)}
|
||
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}.btn.pri:hover{background:var(--accent-2)}
|
||
.btn.sec{background:#fff}.btn.sec:hover{background:#f3f8fd}
|
||
.brow{display:flex;gap:8px;margin-top:8px}.brow .btn{margin-top:0}
|
||
|
||
/* ---- BOTTOM QUEUE PANEL ---- */
|
||
.queue{background:#fff;border-top:1px solid var(--line);display:grid;grid-template-rows:34px 1fr;min-height:0}
|
||
.q-head{display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--panel-2);border-bottom:1px solid var(--line-2)}
|
||
.q-head .qt{font-weight:600}
|
||
.q-head .modes{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-left:6px}
|
||
.q-head .mode{padding:5px 11px;color:var(--txt-2);border-right:1px solid var(--line);background:#fff}
|
||
.q-head .mode:last-child{border-right:none}
|
||
.q-head .mode.on{background:var(--accent);color:#fff}
|
||
.q-head .qmeta{color:var(--txt-3);font-size:11px;margin-left:4px}
|
||
.q-head .qbtns{margin-left:auto;display:flex;gap:8px}
|
||
.q-head .qb{height:26px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:flex;align-items:center;gap:6px}
|
||
.q-head .qb.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
|
||
.q-head .qb.collapse{width:26px;padding:0;justify-content:center;color:var(--txt-3)}
|
||
.q-body{overflow:auto;padding:0}
|
||
table.qtbl{width:100%;border-collapse:collapse;font-size:11px}
|
||
table.qtbl th{position:sticky;top:0;background:#f4f4f4;border-bottom:1px solid var(--line);text-align:left;font-weight:600;color:var(--txt-2);padding:6px 10px;white-space:nowrap}
|
||
table.qtbl td{border-bottom:1px solid var(--line-2);padding:5px 10px;color:var(--txt);white-space:nowrap}
|
||
table.qtbl tr.sel td{background:var(--accent-bg)}
|
||
table.qtbl tr:hover td{background:#f7faff}
|
||
.qidx{color:var(--txt-3);width:34px}
|
||
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;vertical-align:-3px;margin-right:6px;border:1px solid rgba(0,0,0,.15)}
|
||
.pill{display:inline-block;padding:1px 8px;border-radius:9px;font-size:10px;font-weight:600}
|
||
.pill.tpl{background:#eef3f9;color:#2b5b8c}
|
||
.pill.adj{background:#fff3da;color:#8a5a00}
|
||
.pill.wait{background:#eee;color:#666}
|
||
.pill.run{background:#e0eefc;color:#15538f}
|
||
.pill.done{background:#e3f3e3;color:#2c7a2c}
|
||
.pill.err{background:#fbe4e2;color:#a3271c}
|
||
.qprog{display:inline-block;width:90px;height:5px;border-radius:3px;background:#eaeaea;overflow:hidden;vertical-align:middle;margin-right:8px}
|
||
.qprog i{display:block;height:100%;background:var(--accent)}
|
||
|
||
.status{background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:14px;color:var(--txt-2);font-size:11px}
|
||
.status .s{display:flex;align-items:center;gap:5px}.status b{color:var(--txt);font-weight:600}
|
||
.dot{width:7px;height:7px;border-radius:50%}.g{background:var(--green)}.a{background:var(--amber)}.r{background:var(--red)}
|
||
.status .sp{flex:1}.status .log{color:var(--green)}.vsep{width:1px;height:14px;background:var(--line-2)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
|
||
<div class="title">
|
||
<div class="ic">印</div><div class="t">自动合成印花服饰效果图工具</div><div class="ver">v1.0.0</div>
|
||
<div class="gear"><span style="font-size:14px">⚙️</span>设置</div>
|
||
<div class="win-btns"><div class="wb">—</div><div class="wb">▢</div><div class="wb close">✕</div></div>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<div class="tab on"><span class="num">1</span><span class="nm">添加印花</span></div>
|
||
<div class="tab"><span class="num">2</span><span class="nm">AI 穿搭</span></div>
|
||
<div class="tab"><span class="num">3</span><span class="nm">导出上架</span></div>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<!-- LEFT -->
|
||
<div class="left">
|
||
<div class="mat">
|
||
<div class="open-btn"><span class="g">📁</span>打开衣服文件夹</div>
|
||
<div class="mat-h"><span class="t">衣服图片</span><span class="c">含子文件夹 · 共 12</span></div>
|
||
<div class="mat-bar">
|
||
<span class="ckall"><span class="cbox dash"></span>全选</span>
|
||
<span class="vsep"></span><span>已选 3</span>
|
||
<span class="srt">排序：文件夹+名称 ▾</span>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="th sel"><div class="im tee-1"></div><div class="ck"></div><div class="fld">夏季</div><div class="cap">夏季/白T_圆领.png</div></div>
|
||
<div class="th ckd"><div class="im tee-2"></div><div class="ck"></div><div class="fld">夏季</div><div class="cap">夏季/黑T_短袖.png</div></div>
|
||
<div class="th ckd"><div class="im tee-3"></div><div class="ck"></div><div class="fld">夏季</div><div class="cap">夏季/藏青_长袖.png</div></div>
|
||
<div class="th"><div class="im tee-4"></div><div class="ck"></div><div class="fld">秋季</div><div class="cap">秋季/酒红_卫衣.png</div></div>
|
||
<div class="th"><div class="im tee-5"></div><div class="ck"></div><div class="fld">秋季</div><div class="cap">秋季/军绿_圆领.png</div></div>
|
||
<div class="th"><div class="im tee-6"></div><div class="ck"></div><div class="fld">秋季</div><div class="cap">秋季/卡其_POLO.png</div></div>
|
||
<div class="th"><div class="im tee-2"></div><div class="ck"></div><div class="fld">基础</div><div class="cap">基础/黑T_宽松.png</div></div>
|
||
<div class="th"><div class="im tee-1"></div><div class="ck"></div><div class="fld">基础</div><div class="cap">基础/米白_打底.png</div></div>
|
||
<div class="th"><div class="im tee-3"></div><div class="ck"></div><div class="fld">基础</div><div class="cap">基础/蓝灰_V领.png</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="mat">
|
||
<div class="open-btn"><span class="g">🎨</span>打开印花文件夹</div>
|
||
<div class="mat-h"><span class="t">印花图片</span><span class="c">含子文件夹 · 共 8</span></div>
|
||
<div class="mat-bar">
|
||
<span class="ckall"><span class="cbox on"></span>全选</span>
|
||
<span class="vsep"></span><span>已选 8</span>
|
||
<span class="srt">排序：文件夹+名称 ▾</span>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="th sel"><div class="im pr-1"></div><div class="ck"></div><div class="fld">花卉</div><div class="cap">花卉/花卉_001.png</div></div>
|
||
<div class="th ckd"><div class="im pr-2"></div><div class="ck"></div><div class="fld">几何</div><div class="cap">几何/几何_黑白.png</div></div>
|
||
<div class="th ckd"><div class="im pr-3"></div><div class="ck"></div><div class="fld">几何</div><div class="cap">几何/条纹_斜.png</div></div>
|
||
<div class="th ckd"><div class="im pr-4"></div><div class="ck"></div><div class="fld">风景</div><div class="cap">风景/日落_暖.png</div></div>
|
||
<div class="th ckd"><div class="im pr-5"></div><div class="ck"></div><div class="fld">渐变</div><div class="cap">渐变/渐变_紫.png</div></div>
|
||
<div class="th ckd"><div class="im pr-6"></div><div class="ck"></div><div class="fld">LOGO</div><div class="cap">LOGO/地球_logo.png</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CENTER -->
|
||
<div class="center">
|
||
<div class="cbar">
|
||
<div class="f">底图：<b>白T_圆领.png</b></div>
|
||
<div class="f">印花：<b>花卉_001.png</b></div>
|
||
<div class="vtool"><div class="v on">✥</div><div class="v">⤢</div><div class="v">↻</div></div>
|
||
<div class="zoom"><div class="zb">−</div><div class="zv">82%</div><div class="zb">+</div></div>
|
||
</div>
|
||
<div class="stage">
|
||
<div class="garment">
|
||
<div class="shirt"></div><div class="collar"></div>
|
||
<div class="print"></div>
|
||
<div class="selbox">
|
||
<span class="stem"></span><span class="knob">↻</span>
|
||
<span class="hd tl"></span><span class="hd tr"></span><span class="hd bl"></span><span class="hd br"></span>
|
||
<span class="hd tt"></span><span class="hd bb"></span><span class="hd ll"></span><span class="hd rr"></span>
|
||
</div>
|
||
</div>
|
||
<div class="hint"><span>🖱️ 拖动移动</span><span>四角 缩放</span><span>顶部 旋转</span><span><span class="kbd">Shift</span> 锁比例</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT -->
|
||
<div class="right">
|
||
<div class="rscroll">
|
||
<div class="grp"><div class="grp-t">模板</div><div class="sel"><span>标准居中印花 · T恤</span><span class="car">▼</span></div>
|
||
<div class="brow" style="margin-top:10px">
|
||
<div class="btn sec" style="height:30px">💾 保存</div>
|
||
<div class="btn sec" style="height:30px">📋 另存为</div>
|
||
</div>
|
||
</div>
|
||
<div class="grp"><div class="grp-t">位置</div>
|
||
<div class="row">
|
||
<div class="fl"><label>X 坐标</label><div class="inp spin focus"><input value="175"><span class="stp"><i>▲</i><i>▼</i></span></div></div>
|
||
<div class="fl"><label>Y 坐标</label><div class="inp spin"><input value="200"><span class="stp"><i>▲</i><i>▼</i></span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="grp"><div class="grp-t">尺寸</div>
|
||
<div class="row">
|
||
<div class="fl"><label>宽度</label><div class="inp spin"><input value="200"><span class="stp"><i>▲</i><i>▼</i></span></div></div>
|
||
<div class="fl"><label>高度</label><div class="inp spin"><input value="200"><span class="stp"><i>▲</i><i>▼</i></span></div></div>
|
||
</div>
|
||
<div class="ckline"><span class="cbox on"></span>锁定宽高比例（1:1）</div>
|
||
</div>
|
||
<div class="grp"><div class="grp-t">旋转</div>
|
||
<div class="row"><div class="fl"><label>角度</label><div class="inp spin"><input value="-8"><span class="u" style="padding-right:4px">°</span><span class="stp"><i>▲</i><i>▼</i></span></div></div></div>
|
||
<div class="rotbtns"><div class="ibtn">↺ 左旋 90°</div><div class="ibtn">↻ 右旋 90°</div></div>
|
||
</div>
|
||
<div class="grp"><div class="grp-t">输出设置</div>
|
||
<div class="fl" style="margin-bottom:8px"><label>输出目录</label><div class="path"><span class="p">D:\\印花成品\\2026春\\</span><span class="br">…</span></div></div>
|
||
<div class="row" style="margin-bottom:0">
|
||
<div class="fl"><label>格式</label><div class="sel"><span>PNG</span><span class="car">▼</span></div></div>
|
||
<div class="fl"><label>质量</label><div class="sel"><span>高 (100)</span><span class="car">▼</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="tipbox"><span>ⓘ</span><span>当前调整将仅作用于队列中选中的「黑T_短袖 × 花卉_001」，并标记为「已微调」，重跑模板时不被覆盖。</span></div>
|
||
</div>
|
||
<div class="actions">
|
||
<div class="btn pri">⬇ 导出当前单张</div>
|
||
<div class="brow"><div class="btn sec">💾 应用为模板</div><div class="btn sec">↺ 重置为模板</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTTOM QUEUE -->
|
||
<div class="queue">
|
||
<div class="q-head">
|
||
<span class="qt">合成队列</span>
|
||
<div class="modes">
|
||
<span class="mode on">多衣服 × 单印花</span>
|
||
<span class="mode">单衣服 × 多印花</span>
|
||
<span class="mode">全组合（矩阵）</span>
|
||
</div>
|
||
<span class="qmeta">共 60 项 · 完成 12 · 进行 1 · 失败 1 · 待导出 46</span>
|
||
<div class="qbtns">
|
||
<div class="qb">↺ 重置全部</div>
|
||
<div class="qb">⬇ 导出选中</div>
|
||
<div class="qb pri">⬇⬇ 开始批量导出</div>
|
||
<div class="qb collapse">▾</div>
|
||
</div>
|
||
</div>
|
||
<div class="q-body">
|
||
<table class="qtbl">
|
||
<thead><tr><th class="qidx">#</th><th>衣服</th><th>印花</th><th>来源文件夹</th><th>参数</th><th>状态</th><th>进度 / 输出文件</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="qidx">1</td><td><span class="swatch" style="background:#f0f0ec"></span>白T_圆领</td><td><span class="swatch pr-1" style="display:inline-block"></span>花卉_001</td><td>夏季 / 花卉</td><td><span class="pill tpl">模板</span></td><td><span class="pill done">已完成</span></td><td>白T_圆领_花卉_001.png</td></tr>
|
||
<tr class="sel"><td class="qidx">2</td><td><span class="swatch" style="background:#2c3037"></span>黑T_短袖</td><td><span class="swatch pr-1" style="display:inline-block"></span>花卉_001</td><td>夏季 / 花卉</td><td><span class="pill adj">已微调</span></td><td><span class="pill wait">待导出</span></td><td>—</td></tr>
|
||
<tr><td class="qidx">3</td><td><span class="swatch" style="background:#274764"></span>藏青_长袖</td><td><span class="swatch pr-1" style="display:inline-block"></span>花卉_001</td><td>夏季 / 花卉</td><td><span class="pill tpl">模板</span></td><td><span class="pill run">导出中</span></td><td><span class="qprog"><i style="width:64%"></i></span>64%</td></tr>
|
||
<tr><td class="qidx">4</td><td><span class="swatch" style="background:#6e2a2a"></span>酒红_卫衣</td><td><span class="swatch pr-1" style="display:inline-block"></span>花卉_001</td><td>秋季 / 花卉</td><td><span class="pill tpl">模板</span></td><td><span class="pill err">失败</span></td><td>印花超出画布边界，已跳过</td></tr>
|
||
<tr><td class="qidx">5</td><td><span class="swatch" style="background:#3a623d"></span>军绿_圆领</td><td><span class="swatch pr-1" style="display:inline-block"></span>花卉_001</td><td>秋季 / 花卉</td><td><span class="pill tpl">模板</span></td><td><span class="pill wait">待导出</span></td><td>—</td></tr>
|
||
<tr><td class="qidx">6</td><td><span class="swatch" style="background:#bba258"></span>卡其_POLO</td><td><span class="swatch pr-1" style="display:inline-block"></span>花卉_001</td><td>秋季 / 花卉</td><td><span class="pill adj">已微调</span></td><td><span class="pill wait">待导出</span></td><td>—</td></tr>
|
||
<tr><td class="qidx">7</td><td><span class="swatch" style="background:#2c3037"></span>黑T_宽松</td><td><span class="swatch pr-1" style="display:inline-block"></span>花卉_001</td><td>基础 / 花卉</td><td><span class="pill tpl">模板</span></td><td><span class="pill wait">待导出</span></td><td>—</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STATUS -->
|
||
<div class="status">
|
||
<div class="s"><span class="dot g"></span>衣服：<b>白T_圆领.png</b></div><div class="vsep"></div>
|
||
<div class="s">印花：<b>花卉_001.png</b></div><div class="vsep"></div>
|
||
<div class="s">模板：<b>标准居中印花 · T恤</b></div>
|
||
<div class="sp"></div>
|
||
<div class="s"><span class="dot a"></span>批量导出中 12/60</div><div class="vsep"></div>
|
||
<div class="s" style="color:#c42b1c"><span class="dot r"></span>1 项失败</div><div class="vsep"></div>
|
||
<div class="s log">✓ 已导出 白T_圆领_花卉_001.png</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|