物流大数据平台网页设计(html + css3 + JavaScript)_qq_1635111063

网络投稿 02-07 2783

💖简介：微信小程序模板，H5模板，响应式布局模板，定制化项目简历模板、学习资料、面试题库【关注我，都给你】💖

工具下载链接😎😎😎： vsCode

前端物流大数据平台

文章目录前端物流大数据平台前言一、系统功能1.1 开发环境二、部分功能展示2.1 Web端页面展示三、部分代码展示总结

前言

本网页主要实现可视化数据显示，如中国地图，湖南省物流。

一、系统功能 1.1 开发环境开发语言：JavaScript技术：HTML + CSS框架：BootStrap + JQuery编译工具：vscode浏览器兼容：ie8以上二、部分功能展示 2.1 Web端页面展示

三、部分代码展示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>物流大数据平台</title> <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <style> .t_title{ width: 100%; height: 100%; text-align: center; font-size: 2.5em; line-height: 80px; color: #fff; } #chart_map{ cursor: pointer; } .t_show{ position: absolute; top: 0; right: 0; border-radius: 2px; background: #2C58A6; padding: 2px 5px; color: #fff; cursor: pointer; } </style> </head> <body>  <div class="header"> <div class="bg_header"> <div class="header_nav fl t_title"> 物流大数据服务平台 </div> </div> </div>  <div class="data_content"> <div class="data_time"> 温馨提示: 点击模块后跳转至详情页面。 </div> <div class="data_main"> <div class="main_left fl"> <div class="left_1 t_btn6" style="cursor: pointer;">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_1.png" alt=""> 湖南省货运收入 </div> <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div> </div> <div class="left_2" style="cursor: pointer;">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_2.png" alt=""> 湖南省地图 </div> <div id="chart_2" class="chart t_btn9" style="width:100%;height: 280px;"></div> </div> </div> <div class="main_center fl"> <div class="center_text">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_3.png" alt=""> 中国地图 </div> <div id="chart_map" style="width:100%;height:610px;"></div> </div> </div> <div class="main_right fr"> <div class="right_1">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_4.png" alt=""> 湖南省货物周转量 </div> <div id="chart_3" class="echart t_btn7" style="width:100%;height: 280px;"></div> </div> <div class="right_2">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_5.png" alt=""> 湖南省高速公路 </div> <div id="chart_4" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div> </div> </div> </div> <div class="data_bottom"> <div class="bottom_1 fl t_btn5" style="cursor: pointer;">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_6.png" alt=""> 湖南省飞机场 </div> <div id="chart_5" class="echart fl" style="width:100%;height: 250px;margin-top: 15px;"></div> </div> <div class="bottom_center fl"> <div class="bottom_2 fl">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_7.png" alt=""> 湖南省交通 </div> <div class="main_table t_btn8"> <table> <thead> <tr> <th>运营数(辆)</th> <th>线路总长度(公里)</th> <th>客运总量(万人次)</th> <th>日期</th> </tr> </thead> <tbody> <tr> <td>21059</td> <td>26497</td> <td>184448</td> <td>2018年</td> </tr> <tr> <td>18777</td> <td>21140</td> <td>188808</td> <td>2017年</td> </tr> <tr> <td>15757</td> <td>20225</td> <td>201143</td> <td>2016年</td> </tr> <tr> <td>17458</td> <td>19567</td> <td>202446</td> <td>2015年</td> </tr> <tr> <td>11323</td> <td>14562</td> <td>279854</td> <td>2014年</td> </tr> </tbody> </table> </div> </div> <div class="bottom_3 fl">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_7.png" alt=""> 湖南省业务量 </div> <div class="main_table t_btn2"> <table> <thead> <tr> <th>省内(万件)</th> <th>省外(万件)</th> <th>国际(万件)</th> <th>总业务量(万件)</th> <th>日期</th> </tr> </thead> <tbody> <tr> <td>21352.36</td> <td>68575.6</td> <td>464.43</td> <td>90392.39</td> <td>2018年</td> </tr> <tr> <td>17522.41</td> <td>37111.03</td> <td>278.5</td> <td>54911.94</td> <td>2017年</td> </tr> <tr> <td>7014.14</td> <td>26841.29</td> <td>163.72</td> <td>34019.15</td> <td>2016年</td> </tr> <tr> <td>2553.55</td> <td>18072.54</td> <td>129.65</td> <td>20755.74</td> <td>2015年</td> </tr> <tr> <td>1427.04</td> <td>10859.54</td> <td>182.54</td> <td>12469.11</td> <td>2014年</td> </tr> </tbody> </table> </div> </div> </div> <div class="bottom_4 fr">  <div class="t_line_box"> <i class="t_l_line"></i> <i class="l_t_line"></i> </div>  <div class="t_line_box"> <i class="t_r_line"></i> <i class="r_t_line"></i> </div>  <div class="t_line_box"> <i class="l_b_line"></i> <i class="b_l_line"></i> </div>  <div class="t_line_box"> <i class="r_b_line"></i> <i class="b_r_line"></i> </div> <div class="main_title"> <img src="img/t_7.png" alt=""> 湖南省汽车 </div> <div class="main_table t_btn3"> <table> <thead> <tr> <th>载客汽车(万辆)</th> <th>载货汽车(万辆)</th> <th>汽车拥有量(万辆)</th> <th>日期</th> </tr> </thead> <tbody> <tr> <td>2.53</td> <td>142.65</td> <td>145.18</td> <td>2018年</td> </tr> <tr> <td>2.52</td> <td>139.95</td> <td>142.47</td> <td>2017年</td> </tr> <tr> <td>2.65</td> <td>137.96</td> <td>140.61</td> <td>2016年</td> </tr> <tr> <td>2.97</td> <td>131.48</td> <td>134.45</td> <td>2015年</td> </tr> <tr> <td>3.23</td> <td>99.99</td> <td>103.22</td> <td>2014年</td> </tr> </tbody> </table> </div> </div> </div> </div> <div style="text-align:center;"> <p>更多模板：2021</p> </div> <style> .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} </style> <div class="copyrights" id="links20210126"> Collect from <a href="http://·/" title="网站模板">前端模板</a> <a href="https://·/" title="查字典">查字典</a> </div> </body> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/common.js"></script> <script src="js/echarts.min.js"></script> <script src="js/dataTool.js"></script> <script src="js/index.js"></script> <script src="js/china.js"></script> <script src="js/hunan.js"></script> </html> 总结

想免费获取模板的，大家点赞、收藏、关注、评论！