145 lines
2.8 KiB
JavaScript
145 lines
2.8 KiB
JavaScript
|
// auth-design 公共样式配置
|
||
|
|
export const commonStyles = {
|
||
|
|
// 容器样式
|
||
|
|
container: {
|
||
|
|
base: 'auth-demo-container',
|
||
|
|
classes: {
|
||
|
|
border: '1px solid var(--vp-c-divider)',
|
||
|
|
background: 'var(--vp-c-bg-soft)',
|
||
|
|
borderRadius: '12px',
|
||
|
|
padding: '1.5rem',
|
||
|
|
margin: '1.5rem 0',
|
||
|
|
fontFamily: 'var(--vp-font-family-base)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 标题样式
|
||
|
|
header: {
|
||
|
|
title: {
|
||
|
|
fontWeight: '700',
|
||
|
|
fontSize: '1.2rem',
|
||
|
|
marginBottom: '0.3rem',
|
||
|
|
background: 'linear-gradient(120deg, var(--vp-c-brand), #9c27b0)',
|
||
|
|
WebkitBackgroundClip: 'text',
|
||
|
|
WebkitTextFillColor: 'transparent'
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
color: 'var(--vp-c-text-2)',
|
||
|
|
fontSize: '0.9rem'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 按钮样式
|
||
|
|
button: {
|
||
|
|
base: 'auth-demo-btn',
|
||
|
|
primary: 'auth-demo-btn-primary',
|
||
|
|
variants: {
|
||
|
|
primary: {
|
||
|
|
background: 'var(--vp-c-brand)',
|
||
|
|
color: 'white'
|
||
|
|
},
|
||
|
|
success: {
|
||
|
|
background: '#22c55e',
|
||
|
|
color: 'white'
|
||
|
|
},
|
||
|
|
danger: {
|
||
|
|
background: '#ef4444',
|
||
|
|
color: 'white'
|
||
|
|
},
|
||
|
|
secondary: {
|
||
|
|
background: '#64748b',
|
||
|
|
color: 'white'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 卡片样式
|
||
|
|
card: {
|
||
|
|
base: 'auth-demo-card',
|
||
|
|
background: 'var(--vp-c-bg)',
|
||
|
|
border: '1px solid var(--vp-c-divider)',
|
||
|
|
borderRadius: '10px',
|
||
|
|
padding: '1.25rem'
|
||
|
|
},
|
||
|
|
|
||
|
|
// 代码块样式
|
||
|
|
codeBlock: {
|
||
|
|
background: '#1e293b',
|
||
|
|
color: '#e2e8f0',
|
||
|
|
fontFamily: "'Courier New', monospace",
|
||
|
|
fontSize: '0.8rem',
|
||
|
|
lineHeight: '1.6',
|
||
|
|
padding: '0.75rem',
|
||
|
|
borderRadius: '6px'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 动画配置
|
||
|
|
export const animations = {
|
||
|
|
fadeIn: {
|
||
|
|
name: 'fadeIn',
|
||
|
|
css: `
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; }
|
||
|
|
to { opacity: 1; }
|
||
|
|
}
|
||
|
|
`
|
||
|
|
},
|
||
|
|
slideIn: {
|
||
|
|
name: 'slideIn',
|
||
|
|
css: `
|
||
|
|
@keyframes slideIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(10px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`
|
||
|
|
},
|
||
|
|
pulse: {
|
||
|
|
name: 'pulse',
|
||
|
|
css: `
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { transform: scale(1); }
|
||
|
|
50% { transform: scale(1.05); }
|
||
|
|
}
|
||
|
|
`
|
||
|
|
},
|
||
|
|
bounce: {
|
||
|
|
name: 'bounce',
|
||
|
|
css: `
|
||
|
|
@keyframes bounce {
|
||
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||
|
|
50% { transform: translateX(-50%) translateY(-5px); }
|
||
|
|
}
|
||
|
|
`
|
||
|
|
},
|
||
|
|
spin: {
|
||
|
|
name: 'spin',
|
||
|
|
css: `
|
||
|
|
@keyframes spin {
|
||
|
|
from { transform: rotate(0deg); }
|
||
|
|
to { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 颜色配置
|
||
|
|
export const colors = {
|
||
|
|
success: '#22c55e',
|
||
|
|
warning: '#f59e0b',
|
||
|
|
danger: '#ef4444',
|
||
|
|
info: '#3b82f6',
|
||
|
|
purple: '#8b5cf6'
|
||
|
|
}
|
||
|
|
|
||
|
|
// 响应式断点
|
||
|
|
export const breakpoints = {
|
||
|
|
mobile: '768px'
|
||
|
|
}
|