<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:left_padding="16vp"
    ohos:right_padding="16vp"
    ohos:top_padding="16vp"
    >


    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"

        ohos:orientation="horizontal">
        <!-- 中间内容区域 -->
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:orientation="vertical"
            ohos:weight="1">

            <!-- 停车场名称和标签 -->
            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:alignment="center"
                ohos:bottom_margin="8vp"
                ohos:orientation="horizontal">

                <Text
                    ohos:id="$+id:parking_name"
                    ohos:height="match_content"
                    ohos:width="0vp"
                    ohos:end_margin="8vp"
                    ohos:text="停车场名称"
                    ohos:text_color="#FF000000"
                    ohos:text_size="16fp"
                    ohos:weight="1"/>

                <!-- 标签容器 -->
                <DirectionalLayout
                    ohos:id="$+id:tags_container"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:orientation="horizontal">
                </DirectionalLayout>
            </DirectionalLayout>

            <!-- 距离和地址 -->
            <Text
                ohos:id="$+id:parking_address"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:bottom_margin="8vp"
                ohos:text="0.8km | 地址信息"
                ohos:text_color="#FF666666"
                ohos:text_size="12fp"/>

            <!-- 统计信息：总车位、剩余车位、免费时长 -->
            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:alignment="center"
                ohos:orientation="horizontal">

                <!-- 总车位 -->
                <DirectionalLayout
                    ohos:height="match_content"
                    ohos:width="0vp"
                    ohos:alignment="center"
                    ohos:orientation="vertical"
                    ohos:weight="1">

                    <Text
                        ohos:id="$+id:text_total_place"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="2000"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF000000"
                        ohos:text_size="14fp"/>

                    <Text
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="总车位"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF666666"
                        ohos:text_size="12fp"/>
                </DirectionalLayout>

                <!-- 剩余车位 -->
                <DirectionalLayout
                    ohos:height="match_content"
                    ohos:width="0vp"
                    ohos:alignment="center"
                    ohos:orientation="vertical"
                    ohos:weight="1">

                    <Text
                        ohos:id="$+id:text_residue_place"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="50"
                        ohos:text_alignment="center"
                        ohos:text_color="#FA6332"
                        ohos:text_size="14fp"/>

                    <Text
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="剩余车位"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF666666"
                        ohos:text_size="12fp"/>
                </DirectionalLayout>

                <!-- 免费时长 -->
                <DirectionalLayout
                    ohos:height="match_content"
                    ohos:width="0vp"
                    ohos:alignment="center"
                    ohos:orientation="vertical"
                    ohos:weight="1">

                    <Text
                        ohos:id="$+id:text_free_duration"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="15分"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF000000"
                        ohos:text_size="14fp"/>

                    <Text
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:text="免费时长"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF666666"
                        ohos:text_size="12fp"/>
                </DirectionalLayout>
            </DirectionalLayout>
        </DirectionalLayout>

        <!-- 右侧导航按钮 -->
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:alignment="center"
            ohos:orientation="vertical"
            ohos:start_margin="8vp">

            <Image
                ohos:id="$+id:btn_navigate"
                ohos:height="48vp"
                ohos:width="48vp"
                ohos:image_src="$media:nav"
                ohos:scale_mode="stretch"/>

            <Text
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="导航"
                ohos:text_alignment="center"
                ohos:text_color="#FF000000"
                ohos:text_size="12fp"
                ohos:top_margin="4vp"/>
        </DirectionalLayout>

    </DirectionalLayout>

    <!-- 底边灰线 -->
    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="1vp"
        ohos:top_margin="16vp"
        ohos:width="match_parent"
        ohos:background_element="#FFE0E0E0"/>
</DirectionalLayout>

