import React from "react";
import { Image, StyleSheet, Text, View } from "react-native";
import { images } from "../../assets";
import { pxTransform } from "../../../../utils";

export default function HeaderBox() {
    return <View style={style.main}>
        <View style={style.qrcode_main}>
            <View style={style.qrcode_box}>
                <Image source={images.readlist} style={style.qrcode} />
            </View>
            <View style={style.qrcode_descript}>
                <Text style={style.descript_text}>
                    {`扫 码 进 入`}
                </Text>
                <Text style={style.descript_text}>
                    {`借 阅 清 单`}
                </Text>
            </View>
        </View>
        <View style={style.tip_box}>
            <Text style={style.tip_text}>
                {`优 质 图 书 畅 享 阅 读`}
            </Text>
        </View>
        <Image source={images.ip} style={style.ip} />
    </View>
}

const style = StyleSheet.create({
    main: {
        position: 'absolute',
        top: pxTransform(484),
        left: pxTransform(68),
        width: pxTransform(844),
        height: pxTransform(258),
        backgroundColor: "#FFFFFF",
        borderRadius: pxTransform(38)
    },
    qrcode_main: {
        marginLeft: pxTransform(43),
        // marginTop: pxTransform(31),
        marginTop: pxTransform(40),
        display: 'flex',
        flexDirection: 'row'
    },
    qrcode_box: {
        display: 'flex',
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: 'center',
        width: pxTransform(120),
        heigh: pxTransform(120),
        borderRadius: pxTransform(10),
        borderColor: `#8CD6AB`,
        borderWidth: pxTransform(2)
    },
    qrcode: {
        width: pxTransform(110),
        height: pxTransform(110)
    },
    qrcode_descript: {
        marginLeft: pxTransform(13.31),
        display: 'flex',
        flexDirection: 'column'
    },
    descript_text: {
        marginTop: pxTransform(6),
        fontSize: pxTransform(34.188)
    },
    tip_box: {
        marginTop: pxTransform(15),
        marginLeft: pxTransform(43),
        width: pxTransform(287),
        height: pxTransform(42),
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: `#8CD6AB`,
        borderRadius: pxTransform(8.55)
    },
    tip_text: {
        fontSize: pxTransform(25.641),
        color: `#FFFFFF`
    },
    ip: {
        position: 'absolute',
        top: pxTransform(-260),
        right: pxTransform(-40),
        width: pxTransform(554),
        height: pxTransform(550)
    }
})