亲子网炫版论坛改版7.3

[luohuimin]

== 资料 ==

框架： http://192.168.21.51/pcbaby-wap/
排期： http://192.168.21.51/pcbaby-wap/排期表.html
设计稿： http://192.168.50.179/2015-04/pcbaby-wap-luntan/index.html
制作稿： http://zzb.pcauto.com.cn/tools/gongdan/plan.php?id=45

---

== 首页 ==

1、头部：
a）面包屑所在的一行，有悬浮效果（此效果在列表页、帖子页、发帖页均需实现，后续不再说明）
b）面包屑右侧新增发帖页入口，点击跳转到发帖页。

2、交流圈导航：
a）位置调整到头部下方（具体见框架及设计稿）
b）样式调整为以九宫格形式分布（样式需设计优化），分页左右切换，每个分页显示两行四列8个版块
c）导航具体放置的版块，待编辑确定

3、热门活动：调取CMS管理中心官方推荐头条新闻1、2、3条；页面显示元素为：标题、活动时间。

4、精致生活：显示内容及样式与线上一致；默认显示最新20条数据，点击“加载更多”，直接往下加载20条数据

== 二、列表页 ==

1、头部：
a）面包屑右侧新增有图/无图切换按钮，设计样式可参考开关类设置，需要有开、关两个交互效果
b）图片模式切换按钮右侧，新增版块收藏按钮：
——默认初始状态为未收藏。设计出已收藏、未收藏两种交互效果。
——点亮收藏图标后弹窗提示“您已成功收藏此版块”
——再次点击收藏，图标转暗，且弹出显示“您已取消收藏此版块”，弹窗显示3秒后自动消失。
c）发帖按钮位置调整，从原来的筛选栏旁，调整到头部面包屑一行的最右侧（与首页保持一致），具体参考框架及设计稿。

2、帖子列表：
a）筛选排序：
——默认状态下，页面显示版块下的“精华”贴
——把“最新回复”tab及“最新发表”tab去掉，改为“最新”，按版块下帖子更新时间（相当于最新回复）倒序排序
b）新增置顶位：
——列表页增加置顶位（最多三个），读取当前版块最新的三个本版置顶
——置顶帖排除直接跳转外链的帖子（屏蔽插件htmlLinkToOutside）
——考虑到置顶位内容更新频率较低，置顶位高度调小，仅显示置顶icon，标题、有图贴icon、精华帖icon等，以缩减置顶位所占面积。
c）新增有图/无图模式切换，切换按钮为头部面包屑右侧的图片logo
——若该版块为看图模式，则出图文列表，图片露出数量<=3，具体样式见框架及设计稿；
——若该版块为无图模式，则仅出文字标题，具体样式见框架及设计稿；
——置顶位样式，不受图片模式切换影响；
d）除三个固定的置顶位，列表页默认显示20条数据/页，点击“查看更多”将继续往下加载20条数据

== 三、帖子页 ==

1、头部：
a）面包屑右侧新增收藏帖子按钮，点击按钮弹窗提示“您已成功收藏此帖子”，再次点击，提示“您已取消收藏此帖子”
b）收藏按钮需设计出已收藏、未收藏两种交互效果（同板块收藏）

2、帖子正文：
a）删除：调整字体大小功能

b）帖子图集：
——点击楼主发布的图片，可跳转到帖子图集页
——帖子图集页，仅包含图片（限宽400像素）、页码、返回按钮，左右滑动有翻页的交互效果
——帖子图集仅显示楼主的图集

4、回帖：
点击回复输入框上的表情按钮（包括楼层回复及主题回复），以浮层形式在页面上展开，尺寸调整放大

5、热帖推荐：
a）此为新增模块，位置在回帖发表按钮下方（参看框架及设计稿）
b）接口读取本版回复数大于2、且浏览数排前3的帖子，一天更新一次。
c）每条帖子仅露出标题及浏览数，显示标题前24个字符，若标题字数超出24字符，以“...”表示

== 四、发帖页 ==

1、头部：
a）发帖按钮位置调整到头部，面包屑右侧；
b）点击发帖时，需判断是否已选择版块、输入标题、内容。
——若三者有一为空，则弹窗提示“xx不能为空”——若正文内容小于5，则弹窗提示“帖子内容长度必须大于5”

2、版块下拉框：
a）若在首页发帖入口进入发帖页：版块下拉框可选
b）若在列表页发帖入口进入发帖页：版块下拉框不可选，自动匹配为用户当前所在版块

3、标题：
a）输入框内默认显示文案提示“请在此输入标题（必填）”
b）当用户输入字数超出50字，标题输入框下方出现红色文字提示“标题不能超过50个字”

4、正文：输入内容必须大于5个中文字符

5、表情/图片上传切换tab：
a）表情及图片上传切换按钮，分别设计出选中、没选两种样式
b）表情tab：表情尺寸调大，表情数量与pc端保持一致

c）图片上传tab：
——图片上传的方式有两种，可添加本地图片，可直接拍摄上传；
——若当前还没上传任何照片，或上传的图片已全部删除：点击图片上传tab，直接弹出上传方式弹窗，tab里的“+”按钮隐藏；
——若当前已上传一张或以上照片：点击图片上传tab，仅作切换交互，“+”按钮露出，并显示在最后一张已上传图片的右侧；点击“+”按钮，弹出上传方式弹窗；图片上传按钮右上角显示当前已上传图片的张数（若无已上传图片，则不显示）。

d）图片预览：
——图片上传成功后，点击任意一张已上传图片可以进入预览页，预览时左右滑动图片可查看前一张、后一张图片；
——预览页展现元素：图片、页码、返回按钮、删除按钮
——点击返回按钮，返回到发帖页，点击删除按钮，则删除当前图片，页面跳转到前一张图片的预览

附：
pc端帖子页、列表页已增加跳至wap版适配器，需要进行测试