allocatr/application/admin/view/order/add.html

<div class="full-height">
    <div class="overlay"></div> <!-- 遮罩层 -->
    <div class="content">
        <!-- 表单区域（占2/3） -->
        <div class="form-area">
            <div class="w-75">
                <div class="card-body">
                    <h5 class="card-title">录入订单</h5>
                    <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Customer')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <input id="c-customer" class="form-control" name="row[customer]" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Tel')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <input id="c-tel" data-rule="required" class="form-control" name="row[tel]" type="number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Area_id')}:</label>
                            <div class='col-xs-12 col-sm-8'>
                                <input id="c-area_id" class="form-control"  type="text" value="" />
                                <!-- 选项下拉框 -->
                                <ul id="address-list" class="dropdown-menu" style="display: none;"></ul>

                                <!-- 存储选择的 area_code -->
                                <input type="hidden" id="selected-area-code"  name="row[area_id]">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Address')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <input id="c-address" data-rule="required" class="form-control" name="row[address]" type="text" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Source')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <input id="c-source" data-rule="required" class="form-control" name="row[source]" type="number" value="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Item_title')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <input id="c-service_title" data-rule="required" class="form-control" name="row[service_title]" type="text" value="">

                                <!-- 选项下拉框 -->
                                <ul id="service-list" class="dropdown-menu" style="display: none;"></ul>

                                <!-- 存储选择的 area_code -->
                                <input type="hidden" id="selected-service_id"  name="row[service_id]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Detail')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <textarea id="c-detail" rows="4" style="width: 100%;resize: vertical" class="form-control" name="row[detail]"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Remark')}:</label>
                            <div class="col-xs-12 col-sm-8">

                                <textarea id="c-remark" rows="4" style="width: 100%;resize: vertical"  class="form-control" name="row[remark]" ></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">{:__('Images')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="input-group">
                                    <input id="c-images" class="form-control" size="50" name="row[images]" type="text">
                                    <div class="input-group-addon no-border no-padding">
                                        <span><button type="button" id="faupload-images" class="btn btn-danger faupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                    </div>
                                    <span class="msg-box n-right" for="c-images"></span>
                                </div>
                                <ul class="row list-inline faupload-preview" id="p-images"></ul>
                            </div>
                        </div>
                        <div class="form-group layer-footer">
                            <label class="control-label col-xs-12 col-sm-3"></label>
                            <div class="col-xs-12 col-sm-8">
                                <button type="submit" data-id="submit" class="btn btn-primary btn-embossed disabled">录入</button>
                                <button type="submit" data-id="submit_save" class="btn btn-primary btn-embossed disabled">录入并保留基本信息</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        <!-- 功能区（占1/3） -->
        <div class="function-area ">
            <h5 class="text-center">快速输入</h5>
            <div class="form-floating">
                <textarea  rows="8" style="width: 100%;resize: vertical" class="form-control" placeholder="复制内容，快速输入" id="floatingTextarea"></textarea>
            </div>
        </div>
    </div>
</div>
<script>

</script>
<style>
    .full-height {
        height: 100vh;
        width: 100vw;
        background: #fff;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3); /* 背景黑色遮罩 */
        z-index: -1;
    }
    .card {
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .card-body {
        padding: 2rem;
    }
    .content {
        display: flex;
        height: 100vh;
    }
    .form-area {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .function-area {
        flex: 1;
        padding: 2rem;
        background-color: #f8f9fa;
        /*border-left: 1px solid #ddd;*/
    }
    .dropdown-menu {
        position: absolute;
        z-index: 1000;
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        margin: 6px 12px;
    }
    .dropdown-item {
        padding: 8px;
        cursor: pointer;
    }
    .suggestion-item:hover {
        background-color: #f0f0f0;
    }
</style>