PVX 4.0 （适配首页统一风格）

[nierssaxa]

首页（导航页）

设计稿

https://www.figma.com/design/qdbaJLsgusUGZjwtDCFyu6/PVX4.0?node-id=1-78&m=dev&t=vkNZtDgGvec107ix-1

改动

• 1. 图标更换成最新的（和主页的一致）
• 2. 背景色修改为#F6F8FA
• 3. 三个大区圆角48, 4rem
• 4. 三个大区增加描边，order: 1px solid var(--Color1, rgba(226, 232, 240, 0.60));，阴影 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
• 5. 图标文本的按钮新增底色#fff
• 6. 图标文本新增描边，border: 1px solid #F0F0F0;
• 7. 图标文本default下，新增阴影box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
• 8. hover下，基本和原先的hover不变，阴影改动如下box-shadow: 0 4px 12px 0 rgba(107, 82, 255, 0.20);
• 9. 补上一条，颜色还是要根据内容分为紫色、橙色、绿色，阴影改动是blur12 透明度0.2
• 10. 图标文本的按钮的圆角是8px

[nierssaxa]

捏脸列表

设计稿

https://www.figma.com/design/qdbaJLsgusUGZjwtDCFyu6/PVX4.0?node-id=28-4144&m=dev&t=vkNZtDgGvec107ix-1

顶部改动

• 1.顶部不再固定，随着浏览器滑动上移
• 2.按照设计稿分为四个区块
• 3.每个区块固定白底 上下间距20px，左右间距30px
• 4.每个区块底色白色，描边border: 1px solid #F0F0F0;，阴影box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
• 5.区块内间距20px，区块与区块间距40px
• 6.第一个区块是tab，default参考设计稿的成男成女字样，hover和actived参考全部字样，hover要做一个300ms的过度动画

内容改动（全部页）

• 7.如图所示，将内容压缩到两行两个共四个小分块，分别对应四个体型
• 8.每个区块固定白底 上下间距30px，左右间距30px，内间距20px
• 9.关于自适应，每个拉取6个数据，根据浏览器自适应宽度，然后根据自适应能多展示一个就多展示，不能就拉伸那个查看全部
• 10. 每个区块描边border: 1px solid #F0F0F0;，阴影box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
• 11. 每个捏脸作品描边border: 1px solid #F0F0F0;，阴影box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
• 12. 每个捏脸作品hover 变化有阴影 描边 背景色，300ms动画过度

内容改动 （体型页）

• 13.去掉标题
• 14.新增一个大的区块，白底
• 15.描边border: 1px solid #F0F0F0;，阴影box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
• 16.作品的白底描边与全部页的一致
• 17.排列的时候根据浏览器宽度自适应换行
• 18.加载更多按钮的样式参考设计稿
• 19.加载更多要加一个hover，样式可以参考顶部tab分页的hover效果（紫色底，白色字，紫色阴影）
• 20. 300ms动画过度

[nierssaxa]

捏脸内页

设计稿

https://www.figma.com/design/qdbaJLsgusUGZjwtDCFyu6/PVX4.0?node-id=23-2&m=dev&t=vkNZtDgGvec107ix-1

改动