文章采集网站51源码之家

这次，我们团队新增了一个济南公交线路的展示界面，济南的公交线路多，且经过的站点覆盖范围广，价格实惠，是出行旅游交通工具的不二之选，我基于此现实情况，觉得做一个新的页面全面展示济南交通。

   我们选择把这个页面的进入按钮放到左侧的工具栏中，保存和已有工具栏文字相同的css设置。

     对页面的设计，首先观察前期爬取的济南公交信息，发现有线路名、起终点、首班车时间、末班车时间、票价等信息，我基于此，计划制作一个表格形式的页面，同时涵盖搜索公交的功能。

     同时，计划数据从后端传入前端进行渲染，写了一个新的路由路径，按列提取对应的信息。在js方面，首先我设置点击后触发式跳转到交通页面

   注意，发现数据中所有线路都是展示了两次，只是起终点不一样，考虑减少冗余数据，将起终点合并为一个字段，用“起点⇄终点”表示，同时在后端输入数据时候，做了一步过滤。

 展示效果如下：

   为了更详细的展示站点信息，选择在最后一栏加了一个详情，用户点击每一个路线的站点详细图表之后，会在右侧弹出一个站点信息的弹窗，展示每一个路线的详细站点信息，包含站点名称、站点详细位置信息，帮助用户更清晰的知道那个公交线路更符合自己的行程规划。

     这里我设置了一个新的文件夹“bus_stations”用来存放所有路线对应的站点信息文件。

为了页面的协调，更突出站点名称，设置站点名称的字体加粗大字号，同时当鼠标挪到每一个站点信息框的时候，会在底部显示绿色的阴影，增加色彩感。