feat: 全面对齐 V21 设计系统 - Indigo主色/大圆角/毛玻璃/渐变背景
This commit is contained in:
CI Test
+34
-25
@@ -1,18 +1,6 @@
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
/**
|
||||
* V21 全局重置样式
|
||||
*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -20,17 +8,38 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
html, body, #root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
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
-3
@@ -1,5 +1,6 @@
|
||||
/**
|
||||
* 更新主入口，引入全局样式
|
||||
* V21 设计系统配置
|
||||
*/
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
@@ -23,11 +24,66 @@ const queryClient = new QueryClient({
|
||||
},
|
||||
});
|
||||
|
||||
// Ant Design 主题配置
|
||||
// V21 Ant Design 主题配置 - Indigo 主色 / 大圆角
|
||||
const theme = {
|
||||
token: {
|
||||
colorPrimary: '#1890ff',
|
||||
borderRadius: 4,
|
||||
// 主色调 - Indigo
|
||||
colorPrimary: '#4f46e5',
|
||||
colorSuccess: '#10b981',
|
||||
colorWarning: '#f59e0b',
|
||||
colorError: '#ef4444',
|
||||
colorInfo: '#4f46e5',
|
||||
|
||||
// 圆角 - V21 大圆角
|
||||
borderRadius: 14,
|
||||
borderRadiusLG: 22,
|
||||
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,54 +1,142 @@
|
||||
/* V21 素材库 */
|
||||
/* V21 素材库页面 - 9:16 竖屏紧凑卡片 */
|
||||
|
||||
/* ========== 布局 ========== */
|
||||
.xx-project-assets {
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.xx-card {
|
||||
/* ========== 素材网格 - 竖屏卡片 ========== */
|
||||
.xx-assets-grid {
|
||||
display: grid;
|
||||
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) {
|
||||
.xx-assets-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.xx-assets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 素材卡片 - V21 大圆角 ========== */
|
||||
.xx-asset-card {
|
||||
border: 1px solid var(--border-color);
|
||||
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: 20px;
|
||||
}
|
||||
|
||||
.xx-card h3 {
|
||||
font-size: 21px;
|
||||
margin: 0 0 16px;
|
||||
color: #0f172a;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.xx-loading {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.xx-upload-zone {
|
||||
border: 2px dashed #e2e8f0;
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
background: #f8fafc;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-upload-zone:hover {
|
||||
border-color: #4f46e5;
|
||||
background: #eef2ff;
|
||||
.xx-asset-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.xx-upload-zone p {
|
||||
color: #64748b;
|
||||
margin: 12px 0;
|
||||
/* ========== 缩略图 - 9:16 竖屏 ========== */
|
||||
.xx-asset-thumb {
|
||||
aspect-ratio: 9 / 16;
|
||||
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-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-block;
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 850;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.xx-asset-status.ready {
|
||||
background: var(--success-soft);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.xx-asset-status.processing {
|
||||
background: var(--warning-soft);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.xx-asset-status.failed {
|
||||
background: var(--error-soft);
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
/* 卡片文字 */
|
||||
.xx-asset-card b {
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
font-weight: 850;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-asset-card p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ========== 视频卡片（横向） ========== */
|
||||
.xx-video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@@ -64,134 +152,116 @@
|
||||
}
|
||||
|
||||
.xx-video-card {
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
border-radius: 22px;
|
||||
padding: 12px;
|
||||
transition: all 0.2s;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.xx-video-card:hover {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 视频封面 */
|
||||
.xx-video-thumb {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #0ea5e9, #312e81);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
/* 加载状态 */
|
||||
.xx-loading {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ========== 状态标签 ========== */
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
font-size: 11px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pill.ok {
|
||||
background: #dcfce7;
|
||||
background: var(--success-soft);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.pill.warn {
|
||||
background: #fef3c7;
|
||||
background: var(--warning-soft);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.pill.bad {
|
||||
background: #ffe4e6;
|
||||
background: var(--error-soft);
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
/* ========== 操作按钮 ========== */
|
||||
.assist-actions {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
margin-top: 14px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.assist-actions .btn {
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
padding: 12px 17px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 14px;
|
||||
font-weight: 850;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #4f46e5;
|
||||
.assist-actions .btn.primary {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
box-shadow: 0 16px 28px rgba(79, 70, 229, 0.24);
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background: #4338ca;
|
||||
box-shadow: 0 20px 36px rgba(79, 70, 229, 0.32);
|
||||
.assist-actions .btn.primary:hover {
|
||||
box-shadow: var(--shadow-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn.primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
.assist-actions .btn.ghost {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #475569;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn.ghost:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #4f46e5;
|
||||
color: #4f46e5;
|
||||
.assist-actions .btn.ghost:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.xx-empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
color: #64748b;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.xx-empty-state p {
|
||||
|
||||
@@ -1,11 +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) {
|
||||
@@ -20,59 +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;
|
||||
}
|
||||
|
||||
/* ========== 预览区域 ========== */
|
||||
.xx-preview-section {
|
||||
position: sticky;
|
||||
top: var(--space-xl);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.xx-preview-item:hover {
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
.xx-preview-item .icon {
|
||||
font-size: 28px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.xx-preview-item h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.xx-preview-item p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
/* V21 成片库 */
|
||||
/* V21 成片库页面 - 9:16 竖屏紧凑卡片 */
|
||||
|
||||
/* ========== 布局 ========== */
|
||||
.xx-project-results {
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ========== 竖屏卡片网格 ========== */
|
||||
.xx-vertical-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.xx-vertical-grid.compact {
|
||||
@@ -32,32 +37,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 竖屏卡片 - V21 大圆角 ========== */
|
||||
.xx-vertical-card {
|
||||
border: 1px solid #e2e8f0;
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 12px;
|
||||
transition: all 0.2s;
|
||||
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: #4f46e5;
|
||||
box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
|
||||
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;
|
||||
background: linear-gradient(135deg, #0ea5e9, #312e81);
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 缩略图渐变变体 */
|
||||
.xx-vertical-thumb.orange {
|
||||
background: linear-gradient(135deg, #f97316, #ef4444);
|
||||
}
|
||||
@@ -70,34 +80,125 @@
|
||||
background: linear-gradient(135deg, #10b981, #0284c7);
|
||||
}
|
||||
|
||||
.xx-vertical-thumb video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.xx-vertical-thumb.purple {
|
||||
background: linear-gradient(135deg, #8b5cf6, #a855f7);
|
||||
}
|
||||
|
||||
/* 视频/图片填充 */
|
||||
.xx-vertical-thumb video,
|
||||
.xx-vertical-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 播放按钮 - 毛玻璃效果 */
|
||||
.mini-play {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
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: 20px;
|
||||
color: white;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #0f172a;
|
||||
color: var(--text-primary);
|
||||
font-weight: 850;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-vertical-card p {
|
||||
margin: 5px 0 0;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ========== 状态标签 ========== */
|
||||
.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: 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,11 +1,16 @@
|
||||
/* V21 配音库 */
|
||||
/* V21 配音库页面 - 波形图样式 */
|
||||
|
||||
/* ========== 布局 ========== */
|
||||
.xx-project-voices {
|
||||
padding: var(--space-xl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ========== 配音网格 ========== */
|
||||
.xx-voice-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@@ -20,86 +25,169 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.xx-voice-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 配音卡片 - V21 大圆角 ========== */
|
||||
.xx-voice {
|
||||
text-align: center;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 18px;
|
||||
background: white;
|
||||
padding: 14px;
|
||||
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.2s;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.xx-voice:hover {
|
||||
border-color: #4f46e5;
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.xx-voice.selected {
|
||||
border-color: #4f46e5;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
|
||||
}
|
||||
|
||||
/* 选中标记 */
|
||||
.xx-voice.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
top: -7px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
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);
|
||||
}
|
||||
|
||||
/* 音色图标 - 渐变圆形 */
|
||||
.voice-icon {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin: 0 auto 9px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 12px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
background: linear-gradient(135deg, #4f46e5, #6366f1);
|
||||
font-size: 26px;
|
||||
background: var(--gradient-primary);
|
||||
box-shadow: var(--shadow-primary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.xx-voice div {
|
||||
.xx-voice:hover .voice-icon {
|
||||
transform: scale(1.08);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
/* ========== 波形图样式 ========== */
|
||||
.waveform {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
height: 32px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.waveform-bar {
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--gradient-primary);
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.xx-voice:hover .waveform-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.xx-voice small {
|
||||
display: block;
|
||||
color: #64748b;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ========== 使用记录列表 ========== */
|
||||
.xx-voice-usage-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.xx-voice-usage-row {
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
padding: 13px;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.xx-voice-usage-row:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.xx-voice-usage-row b {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
color: var(--text-primary);
|
||||
font-weight: 850;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.xx-voice-usage-row p {
|
||||
margin: 5px 0 0;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
+246
-75
@@ -1,115 +1,257 @@
|
||||
/**
|
||||
* 全局样式变量
|
||||
* V21 设计系统 - 全局样式
|
||||
* 核心设计规范：Indigo 主色 / 大圆角 / 毛玻璃 / 渐变背景
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* 主色调 */
|
||||
--primary-color: #1890ff;
|
||||
--primary-hover: #40a9ff;
|
||||
--primary-active: #096dd9;
|
||||
/* ========== 主色调 - Indigo ========== */
|
||||
--primary-color: #4f46e5;
|
||||
--primary-hover: #6366f1;
|
||||
--primary-dark: #4338ca;
|
||||
--primary-soft: #eef2ff;
|
||||
--gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
|
||||
/* 状态色 */
|
||||
--success-color: #52c41a;
|
||||
--warning-color: #faad14;
|
||||
--error-color: #ff4d4f;
|
||||
--info-color: #1890ff;
|
||||
/* ========== 状态色 ========== */
|
||||
--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: #262626;
|
||||
--text-secondary: #595959;
|
||||
/* ========== 文字色 ========== */
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #64748b;
|
||||
--text-disabled: #bfbfbf;
|
||||
|
||||
/* 背景色 */
|
||||
/* ========== 背景色 ========== */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #fafafa;
|
||||
--bg-tertiary: #f5f5f5;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
|
||||
/* 边框和分割线 */
|
||||
--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;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 8px;
|
||||
/* ========== 圆角 - V21 大圆角 ========== */
|
||||
--radius-xs: 6px;
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 22px;
|
||||
--radius-xl: 28px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
|
||||
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* ========== 阴影 - 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);
|
||||
}
|
||||
|
||||
/* ========== 全局背景装饰层 ========== */
|
||||
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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
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%),
|
||||
#f8fafc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle, rgba(79, 70, 229, 0.1) 1px, transparent 1px);
|
||||
background-size: 38px 38px;
|
||||
opacity: 0.32;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
#root {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 通用工具类 */
|
||||
.text-center {
|
||||
/* ========== 页面通用布局 ========== */
|
||||
.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;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ========== 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;
|
||||
}
|
||||
|
||||
.xx-primary-btn:hover,
|
||||
.ant-btn-primary:hover {
|
||||
box-shadow: var(--shadow-hover) !important;
|
||||
transform: translateY(-1px);
|
||||
background: var(--gradient-primary) !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.xx-ghost-btn:hover,
|
||||
.ant-btn-default:hover {
|
||||
border-color: var(--primary-color) !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 卡片hover效果 */
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -118,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