页面样式

这个页面将向你介绍升华网的几个主要页面样式。

首页

首页仍是以 Banner 图先行的展示风格。因此，首页的图片资源很多。首页主要有 Banner 图， 轮播图，展示卡片，文章聚合列表（有两种风格），视频封面图展示。

首页使用了无刷加载动画和浮入显示，能够让页面更加灵活生动。

图片展示

首页的图片资源多，因此需要多种样式来防止访客的乏味感出现。 我们定义了五种样式交替使用。

Banner 图

进入网页后最先映入眼帘的就是 Banner 大图。这一区域一般用于展示校团委最近的大型活动， 例如校园歌手大赛，毕业集市等，共展示三张图片。

轮播图

Banner 图下侧紧跟轮播图，用于展示最近校团委的工作动态，同时右侧会有列表进行聚合输出， 样式为时间 + 标题 + 文章摘要。列表聚合输出的标题有 :hover 动画。

原有的设计图中此处涉及到信息密度过高，会造成阅读疲劳。同时在小屏幕设备上显示效果不佳。

旧版设计图：

我们进行了进一步的优化，主要扩大了轮播图的大小，让空间不再逼仄。同时，我们调整了团内通知 的位置，整体更加宽松。标题我们也使用了思源宋体，使页面更加多样化。

优化后：

展示卡片

展示卡片的基本功能与轮播图类似，实现图片，标题与文章摘要的聚合输出，采取平铺网格占位设计， 同时具有响应式布局，会根据设备屏幕大小自动调整。

文章聚合列表

文章聚合列表主要用于标题优先的情况，能够压缩占用的页面空间，提高信息密度。团内通知是校内师生 大量查阅的内容区域，因此使用文章聚合列表，日期 + 标题的样式。

第二种样式是思想引领区域，用来展示重要的学习文件，因此也采用了文章聚合列表提高信息密度。 同时使用了 <div class="cardFloat"></div> 实现了卡片浮动动画。

视频封面列表

主要用于视频资源的展示。

文章列表

文章列表我们进行了升级。升华网改版的初始设计图虽然也很美观，但是信息密度存在过高的情况。 在访客查阅文章时，无法快速判断文章的主要内容。大量标题叠加会导致出现阅读疲劳。

因此，我们进行了界面的优化。一是将单页显示的数量减少，扩大间距。二是我们除了输出文章标题， 也会将封面图（如果有）和文章摘要一并输出。

视频列表

视频列表我们仍按照原设计图进行开发，将封面图进行聚合展示，访客可以快速找到想要的视频。

搜索页面

搜索页面是访客查询文章内容的关键入口，不仅能按照访客的操作输出结果，还要让结果清晰易懂， 使访客快速定位自己需要的信息。

原有设计图给出的搜索结果较为简陋，没有封面图与文章摘要，未进行文章分类的输出，访客不易 找到自己需要的内容。

我们在旧版设计图的基础上进行了优化。同时输出文章标题，封面图（如果有），文章摘要和文章分类， 这样更有利于访客检索信息。同时我们让列表的边距增加，让空间更加宽松。

投稿页面

投稿页面是团支书进行自主投稿的页面。由于博达系统的限制，我们无法做过多的定制。因此大多数 控件使用 Bootstrap 默认控件，样式与二级页面保持一致。

为了团支书规范投稿，我们使用模态框进行了投稿须知提示。

文章详情页面

文章详情页面主要承载了文章内容，因此整个页面应该保持简洁，突出文章主体，同时满足响应式设计， 让桌面 / 移动双端均有良好的阅读体验。旧版设计图存在密度过高，且侧边栏受到版块过多的影响， 变得过长，影响页面样式，所以我们进行了优化调整。

旧版：

新版页面还加入了阅读进度条，提示访客目前阅读的进度。

新版：

我们还对新版页面进行了移动端优化。在检测到 UA 为移动端时，上方的 navbar 会自动变成 menu 按钮，点击后展开。

视频详情页面

视频详情页面使用 Dplayer 作为播放器，支持弹幕挂载。