<?xml version="1.0" encoding="utf-8"?>
<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal">

    <PositionLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:id="$+id:main_body"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </PositionLayout>

    <!-- 主内容区域 - 垂直布局 -->
    <DirectionalLayout
        ohos:margin="10vp"
        ohos:id="$+id:main_content"
        ohos:height="match_parent"
        ohos:width="400vp"
        ohos:background_element="#FFFFFFFF"
        ohos:orientation="vertical">

        <DirectionalLayout
            ohos:id="$+id:header_bar"
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:alignment="left"
            ohos:background_element="$graphic:container_top"
            ohos:end_padding="16vp"
            ohos:orientation="horizontal"
            ohos:start_padding="16vp">

            <DirectionalLayout
                ohos:layout_alignment="center"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:alignment="center"
                ohos:orientation="horizontal">

                <Image ohos:image_src="$media:logo_white"
                       ohos:width="25vp"
                       ohos:height="25vp"
                       ohos:right_margin="10vp"
                       ohos:scale_mode="stretch"
                       ></Image>

                <!-- 标题文字 -->
                <Text
                    ohos:id="$+id:title_text"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:layout_alignment="vertical_center"
                    ohos:text="爱泊客.停车缴费"
                    ohos:text_weight="600"
                    ohos:text_color="#FFFFFFFF"
                    ohos:text_size="14fp"/>
            </DirectionalLayout>
        </DirectionalLayout>

        <!-- 页面滑动容器 -->
        <DirectionalLayout
            ohos:height="0vp"
            ohos:width="match_parent"
            ohos:background_element="$graphic:container_body"
            ohos:left_padding="1vp"
            ohos:right_padding="1vp"
            ohos:weight="1">

            <PageSlider
                ohos:id="$+id:page_slider"
                ohos:height="match_parent"
                ohos:width="match_parent"/>
        </DirectionalLayout>

        <!-- 底部导航栏 -->
        <DirectionalLayout
            ohos:height="64vp"
            ohos:width="match_parent">

            <DirectionalLayout
                ohos:top_margin="-1vp"
                ohos:height="64vp"
                ohos:width="match_parent"
                ohos:background_element="$graphic:container_bottom"
                ohos:bottom_padding="8vp"
                ohos:orientation="horizontal"
                ohos:top_padding="8vp">

                <!-- 找车位 -->
                <DirectionalLayout
                    ohos:id="$+id:nav_find_parking"
                    ohos:height="match_parent"
                    ohos:width="0vp"
                    ohos:alignment="center"
                    ohos:orientation="vertical"
                    ohos:weight="1">

                    <Image
                        ohos:id="$+id:icon_park"
                        ohos:height="24vp"
                        ohos:width="24vp"
                        ohos:scale_mode="stretch"
                        ohos:bottom_margin="4vp"
                        ohos:visibility="hide"
                        ohos:image_src="$media:park"/>

                    <Image
                        ohos:id="$+id:icon_park_1"
                        ohos:height="24vp"
                        ohos:width="24vp"
                        ohos:scale_mode="stretch"
                        ohos:bottom_margin="4vp"
                        ohos:image_src="$media:park_1"/>

                    <Text
                        ohos:id="$+id:text_park"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="找车位"
                        ohos:text_color="#FA6332"
                        ohos:text_size="12fp"/>
                </DirectionalLayout>

                <!-- 预约停车 -->
                <DirectionalLayout
                    ohos:id="$+id:nav_reserve_parking"
                    ohos:height="match_parent"
                    ohos:width="0vp"
                    ohos:alignment="center"
                    ohos:orientation="vertical"
                    ohos:weight="1">

                    <Image
                        ohos:id="$+id:icon_fee"
                        ohos:scale_mode="stretch"
                        ohos:height="24vp"
                        ohos:width="24vp"
                        ohos:bottom_margin="4vp"
                        ohos:image_src="$media:fee"/>
                    <Image
                        ohos:id="$+id:icon_fee_1"
                        ohos:scale_mode="stretch"
                        ohos:height="24vp"
                        ohos:width="24vp"
                        ohos:bottom_margin="4vp"
                        ohos:visibility="hide"
                        ohos:image_src="$media:fee_1"/>

                    <Text
                        ohos:id="$+id:text_fee"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="缴费记录"
                        ohos:text_color="#FF666666"
                        ohos:text_size="12fp"/>
                </DirectionalLayout>


                <!-- 我的 -->
                <DirectionalLayout
                    ohos:id="$+id:nav_my"
                    ohos:height="match_parent"
                    ohos:width="0vp"
                    ohos:alignment="center"
                    ohos:orientation="vertical"
                    ohos:weight="1">

                    <Image
                        ohos:id="$+id:icon_my"
                        ohos:height="24vp"
                        ohos:width="24vp"
                        ohos:scale_mode="stretch"
                        ohos:bottom_margin="4vp"
                        ohos:image_src="$media:my"/>

                    <Image
                        ohos:id="$+id:icon_my_1"
                        ohos:height="24vp"
                        ohos:width="24vp"
                        ohos:scale_mode="stretch"
                        ohos:bottom_margin="4vp"
                        ohos:visibility="hide"
                        ohos:image_src="$media:my_1"/>

                    <Text
                        ohos:id="$+id:text_my"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="我的"
                        ohos:text_color="#FF666666"
                        ohos:text_size="12fp"/>
                </DirectionalLayout>

                <!-- 当前位置 -->
                <DirectionalLayout
                    ohos:id="$+id:nav_current_location"
                    ohos:height="match_parent"
                    ohos:width="0vp"
                    ohos:alignment="center"
                    ohos:orientation="vertical"
                    ohos:weight="1">

                    <Image
                        ohos:id="$+id:icon_current_location"
                        ohos:scale_mode="stretch"
                        ohos:height="24vp"
                        ohos:width="24vp"
                        ohos:bottom_margin="4vp"
                        ohos:image_src="$media:location"/>

                    <Text
                        ohos:id="$+id:text_current_location"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="当前位置"
                        ohos:text_color="#FF666666"
                        ohos:text_size="12fp"/>
                </DirectionalLayout>
            </DirectionalLayout>
        </DirectionalLayout>

        <Button ohos:width="match_parent" ohos:visibility="hide" ohos:height="60vp" ohos:id="$+id:btn_hwid_sign_in" ohos:text="华为账号登录" ohos:layout_alignment="right|horizontal_center"  ></Button>
    </DirectionalLayout>

</StackLayout>
