<?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:height="match_parent"
        ohos:width="match_parent">
    </PositionLayout>

    <!-- 主内容区域 - 水平布局 -->
    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:margin="10vp">

        <!-- 左侧内容区域 - 垂直布局 -->
        <DirectionalLayout
            ohos:id="$+id:main_left"
            ohos:height="match_parent"
            ohos:width="400vp"
            ohos:orientation="vertical">

        <DirectionalLayout
            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:height="match_content"
                ohos:width="match_parent"
                ohos:alignment="left"
                ohos:layout_alignment="center"
                ohos:orientation="horizontal">

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

                <!-- 标题文字 -->
                <Text
                    ohos:id="$+id:title_text"
                    ohos:height="match_content"
                    ohos:width="0"
                    ohos:weight="1"
                    ohos:layout_alignment="vertical_center"
                    ohos:text="爱泊客.停车缴费"
                    ohos:text_color="#FFFFFFFF"
                    ohos:text_size="14fp"
                    ohos:text_weight="600"/>
                <Image
                    ohos:id="$+id:quit"
                    ohos:height="25vp"
                    ohos:width="25vp"
                    ohos:image_src="$media:logout"
                    ohos:scale_mode="stretch"

                    ></Image>

            </DirectionalLayout>
        </DirectionalLayout>

        <!-- 页面滑动容器 -->
        <DirectionalLayout
            ohos:bottom_padding="10vp"
            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"
            ohos:background_element="$graphic:container_bottom"
            ohos:bottom_padding="8vp"
            ohos:orientation="horizontal"
            ohos:top_margin="8vp"
            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:bottom_margin="4vp"
                    ohos:image_src="$media:park"
                    ohos:scale_mode="stretch"
                    ohos:visibility="hide"/>

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

                <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_charge"
                ohos:height="match_parent"
                ohos:width="0vp"
                ohos:alignment="center"
                ohos:orientation="vertical"
                ohos:weight="1">

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

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

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

            <!-- 缴费记录 -->
            <DirectionalLayout
                ohos:id="$+id:nav_order"
                ohos:height="match_parent"
                ohos:width="0vp"
                ohos:alignment="center"
                ohos:orientation="vertical"
                ohos:weight="1">

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

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

                <Text
                    ohos:id="$+id:text_order"
                    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:height="24vp"
                    ohos:width="24vp"
                    ohos:bottom_margin="4vp"
                    ohos:image_src="$media:location"
                    ohos:scale_mode="stretch"/>

                <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>

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

        <!-- 右侧详情区域 -->
        <DirectionalLayout
            ohos:id="$+id:main_right"
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:left_margin="10vp"
            ohos:background_element="#FFFFFFFF"
            ohos:visibility="hide">
            <!-- 详情组件将动态添加到这里 -->
        </DirectionalLayout>
    </DirectionalLayout>

    <!-- Loading组件放在最后，确保在最上层显示 -->
    <com.fujica.abk.component.LoadingComponent
        ohos:id="$+id:loading_component"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
</StackLayout>
