import React, { Component } from "react"
import { StyleSheet, Text, View,Image } from "react-native"
import { unitWidth, unitHeight } from "../utils/AdapterUtil";
import AntDesign from "react-native-vector-icons/AntDesign"

export default class WelcomePage extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.starArea}>
                    <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>您目前的信用等级V1</Text>
                    <View style={styles.starList}>
                        <View style={{ alignItems: "center" }}>
                            <AntDesign
                                name={"star"}
                                size={30}
                                style={{ color: "#FFB664" }}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>V1</Text>
                        </View>
                        <View style={{ alignItems: "center" }}>
                            <AntDesign
                                name={"staro"}
                                size={30}
                                style={styles.starItem}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>V2</Text>
                        </View>
                        <View style={{ alignItems: "center" }}>
                            <AntDesign
                                name={"staro"}
                                size={30}
                                style={styles.starItem}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>V3</Text>
                        </View>
                        <View style={{ alignItems: "center" }}>
                            <AntDesign
                                name={"staro"}
                                size={30}
                                style={styles.starItem}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>V4</Text>
                        </View>
                        <View style={{ alignItems: "center" }}>
                            <AntDesign
                                name={"staro"}
                                size={30}
                                style={styles.starItem}
                            />
                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>V5</Text>
                        </View>
                    </View>
                    <Text style={{ fontSize: unitWidth * 24, color: "#333333" }}>信用等级越高，代表您的综合竞争力越高哦</Text>
                </View>
                <View style={styles.bottomList}>
                    <View style={styles.bottomIconItem}>
                        <Image
                            source={require("../../static/gift.png")}
                            style={styles.imgIcon}
                        />
                        <Text style={{ fontSize: unitWidth * 24, color: "#666666",marginTop:unitHeight * 30 }}>实名认证</Text>
                    </View>
                    <View style={styles.bottomIconItem}>
                        <Image
                            source={require("../../static/gift.png")}
                            style={styles.imgIcon}
                        />
                        <Text style={{ fontSize: unitWidth * 24, color: "#666666",marginTop:unitHeight * 30 }}>工作认证</Text>
                    </View>
                    <View style={styles.bottomIconItem}>
                        <Image
                            source={require("../../static/gift.png")}
                            style={styles.imgIcon}
                        />
                        <Text style={{ fontSize: unitWidth * 24, color: "#666666",marginTop:unitHeight * 30 }}>学历认证</Text>
                    </View>
                    <View style={styles.bottomIconItem}>
                        <Image
                            source={require("../../static/gift.png")}
                            style={styles.imgIcon}
                        />
                        <Text style={{ fontSize: unitWidth * 24, color: "#666666",marginTop:unitHeight * 30 }}>房产认证</Text>
                    </View>
                    <View style={styles.bottomIconItem}>
                        <Image
                            source={require("../../static/gift.png")}
                            style={styles.imgIcon}
                        />
                        <Text style={{ fontSize: unitWidth * 24, color: "#666666",marginTop:unitHeight * 30 }}>车辆认证</Text>
                    </View>
                
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center"
    },
    starArea: {
        width: "100%",
        height: unitHeight * 287,
        backgroundColor: "#fff",
        alignItems: "center",
        paddingTop: unitHeight * 31,
        marginBottom: unitHeight * 20
    },
    starList: {
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: unitWidth * 64,
        paddingRight: unitWidth * 64,
        marginTop: unitHeight * 50,
        marginBottom: unitHeight * 30
    },
    starItem: {
        color: "#ccc"
    },
    bottomList: {
        width: "100%",
        backgroundColor: "#fff",
        flexDirection: "row",
        justifyContent:"space-between",
        paddingLeft:unitWidth * 40,
        paddingRight:unitWidth * 40
    },
    bottomIconItem:{
        width:unitWidth * 110,
        height:unitHeight * 157,
        justifyContent:"center",
        alignItems:"center"
    }
})