<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#FFFFFFFF"
    ohos:orientation="vertical">


    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="center"
        ohos:orientation="horizontal">


        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:left_margin="150vp"
            ohos:orientation="vertical">

            <!-- 车牌输入区域 -->
            <DirectionalLayout

                ohos:height="80vp"
                ohos:width="match_parent"
                ohos:alignment="center"
                ohos:orientation="horizontal">


                <!-- 特殊车牌输入框（隐藏） -->
                <TextField
                    ohos:id="$+id:special_plate_input"
                    ohos:height="50vp"
                    ohos:width="350vp"
                    ohos:background_element="#FFE2E2E2"
                    ohos:hint="请输入完整车牌"
                    ohos:text_size="16fp"
                    ohos:left_padding="10vp"
                    ohos:right_padding="10vp"
                    ohos:visibility="hide"/>

                <DirectionalLayout
                    ohos:id="$+id:license_plate_input_area"
                    ohos:height="match_content"
                    ohos:width="0"
                    ohos:alignment="center"
                    ohos:orientation="horizontal"
                    ohos:weight="1">

                    <!-- 省份输入框 -->
                    <Text
                        ohos:id="$+id:plate_province"
                        ohos:height="50vp"
                        ohos:width="36vp"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:focusable="focus_enable"
                        ohos:text="粤"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF333333"
                        ohos:text_size="16fp"/>

                    <!-- 字母输入框 -->
                    <Text
                        ohos:id="$+id:plate_letter"
                        ohos:height="50vp"
                        ohos:width="36vp"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:end_margin="8vp"
                        ohos:focusable="focus_enable"
                        ohos:start_margin="8vp"
                        ohos:text="B"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF333333"
                        ohos:text_size="16fp"/>

                    <!-- 分隔点 -->
                    <Text
                        ohos:height="match_content"
                        ohos:width="6vp"
                        ohos:end_margin="8vp"
                        ohos:text="·"
                        ohos:text_alignment="center"
                        ohos:text_color="#FF999999"
                        ohos:text_size="12fp"/>

                    <!-- 5个字符输入框 -->
                    <Text
                        ohos:id="$+id:plate_char1"
                        ohos:height="50vp"
                        ohos:width="36vp"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:end_margin="4vp"
                        ohos:focusable="focus_enable"
                        ohos:text=""
                        ohos:text_alignment="center"
                        ohos:text_color="#FF333333"
                        ohos:text_size="16fp"/>

                    <Text
                        ohos:id="$+id:plate_char2"
                        ohos:height="50vp"
                        ohos:width="36vp"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:end_margin="4vp"
                        ohos:focusable="focus_enable"
                        ohos:text=""
                        ohos:text_alignment="center"
                        ohos:text_color="#FF333333"
                        ohos:text_size="16fp"/>

                    <Text
                        ohos:id="$+id:plate_char3"
                        ohos:height="50vp"
                        ohos:width="36vp"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:end_margin="4vp"
                        ohos:focusable="focus_enable"
                        ohos:text=""
                        ohos:text_alignment="center"
                        ohos:text_color="#FF333333"
                        ohos:text_size="16fp"/>

                    <Text
                        ohos:id="$+id:plate_char4"
                        ohos:height="50vp"
                        ohos:width="36vp"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:end_margin="4vp"
                        ohos:focusable="focus_enable"
                        ohos:text=""
                        ohos:text_alignment="center"
                        ohos:text_color="#FF333333"
                        ohos:text_size="16fp"/>

                    <Text
                        ohos:id="$+id:plate_char5"
                        ohos:height="50vp"
                        ohos:width="36vp"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:end_margin="8vp"
                        ohos:focusable="focus_enable"
                        ohos:text=""
                        ohos:text_alignment="center"
                        ohos:text_color="#FF333333"
                        ohos:text_size="16fp"/>

                    <!-- 新能源选项 -->
                    <DirectionalLayout
                        ohos:id="$+id:plate_new_energy"
                        ohos:height="50vp"
                        ohos:width="50vp"
                        ohos:alignment="center"
                        ohos:background_element="#FFE2E2E2"
                        ohos:clickable="true"
                        ohos:corner_radius="5vp"
                        ohos:focusable="focus_enable"
                        ohos:orientation="vertical"
                        ohos:padding="4vp">

                        <Text
                            ohos:height="match_content"
                            ohos:width="match_content"
                            ohos:text="+"
                            ohos:text_alignment="center"
                            ohos:text_color="#FF999999"
                            ohos:text_size="20fp"/>

                        <Text
                            ohos:id="$+id:new_energy_text"
                            ohos:height="match_content"
                            ohos:width="match_content"
                            ohos:text="新能源"
                            ohos:text_alignment="center"
                            ohos:text_color="#FF999999"
                            ohos:text_size="10fp"/>
                    </DirectionalLayout>


                </DirectionalLayout>

            </DirectionalLayout>

            <!-- 切换特殊车牌按钮 -->
            <Text
                ohos:id="$+id:btn_switch_special"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:bottom_margin="15vp"
                ohos:clickable="true"
                ohos:focusable="focus_enable"
                ohos:layout_alignment="center"
                ohos:text="切换特殊车牌"
                ohos:text_alignment="center"
                ohos:text_color="#FF888888"
                ohos:text_size="14fp"/>

            <!-- 确认按钮 -->
            <Button
                ohos:id="$+id:btn_confirm"
                ohos:height="48vp"
                ohos:width="360vp"
                ohos:background_element="$graphic:button"
                ohos:text="确认"
                ohos:right_margin="20vp"
                ohos:left_margin="20vp"
                ohos:bottom_margin="10vp"
                ohos:text_color="#FFFFFFFF"
                ohos:text_size="16fp"/>

        </DirectionalLayout>

        <Image

            ohos:id="$+id:btn_close"
            ohos:top_margin="20vp"
            ohos:left_margin="100vp"
            ohos:layout_alignment="left"
            ohos:scale_mode="stretch"
            ohos:height="24vp"
            ohos:width="24vp"
            ohos:clickable="true"
            ohos:focusable="focus_enable"
            ohos:image_src="$media:close"/>
    </DirectionalLayout>


    <!-- 键盘区域 -->
    <DirectionalLayout
        ohos:id="$+id:keyboard_container"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="#FFE7E7E7"
        ohos:orientation="vertical"
        ohos:padding="8vp"
        ohos:top_padding="20vp"
        ohos:visibility="hide">

        <!-- 中文键盘容器 -->
        <DirectionalLayout
            ohos:id="$+id:chinese_keyboard"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:orientation="vertical"/>

        <!-- 英文键盘容器 -->
        <DirectionalLayout
            ohos:id="$+id:english_keyboard"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:orientation="vertical"/>
    </DirectionalLayout>

</DirectionalLayout>

