feat: 首页更新

pages/HomeScreen/components/GameMainMenus/styles.ts

@@ -1,4 +1,4 @@
-import { createThemeStyles } from '@/theme';
+import { createThemeStyles, createResponsiveThemeStyles } from '@/theme';
 import { Dimensions } from 'react-native';
 
 // const { width } = Dimensions.get('window');
@@ -10,7 +10,7 @@ import { Dimensions } from 'react-native';
 export const styles = createThemeStyles((colors) => ({
   container: {
     backgroundColor: colors.background,
-    paddingVertical: 10,
+    paddingTop: 5,
     borderBottomWidth: 1,
     borderBottomColor: colors.border,
   },
@@ -18,11 +18,11 @@ export const styles = createThemeStyles((colors) => ({
     paddingHorizontal: 12,
   },
   menuItem: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
     marginRight: 8,
-    borderRadius: 22,
-    backgroundColor: colors.backgroundSecondary,
+    borderRadius: 0,
+    backgroundColor: 'transparent',
     justifyContent: 'center',
     alignItems: 'center',
     elevation: 1,
@@ -30,18 +30,41 @@ export const styles = createThemeStyles((colors) => ({
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.1,
     shadowRadius: 2,
+    borderBottomColor: 'transparent',
+    borderBottomWidth: 2,
   },
   menuItemActive: {
-    backgroundColor: colors.primary,
+    // backgroundColor: `${colors.tint}15`, // 主题色 + 20% 透明度
     elevation: 2,
     shadowOpacity: 0.15,
+    borderBottomColor: colors.tint,
+    borderRadius: 0,
   },
   menuText: {
-    fontSize: 13,
+    fontSize: 14,
     color: colors.text,
     fontWeight: '600',
   },
   menuTextActive: {
-    color: '#FFFFFF',
+    color: colors.tint,
+  },
+  menuIcon: {
+    width: 30,
+    height: 30,
+    marginBottom: 4,
   },
 }));
+
+export const themeStyles = createResponsiveThemeStyles({
+  menuItemActive: {
+    backgroundColor: '',
+  },
+}, {
+  menuItemActive: {
+    backgroundColor: '',
+  },
+}, {
+  menuItemActive: {
+    backgroundColor: '',
+  },
+});