diff --git a/src/screens/auth/LoginScreen.tsx b/src/screens/auth/LoginScreen.tsx index be15b39..835a7e2 100644 --- a/src/screens/auth/LoginScreen.tsx +++ b/src/screens/auth/LoginScreen.tsx @@ -5,7 +5,6 @@ import { StyleSheet, TouchableOpacity, InteractionManager, - Image, Dimensions, } from 'react-native'; import {useNavigation, useIsFocused} from '@react-navigation/native'; @@ -14,10 +13,9 @@ import {RootStackParamList} from '../../navigation/types'; import {Screen} from '../../components/common/Screen'; import {WaveBackground} from '../../components/common/WaveBackground'; import LinearGradient from 'react-native-linear-gradient'; -import Svg, {Path, Defs, LinearGradient as SvgLinearGradient, Stop} from 'react-native-svg'; import {useTheme} from '../../contexts/ThemeContext'; -const {width} = Dimensions.get('window'); +const {width, height} = Dimensions.get('window'); type LoginScreenNavigationProp = NativeStackNavigationProp< RootStackParamList, @@ -32,7 +30,6 @@ export const LoginScreen: React.FC = () => { const handleLogin = useCallback(() => { if (!isFocused) return; - // 使用 InteractionManager 确保所有交互和动画完成 InteractionManager.runAfterInteractions(() => { if (isFocused) { navigation.replace('Home'); @@ -41,107 +38,44 @@ export const LoginScreen: React.FC = () => { }, [navigation, isFocused]); return ( - - {/* 头部背景 */} - - - {/* 半透明波浪效果 */} - - - - - - - - - - 景旺冷冻仓 - - - 智能仓储管理系统 - - - - - {/* 不规则曲线背景 */} - - - - - - - - - - - - - {/* 主体内容 */} - - + {/* 背景区域 */} + + - - {/* Logo占位 */} - - + + + {/* 主内容区 */} + + {/* 标题区域 */} + + 景旺冷冻仓 + 智能仓储管理系统 + + + {/* Logo和按钮区域 */} + + {/* Logo */} + + JW - + {/* 登录按钮 */} - - 进入系统 - + 进入系统 @@ -160,63 +94,65 @@ export const LoginScreen: React.FC = () => { const styles = StyleSheet.create({ screen: { flex: 1, + backgroundColor: '#FFFFFF', }, - headerContainer: { - height: 280, - position: 'relative', - overflow: 'hidden', - }, - headerContent: { - position: 'absolute', - top: 60, - left: 0, - right: 0, - alignItems: 'center', - }, - headerTitle: { - fontSize: 32, - fontWeight: 'bold', - textShadowColor: 'rgba(0, 0, 0, 0.2)', - textShadowOffset: {width: 1, height: 1}, - textShadowRadius: 3, - }, - headerSubtitle: { - fontSize: 18, - marginTop: 8, - opacity: 0.9, - }, - curveContainer: { - position: 'absolute', - top: 200, - left: 0, - right: 0, - zIndex: 1, - }, - curve: { + backgroundContainer: { position: 'absolute', top: 0, + left: 0, + right: 0, }, - contentWrapper: { + contentContainer: { flex: 1, - marginTop: 160, }, - content: { - flex: 1, + titleContainer: { alignItems: 'center', - paddingTop: 40, + marginTop: height * 0.12, }, - logoContainer: { + title: { + fontSize: 32, + fontWeight: 'bold', + color: '#FFFFFF', + marginBottom: 8, + }, + subtitle: { + fontSize: 18, + color: '#FFFFFF', + opacity: 0.9, + }, + centerContent: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + paddingBottom: height * 0.1, + }, + logoWrapper: { + width: 90, + height: 90, + backgroundColor: '#F5F5F5', + borderRadius: 45, + justifyContent: 'center', + alignItems: 'center', marginBottom: 40, }, logoCircle: { - width: 120, - height: 120, - borderRadius: 60, + width: 80, + height: 80, + borderRadius: 40, + backgroundColor: '#FFFFFF', justifyContent: 'center', alignItems: 'center', + elevation: 2, + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.2, + shadowRadius: 1.41, }, logoText: { - fontSize: 40, + fontSize: 32, fontWeight: 'bold', }, loginButtonContainer: { @@ -235,25 +171,16 @@ const styles = StyleSheet.create({ loginButtonText: { fontSize: 18, fontWeight: '600', + color: '#FFFFFF', }, footer: { - padding: 20, + position: 'absolute', + bottom: 20, + left: 0, + right: 0, alignItems: 'center', }, footerText: { fontSize: 12, }, - gradientBackground: { - opacity: 0.95, - }, - waveOverlay: { - position: 'absolute', - width: '100%', - height: '100%', - opacity: 0.6, - }, - waveSvg: { - position: 'absolute', - top: 0, - }, }); \ No newline at end of file diff --git a/src/screens/home/HomeScreen.tsx b/src/screens/home/HomeScreen.tsx index 1274ffe..f200dd8 100644 --- a/src/screens/home/HomeScreen.tsx +++ b/src/screens/home/HomeScreen.tsx @@ -141,13 +141,7 @@ export const HomeScreen: React.FC = () => { {/* 主体内容 */} - - + {/* 快捷操作区 */} @@ -157,16 +151,14 @@ export const HomeScreen: React.FC = () => { style={[styles.actionCard]} onPress={() => navigation.navigate(item.route)}> - + - + {item.title} @@ -176,7 +168,7 @@ export const HomeScreen: React.FC = () => { {/* 图表区域 */} - + 库存占用情况 @@ -300,18 +292,21 @@ const styles = StyleSheet.create({ }, actionCard: { width: width / 2 - 24, + height: 120, borderRadius: 12, padding: 20, alignItems: 'center', + justifyContent: 'center', overflow: 'hidden', }, - iconGradient: { - width: 64, - height: 64, - borderRadius: 32, + iconContainer: { + width: 48, + height: 48, + borderRadius: 24, justifyContent: 'center', alignItems: 'center', marginBottom: 12, + backgroundColor: 'rgba(255, 255, 255, 0.2)', }, actionTitle: { fontSize: 16,