175 lines
3.2 KiB
TypeScript
175 lines
3.2 KiB
TypeScript
/**
|
||
* 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,
|
||
},
|
||
}));
|