<?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="horizontal"
    ohos:padding="12vp"
    ohos:bottom_margin="12vp"
    ohos:background_element="#FFFFFFFF"
    ohos:border_radius="8vp"
    ohos:shadow="2">

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

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

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

            <!-- 标签容器 -->
            <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:text="0.8km | 地址信息"
            ohos:text_color="#FF666666"
            ohos:text_size="12fp"
            ohos:bottom_margin="8vp"/>

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

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

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

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

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

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

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

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

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

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

    <!-- 右侧导航按钮 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="vertical"
        ohos:alignment="center"
        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_color="#FF000000"
            ohos:text_size="12fp"
            ohos:text_alignment="center"
            ohos:top_margin="4vp"/>
    </DirectionalLayout>
</DirectionalLayout>

