update pay ui
This commit is contained in:
314
src/views/StockOverview/theme/glassTheme.js
Normal file
314
src/views/StockOverview/theme/glassTheme.js
Normal file
@@ -0,0 +1,314 @@
|
||||
/**
|
||||
* Glassmorphism 主题系统 - Modern Spatial Design
|
||||
*
|
||||
* 设计理念：打造漂浮在深空中的半透明玻璃态数据终端
|
||||
* 强调光影深度、弥散背景光和极致圆角
|
||||
*/
|
||||
|
||||
// 极光背景渐变配置
|
||||
export const auroraGradients = {
|
||||
// 主背景 - 深空极光
|
||||
primary: `
|
||||
radial-gradient(ellipse at 20% 0%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 0%, rgba(74, 144, 226, 0.12) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 40% 100%, rgba(131, 58, 180, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 60% 50%, rgba(29, 78, 216, 0.08) 0%, transparent 50%),
|
||||
linear-gradient(180deg, #0a0a0f 0%, #0d0d14 50%, #0a0a0f 100%)
|
||||
`,
|
||||
// 轻量版 - 用于嵌套组件
|
||||
light: `
|
||||
radial-gradient(ellipse at 50% 0%, rgba(120, 119, 198, 0.08) 0%, transparent 70%),
|
||||
linear-gradient(180deg, rgba(15, 15, 25, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%)
|
||||
`,
|
||||
// 高亮版 - 用于活跃状态
|
||||
highlight: `
|
||||
radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 30% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%)
|
||||
`,
|
||||
};
|
||||
|
||||
// 毛玻璃效果配置
|
||||
export const glassEffect = {
|
||||
// 标准玻璃卡片
|
||||
card: {
|
||||
bg: 'rgba(255, 255, 255, 0.03)',
|
||||
backdropFilter: 'blur(20px) saturate(180%)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)',
|
||||
borderRadius: '24px',
|
||||
boxShadow: `
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05)
|
||||
`,
|
||||
},
|
||||
// 轻量玻璃 - 用于内部元素
|
||||
light: {
|
||||
bg: 'rgba(255, 255, 255, 0.02)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: '16px',
|
||||
},
|
||||
// 强调玻璃 - 用于重要元素
|
||||
accent: {
|
||||
bg: 'rgba(139, 92, 246, 0.1)',
|
||||
backdropFilter: 'blur(16px) saturate(200%)',
|
||||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||||
borderRadius: '20px',
|
||||
boxShadow: '0 4px 24px rgba(139, 92, 246, 0.15)',
|
||||
},
|
||||
// 悬浮玻璃 - 用于弹出层
|
||||
floating: {
|
||||
bg: 'rgba(20, 20, 30, 0.9)',
|
||||
backdropFilter: 'blur(24px) saturate(200%)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: '20px',
|
||||
boxShadow: `
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05)
|
||||
`,
|
||||
},
|
||||
};
|
||||
|
||||
// 发光效果配置
|
||||
export const glowEffects = {
|
||||
// 文字发光
|
||||
textGlow: (color = '#8b5cf6') => ({
|
||||
textShadow: `0 0 20px ${color}60, 0 0 40px ${color}30`,
|
||||
}),
|
||||
// 边框发光
|
||||
borderGlow: (color = '#8b5cf6') => ({
|
||||
boxShadow: `0 0 20px ${color}30, inset 0 0 20px ${color}10`,
|
||||
}),
|
||||
// 图标发光
|
||||
iconGlow: (color = '#8b5cf6') => ({
|
||||
filter: `drop-shadow(0 0 8px ${color}80)`,
|
||||
}),
|
||||
// 数据发光 - 用于重要数值
|
||||
dataGlow: {
|
||||
up: { textShadow: '0 0 20px rgba(239, 68, 68, 0.5)' },
|
||||
down: { textShadow: '0 0 20px rgba(34, 197, 94, 0.5)' },
|
||||
neutral: { textShadow: '0 0 15px rgba(148, 163, 184, 0.3)' },
|
||||
},
|
||||
};
|
||||
|
||||
// 颜色系统
|
||||
export const colors = {
|
||||
// 主要颜色
|
||||
primary: {
|
||||
50: 'rgba(139, 92, 246, 0.1)',
|
||||
100: 'rgba(139, 92, 246, 0.2)',
|
||||
200: 'rgba(139, 92, 246, 0.3)',
|
||||
300: '#a78bfa',
|
||||
400: '#8b5cf6',
|
||||
500: '#7c3aed',
|
||||
},
|
||||
// 背景色
|
||||
background: {
|
||||
primary: '#0a0a0f',
|
||||
secondary: '#0d0d14',
|
||||
tertiary: '#12121a',
|
||||
card: 'rgba(255, 255, 255, 0.03)',
|
||||
hover: 'rgba(255, 255, 255, 0.06)',
|
||||
},
|
||||
// 文字颜色
|
||||
text: {
|
||||
primary: 'rgba(255, 255, 255, 0.95)',
|
||||
secondary: 'rgba(255, 255, 255, 0.7)',
|
||||
tertiary: 'rgba(255, 255, 255, 0.5)',
|
||||
muted: 'rgba(255, 255, 255, 0.35)',
|
||||
},
|
||||
// 边框颜色
|
||||
border: {
|
||||
primary: 'rgba(255, 255, 255, 0.08)',
|
||||
secondary: 'rgba(255, 255, 255, 0.05)',
|
||||
accent: 'rgba(139, 92, 246, 0.3)',
|
||||
},
|
||||
// 涨跌颜色
|
||||
market: {
|
||||
up: '#ef4444',
|
||||
upGlow: 'rgba(239, 68, 68, 0.5)',
|
||||
upBg: 'rgba(239, 68, 68, 0.1)',
|
||||
down: '#22c55e',
|
||||
downGlow: 'rgba(34, 197, 94, 0.5)',
|
||||
downBg: 'rgba(34, 197, 94, 0.1)',
|
||||
neutral: '#94a3b8',
|
||||
},
|
||||
// 强调色
|
||||
accent: {
|
||||
purple: '#8b5cf6',
|
||||
blue: '#3b82f6',
|
||||
cyan: '#06b6d4',
|
||||
pink: '#ec4899',
|
||||
orange: '#f97316',
|
||||
},
|
||||
};
|
||||
|
||||
// 动画配置
|
||||
export const animations = {
|
||||
// 极光动画 CSS
|
||||
auroraKeyframes: `
|
||||
@keyframes aurora {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
`,
|
||||
// 呼吸发光
|
||||
breatheKeyframes: `
|
||||
@keyframes breathe {
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
`,
|
||||
// 浮动
|
||||
floatKeyframes: `
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
// 交互效果
|
||||
export const interactions = {
|
||||
// 卡片悬浮效果
|
||||
cardHover: {
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: `
|
||||
0 20px 40px rgba(0, 0, 0, 0.4),
|
||||
0 0 30px rgba(139, 92, 246, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1)
|
||||
`,
|
||||
borderColor: 'rgba(139, 92, 246, 0.3)',
|
||||
},
|
||||
// 按钮悬浮
|
||||
buttonHover: {
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 10px 20px rgba(139, 92, 246, 0.2)',
|
||||
},
|
||||
// 列表项悬浮
|
||||
listItemHover: {
|
||||
bg: 'rgba(255, 255, 255, 0.05)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
};
|
||||
|
||||
// 预设样式组合 - 可直接用于 Chakra sx prop
|
||||
export const presets = {
|
||||
// 页面容器
|
||||
pageContainer: {
|
||||
minH: '100vh',
|
||||
bg: colors.background.primary,
|
||||
backgroundImage: auroraGradients.primary,
|
||||
backgroundAttachment: 'fixed',
|
||||
color: colors.text.primary,
|
||||
},
|
||||
// 主卡片
|
||||
glassCard: {
|
||||
...glassEffect.card,
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
_hover: interactions.cardHover,
|
||||
},
|
||||
// 内容区块
|
||||
contentSection: {
|
||||
...glassEffect.light,
|
||||
p: 5,
|
||||
},
|
||||
// 标题样式
|
||||
sectionTitle: {
|
||||
fontSize: 'lg',
|
||||
fontWeight: 'bold',
|
||||
color: colors.text.primary,
|
||||
...glowEffects.textGlow(colors.accent.purple),
|
||||
letterSpacing: '0.5px',
|
||||
},
|
||||
// 数据标签
|
||||
dataLabel: {
|
||||
fontSize: 'xs',
|
||||
color: colors.text.tertiary,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '1px',
|
||||
},
|
||||
// 上涨数值
|
||||
valueUp: {
|
||||
color: colors.market.up,
|
||||
fontWeight: 'bold',
|
||||
...glowEffects.dataGlow.up,
|
||||
},
|
||||
// 下跌数值
|
||||
valueDown: {
|
||||
color: colors.market.down,
|
||||
fontWeight: 'bold',
|
||||
...glowEffects.dataGlow.down,
|
||||
},
|
||||
};
|
||||
|
||||
// 指标提示样式
|
||||
export const tooltipStyles = {
|
||||
container: {
|
||||
bg: 'rgba(15, 15, 25, 0.95)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.5)',
|
||||
p: 3,
|
||||
},
|
||||
title: {
|
||||
color: colors.accent.purple,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 'sm',
|
||||
mb: 1,
|
||||
},
|
||||
description: {
|
||||
color: colors.text.secondary,
|
||||
fontSize: 'xs',
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
};
|
||||
|
||||
// 工具函数：获取涨跌颜色
|
||||
export const getMarketColor = (value) => {
|
||||
if (value > 0) return colors.market.up;
|
||||
if (value < 0) return colors.market.down;
|
||||
return colors.market.neutral;
|
||||
};
|
||||
|
||||
// 工具函数：获取涨跌背景
|
||||
export const getMarketBg = (value) => {
|
||||
if (value > 0) return colors.market.upBg;
|
||||
if (value < 0) return colors.market.downBg;
|
||||
return 'rgba(148, 163, 184, 0.1)';
|
||||
};
|
||||
|
||||
// 工具函数：获取涨跌发光
|
||||
export const getMarketGlow = (value) => {
|
||||
if (value > 0) return glowEffects.dataGlow.up;
|
||||
if (value < 0) return glowEffects.dataGlow.down;
|
||||
return glowEffects.dataGlow.neutral;
|
||||
};
|
||||
|
||||
export default {
|
||||
auroraGradients,
|
||||
glassEffect,
|
||||
glowEffects,
|
||||
colors,
|
||||
animations,
|
||||
interactions,
|
||||
presets,
|
||||
tooltipStyles,
|
||||
getMarketColor,
|
||||
getMarketBg,
|
||||
getMarketGlow,
|
||||
};
|
||||
Reference in New Issue
Block a user