引导页：

特点

• 每次载入时更换不同的网页背景图，载入动画为将图片拉伸缓慢至全屏
• 点击标题会更新背景图，背景图来自于大创中心重要活动，最新动态等图片
• 点击Click to enter 跳转到 "/#/welcome" 对应的欢迎页
• 点击Contact跳转至南邮主页

欢迎页：

特点

• 欢迎页主要包括两个部分，导航组件和轮播组件
• 导航组件有这几个部分：社团概述、主要活动、友情链接、图标标语（主页链接）、联系我们、报名招新、登录注册
• 社团概述：跳转路由"/#/welcome/news"
• 主要活动：跳转路由"/#/welcome/competition"
• 友情链接对应二级菜单：南京邮电大学教育科学与技术学院、南京邮电大学
• 中心区域的图标和文字点击回到欢迎页
• 联系我们：点击出现大创中心微信公众号和小程序的二维码，再次点击消失
• 报名招新：点击呼出模态框，内容是一个表单，对于表单中的输入框做了内容上的验证，填写错误和成功均有提示信息
• 登陆／注册：点击呼出模态框，有登陆或者注册两种选项，分别对应两种不同的表单，切换动画为淡入，同时转换focus样式和路由"/#/welcome/signup"或"/welcome/signin"
• 轮播组件：浅色轮播背景图则前景文字为深色、深色轮播背景图则前景文字为浅色，加入我们按钮点击呼出报名招新的模态框，先展示的是大创中心的总介绍，之后每一张轮播代表一个部门的介绍，最后一张轮播为大创中心的联系方式。这样设计，在有限的屏幕中展示更多的信息。轮播组建为全屏显示能有更好的展示效果，切换轮播时文字划入对于用户来说，达到了渐入式的展示效果

第三层结构

• 社团概述
• 主要活动
• 登陆注册
• 以上这些都是作为欢迎页的子组件

主要活动和社团概述子组件为三部分结构，首先保留头部的导航，导航下面左侧为一个菜单，点击不同的菜单，在右侧部分显示不同的内容。以社团概述"/#/welcome/news" 为例，左侧菜单为赛事部、创业中心、办公室、学创部这几个栏目。右侧显显示这几个栏目的内容，其中近期新闻栏目中显示了近期活动的轮播图，下面是一块一块的新闻内容（标题，发布时间，文字，图片，图片介绍，）每个新闻内容都有点赞按钮，单击点亮，再次单击熄灭，页面的最下面是分页按钮，右下角还有滚动回到顶部的按钮

• 登陆注册的子组件对应不同的路由方便于对于已登陆用户可以看到的界面和未登录用户可以看到的界面进行管理

---

使用技术

vue.js, element-ui, webpack... 见package.json文件

使用说明

点击index.html即可运行此单页web应用

原始代码：src

所用外部库：node_modules

静态文件：static

编译后文件夹：dist

项目配置文件: webpack.config.js、package.json

github: https://github.com/njuptalex/LingHang

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build