Subagent
209 lines
3.8 KiB
CSS
209 lines
3.8 KiB
CSS
/* V21 素材库页面 */
|
|
.xx-project-assets {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 页面头部 */
|
|
.xx-page-head {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.xx-page-head h2 {
|
|
font-size: 28px;
|
|
font-weight: 850;
|
|
color: var(--slate, #0f172a);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.xx-page-head p {
|
|
font-size: 14px;
|
|
color: var(--muted, #64748b);
|
|
margin: 0;
|
|
}
|
|
|
|
/* V21 大卡片 */
|
|
.xx-card {
|
|
background: rgba(255,255,255,0.94);
|
|
border: 1px solid rgba(226,232,240,0.95);
|
|
border-radius: 28px;
|
|
box-shadow: 0 24px 70px rgba(15,23,42,0.09);
|
|
padding: 28px;
|
|
margin-bottom: 24px;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.xx-card:hover {
|
|
box-shadow: 0 26px 64px rgba(15,23,42,0.14);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.xx-card h3 {
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
color: var(--slate, #0f172a);
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* 上传区域 */
|
|
.xx-upload-zone {
|
|
border: 2px dashed var(--line, #e2e8f0);
|
|
border-radius: 24px;
|
|
padding: 48px;
|
|
text-align: center;
|
|
background: var(--bg, #f8fafc);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.xx-upload-zone:hover {
|
|
border-color: var(--indigo, #4f46e5);
|
|
background: var(--indigo-soft, #eef2ff);
|
|
}
|
|
|
|
.xx-upload-zone .icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.xx-upload-zone p {
|
|
color: var(--muted, #64748b);
|
|
margin: 12px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* V21 上传按钮 */
|
|
.xx-upload-btn {
|
|
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
border-radius: 14px !important;
|
|
padding: 12px 24px !important;
|
|
font-weight: 850 !important;
|
|
box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important;
|
|
transition: all 0.2s !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xx-upload-btn:hover {
|
|
box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* 素材网格 - 9:16 竖屏卡片 */
|
|
.xx-assets-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.xx-assets-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.xx-assets-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* V21 素材卡片 - 大圆角 */
|
|
.xx-asset-card {
|
|
background: white;
|
|
border: 1px solid var(--line, #e2e8f0);
|
|
border-radius: 22px;
|
|
padding: 12px;
|
|
transition: all 0.25s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xx-asset-card:hover {
|
|
border-color: var(--indigo, #4f46e5);
|
|
box-shadow: 0 26px 64px rgba(15,23,42,0.14);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
/* 缩略图 - 9:16 竖屏 */
|
|
.xx-asset-thumb {
|
|
aspect-ratio: 9 / 16;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, #6366f1, #0ea5e9, #10b981);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
font-size: 32px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* 状态标签 - Pill 样式 */
|
|
.xx-asset-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 850;
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.xx-asset-status.ready {
|
|
background: #dcfce7;
|
|
color: #15803d;
|
|
}
|
|
|
|
.xx-asset-status.processing {
|
|
background: #fef3c7;
|
|
color: #b45309;
|
|
}
|
|
|
|
.xx-asset-status.failed {
|
|
background: #fee2e2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.xx-asset-card b {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 850;
|
|
color: var(--slate, #0f172a);
|
|
margin: 8px 0 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.xx-asset-card p {
|
|
font-size: 12px;
|
|
color: var(--muted, #64748b);
|
|
margin: 0;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.xx-empty-state {
|
|
text-align: center;
|
|
padding: 60px 24px;
|
|
color: var(--muted, #64748b);
|
|
}
|
|
|
|
.xx-empty-state p {
|
|
font-size: 16px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.xx-loading {
|
|
padding: 60px 24px;
|
|
text-align: center;
|
|
color: var(--muted, #64748b);
|
|
}
|
|
|
|
/* 隐藏文件输入 */
|
|
input[type="file"] {
|
|
display: none;
|
|
}
|