mtb_dcatadmin_plus/resources/views/distributor/widgets/infolist.blade.php

<style>
    .infolist dt {
        font-size: 14px;
    }

    .infolist dd {
        margin-bottom: 10px;
        color: #6c757d !important;
    }

    .infolist .card-footer {
        margin: 2px;
    }
</style>
<div class="infolist">
    <div class="card shadow">
        <div class="card-header with-border">
            <h3 class="card-title">
                <i class="feather icon-file-text lead"></i>
                订单信息
            </h3>
        </div>
        <div class="card-body">
            {{--<h5 class="card-title">订单信息展示</h5>--}}
            <h6 class="card-subtitle mb-2 text-muted">订单说明，订单说明，订单说明，订单说明</h6>
            <p class="card-text">
            <div class="row">
                <div class="col-md-3">
                    <dl>
                        <dt>订单号</dt>
                        <dd>292349393923 <a class="copy" data-clipboard-text='292349393923'
                                            href="javascript:void(0);"> <i class='feather icon-copy'></i></a></dd>
                        <dt>交易流水</dt>
                        <dd>8999888sdf</dd>
                        <dt>预订人 <a class="tips" data-title="酒店预定人" href="javascript:void(0);"> <i
                                        class='feather icon-help-circle lead'></i></a></dt>
                        <dd>杨光</dd>
                        <dt>预订电话</dt>
                        <dd>17681849188</dd>
                    </dl>
                </div>
                <div class="col-md-3">
                    <dl>
                        <dt>订单号</dt>
                        <dd>662349393923 <a class="clipboard-txt" data-clipboard-text='662349393923'
                                            href="javascript:void(0);"> <i class='feather icon-copy'></i></a></dd>
                        <dt>交易流水</dt>
                        <dd>8999888sdf</dd>
                        <dt>预订人</dt>
                        <dd>杨光</dd>
                        <dt>预订电话</dt>
                        <dd>17681849188</dd>
                    </dl>
                </div>
                <div class="col-md-3">
                    <dl>
                        <dt>订单号</dt>
                        <dd>292349393923</dd>
                        <dt>交易流水</dt>
                        <dd>8999888sdf</dd>
                        <dt>预订人</dt>
                        <dd>杨光</dd>
                        <dt>预订电话</dt>
                        <dd>17681849188</dd>
                    </dl>
                </div>
                <div class="col-md-3">
                    <dl>
                        <dt>订单截图</dt>
                        <dd>
                            <img data-action='preview-img' class="preview-img"
                                 src="https://m.saishiyun.net/imgpic/work-photo.png" width="44">
                            <img data-action='preview-img' class="preview-img"
                                 src="https://m.saishiyun.net/imgpic/work-photo.png" width="44">
                        </dd>
                        <dt>交易流水</dt>
                        <dd>8999888sdf</dd>
                        <dt>预订人</dt>
                        <dd>杨光</dd>
                        <dt>预订电话</dt>
                        <dd>17681849188</dd>
                    </dl>
                </div>
            </div>
            </p>
            <a href="javascript:void(0);" class="btn btn-primary">更多信息</a>
        </div>
        <div class="card-footer text-right">
            <div class="btn-group">
                <a class="btn btn-sm btn-success" href="#"> 查看</a>
                <a class="btn btn-sm btn-danger" href="#"> 打印</a>
            </div>
        </div>
    </div>
</div>