剑侠录

[iRuxu]

别名：questsection

[nierssaxa]

设计稿

https://www.figma.com/design/FQpOxDtTICRpEKF83mRfuj/PVX3.0?node-id=3135-144&m=dev&t=faLS7aZ8p87lUnwF-1

[nierssaxa]

图层顺序

• 1.左侧浏览器跟随
• 2.右侧固定位置
• 3.大概就是左边就是不管浏览器上下滑动还是左右都会同样高度宽度和位置，有点类似目录、导航一样的
• 4.右侧这一块根据浏览器宽度自适应，最小应该是600px的宽

[nierssaxa]

左侧导航

• 1.搜索框要同时支持搜索资料片和资料片下的分级（后面统一称呼为资料片-大章节-章节123456）
• 2.下面的目录用折叠页的形式展示
• 3.首次进入默认展开风起稻香
• 4.首次进入默认选择风起稻香第一个大章节
• 5.所有的资料片使用紫色底和白色字的搭配（无论折叠）
• 6.所有的大章节的actived一同使用紫底白字
• 7.所有的 大章节，defult 使用000 0.05的底，和000的字
• 8.default下的大章节，鼠标移入要做一个300ms的动画过度，mouse enter的颜色样式变化等同于 actived
• 9.default下的大章节，鼠标移出也要做一个300ms的动画过度，mouse leave 的颜色样式变化等同于 default的颜色样式
• 10.补充，搜索的时候，如果关键词包含资料片，则展示资料片的折叠，如果同时包含大章节，则也要展示对应的资料片
• 11.接上，举例，用户搜索横刀，结果只有【横刀断浪】的资料片，那么只展示折叠起来的横刀断浪即可
• 12.接上，如果用户搜索扬州寻故友，结果是【风起稻香】下的一个大章节，那么要展示展开的【风起稻香】和【扬州寻故友（default样式）】，并且隐藏掉【风起稻香】下其他没有关键词的大章节
• 13.底部的展开按钮点击后展开呈图片右边样式
• 14.整体的高度是不固定的，可以跟随浏览器，或者固定展开高度为600px

[nierssaxa]

右侧内容

• 1.右上角是常规的添加QQ机器人和错误反馈等常规内容按钮区域，直接参考设计稿即可
• 2.这个区域是固定的，浏览器滑动会查看下面的内容，可以理解为正常的文章样式
• 3.第一个区块是标题（代码写）
• 4.然后下面是图片，请按照图2的样式去写图片的样式代码
• 5.不保留小章节部分（也就是最底下的3/5）
• 6.下面第二个区域则是章节，标题固定用【章节x：章节名字】的形式
• 7. actived的样式是紫底白字，注意阴影
• 8. default的样式是白底黑字，注意阴影
• 9. default下的章节123456，鼠标移入要做一个300ms的动画过度，mouse enter的颜色样式变化等同于 actived
• 10. default下的章节123456，鼠标移出也要做一个300ms的动画过度，mouse leave 的颜色样式变化等同于 default的颜色样式
• 11.再向下是对应章节123456的内容，注意阴影
• 12.默认进入这个页面展示的应该是【风起稻香】-【风起稻香村】-【风起稻香村的章节1】
• 13.再向下是评论系统，理论上应该要做一个评论系统 @iRuxu

[nierssaxa]

其它补充

@iRuxu

• 1.理论上这些章节是要解锁的
• 2.做不做解锁方式的攻略（需要运营去填写）
• 3.如果不做，那么就要加上评论系统，让玩家们自行去评论告诉其他人怎么解锁

[iRuxu]

手机App版

• 牧野：已完成