fshwcar/entry/src/main/resources/base/layout/ability_main.xml

<?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="5vp"
        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="56vp"
            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">

                <!-- P图标圆圈 -->
                <Text
                    ohos:id="$+id:icon_parking"
                    ohos:height="22vp"
                    ohos:width="22vp"
                    ohos:background_element="$graphic:background_circle_16"
                    ohos:end_margin="8vp"
                    ohos:text="P"
                    ohos:text_alignment="center"
                    ohos:text_color="#FA6332"
                    ohos:text_size="18fp"/>

                <!-- 标题文字 -->
                <Text
                    ohos:id="$+id:title_text"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:text="爱泊客 - 停车缴费"
                    ohos:text_color="#FFFFFFFF"
                    ohos:text_size="18fp"/>
            </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_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_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_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>
    </DirectionalLayout>

</StackLayout>