智慧社区大屏模板前端静态模板

最新推荐文章于 2024-06-20 16:55:34 发布

wwwarewow

最新推荐文章于 2024-06-20 16:55:34 发布

阅读量241

点赞数 4

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

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

版权

大屏模板专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果图

代码

<div class="center-top">
                <h1>智慧社区内网比对平台</h1>
            </div>
            <div class="center-center">
                <div class="weather-box">
                    <div class="data">
                        <p class="time" id="time">00:00:00</p>
                        <p id="date"></p>
                    </div>
                    <div class="weather">
                        <img id="weatherImg" src="images/weather/weather_img01.png" alt="">
                        <div id="weather">
                            <p class="active">多云</p>
                            <p>16-22℃</p>
                            <p>天津市和平区</p>
                        </div>
                    </div>
                </div>
                <img src="images/line_bg.png" alt="">
                <div class="select-box" style="height: 0.3rem;">
                    
                    <div data-type="2">
                        <div class="select" tabindex="0" hidefocus="true" >
                           <p style="color:#FFFF00;font-weight:bold;">NO.1北京：2543289人</p>
                           <p style="color:#7FFF00;font-weight:bold;">NO.1天津： 5690人</p>
                           <p style="color:#7FFFD4;font-weight:bold;">NO.1河北： 456人</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="center-bottom">
                <div class="chart-box">
                    <div id="china_map" style="width:100%;height:95%;"></div>
                </div>
                
            </div>

        </div>
        <div class="box-right">
            <div class="right-top">
                <div class="title-box">
                    <h6 id="barTitle">人员年龄分布</h6>
                    
                </div>
                <p class="unit">单位：岁</p>
                <div class="chart-box">
                    <div id="pie_age" style="width:100%;height:100%;"></div>
                </div>
                
            </div>
            <div class="right-center">
            	
                <div class="title-box">
                    <h6>人员地区分布</h6>
                </div>
                <div class="chart-box pie-chart">
                    
                    <div id="qufenbu_data"style="width:90%;height:120px;margin-left:10px;"></div>
                    
                </div>
            </div>
            
            
            <div class="right-bottom">
                <div class="title-box">
                	<p id="switchBtn"><span class="active" data-dataType="income">人口出入时间段统计</span></p>
                    
                </div>
                <div id="line_time" style="width:90%;height:160px;margin-left:10px;"></div>
                
            </div>