修改部份ui
This commit is contained in:
Azmat@qq.com
@@ -10,95 +10,308 @@
|
||||
A · 图片生成入口(.asset-factory)
|
||||
============================================================ */
|
||||
|
||||
/* ─── 三 Hero 卡片网格(模特上身图 / 平台套图 / 图片创作 · 等比)─── */
|
||||
.asset-factory .factory-hero {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.asset-factory .factory-hero { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.asset-factory .factory-hero { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.asset-factory .factory-card {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--r-md);
|
||||
padding: 28px 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.asset-factory .factory-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
height: 100%;
|
||||
/* 盖掉旧全局 .factory-body(styles.css) 漏进来的 align-items:center —— 否则内容被居中、宽卡里偏离左边老远 */
|
||||
align-items: stretch;
|
||||
}
|
||||
.asset-factory .factory-text { display: flex; flex-direction: column; min-width: 0; }
|
||||
|
||||
.asset-factory .factory-tag {
|
||||
align-self: flex-start;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
color: var(--black-alpha-48);
|
||||
letter-spacing: .06em;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--border-faint);
|
||||
background: var(--background-lighter);
|
||||
border-radius: var(--r-sm);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.asset-factory .factory-title {
|
||||
font-size: 22px;
|
||||
/* ─── YZ 图片创作入口 · 页头 + 三张入口卡 + 最近创作网格 ─── */
|
||||
.asset-factory .af-hero-head { margin: 4px 0 28px; }
|
||||
.asset-factory .af-hero-head h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.018em;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -.03em;
|
||||
line-height: 1.2;
|
||||
color: var(--accent-black);
|
||||
}
|
||||
.asset-factory .factory-desc {
|
||||
margin-top: 8px;
|
||||
font-size: 13.5px;
|
||||
color: var(--black-alpha-64);
|
||||
line-height: 1.55;
|
||||
.asset-factory .af-hero-head p {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--black-alpha-48);
|
||||
}
|
||||
|
||||
/* CTA 行:主按钮 + 价格 mono */
|
||||
.asset-factory .factory-cta {
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
.asset-factory .af-hero {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.asset-factory .af-hero-card {
|
||||
min-width: 0;
|
||||
aspect-ratio: 3 / 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-floating), inset 0 0 0 1px var(--border-faint);
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
transition: transform var(--t-fast), box-shadow var(--t-base);
|
||||
}
|
||||
.asset-factory .af-hero-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px rgba(17, 19, 24, .08), inset 0 0 0 1px var(--border-faint);
|
||||
}
|
||||
.asset-factory .af-hero-visual {
|
||||
flex: 1.65 1 0;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
background: var(--black-alpha-4);
|
||||
overflow: hidden;
|
||||
}
|
||||
.asset-factory .af-hero-visual img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.asset-factory .af-hero-card.gradient .af-hero-visual {
|
||||
background: linear-gradient(145deg, var(--accent-amethyst) 0%, #c4b5fd 42%, var(--heat) 100%);
|
||||
}
|
||||
.asset-factory .af-hero-copy {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
padding: 16px 40px 16px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.asset-factory .af-hero-copy .t {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.01em;
|
||||
color: var(--accent-black);
|
||||
}
|
||||
.asset-factory .af-hero-copy .d {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--black-alpha-48);
|
||||
}
|
||||
.asset-factory .af-hero-arrow {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--accent-bluetron);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.asset-factory .af-hero-arrow svg { width: 16px; height: 16px; }
|
||||
|
||||
.asset-factory .af-recent { margin-top: 8px; }
|
||||
.asset-factory .af-recent-head { margin-bottom: 18px; }
|
||||
.asset-factory .af-recent-head h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.02em;
|
||||
color: var(--accent-black);
|
||||
}
|
||||
.asset-factory .af-recent-head p {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--black-alpha-48);
|
||||
}
|
||||
|
||||
.asset-factory .af-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.asset-factory .factory-cta .cost {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
color: var(--black-alpha-48);
|
||||
letter-spacing: .04em;
|
||||
.asset-factory .af-pills {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
.asset-factory .af-pill {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border: 0;
|
||||
border-radius: var(--r-pill);
|
||||
background: transparent;
|
||||
color: var(--black-alpha-56);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.asset-factory .af-pill:hover { background: var(--black-alpha-4); color: var(--accent-black); }
|
||||
.asset-factory .af-pill.active {
|
||||
background: var(--nav-active);
|
||||
color: var(--accent-white);
|
||||
}
|
||||
.asset-factory .af-toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.asset-factory .af-search {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
}
|
||||
.asset-factory .af-search svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--black-alpha-40);
|
||||
pointer-events: none;
|
||||
}
|
||||
.asset-factory .af-search input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px 0 34px;
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--surface);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
color: var(--accent-black);
|
||||
}
|
||||
.asset-factory .af-search input::placeholder { color: var(--black-alpha-40); }
|
||||
.asset-factory .af-search input:focus {
|
||||
outline: none;
|
||||
border-color: var(--heat-40);
|
||||
box-shadow: inset 0 0 0 1px var(--heat-40);
|
||||
}
|
||||
.asset-factory .af-view {
|
||||
display: inline-flex;
|
||||
height: 36px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--surface);
|
||||
gap: 2px;
|
||||
}
|
||||
.asset-factory .af-view button {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--black-alpha-40);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.asset-factory .af-view button.active {
|
||||
background: var(--black-alpha-7);
|
||||
color: var(--accent-black);
|
||||
}
|
||||
.asset-factory .af-view button:hover { color: var(--accent-black); }
|
||||
|
||||
/* ─── 任务中心 · section header(基线 .section-h 带 mono sub)─── */
|
||||
.asset-factory .section-h { margin-top: 24px; }
|
||||
.asset-factory .section-h .sub-mono {
|
||||
font-family: var(--font-mono);
|
||||
.asset-factory .af-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.asset-factory .af-card {
|
||||
background: var(--surface);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-floating);
|
||||
outline: none;
|
||||
}
|
||||
.asset-factory .af-card:hover { box-shadow: 0 12px 32px rgba(17, 19, 24, .08); }
|
||||
.asset-factory .af-card-visual {
|
||||
position: relative;
|
||||
aspect-ratio: 4 / 3;
|
||||
background: var(--black-alpha-4);
|
||||
overflow: hidden;
|
||||
}
|
||||
.asset-factory .af-card-visual img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.asset-factory .af-card-prog {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--r-pill);
|
||||
background: rgba(17, 19, 24, .72);
|
||||
color: var(--accent-white);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.asset-factory .af-card-body { padding: 14px 14px 16px; }
|
||||
.asset-factory .af-card-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-black);
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.asset-factory .af-card-meta {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--black-alpha-48);
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
.asset-factory .af-card-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.asset-factory .af-tag {
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.asset-factory .af-tag.ok {
|
||||
background: var(--forest-bg);
|
||||
color: var(--accent-forest);
|
||||
}
|
||||
.asset-factory .af-tag.info {
|
||||
background: var(--heat-12);
|
||||
color: var(--accent-bluetron);
|
||||
}
|
||||
.asset-factory .af-tag.err {
|
||||
background: var(--crimson-bg);
|
||||
color: var(--accent-crimson);
|
||||
}
|
||||
.asset-factory .af-tag.type {
|
||||
background: transparent;
|
||||
color: var(--black-alpha-56);
|
||||
box-shadow: inset 0 0 0 1px var(--border-muted);
|
||||
}
|
||||
.asset-factory .af-tag.type.image {
|
||||
color: var(--accent-bluetron);
|
||||
box-shadow: inset 0 0 0 1px rgba(42, 109, 251, .28);
|
||||
}
|
||||
|
||||
.asset-factory .result-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--black-alpha-48);
|
||||
letter-spacing: .02em;
|
||||
margin: 2px 0 12px;
|
||||
@media (max-width: 1280px) {
|
||||
.asset-factory .af-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.asset-factory .af-hero { grid-template-columns: 1fr; }
|
||||
.asset-factory .af-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.asset-factory .af-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ─── 列表视图 · 表格容器(基线 #task-list-view)─── */
|
||||
@@ -149,6 +362,8 @@
|
||||
50% { opacity: .55; transform: scaleY(.7); }
|
||||
}
|
||||
|
||||
.asset-factory .list-pager { margin-top: 20px; }
|
||||
|
||||
.asset-factory .task-empty {
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
@@ -259,18 +474,12 @@
|
||||
border-radius: var(--r-sm);
|
||||
font-size: 12px; font-weight: 600;
|
||||
font-family: inherit; cursor: pointer;
|
||||
box-shadow:
|
||||
inset 0 -2px 4px rgba(250, 93, 25, 0.20),
|
||||
0 1px 1px rgba(250, 93, 25, 0.12),
|
||||
0 2px 4px rgba(250, 93, 25, 0.10);
|
||||
box-shadow: var(--shadow-cta);
|
||||
transition: filter var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
|
||||
}
|
||||
.image-workbench .iw-list-h .new-prod:hover {
|
||||
filter: brightness(.96);
|
||||
box-shadow:
|
||||
inset 0 -2px 4px rgba(250, 93, 25, 0.20),
|
||||
0 1px 1px rgba(250, 93, 25, 0.16),
|
||||
0 4px 8px rgba(250, 93, 25, 0.20);
|
||||
box-shadow: var(--shadow-cta-hover);
|
||||
}
|
||||
.image-workbench .iw-list-h .new-prod:active { transform: scale(.98); }
|
||||
.image-workbench .iw-list-h .new-prod svg { width: 12px; height: 12px; }
|
||||
|
||||
Reference in New Issue
Block a user