feat: 优化个人页面样式和颜色配置
- 更新个人页面中菜单项的背景色和图标颜色,提升视觉效果 - 调整用户信息卡片和统计项的阴影效果及边框样式,增强层次感 - 优化颜色常量,提升文本和结构色的对比度,改善可读性 - 更新背景渐变色,提供更柔和的视觉体验
This commit is contained in:
@@ -152,12 +152,12 @@ export default function PersonalScreen() {
|
||||
<View style={styles.menuItemLeft}>
|
||||
<View style={[
|
||||
styles.menuIcon,
|
||||
{ backgroundColor: item.isDanger ? 'rgba(255,68,68,0.12)' : 'rgba(187,242,70,0.12)' }
|
||||
{ backgroundColor: item.isDanger ? 'rgba(255,68,68,0.12)' : 'rgba(135,206,235,0.15)' }
|
||||
]}>
|
||||
<Ionicons
|
||||
name={item.icon}
|
||||
size={20}
|
||||
color={item.isDanger ? colors.danger : colors.onPrimary}
|
||||
color={item.isDanger ? colors.danger : '#4682B4'}
|
||||
/>
|
||||
</View>
|
||||
<Text style={[styles.menuItemText, { color: colorTokens.text }]}>{item.title}</Text>
|
||||
@@ -336,11 +336,13 @@ const styles = StyleSheet.create({
|
||||
userInfoCard: {
|
||||
borderRadius: 16,
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 6,
|
||||
shadowColor: 'rgba(135,206,235,0.3)',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(135,206,235,0.1)',
|
||||
},
|
||||
userInfoContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -372,11 +374,13 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
shadowColor: 'rgba(135,206,235,0.25)',
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(135,206,235,0.08)',
|
||||
},
|
||||
statItem: {
|
||||
alignItems: 'center',
|
||||
@@ -390,6 +394,13 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 20,
|
||||
padding: 16,
|
||||
borderRadius: 16,
|
||||
shadowColor: 'rgba(135,206,235,0.2)',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(135,206,235,0.06)',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 20,
|
||||
|
||||
@@ -28,13 +28,13 @@ const tintColorDark = '#FFFFFF';
|
||||
|
||||
export const Colors = {
|
||||
light: {
|
||||
// 基础文本/背景
|
||||
text: '#11181C',
|
||||
textSecondary: palette.neutral300,
|
||||
textMuted: palette.neutral200,
|
||||
// 基础文本/背景(优化对比度)
|
||||
text: '#1A2027', // 更深的文本色,提高可读性
|
||||
textSecondary: '#4A5568', // 温和的次要文本色
|
||||
textMuted: '#718096', // 柔和的静音文本色
|
||||
background: '#FFFFFF',
|
||||
surface: '#FFFFFF',
|
||||
card: '#FFFFFF',
|
||||
card: 'rgba(255,255,255,0.95)', // 半透明卡片,与渐变背景融合
|
||||
|
||||
buttonBackground: palette.blue,
|
||||
|
||||
@@ -61,10 +61,10 @@ export const Colors = {
|
||||
datePickerNormal: palette.blue,
|
||||
datePickerSelected: palette.blueSecondary,
|
||||
|
||||
// 结构色
|
||||
border: palette.neutral100 + '33', // 20% 透明度
|
||||
separator: palette.neutral100 + '33',
|
||||
icon: '#687076',
|
||||
// 结构色(优化后的蓝色主题)
|
||||
border: 'rgba(135,206,235,0.2)', // 蓝色调边框
|
||||
separator: 'rgba(135,206,235,0.15)', // 更淡的分隔线
|
||||
icon: '#5A6C7D', // 蓝灰色图标
|
||||
|
||||
// Tab 相关(保持兼容)
|
||||
tabIconDefault: '#687076',
|
||||
@@ -72,15 +72,15 @@ export const Colors = {
|
||||
tabBarBackground: palette.ink, // tab 栏背景色
|
||||
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
|
||||
|
||||
// 页面氛围与装饰(新)
|
||||
// 页面氛围与装饰(优化后的蓝色配色方案)
|
||||
pageBackgroundEmphasis: '#F0F8FF', // 淡蓝色背景强调
|
||||
heroSurfaceTint: 'rgba(135,206,235,0.18)', // 蓝色调的表面色彩
|
||||
ornamentPrimary: 'rgba(187,242,70,0.22)',
|
||||
ornamentAccent: 'rgba(164,138,237,0.16)',
|
||||
heroSurfaceTint: 'rgba(135,206,235,0.12)', // 更柔和的蓝色调表面色彩
|
||||
ornamentPrimary: 'rgba(135,206,235,0.15)', // 与主色调和的装饰色
|
||||
ornamentAccent: 'rgba(70,130,180,0.12)', // 钢蓝色装饰,增加层次
|
||||
|
||||
// 统一背景渐变色(基于 StressAnalysisModal 的设计)
|
||||
backgroundGradientStart: '#d3e9eeff', // 浅蓝色起始 (与logo背景匹配)
|
||||
backgroundGradientEnd: '#ffffff', // 白色结束
|
||||
// 优化的背景渐变色(更柔和的蓝色过渡)
|
||||
backgroundGradientStart: '#E6F3FF', // 更柔和的浅蓝色起始
|
||||
backgroundGradientEnd: '#FAFCFF', // 带有微蓝调的白色结束
|
||||
},
|
||||
dark: {
|
||||
// 基础文本/背景
|
||||
|
||||
Reference in New Issue
Block a user