红尘侠影

[iRuxu]

别名：partner

[nierssaxa]

设计稿

https://www.figma.com/design/FQpOxDtTICRpEKF83mRfuj/PVX3.0?node-id=3102-5337&m=dev&t=4rSrkz5GXu3N3R9t-1

[nierssaxa]

布局

• 1.选择侠客
• 2.侠客图片
• 3.侠客信息
• 4. 图层顺序从高到低为132，1和3固定在浏览器左右，用户缩小浏览器宽度时，32对应左移

[nierssaxa]

侠客选择

• 1. 上方搜索框输入后显示对应侠客
• 2. 图中第一个侠客为actived样式，其他未default样式，同一时间只能选择一个侠客
• 3. 默认进来自动选择第一个侠客
• 4. 底部的展开按钮点击后展开呈图片右边样式
• 5. 整体的高度是不固定的，可以跟随浏览器，或者固定展开高度为600px

[nierssaxa]

网站信息

• 1.添加QQ机器人和错误反馈等常规内容按钮区域，直接参考设计稿即可

[nierssaxa]

侠客信息

侠客名字和TAB

• 1.左边是侠客名字，和ID
• 2.右边为TAB标签页切换，分别为信息和传记，那个占用是以后可能会有第三个TAB时的样式，可以去掉
• 3. TAB标签的actived和default 用透明度区分即可

结识方式

• 1.用紫色+白字代替标题
• 2.结识所在的地图名字和获取方式介绍，此处可能需要运营来填写 @iRuxu
• 3.结识所需要道具，此处用户点击后跳转到对应物品百科

武学招式

• 1.被动武学用圆形
• 2.其他武学用方形
• 3.点击后下方对应展示武学介绍，默认为被动武学
• 4.名字类型id等参考设计稿即可
• 5.右上方放的是数据库的图标，用户点击后跳转到数据库对应武学的界面

武学境界

• 1.展示对应四个武学
• 2.默认展示第一个
• 3.点击后下方对应展示武学介绍
• 4.同样提供数据库的图标，用户点击后跳转到数据库对应武学的界面
• 5.这里的武学境界技能貌似是要用道具解锁的，所以底部还要加上对应道具
• 6.同样，点击道具后跳转到对应道具的物品百科

属性

• 1.将属性按列表展示即可
• 2.用户鼠标移入的时候要给对应行加上淡紫色的背景色，方便用户阅读

传记和语音

• 1.使用折叠页的样式
• 2.折叠时使用淡紫色和黑字
• 3.标题为对应传记名字
• 4.展开时使用紫色和白字
• 5.内容使用灰底即可
• 6.默认只展开第一个传记
• 7.在最底下加上一个语音的折叠页
• 8.所有的语音的纯文本在这里展示