水质监测预警系统大屏展示前端静态模板

最新推荐文章于 2024-07-25 09:24:40 发布

wwwarewow

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量247

点赞数 2

分类专栏：大屏模板文章标签：前端

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

版权

大屏模板专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果图

代码

<div class="header">
        <div class="header-left">
            <span>水质情况实时监测预警系统</span>
        </div>
        <div class="header-time">
            <span id="time"></span>
        </div>
    </div>

    <div class="content">
        <div class="content-con">
            <div class="left-body">
                <div class="left-top public-bg">
                    <div class="public-title">重点水质量检测区</div>
                    <div class="top-body">
                        <div class="top-left">
                            <div class="top-left-title">
                                <h6>注水量</h6>
                                <span><b>1756</b>m3/h</span>
                                <img src="image/pictre.png" alt="">
                            </div>

                        </div>
                        <div class="top-right">
                            <div class="top-left-title">
                                <h6>泄水量</h6>
                                <span><b>3520</b>m3/h</span>
                                <img src="image/pictre.png" alt="">
                            </div>
                        </div>

                    </div>

                </div>
                <div class="left-con public-bg">
                    <div class="public-title">水质量分布情况</div>
                    <div class="title-nav" id="leida"></div>
                </div>
                <div class="left-bottom public-bg">
                    <div class="public-title">企业污染排放情况</div>
                    <div class="title-nav" id="wuran"></div>
                </div>
            </div>

            <div class="center-body">
                <div class="map" id="map"></div>
            </div>

            <div class="right-body">
                <div class="right-top public-bg">
                    <div class="public-title">水质污染TOP5</div>
                    <div class="title-nav">
                        <div class="top5-ul">
                            <ul>
                                <li>
                                    <span>1</span>
                                    <span>严重</span>
                                    <span>北京市</span>
                                    <span>房山区</span>
                                    <span>重度污染</span>
                                    <span>15公里</span>
                                </li>
                                <li>
                                    <span>2</span>
                                    <span>严重</span>
                                    <span>上海市</span>
                                    <span>闵行区</span>
                                    <span>重度污染</span>
                                    <span>10公里</span>
                                </li>
                                <li>
                                    <span>3</span>
                                    <span>严重</span>
                                    <span>北京市</span>
                                    <span>朝阳区</span>
                                    <span>重度污染</span>
                                    <span>9.3公里</span>
                                </li>
                                <li>
                                    <span>4</span>
                                    <span>中度</span>
                                    <span>广东省</span>
                                    <span>广州市</span>
                                    <span>中度污染</span>
                                    <span>8.6公里</span>
                                </li>
                                <li>
                                    <span>5</span>
                                    <span>中度</span>
                                    <span>浙江省</span>
                                    <span>杭州市</span>
                                    <span>中度污染</span>
                                    <span>6.6公里</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right-con public-bg">
                    <div class="public-title">水质类别占比</div>
                    <div class="title-nav" id="huaxing"></div>
                </div>
                <div class="right-bottom public-bg">
                    <div class="public-title">主要地区水流量</div>
                    <div class="title-nav" id="zhexian"></div>
                </div>
            </div>
        </div>