物流信息

需要先引入相关的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>

示例代码

<div id="app" class="container">
    <header class="aui-header">
        <a onclick="aui.closeWin()" class="iconfont iconreturn"></i></a>
        <div class="aui-header-title">物流信息</div>
    </header>
    <div class="aui-content">
        <ul class="aui-card">
            <li class="aui-card-main">
                <div class="aui-steps aui-steps-col aui-steps-dot" style="width: 100%;">
                    <div class="aui-steps-item">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-icon">
                                <i class="iconfont iconaddress2"></i>
                            </span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-desc">收货地址：陕西省西安市高新四路世纪颐园</p>
                        </div>
                    </div>
                    <div class="aui-steps-item aui-steps-item-active">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-icon">
                                <i class="iconfont iconaddressbook"></i>
                            </span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-title">已揽收</p>
                            <p class="aui-steps-item-desc">[釜山市][佛山转运公司]已打包</p>
                            <p class="aui-steps-item-desc">2020-07-15 05：22:19</p>
                        </div>
                    </div>
                    <div class="aui-steps-item">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-dot"></span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-desc">[佛山市][广东省佛山市顺德区凤城公司]已收件。取件人：刘国英(13300000000)</p>
                            <p class="aui-steps-item-desc">2020-07-14 18:28:01</p>
                        </div>
                    </div>
                    <div class="aui-steps-item">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-icon">
                                <i class="iconfont iconshouye"></i>
                            </span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-title">仓库处理中</p>
                            <p class="aui-steps-item-desc">温馨提示：您的订单预计7月16日24:00前送达，请您做好收货安排</p>
                            <p class="aui-steps-item-desc">2020-07-14 18:28:01</p>
                        </div>
                    </div>
                    <div class="aui-steps-item">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-dot"></span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-desc">您的订单由第三方卖家拣货完成，待出库交付圆通快递</p>
                            <p class="aui-steps-item-desc">2020-07-14 17:31:27</p>
                        </div>
                    </div>
                    <div class="aui-steps-item">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-dot"></span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-desc">第三方卖家已经开始拣货</p>
                            <p class="aui-steps-item-desc">2020-07-14 17:25:55</p>
                        </div>
                    </div>
                    <div class="aui-steps-item">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-dot"></span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-desc">您的订单已进入第三方卖家仓库，准备出库</p>
                            <p class="aui-steps-item-desc">2020-07-14 17:09:21</p>
                        </div>
                    </div>
                    <div class="aui-steps-item">
                        <div class="aui-steps-item-left">
                            <span class="aui-steps-item-icon">
                                <i class="iconfont iconactivity"></i>
                            </span>
                        </div>
                        <div class="aui-steps-item-right">
                            <p class="aui-steps-item-title">已下单</p>
                            <p class="aui-steps-item-desc">您提交了订单，请等待第三方卖家系统确认</p>
                            <p class="aui-steps-item-desc">2020-07-14 17:08:57</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>