feat: V21 UI full alignment (#27)
This commit is contained in:
Coze Agent
+33
-34
@@ -1,33 +1,6 @@
|
||||
/**
|
||||
* V21 全局基础样式
|
||||
* V21 全局重置样式
|
||||
*/
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
|
||||
/* V21 颜色系统 */
|
||||
--indigo: #4f46e5;
|
||||
--indigo-dark: #4338ca;
|
||||
--indigo-soft: #eef2ff;
|
||||
--slate: #0f172a;
|
||||
--muted: #64748b;
|
||||
--line: #e2e8f0;
|
||||
--bg: #f8fafc;
|
||||
--green: #10b981;
|
||||
--amber: #f59e0b;
|
||||
--red: #ef4444;
|
||||
|
||||
color-scheme: light;
|
||||
color: var(--slate);
|
||||
background-color: var(--bg);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -35,12 +8,38 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
html, body, #root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #0f172a;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
/* 滚动条 - V21 样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* 毛玻璃导航栏效果 */
|
||||
.navbar-glass {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
+59
-7
@@ -1,5 +1,6 @@
|
||||
/**
|
||||
* V21 设计系统入口
|
||||
* 更新主入口，引入全局样式
|
||||
* V21 设计系统配置
|
||||
*/
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
@@ -17,21 +18,72 @@ const queryClient = new QueryClient({
|
||||
queries: {
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
gcTime: 10 * 60 * 1000,
|
||||
staleTime: 5 * 60 * 1000, // 5 分钟
|
||||
gcTime: 10 * 60 * 1000, // 10 分钟
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// V21 Ant Design 主题配置
|
||||
// V21 Ant Design 主题配置 - Indigo 主色 / 大圆角
|
||||
const theme = {
|
||||
token: {
|
||||
// V21 Indigo 主色
|
||||
// 主色调 - Indigo
|
||||
colorPrimary: '#4f46e5',
|
||||
// V21 大圆角
|
||||
colorSuccess: '#10b981',
|
||||
colorWarning: '#f59e0b',
|
||||
colorError: '#ef4444',
|
||||
colorInfo: '#4f46e5',
|
||||
|
||||
// 圆角 - V21 大圆角
|
||||
borderRadius: 14,
|
||||
borderRadiusLG: 22,
|
||||
borderRadiusSM: 12,
|
||||
borderRadiusSM: 10,
|
||||
|
||||
// 文字色
|
||||
colorText: '#0f172a',
|
||||
colorTextSecondary: '#64748b',
|
||||
colorTextTertiary: '#94a3b8',
|
||||
|
||||
// 背景色
|
||||
colorBgContainer: '#ffffff',
|
||||
colorBgLayout: '#f8fafc',
|
||||
|
||||
// 边框色
|
||||
colorBorder: '#e2e8f0',
|
||||
colorBorderSecondary: '#f1f5f9',
|
||||
|
||||
// 阴影
|
||||
boxShadow: '0 10px 30px rgba(15, 23, 42, 0.06)',
|
||||
boxShadowSecondary: '0 24px 70px rgba(15, 23, 42, 0.09)',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
// 按钮圆角
|
||||
borderRadius: 14,
|
||||
// 主按钮渐变通过 CSS 实现
|
||||
colorPrimary: '#4f46e5',
|
||||
colorPrimaryHover: '#6366f1',
|
||||
primaryShadow: '0 14px 26px rgba(79, 70, 229, 0.22)',
|
||||
},
|
||||
Card: {
|
||||
borderRadiusLG: 28,
|
||||
paddingLG: 28,
|
||||
},
|
||||
Input: {
|
||||
borderRadius: 14,
|
||||
},
|
||||
Select: {
|
||||
borderRadius: 14,
|
||||
},
|
||||
Modal: {
|
||||
borderRadiusLG: 28,
|
||||
},
|
||||
InputNumber: {
|
||||
borderRadius: 14,
|
||||
},
|
||||
DatePicker: {
|
||||
borderRadius: 14,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -1,100 +1,22 @@
|
||||
/* V21 素材库页面 */
|
||||
/* V21 素材库页面 - 9:16 竖屏紧凑卡片 */
|
||||
|
||||
/* ========== 布局 ========== */
|
||||
.xx-project-assets {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.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;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-assets-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -109,100 +31,240 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* V21 素材卡片 - 大圆角 */
|
||||
/* ========== 素材卡片 - V21 大圆角 ========== */
|
||||
.xx-asset-card {
|
||||
background: white;
|
||||
border: 1px solid var(--line, #e2e8f0);
|
||||
border-radius: 22px;
|
||||
padding: 12px;
|
||||
transition: all 0.25s;
|
||||
border: 1px solid var(--border-color);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-asset-card:hover {
|
||||
border-color: var(--indigo, #4f46e5);
|
||||
box-shadow: 0 26px 64px rgba(15,23,42,0.14);
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* 缩略图 - 9:16 竖屏 */
|
||||
/* ========== 缩略图 - 9:16 竖屏 ========== */
|
||||
.xx-asset-thumb {
|
||||
aspect-ratio: 9 / 16;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #6366f1, #0ea5e9, #10b981);
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #0ea5e9, #312e81);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 状态标签 - Pill 样式 */
|
||||
.xx-asset-thumb video,
|
||||
.xx-asset-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 播放按钮 - 毛玻璃效果 */
|
||||
.xx-asset-thumb span {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
font-size: 18px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.xx-asset-card:hover .xx-asset-thumb span {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ========== 素材状态 ========== */
|
||||
.xx-asset-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 850;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.xx-asset-status.ready {
|
||||
background: #dcfce7;
|
||||
background: var(--success-soft);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.xx-asset-status.processing {
|
||||
background: #fef3c7;
|
||||
background: var(--warning-soft);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.xx-asset-status.failed {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
background: var(--error-soft);
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
/* 卡片文字 */
|
||||
.xx-asset-card b {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 850;
|
||||
color: var(--slate, #0f172a);
|
||||
margin: 8px 0 4px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-asset-card p {
|
||||
font-size: 12px;
|
||||
color: var(--muted, #64748b);
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.xx-empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 24px;
|
||||
color: var(--muted, #64748b);
|
||||
/* ========== 视频卡片（横向） ========== */
|
||||
.xx-video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.xx-empty-state p {
|
||||
font-size: 16px;
|
||||
margin: 12px 0;
|
||||
@media (max-width: 1200px) {
|
||||
.xx-video-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.xx-video-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.xx-video-card {
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.xx-video-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 视频封面 */
|
||||
.xx-video-thumb {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #0ea5e9, #312e81);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.xx-loading {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: var(--muted, #64748b);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 隐藏文件输入 */
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
/* ========== 状态标签 ========== */
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pill.ok {
|
||||
background: var(--success-soft);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.pill.warn {
|
||||
background: var(--warning-soft);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.pill.bad {
|
||||
background: var(--error-soft);
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
/* ========== 操作按钮 ========== */
|
||||
.assist-actions {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.assist-actions .btn {
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 14px;
|
||||
font-weight: 850;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.assist-actions .btn.primary {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
.assist-actions .btn.primary:hover {
|
||||
box-shadow: var(--shadow-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.assist-actions .btn.ghost {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.assist-actions .btn.ghost:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.xx-empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.xx-empty-state p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,28 @@
|
||||
/* V21 视频剪辑 - 增强版 */
|
||||
/* V21 视频剪辑页面 */
|
||||
|
||||
/* ========== 布局 ========== */
|
||||
.xx-project-generation {
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 模板网格 */
|
||||
.xx-generation-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-generation-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 模板网格 - V21 卡片 ========== */
|
||||
.xx-template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@@ -21,465 +37,141 @@
|
||||
}
|
||||
}
|
||||
|
||||
.xx-choice {
|
||||
/* ========== 模板选择卡片 ========== */
|
||||
.xx-choice-card {
|
||||
position: relative;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 18px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
padding: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-choice:hover {
|
||||
border-color: #4f46e5;
|
||||
.xx-choice-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.xx-choice.selected {
|
||||
border-color: #4f46e5;
|
||||
.xx-choice-card.selected {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
|
||||
}
|
||||
|
||||
.check {
|
||||
/* 选中标记 */
|
||||
.xx-choice-card .check {
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
top: -7px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #4f46e5;
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
.cover {
|
||||
height: 78px;
|
||||
border-radius: 14px;
|
||||
/* 模板封面 - 渐变背景 */
|
||||
.xx-template-cover {
|
||||
height: 90px;
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 32px;
|
||||
font-weight: 850;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-choice b {
|
||||
.xx-template-cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
/* 渐变预设 */
|
||||
.gradient-1 {
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1);
|
||||
}
|
||||
|
||||
.gradient-2 {
|
||||
background: linear-gradient(135deg, #10b981, #14b8a6);
|
||||
}
|
||||
|
||||
.gradient-3 {
|
||||
background: linear-gradient(135deg, #f59e0b, #f97316);
|
||||
}
|
||||
|
||||
.gradient-4 {
|
||||
background: linear-gradient(135deg, #ec4899, #8b5cf6);
|
||||
}
|
||||
|
||||
/* 模板信息 */
|
||||
.xx-template-info b {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
color: #0f172a;
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.xx-choice p {
|
||||
margin: 5px 0 0;
|
||||
color: #64748b;
|
||||
.xx-template-info p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 智能编排面板 */
|
||||
.auto-arrange-panel {
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
/* ========== 预览区域 ========== */
|
||||
.xx-preview-section {
|
||||
position: sticky;
|
||||
top: var(--space-xl);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
margin-bottom: 16px;
|
||||
.xx-preview-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.panel-header h4 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 16px;
|
||||
color: #1e293b;
|
||||
.xx-preview-item:hover {
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* 模式选择器 */
|
||||
.mode-selector-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mode-selector-section label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.mode-cards {
|
||||
.xx-preview-item .icon {
|
||||
font-size: 28px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
place-items: center;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.mode-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.mode-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 8px;
|
||||
background: white;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mode-card:hover {
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
.mode-card.selected {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.mode-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mode-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* 时长选择器 */
|
||||
.duration-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.duration-selector label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* 生成按钮 */
|
||||
.generate-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.xx-preview-item h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 850;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
/* 编排列表 */
|
||||
.plans-list {
|
||||
border-top: 1px solid #e2e8f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.plans-list h5 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.plan-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.plan-item:hover {
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
.plan-item.selected {
|
||||
border-color: #4f46e5;
|
||||
background: #f5f3ff;
|
||||
}
|
||||
|
||||
.plan-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.plan-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.plan-summary {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.plan-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.plan-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 时间轴区域 */
|
||||
.timeline-section {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header h4 {
|
||||
.xx-preview-item p {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* 时间轴容器 */
|
||||
.timeline-container {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.timeline-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.timeline-duration {
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.timeline-clips-count {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.timeline-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.timeline-layers {
|
||||
flex-shrink: 0;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.layer-label {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.layer-label.main {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.layer-label.pip {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.layer-label.broll {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.timeline-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 时间刻度 */
|
||||
.timeline-ruler {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.timeline-tick {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-tick::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
height: 6px;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.timeline-tick span {
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 轨道 */
|
||||
.timeline-tracks {
|
||||
position: relative;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.timeline-track {
|
||||
height: 28px;
|
||||
border-bottom: 1px dashed #f1f5f9;
|
||||
}
|
||||
|
||||
.timeline-track:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 片段 */
|
||||
.timeline-clip {
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
top: 2px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 6px;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
overflow: hidden;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.timeline-clip:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.timeline-clip-main {
|
||||
background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.timeline-clip-pip {
|
||||
background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.timeline-clip-broll {
|
||||
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clip-label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.clip-duration {
|
||||
flex-shrink: 0;
|
||||
margin-left: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 剪辑模式选择 */
|
||||
.editing-mode-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.editing-mode-group .ant-radio-button-wrapper {
|
||||
flex: 1;
|
||||
min-width: 130px;
|
||||
height: auto !important;
|
||||
padding: 12px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.mode-option {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mode-emoji {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mode-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mode-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.mode-desc {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 选中方案提示 */
|
||||
.selected-plan-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #166534;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -1,89 +1,79 @@
|
||||
/* V21 成片库页面 */
|
||||
/* V21 成片库页面 - 9:16 竖屏紧凑卡片 */
|
||||
|
||||
/* ========== 布局 ========== */
|
||||
.xx-project-results {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.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-vertical-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.xx-vertical-grid.compact {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-vertical-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.xx-vertical-grid.compact {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.xx-vertical-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.xx-vertical-grid {
|
||||
|
||||
.xx-vertical-grid.compact {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* V21 竖屏成片卡片 */
|
||||
/* ========== 竖屏卡片 - V21 大圆角 ========== */
|
||||
.xx-vertical-card {
|
||||
background: white;
|
||||
border: 1px solid var(--line, #e2e8f0);
|
||||
border-radius: 24px;
|
||||
padding: 12px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border-color);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
transition: all 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-vertical-card:hover {
|
||||
border-color: var(--indigo, #4f46e5);
|
||||
box-shadow: 0 26px 64px rgba(15,23,42,0.14);
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* 竖屏缩略图 */
|
||||
/* ========== 竖屏缩略图 - 9:16 ========== */
|
||||
.xx-vertical-thumb {
|
||||
aspect-ratio: 9 / 16;
|
||||
border-radius: 18px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 缩略图渐变变体 */
|
||||
.xx-vertical-thumb.orange {
|
||||
background: linear-gradient(135deg, #f97316, #ef4444);
|
||||
}
|
||||
|
||||
.xx-vertical-thumb.indigo {
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
.xx-vertical-thumb.gray {
|
||||
background: linear-gradient(135deg, #64748b, #334155);
|
||||
}
|
||||
|
||||
.xx-vertical-thumb.green {
|
||||
@@ -91,85 +81,124 @@
|
||||
}
|
||||
|
||||
.xx-vertical-thumb.purple {
|
||||
background: linear-gradient(135deg, #8b5cf6, #ec4899);
|
||||
background: linear-gradient(135deg, #8b5cf6, #a855f7);
|
||||
}
|
||||
|
||||
/* 播放按钮 */
|
||||
.xx-play-btn {
|
||||
/* 视频/图片填充 */
|
||||
.xx-vertical-thumb video,
|
||||
.xx-vertical-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 播放按钮 - 毛玻璃效果 */
|
||||
.mini-play {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.xx-vertical-card:hover .xx-play-btn {
|
||||
background: rgba(255,255,255,0.3);
|
||||
transform: scale(1.1);
|
||||
.mini-play:hover {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* 卡片文字 */
|
||||
.xx-vertical-card .row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* 视频信息 */
|
||||
.xx-vertical-card b {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 850;
|
||||
color: var(--slate, #0f172a);
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-vertical-card .meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.xx-vertical-card p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
color: var(--muted, #64748b);
|
||||
}
|
||||
|
||||
.xx-vertical-card .duration {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.xx-vertical-card .size {
|
||||
color: var(--green, #10b981);
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.xx-status-pill {
|
||||
display: inline-block;
|
||||
/* ========== 状态标签 ========== */
|
||||
.pill {
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-status-pill.ready {
|
||||
background: #dcfce7;
|
||||
.pill.ok {
|
||||
background: var(--success-soft);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.xx-status-pill.processing {
|
||||
background: #fef3c7;
|
||||
.pill.warn {
|
||||
background: var(--warning-soft);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.xx-empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
color: var(--muted, #64748b);
|
||||
.pill.bad {
|
||||
background: var(--error-soft);
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
.xx-empty-state p {
|
||||
font-size: 16px;
|
||||
margin: 12px 0;
|
||||
/* ========== 操作按钮组 ========== */
|
||||
.assist-actions {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.assist-actions .btn {
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 14px;
|
||||
font-weight: 850;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.assist-actions .btn.primary {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
.assist-actions .btn.primary:hover {
|
||||
box-shadow: var(--shadow-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.assist-actions .btn.ghost {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.assist-actions .btn.ghost:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
@@ -1,87 +1,61 @@
|
||||
/* V21 配音库页面 */
|
||||
/* V21 配音库页面 - 波形图样式 */
|
||||
|
||||
/* ========== 布局 ========== */
|
||||
.xx-project-voices {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.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 h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
color: var(--slate, #0f172a);
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
/* 配音网格 - 双列 */
|
||||
/* ========== 配音网格 ========== */
|
||||
.xx-voice-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-voice-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.xx-voice-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* V21 配音卡片 */
|
||||
.xx-voice-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border: 2px solid var(--line, #e2e8f0);
|
||||
border-radius: 20px;
|
||||
background: white;
|
||||
@media (max-width: 480px) {
|
||||
.xx-voice-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 配音卡片 - V21 大圆角 ========== */
|
||||
.xx-voice {
|
||||
text-align: center;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
padding: 18px 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.xx-voice-card:hover {
|
||||
border-color: var(--indigo, #4f46e5);
|
||||
box-shadow: 0 12px 36px rgba(79,70,229,0.12);
|
||||
.xx-voice:hover {
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* 选中态 */
|
||||
.xx-voice-card.selected {
|
||||
border-color: var(--indigo, #4f46e5);
|
||||
background: var(--indigo-soft, #eef2ff);
|
||||
box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
|
||||
.xx-voice.selected {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
|
||||
}
|
||||
|
||||
/* 选中标记 */
|
||||
.xx-voice-card.selected::after {
|
||||
.xx-voice.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
@@ -89,79 +63,131 @@
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--indigo, #4f46e5);
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
/* 波形图占位 */
|
||||
.xx-voice-waveform {
|
||||
width: 80px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
/* 音色图标 - 渐变圆形 */
|
||||
.voice-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 12px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
font-size: 26px;
|
||||
background: var(--gradient-primary);
|
||||
box-shadow: var(--shadow-primary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.xx-voice:hover .voice-icon {
|
||||
transform: scale(1.08);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
/* ========== 波形图样式 ========== */
|
||||
.waveform {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
gap: 3px;
|
||||
height: 32px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.xx-voice-waveform span {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
.waveform-bar {
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--gradient-primary);
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 音色信息 */
|
||||
.xx-voice-info {
|
||||
flex: 1;
|
||||
.xx-voice:hover .waveform-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.xx-voice-info h4 {
|
||||
font-size: 16px;
|
||||
.waveform-bar:nth-child(1) { height: 40%; }
|
||||
.waveform-bar:nth-child(2) { height: 70%; }
|
||||
.waveform-bar:nth-child(3) { height: 100%; }
|
||||
.waveform-bar:nth-child(4) { height: 60%; }
|
||||
.waveform-bar:nth-child(5) { height: 80%; }
|
||||
.waveform-bar:nth-child(6) { height: 50%; }
|
||||
.waveform-bar:nth-child(7) { height: 90%; }
|
||||
.waveform-bar:nth-child(8) { height: 65%; }
|
||||
.waveform-bar:nth-child(9) { height: 45%; }
|
||||
.waveform-bar:nth-child(10) { height: 75%; }
|
||||
|
||||
/* 播放中波形动画 */
|
||||
.waveform.playing .waveform-bar {
|
||||
animation: wave 0.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.waveform-bar:nth-child(1) { animation-delay: 0s; }
|
||||
.waveform-bar:nth-child(2) { animation-delay: 0.05s; }
|
||||
.waveform-bar:nth-child(3) { animation-delay: 0.1s; }
|
||||
.waveform-bar:nth-child(4) { animation-delay: 0.15s; }
|
||||
.waveform-bar:nth-child(5) { animation-delay: 0.2s; }
|
||||
.waveform-bar:nth-child(6) { animation-delay: 0.25s; }
|
||||
.waveform-bar:nth-child(7) { animation-delay: 0.3s; }
|
||||
.waveform-bar:nth-child(8) { animation-delay: 0.35s; }
|
||||
.waveform-bar:nth-child(9) { animation-delay: 0.4s; }
|
||||
.waveform-bar:nth-child(10) { animation-delay: 0.45s; }
|
||||
|
||||
@keyframes wave {
|
||||
from { transform: scaleY(0.6); }
|
||||
to { transform: scaleY(1.2); }
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.xx-voice div:not(.voice-icon):not(.waveform) {
|
||||
font-weight: 850;
|
||||
color: var(--slate, #0f172a);
|
||||
margin: 0 0 6px;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.xx-voice-info p {
|
||||
font-size: 13px;
|
||||
color: var(--muted, #64748b);
|
||||
margin: 0;
|
||||
.xx-voice small {
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 播放按钮 */
|
||||
.xx-voice-play {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: rgba(79,70,229,0.1);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
/* ========== 使用记录列表 ========== */
|
||||
.xx-voice-usage-list {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 18px;
|
||||
color: var(--indigo, #4f46e5);
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.xx-voice-play:hover {
|
||||
background: var(--indigo, #4f46e5);
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
.xx-voice-usage-row {
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.xx-voice-tag {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
.xx-voice-usage-row:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.xx-voice-usage-row b {
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
font-weight: 850;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--indigo-soft, #eef2ff);
|
||||
color: var(--indigo-dark, #4338ca);
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.xx-voice-usage-row p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
+211
-137
@@ -1,124 +1,71 @@
|
||||
/**
|
||||
* V21 设计系统 - 全局样式
|
||||
* 核心设计规范：Indigo 主色 / 大圆角 / 毛玻璃 / 渐变背景
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* 主色调 */
|
||||
/* ========== 主色调 - Indigo ========== */
|
||||
--primary-color: #4f46e5;
|
||||
--primary-hover: #6366f1;
|
||||
--primary-active: #4338ca;
|
||||
--primary-dark: #4338ca;
|
||||
--primary-soft: #eef2ff;
|
||||
--gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
|
||||
/* 状态色 */
|
||||
/* ========== 状态色 ========== */
|
||||
--success-color: #10b981;
|
||||
--success-soft: #dcfce7;
|
||||
--warning-color: #f59e0b;
|
||||
--warning-soft: #fef3c7;
|
||||
--error-color: #ef4444;
|
||||
--error-soft: #ffe4e6;
|
||||
--info-color: #4f46e5;
|
||||
--info-soft: #eef2ff;
|
||||
|
||||
/* 文字色 */
|
||||
/* ========== 文字色 ========== */
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #64748b;
|
||||
--text-disabled: #bfbfbf;
|
||||
|
||||
/* 背景色 */
|
||||
--bg-primary: #f8fafc;
|
||||
--bg-secondary: #fafafa;
|
||||
--bg-tertiary: #f5f5f5;
|
||||
/* ========== 背景色 ========== */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
|
||||
/* V21 设计令牌 */
|
||||
--indigo: #4f46e5;
|
||||
--indigo-dark: #4338ca;
|
||||
--indigo-soft: #eef2ff;
|
||||
--gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
--slate: #0f172a;
|
||||
--muted: #64748b;
|
||||
--line: #e2e8f0;
|
||||
--bg: #f8fafc;
|
||||
--green: #10b981;
|
||||
--amber: #f59e0b;
|
||||
--red: #ef4444;
|
||||
|
||||
/* 边框色 */
|
||||
--border-color: #d9d9d9;
|
||||
/* ========== 边框色 ========== */
|
||||
--border-color: #e2e8f0;
|
||||
--divider-color: #f0f0f0;
|
||||
|
||||
/* 间距 */
|
||||
/* ========== 间距 ========== */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
|
||||
/* 圆角 - V21 大圆角 */
|
||||
--radius-sm: 12px;
|
||||
--radius-md: 16px;
|
||||
/* ========== 圆角 - V21 大圆角 ========== */
|
||||
--radius-xs: 6px;
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 22px;
|
||||
--radius-xl: 28px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影 - V21 柔和大阴影 */
|
||||
--shadow-sm: 0 10px 30px rgba(15,23,42,0.06);
|
||||
--shadow-md: 0 20px 58px rgba(15,23,42,0.10);
|
||||
--shadow-lg: 0 24px 70px rgba(15,23,42,0.09);
|
||||
--shadow-hover: 0 26px 64px rgba(15,23,42,0.14);
|
||||
/* ========== 阴影 - V21 柔和大阴影 ========== */
|
||||
--shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.04);
|
||||
--shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
|
||||
--shadow-md: 0 20px 58px rgba(15, 23, 42, 0.10);
|
||||
--shadow-lg: 0 30px 90px rgba(15, 23, 42, 0.15);
|
||||
--shadow-hover: 0 18px 34px rgba(79, 70, 229, 0.28);
|
||||
--shadow-card: 0 24px 70px rgba(15, 23, 42, 0.09);
|
||||
--shadow-primary: 0 14px 26px rgba(79, 70, 229, 0.22);
|
||||
}
|
||||
|
||||
/**
|
||||
* V21 按钮样式
|
||||
*/
|
||||
.btn.primary,
|
||||
.ant-btn-primary {
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
|
||||
color: white !important;
|
||||
border-radius: 14px !important;
|
||||
font-weight: 850 !important;
|
||||
box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important;
|
||||
border: none !important;
|
||||
padding: 12px 22px !important;
|
||||
transition: all 0.2s !important;
|
||||
/* ========== 全局背景装饰层 ========== */
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn.primary:hover,
|
||||
.ant-btn-primary:hover {
|
||||
box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
|
||||
transform: translateY(-1px);
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
|
||||
}
|
||||
|
||||
.btn.ghost,
|
||||
.ant-btn-default {
|
||||
background: white !important;
|
||||
border: 1px solid #dbe3ef !important;
|
||||
border-radius: 14px !important;
|
||||
font-weight: 850 !important;
|
||||
padding: 12px 22px !important;
|
||||
transition: all 0.2s !important;
|
||||
}
|
||||
|
||||
.btn.ghost:hover,
|
||||
.ant-btn-default:hover {
|
||||
border-color: #4f46e5 !important;
|
||||
color: #4f46e5 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.xx-card:hover {
|
||||
box-shadow: 0 26px 64px rgba(15,23,42,0.14);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/**
|
||||
* V21 背景装饰
|
||||
*/
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
@@ -126,9 +73,9 @@ body::before {
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at 18% 20%, rgba(79,70,229,0.11), transparent 30%),
|
||||
radial-gradient(circle at 86% 14%, rgba(16,185,129,0.08), transparent 28%),
|
||||
radial-gradient(circle at 48% 80%, rgba(99,102,241,0.08), transparent 34%),
|
||||
radial-gradient(circle at 18% 20%, rgba(79, 70, 229, 0.11), transparent 30%),
|
||||
radial-gradient(circle at 86% 14%, rgba(16, 185, 129, 0.08), transparent 28%),
|
||||
radial-gradient(circle at 48% 80%, rgba(99, 102, 241, 0.08), transparent 34%),
|
||||
#f8fafc;
|
||||
}
|
||||
|
||||
@@ -138,75 +85,173 @@ body::after {
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle, rgba(79,70,229,0.1) 1px, transparent 1px);
|
||||
background-image: radial-gradient(circle, rgba(79, 70, 229, 0.1) 1px, transparent 1px);
|
||||
background-size: 38px 38px;
|
||||
opacity: 0.32;
|
||||
}
|
||||
|
||||
/* 全局重置 */
|
||||
* {
|
||||
#root {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ========== 页面通用布局 ========== */
|
||||
.xx-page {
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.xx-page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-xl);
|
||||
padding: var(--space-lg);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(226, 232, 240, 0.95);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.xx-page-head h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 850;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.xx-page-head p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* ========== V21 按钮样式 ========== */
|
||||
.xx-primary-btn,
|
||||
.ant-btn-primary {
|
||||
background: var(--gradient-primary) !important;
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
font-weight: 850 !important;
|
||||
box-shadow: var(--shadow-primary) !important;
|
||||
padding: 12px 22px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
.xx-primary-btn:hover,
|
||||
.ant-btn-primary:hover {
|
||||
box-shadow: var(--shadow-hover) !important;
|
||||
transform: translateY(-1px);
|
||||
background: var(--gradient-primary) !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
.xx-ghost-btn,
|
||||
.ant-btn-default {
|
||||
background: var(--bg-primary) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
font-weight: 850 !important;
|
||||
padding: 12px 22px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
color: var(--text-primary) !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
.xx-ghost-btn:hover,
|
||||
.ant-btn-default:hover {
|
||||
border-color: var(--primary-color) !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-center {
|
||||
/* Ant Design Button 圆角覆盖 */
|
||||
.ant-btn {
|
||||
border-radius: var(--radius-md) !important;
|
||||
}
|
||||
|
||||
/* ========== V21 卡片样式 ========== */
|
||||
.xx-card {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(226, 232, 240, 0.95);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: var(--space-xl);
|
||||
margin-bottom: var(--space-lg);
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.xx-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.xx-card h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 850;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* ========== 上传区域 ========== */
|
||||
.xx-upload-zone {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 48px;
|
||||
text-align: center;
|
||||
background: var(--bg-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
.xx-upload-zone:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
.mt-sm {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.mt-md {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.mt-lg {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.mb-sm {
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.mb-md {
|
||||
.xx-upload-zone .icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.mb-lg {
|
||||
margin-bottom: var(--space-lg);
|
||||
.xx-upload-zone p {
|
||||
color: var(--text-secondary);
|
||||
margin: var(--space-sm) 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 卡片悬浮效果 */
|
||||
.xx-upload-btn {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.xx-empty-state {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.xx-empty-state .icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* ========== 工具类 ========== */
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-primary { color: var(--primary-color); }
|
||||
.text-muted { color: var(--text-secondary); }
|
||||
|
||||
.mt-sm { margin-top: var(--space-sm); }
|
||||
.mt-md { margin-top: var(--space-md); }
|
||||
.mt-lg { margin-top: var(--space-lg); }
|
||||
.mb-sm { margin-bottom: var(--space-sm); }
|
||||
.mb-md { margin-bottom: var(--space-md); }
|
||||
.mb-lg { margin-bottom: var(--space-lg); }
|
||||
|
||||
/* ========== 卡片悬浮效果 ========== */
|
||||
.card-hover {
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -215,8 +260,37 @@ body {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* 选中态 */
|
||||
.selected-plan {
|
||||
/* ========== 选中态 ========== */
|
||||
.selected-plan,
|
||||
.selected-item {
|
||||
border: 2px solid var(--primary-color) !important;
|
||||
box-shadow: var(--shadow-md);
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
/* ========== 网格布局 ========== */
|
||||
.xx-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.xx-grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.xx-grid-4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.xx-grid-4 { grid-template-columns: repeat(3, 1fr); }
|
||||
.xx-grid-3 { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.xx-grid-4, .xx-grid-3, .xx-grid-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user