|
|
@@ -0,0 +1,140 @@
|
|
|
+import React, { Component } from "react"
|
|
|
+import { StyleSheet, Text, View, TextInput, Button } from "react-native"
|
|
|
+import NavigationUtil from "../navigator/NavigationUtil"
|
|
|
+import EvilIcons from "react-native-vector-icons/EvilIcons"
|
|
|
+import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
|
|
|
+import MyButtom from '../component/MyButton'
|
|
|
+
|
|
|
+export default class Loginpage extends Component {
|
|
|
+ componentDidMount() {
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ // NavigationUtil.resetToHomePage(this.props)
|
|
|
+ }, 5000)
|
|
|
+ }
|
|
|
+ componentWillMount() {
|
|
|
+ this.timer && clearTimeout(this.timer)
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View style={styles.container}>
|
|
|
+ <Text style={styles.loginTitle}>账号密码登录</Text>
|
|
|
+ <View style={styles.inputArea}>
|
|
|
+ <View style={styles.inputPhone}>
|
|
|
+ <View style={styles.inputLeft}>
|
|
|
+ <Text style={styles.inputLeftText}>+86</Text>
|
|
|
+ </View>
|
|
|
+ <View style={styles.inputRight}>
|
|
|
+ <TextInput
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ placeholderTextColor={{ color: "#999999" }}
|
|
|
+ style={styles.TextInput}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View style={styles.inputPass}>
|
|
|
+ <View style={styles.inputLeft}>
|
|
|
+ <EvilIcons
|
|
|
+ name={"unlock"}
|
|
|
+ size={38}
|
|
|
+ style={{ color: "#333333" }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View>
|
|
|
+ <TextInput
|
|
|
+ placeholder="请输入密码"
|
|
|
+ placeholderTextColor={{ color: "#999999" }}
|
|
|
+ style={styles.TextInput}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View style={styles.forgetPassArea}>
|
|
|
+ <Text>手机号注册登录</Text>
|
|
|
+ <Text>忘记密码</Text>
|
|
|
+ </View>
|
|
|
+ <View style={styles.loginBtnArea}>
|
|
|
+ <MyButtom
|
|
|
+ text={'登录'}
|
|
|
+ width={unitWidth * 502}
|
|
|
+ height={unitHeight * 84}
|
|
|
+ borderRadius={unitHeight * 84}
|
|
|
+ bgColor="#FA788A"
|
|
|
+ shadowBgc="rgba(250,120,138,1)"
|
|
|
+ style={{ fontSize: unitWidth * 32 }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ container: {
|
|
|
+ flex: 1,
|
|
|
+ paddingTop: getStatusBarHeight() + unitWidth * 138,
|
|
|
+ paddingLeft: unitWidth * 60,
|
|
|
+ paddingRight: unitWidth * 60,
|
|
|
+ },
|
|
|
+ loginTitle: {
|
|
|
+ fontSize: unitWidth * 38,
|
|
|
+ fontWeight: "bold",
|
|
|
+ color: "rgba(250,120,138,1)",
|
|
|
+ marginBottom: unitWidth * 70
|
|
|
+ },
|
|
|
+ inputArea: {
|
|
|
+ width: unitWidth * 628,
|
|
|
+ height: unitHeight * 236,
|
|
|
+ justifyContent: "space-between"
|
|
|
+ },
|
|
|
+ inputPhone: {
|
|
|
+ width: "100%",
|
|
|
+ height: unitHeight * 98,
|
|
|
+ borderRadius: unitWidth * 98,
|
|
|
+ borderWidth: unitWidth * 1,
|
|
|
+ borderColor: "#ccc",
|
|
|
+ flexDirection: "row"
|
|
|
+ },
|
|
|
+ inputLeft: {
|
|
|
+ marginTop: unitHeight * 9,
|
|
|
+ width: unitWidth * 147,
|
|
|
+ height: unitHeight * 80,
|
|
|
+ borderRightWidth: unitWidth * 1,
|
|
|
+ borderRightColor: "#ccc",
|
|
|
+ justifyContent: "center",
|
|
|
+ alignItems: "center"
|
|
|
+ },
|
|
|
+ inputRight: {
|
|
|
+ width: unitWidth * 480,
|
|
|
+ height: "100%",
|
|
|
+ },
|
|
|
+ TextInput: {
|
|
|
+ width: "100%",
|
|
|
+ height: "100%",
|
|
|
+ paddingLeft: unitWidth * 26,
|
|
|
+ fontSize: unitWidth * 28
|
|
|
+ },
|
|
|
+ inputPass: {
|
|
|
+ width: "100%",
|
|
|
+ height: unitHeight * 98,
|
|
|
+ borderRadius: unitWidth * 98,
|
|
|
+ borderWidth: unitWidth * 1,
|
|
|
+ borderColor: "#ccc",
|
|
|
+ flexDirection: "row"
|
|
|
+ },
|
|
|
+ forgetPassArea: {
|
|
|
+ flexDirection: "row",
|
|
|
+ justifyContent: "space-between",
|
|
|
+ width: "100%",
|
|
|
+ fontSize: unitWidth * 28,
|
|
|
+ color: "#333333",
|
|
|
+ marginTop: unitHeight * 28
|
|
|
+ },
|
|
|
+ loginBtnArea: {
|
|
|
+ width:"100%",
|
|
|
+ marginTop:unitHeight * 98,
|
|
|
+ height:unitHeight * 84,
|
|
|
+ justifyContent:'center',
|
|
|
+ alignItems:'center'
|
|
|
+ }
|
|
|
+
|
|
|
+})
|
杜鑫