refactor(style): 优化首页主要组件样式及布局实现

- 移除 BestSellers 组件中多余的 SCSS 样式,改用 TailwindCSS 工具类规范字体大小和颜色
- 替换 BestSellers.tsx 中对应元素的样式类为 TailwindCSS 实现,提升样式一致性和维护性
- 调整 CatalogShowcase 组件样式,删除不必要的 SCSS 样式,增加内边距并修改书本尺寸,整体优化布局
- CatalogShowcase.tsx 中相关文本和图形元素改为 TailwindCSS 实现,规范字体大小、颜色和间距
- ContactSection 组件部分样式移除过
This commit is contained in:
2026-04-09 13:35:50 +08:00
parent 25abd81d9f
commit 61025522aa
13 changed files with 89 additions and 253 deletions

View File

@@ -13,5 +13,5 @@
}
]
},
"lastUpdated": 1775711001059
"lastUpdated": 1775712243089
}

View File

@@ -47,13 +47,22 @@
## 字体大小规范 (2026-04-09 更新)
- 微信小程序端按移动端标准设计,最小辅助文字 13-14px
- 标签/辅助14px
- 正文/描述15-16px
- 小标题/按钮文字16-17px
- 区块标题20-24px
- 强调数字价格、数据28-36px
- 使用 TailwindCSS 工具类text-xs/sm/base/lg/xl/2xl/3xl/4xl不使用 SCSS font-size
- 扩展了 tailwind.config.jstext-15(15px)、text-17(17px)、text-28(28px)
- 标签/辅助14px (text-sm)
- 正文/描述15-16px (text-15/text-base)
- 小标题/按钮文字16-17px (text-base/text-17)
- 区块标题20-24px (text-xl/text-2xl)
- 强调数字价格、数据28-36px (text-28/text-4xl)
- 所有图标必须从 `@nutui/icons-react-taro` 导入
## Tailwind 小程序兼容性注意事项
- **禁止使用斜杠透明度简写**`text-white/40``bg-black/50``border-gray/30` 等含 `/` 的写法在小程序不兼容,需要透明度时改用 SCSS `color: rgba(...)` 或在 tailwind.config.js 中定义语义色
- **禁止使用小数间距**`mt-0.5``p-0.5``gap-0.5` 等含小数点的工具类在小程序不兼容,改用整数如 `mt-1``p-1`
- **禁止使用任意值 `-[?]` 写法**`text-[14px]``w-[100px]` 等方括号任意值写法在小程序不兼容,改用 Tailwind 预设类或在 tailwind.config.js 中扩展
- **颜色替代方案**`text-white` 在小程序中可能不生效,改用 `text-gray`(如 `text-gray-100`~`text-gray-50` 等),深色背景上的白色文字优先用 `text-gray-100`
- 当前代码中 ContactSection/TrustSection/CatalogShowcase 共有 9 处 `text-white/xx` 待修复
## 画册页正式版 (2026-04-01)
- 首页已实际挂载 `src/pages/index/BrochureEntry.tsx` 入口,位置在 Banner 下方。
- `src/pages/brochure/index.tsx` 当前为原生正式版结构:主营方案、核心优势、升级关键词、服务承诺、案例方向、服务流程、预约咨询信息。