<?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:padding="12vp"
    ohos:left_margin="10vp"
    ohos:right_margin="10vp"
    ohos:bottom_margin="10vp"
    ohos:background_element="$graphic:background_circle_8_top">

    <!-- 第一行：商品名称和状态 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:alignment="center">

        <!-- 商品名称 -->
        <Text
            ohos:id="$+id:text_goods_name"
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:weight="0.8"
            ohos:text="商品名称"
            ohos:text_size="16fp"
            ohos:text_color="#FF000000"
            ohos:max_text_lines="2"/>

        <!-- 占位 -->
        <Component
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:weight="1.0"/>

        <!-- 状态文本 -->
        <Text
            ohos:id="$+id:text_status"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="已完成"
            ohos:text_size="14fp"
            ohos:text_color="#FF999999"/>
    </DirectionalLayout>

    <!-- 分割线 -->
    <Component
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:top_margin="12vp"
        ohos:background_element="#FFE5E5E5"/>

    <!-- 第二行：图标、车场名称、时间、金额 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:alignment="center"
        ohos:top_margin="12vp">

        <!-- 图标 -->
        <Image
            ohos:id="$+id:icon_tcjf"
            ohos:height="56vp"
            ohos:width="56vp"
            ohos:image_src="$media:tcjf"
            ohos:right_margin="10vp"/>
        <Image
            ohos:id="$+id:icon_ykxf"
            ohos:height="56vp"
            ohos:width="56vp"
            ohos:image_src="$media:ykxf"
            ohos:right_margin="10vp"/>

        <!-- 车场名称和时间容器 -->
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:weight="1.0"
            ohos:orientation="vertical">

            <!-- 车场名称 -->
            <Text
                ohos:id="$+id:text_park_name"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="车场名称"
                ohos:text_size="14fp"
                ohos:text_color="#FF000000"/>

            <!-- 支付时间 -->
            <Text
                ohos:id="$+id:text_pay_time"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="支付时间"
                ohos:text_size="14fp"
                ohos:text_color="#FF000000"
                ohos:top_margin="12vp"/>
        </DirectionalLayout>

        <!-- 金额 -->
        <Text
            ohos:id="$+id:text_amount"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="￥0.00"
            ohos:text_size="18fp"
            ohos:text_color="#FA6332"
            ohos:top_margin="-20vp"/>
    </DirectionalLayout>
</DirectionalLayout>

