npm install
npm run serve
npm run build
npm run lint
- 首页剩余部分完成
- 修正 移动端字体大小,字体间距问题
- 党建课堂页面完成
- pc端
- 移动端
- 书记讲党课完成
- pc端
- 移动端
- 首页第二部分 category 公共样式提取 ok
- 首页第三部分 3-3-3 样式提取 公共样式提取 ok
- header 组件重构 添加导航路由 ok
- footer 组件重构 ok
- js 菜单栏 重构
- 公共组件复用 - 注意组件内嵌的媒体查询的作用域问题
- 导航关联 的实现
- 移动端页面字体,字间距修正
- 页面title准确设置,修复
- 移动端页面导航 scroll-view功能的实现
- 还有一个浮动菜单未完成 暂时没有浮动菜单用的半透明svg图标
-
字体图标寻找
- 音频图标 iconyinpin ok
- 视频播放图标 iconbofang ok
- 眼睛图标 (观看人数) iconyanjing ok
- 分享图标 iconfenxiang ok
- 安卓图标 iconandroid ok
- iconfont iconicon_arrow_bottom ok
- iconfont iconjiantoushang ok
-
静态页面
- 大事记 ok /Memorabilia
- 党建课堂 ok /Courses
- 书记讲党课 ok /PartyLecture
-
媒体查询公共样式提取
- index.css 还未调整 ok
- memorabilia.css(大事记页面) 提取完毕
- courses.css(党建课堂页面) 提取完毕
- 党建课堂 新担当 新作为 三个页面结构一致
- 时政要闻 大事记 主体页面结构一致 除了导航一栏
- 导航标题区域 -需要根据导航来改变 iconfont. 需要注意一下。
- 音频页面 有收起 ,加载更多的js效果
- 全部评论 登录 注册 发表评论不要。专题不要
- 查看更多 https://bzcz.zhizhongdj.com/listing?column_id=55&content_type=video,audio&recommend_level=1&status=released&level=greater_equal&order=is_top-desc,release_time-desc&pagesize=20
- 音频页面 https://bzcz.zhizhongdj.com/stories/v-5e5887febb3eb453871848
- 视频详情页 https://bzcz.zhizhongdj.com/stories/v-5e7093464bd64788747505
- 新闻详情页 https://bzcz.zhizhongdj.com/stories/a-5ee01a49dd315607481263
- 每页有20个结果集
- 带分页按钮
- 要区分 有结果集 无结果集的情况
- 同时结果集有分类 ,可以使用tab选项卡切换
- 搜索结果页面 tab选项卡注意一下
- 分页最大页数 显示为7
- 跳至 某一页 那个 input 是使用 失去焦点事件 ,才触发 跳页的功能
- 搜索页样式基本完毕 移动端字体正常 0616 ok js效果暂无完成。
- 有切换书本 类似于手风琴效果
- 除了音频界面 ,下方还有图文介绍
- 右侧是统一的推荐栏目
- 音频界面 不是唯一的id的yingpin
- 音频界面 需要无刷新请求,点击每一个li 需要请求该数据,并拉取这个数据的前后的数据,说明点击一次需要拉取三个数据。
- 就是说这个ul 需要实时展示三个数据
- vue路由加密转码 参考
- 文章id a- 拼接一个随机字符串
- 文章 book/ 党建课堂下的全是 book/
- 文章 stories/
- 视频 音频id v- 拼接一个随机字符串
- a标签 改造 router-link
- 前端路由随机加密
- 三级路由改活 接收具体 id 类似于
- t20200228_5447599 党建文库文章路由
- a-5eeac41a3f9ab973235624 新闻文章路由
- v-5e58b60165a01349871175 视频音频文章路由
- 7个标题一级路由
- / 首页(北臧党建之声)路由
- /category/53 大事记
- /category/54 时政要闻
- /category/55 党建课堂
- /category/56 党建文库
- /category/57 智慧新乡村
- /category/58 书记讲党课
- /category/59 新担当
- /category/60 新作为
- 搜索页有分页效果
- 有切换书本 类似于手风琴效果
- 除了音频界面 ,下方还有图文介绍
- 右侧是统一的推荐栏目
- 音频界面 不是唯一的id的yingpin
- 音频界面 需要无刷新请求,点击每一个li 需要请求该数据,并拉取这个数据的前后的数据,说明点击一次需要拉取三个数据。
- 就是说这个ul 需要实时展示三个数据
- 请求接口 就是要拿到 3条数据
- 临界条件 ,
- 就是点击如果是第一条数据,则第一条数据 居中 ,左边留空 ,但是li存在 ,包裹着一个空 的span
- 如果点击最后一条数据,则右边留空 ,但是li存在 ,包裹着一个空的span
- 临界条件 ,
- 说明 这个li是动态创建的。
- js操作
- 图标收集 暂停 播放 上一个 下一个 四个按钮
- 进度条 loading 起初浅的loading, 加载后变粗了 实际的粗线 是根据网络情况加载的mp3的进度条的情况。
- 新闻图片使用 fancybox插件