feat: 首页更新

pages/HomeScreen/components/GameSubMenus/styles.ts

@@ -0,0 +1,174 @@
+/**
+ * GameSubMenus 组件样式
+ * 支持水平和竖直两种布局
+ */
+
+import { createThemeStyles } from '@/theme';
+
+export const styles = createThemeStyles((colors) => ({
+  // ========== 容器样式 ==========
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+
+  // ========== 水平布局样式 ==========
+  horizontalContainer: {
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    backgroundColor: colors.background,
+  },
+
+  horizontalScrollView: {
+    flexGrow: 0,
+  },
+
+  // ========== 竖直布局样式 ==========
+  verticalContainer: {
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: colors.background,
+  },
+
+  verticalScrollView: {
+    flexGrow: 0,
+  },
+
+  // ========== 菜单项样式 ==========
+  menuItem: {
+    minWidth: 90,
+    height: 33,
+    marginHorizontal: 6,
+    paddingHorizontal: 8,
+    // paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: '#f6f6f7',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+
+  menuItemActive: {
+    backgroundColor: colors.primary,
+  },
+
+  menuItemVertical: {
+    width: 120,
+    height: 120,
+    marginBottom: 12,
+    marginHorizontal: 0,
+  },
+
+  menuIcon: {
+    height: 16,
+    width: 48,
+    // 宽度由 Image 组件根据 autoMeasure 自动计算
+    resizeMode: 'contain',
+  },
+
+  menuText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.text + '80',
+    textAlign: 'center',
+    // marginTop: 4,
+  },
+
+  menuTextActive: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+
+  // ========== 弹窗样式 ==========
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+
+  modalContent: {
+    backgroundColor: colors.background,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingTop: 16,
+    paddingBottom: 24,
+    maxHeight: '70%',
+  },
+
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.text,
+  },
+
+  modalCloseButton: {
+    padding: 8,
+  },
+
+  modalGrid: {
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+
+  modalGridItem: {
+    flex: 1,
+    margin: 6,
+    height: 120,
+    borderRadius: 12,
+    backgroundColor: colors.card,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+  },
+
+  modalGridItemActive: {
+    backgroundColor: colors.primary,
+  },
+
+  modalGridIcon: {
+    // 只设置高度，宽度由 Image 组件根据 adaptiveMode="height" 自动计算
+    height: 60,
+    marginBottom: 8,
+    // 注意：resizeMode 不应该在样式中，应该作为 Image 组件的 prop
+  },
+
+  modalGridText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.text + '80',
+    textAlign: 'center',
+  },
+
+  modalGridTextActive: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+
+  // ========== 加载状态 ==========
+  skeleton: {
+    backgroundColor: colors.card,
+    borderRadius: 12,
+  },
+
+  skeletonHorizontal: {
+    width: 100,
+    height: 96,
+    marginHorizontal: 6,
+  },
+
+  skeletonVertical: {
+    width: 120,
+    height: 120,
+    marginBottom: 12,
+  },
+}));