今天完成的事情：研究原型图，构思思路;

明天计划的事情：后台页面还没有理清思路，明天继续;

遇到的问题：在没有后端数据和接口类型的情况下如何去布局页面；

收获：

萝卜多项目方案（部分）：

目录结构

前台

前台页面共13个，页面的头尾共用，选项卡类型，按钮提成组件，小图片切成雪碧图使用；

使用框架如下：CSS框架bootstrap，JS框架angularjs，其他插件：ui-bootstrap(分页and 轮播图), ui-router路由，表单验证ngMessage,懒加载ocLazyLoad,

一、首页

1.1 home

header部分：

常规方法，左侧logo浮动，右侧li列表，小于768px时右侧列表变成面包图；

banner部分：

宣传页，后台编辑，绑定model；

入职数据部分：

bootstrap grid 四等分，写死；

最新职位部分：

轮播图(ui bootstrap carousel)；

点击更多跳转到最新职位页面；

循环翻页，每次翻一页（4条），展示最近发布的职位，共20个，

图片为公司logo,数据使用后台定期填充；

点击职位 跳转到职位介绍；

点击公司 跳转到公司详情；

服务流程示意图：

写死；

成功合伙人评价：

写死，两行，bs grid布局；

footer:

写死，三栏布局；

copyright：

小字居中；

1.2 推荐职位、最新职位

搜索栏：

bootstrap嵌套ul li列表

展示栏：

li动态插入ng-repeat实现

分为左右两列，768px下变成两行;

pagination ui bootstrap框架;

通过调用后台接口填充数据,点击跳转对应的详情页面

二、找职位

2.1 找职位

顶部搜索关键词：

bootstrap表单；

左侧产品、技术、设计职位标签：

CSS+JS布局；在pc端按照psd档的位置放置，使用js切换列表的显示或隐藏，在移动端显示在顶部通过按钮触发，做成下拉的形式

点击职位标签进入职位搜索页面；

右侧轮播图：

推荐职位/最新职业:

tab切换；

点击查看更多进入推荐职位、最新职位页面，推荐职位为后台设置

最新职位为最新发布8条职位；

点击进入职位介绍；

调用接口获取8条职位信息，包括职位名称，职位薪资，公司名称，公司logo。

接口从页面接收recommend数据，然后返回8条推荐职位/最新职位。

页面内的分页都使用ui-bootatrap的分页插件处理

推荐公司：

左侧为最新认证公司logo，右侧为普通公司，两排共10个；

点击查看更多进入搜索公司页；

竖向滑动轮播图：

点击进入公司详情；

最新发布职位的4个认证公司，按职位发布时间倒序排；

两组宣传介绍：

2个row；

加入萝卜多人才推荐计划：

banner;

2.2 搜索公司页/搜索职位页

公司、职位切换搜索：

一组tab切换;

搜索不到结果，显示其他内容；

展示页：

搜索公司：一行四个，写个模板填充；

搜索职位：一行一条信息，2栏布局，

搜索页分为职位搜索和公司搜索根据用户输入的参数，向服务器的搜索接口发起请求，返回数据后跳转至列表页填充页面

2.3 公司详情/在招职位

公司logo/简介/认证情况：

左右两栏布局；

公司详情/在招职位tab切换：

左右两栏布局；

左侧tab切换；

在招职位动态生成，且筛选；

2.4  职位介绍

左右两栏布局；

左侧上下布局；

左侧上时间和职位标签；

三、找精英

3.1 找精英

banner图；

0预付，无风险；专注；优选人才，高效推荐  三行介绍小banner

萝卜多，服务流程；

一行4个产品介绍；

成功案例：

4个/行*2行；

最新发布职位时间显示认证公司；认证公司数量不足时，显示普通公司；

查看更多打开全部公司列表排序优先认证公司，其次普通以创建时间排列；

3.2 公司列表页

合作公司banner

公司地点、融资阶段、行业领域 筛选条件；

4个/行*3行；

点击进入公司详情页面；

四、关于我们

左右两栏布局，左侧是个tab切换，点击后右侧显示不同内容；一个是关于我们，一个是联系我们；

写死；

联系我们：下面是地图；采用截图或插入地图方式；