feat(ui): V21 design system overhaul
This commit is contained in:
Subagent
@@ -1,200 +1,208 @@
|
||||
/* V21 素材库 */
|
||||
/* 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);
|
||||
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);
|
||||
box-shadow: 0 24px 70px rgba(15,23,42,0.09);
|
||||
padding: 28px;
|
||||
margin-bottom: 20px;
|
||||
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: 21px;
|
||||
margin: 0 0 16px;
|
||||
color: #0f172a;
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
color: var(--slate, #0f172a);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.xx-loading {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.xx-upload-zone {
|
||||
border: 2px dashed #e2e8f0;
|
||||
border: 2px dashed var(--line, #e2e8f0);
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
padding: 48px;
|
||||
text-align: center;
|
||||
background: #f8fafc;
|
||||
background: var(--bg, #f8fafc);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.xx-upload-zone:hover {
|
||||
border-color: #4f46e5;
|
||||
background: #eef2ff;
|
||||
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: #64748b;
|
||||
color: var(--muted, #64748b);
|
||||
margin: 12px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.xx-video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-video-grid {
|
||||
.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: 768px) {
|
||||
.xx-video-grid {
|
||||
@media (max-width: 480px) {
|
||||
.xx-assets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.xx-video-card {
|
||||
border: 1px solid #e2e8f0;
|
||||
/* V21 素材卡片 - 大圆角 */
|
||||
.xx-asset-card {
|
||||
background: white;
|
||||
border: 1px solid var(--line, #e2e8f0);
|
||||
border-radius: 22px;
|
||||
padding: 12px;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xx-video-card:hover {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
|
||||
.xx-asset-card:hover {
|
||||
border-color: var(--indigo, #4f46e5);
|
||||
box-shadow: 0 26px 64px rgba(15,23,42,0.14);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.xx-video-thumb {
|
||||
aspect-ratio: 16 / 9;
|
||||
/* 缩略图 - 9:16 竖屏 */
|
||||
.xx-asset-thumb {
|
||||
aspect-ratio: 9 / 16;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #0ea5e9, #312e81);
|
||||
background: linear-gradient(135deg, #6366f1, #0ea5e9, #10b981);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mini-play {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.xx-video-card b {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.xx-video-card p {
|
||||
margin: 5px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* 状态标签 - Pill 样式 */
|
||||
.xx-asset-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
font-weight: 850;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pill.ok {
|
||||
.xx-asset-status.ready {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.pill.warn {
|
||||
.xx-asset-status.processing {
|
||||
background: #fef3c7;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.pill.bad {
|
||||
background: #ffe4e6;
|
||||
color: #be123c;
|
||||
.xx-asset-status.failed {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.assist-actions {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
padding: 12px 17px;
|
||||
font-weight: 850;
|
||||
cursor: pointer;
|
||||
.xx-asset-card b {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 850;
|
||||
color: var(--slate, #0f172a);
|
||||
margin: 8px 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
box-shadow: 0 16px 28px rgba(79, 70, 229, 0.24);
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background: #4338ca;
|
||||
box-shadow: 0 20px 36px rgba(79, 70, 229, 0.32);
|
||||
}
|
||||
|
||||
.btn.primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.btn.ghost:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #4f46e5;
|
||||
color: #4f46e5;
|
||||
.xx-asset-card p {
|
||||
font-size: 12px;
|
||||
color: var(--muted, #64748b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.xx-empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
color: #64748b;
|
||||
padding: 60px 24px;
|
||||
color: var(--muted, #64748b);
|
||||
}
|
||||
|
||||
.xx-empty-state p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.xx-loading {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: var(--muted, #64748b);
|
||||
}
|
||||
|
||||
/* 隐藏文件输入 */
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user