设备监测、环境监测、终端监测大屏展示模板

最新推荐文章于 2024-07-18 17:32:29 发布

wwwarewow

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量182

点赞数 9

分类专栏：大屏模板文章标签：前端设备监测终端监测

本文链接：https://blog.csdn.net/JSPSEO/article/details/139321604

版权

大屏模板专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果图

技术

jquery, echarts

代码

<div class="t_left_box">
                <img class="t_l_line" src="img/left_line.png" alt="">
                <div class="t_mbox t_rbox">
                    <i></i>
                    <span>本月订单数</span>
                    <h2>18000</h2>
                </div>
                <div class="t_mbox t_gbox">
                    <i></i>
                    <span>本月新增会员</span>
                    <h2>1000</h2>
                </div>
                <div class="t_mbox t_ybox">
                    <i></i>
                    <span>一次消费会员</span>
                    <h2>600</h2>
                </div>
                <img class="t_r_line" src="img/right_line.png" alt="">
            </div>
            <div class="t_center_box">
                <div class="t_top_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <ul class="t_nav">
                        <li>
                            <span>设备数</span>
                            <h1>500</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>上月设备增加数</span>
                            <h1>30</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>增值率</span>
                            <h1>75%</h1>
                        </li>
                    </ul>
                    <img class="t_r_line" src="img/right_line.png" alt="">
                </div>
                <div class="t_bottom_box">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"></div>
                    <img class="t_r_line" src="img/right_line.png" alt="">
                </div>
            </div>