czapp/pages/amap/amap.html

<div class="lr-amap-page" >
        <div id="amapcontainer" class="lr-amap-contarner">
            <div class="map-panel">
                <!-- 右上角功能面板 -->

                <div style="z-index:555;flex: 0 0 auto;width: 100px;align-self: flex-end;">
                    <div class="top-right-panel">
                        <div id="map-lelftright-func">
                            <div id="layer-change">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-qiehuan1"></use>
                                </svg>
                            </div>
                            <hr>
                            <div id="route-situation">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-lukuang"></use>
                                </svg>                           
                            </div>
                            <hr>
                            <div id="user-change"><span class="iconfont icon-yonghuzuguanli"></span></div>
                        </div>
                    </div>
                </div>

                <!-- 内容占位 -->
                <div style="flex: 1 0 auto"></div>
                <!-- 用户定位 -->
                <div id="user-location">
                    <div class="base-circle">
                        <div class="big-circle">
                            <div class="medium-circle">
                                <div class="small-circle"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="z-index:555;flex: 0 0 auto;">

                                       
                    <!-- 底部功能面板 -->
                    <div id="func-panel" >
                        <div id="route-play" class="func-panel-bg">
                            <div class="icon-circle-small"><span class="iconfont icon-guijichaxun"></span></div>
                            <p>轨迹回放</p>
                        </div>
                        <div id="car-lock" class="func-panel-bg">
                            <div class="icon-circle-large"><span id="lockStatus" class="iconfont icon-jiesuo"></span></div>
                            <p>锁车</p>
                        </div>
                        <div id="electric-fence" class="func-panel-bg">
                            <div class="icon-circle-small"><span class="iconfont icon-dianziweilan"></span></div>
                            <p>电子围栏</p>
                        </div>
                    </div>
                
                    <!-- 底部面板 -->
                    <div id="device-info-panel">
                        <div style="width:50px;height:30px;background: #fff">Logo</div>
                        <p>离线23天......</p>
                        <div class="delimite-line"></div>
                        <p class="panel-right-content">GPS电量<span id="battery"></span></p>
                    </div>

                    <!-- 窗体模板 -->
                    <script id="my-infowin-tpl" type="text/template">
                        <div class="ract LeftBubble">
                            <span>位置导航XX小区...</span>
                        </div>
                    </script>
                    
                </div>
            </div>
        </div>
        
    </div>