yeuimu
79fabd85f7
- Redesign website homepage & product-center per Figma (fonts, logos, hero/footer/customer cases) - Add API upload module (multer) with static serving for uploads/public assets - Add OriginGood.delisted flag and SDS request retry logic - Add admin ImageUpload component and goods import/upload flows - Add vitest suite for website components and composables (32 tests) - Add skills, docs, plans and PRODUCT.md
44 lines
3.4 KiB
Markdown
44 lines
3.4 KiB
Markdown
# 官网首页
|
||
|
||
## 关键链接与国家货盘
|
||
|
||
- 首页“登录”“立即开始”“免费试用”“立即免费使用”等 CTA 统一通过 `window.location.href` 在当前页面跳转到 `https://inkpod.vip/user/login`。
|
||
- “全球POD货盘”国家列表读取与产品中心相同的后台国家接口，完整展示所有已配置且有关联商品的国家及图标。
|
||
- 桌面端国家列表按 6 列 × 2 行均匀排列；点击国家只切换下方对应货盘，不发生页面跳转。
|
||
- 国家下方的品类卡链接到 `/product-center?countryId={后台国家ID}&categoryId={后台品类ID}`，产品中心打开后自动应用国家和品类筛选。
|
||
|
||
官网首页位于 `apps/website/app/pages/index.vue`，访问路径为 `/`。页面基于 Figma 节点 `897:2047` 还原，桌面设计基准为 `1440 x 6933px`。
|
||
|
||
## 页面结构
|
||
|
||
首页依次由导航、首屏、平台数据、四步流程、全球 POD 货盘、渠道能力、平台优势、公司简介、用户案例、行动区和页脚组成。各区块保持独立 Vue 组件，首页仅负责组合。
|
||
|
||
桌面端主要区块边界为：`80 / 980 / 1580 / 2515 / 3522 / 4276 / 4706 / 5306 / 6234 / 6572px`。流程区默认展示“选择产品”，渠道能力默认展示“店铺集成”；用户主动操作后仍可切换。
|
||
|
||
## 素材
|
||
|
||
首页图片统一存放于 `apps/website/public/`。Figma 用户案例图使用 `case-*.png` 命名，不依赖临时远程链接或随机占位图。
|
||
|
||
`/主视觉.png` 保持为宽高 `800 × 400` 的普通 `<img>`，渲染宽度不超过原图 800px，不作为背景图，也不会随超宽屏幕继续放大。
|
||
|
||
## 自动轮播
|
||
|
||
- 四步流程和“用强大功能，开启盈利快车道”功能区均每 2 秒自动切换，用户仍可点击或悬停立即切换。四步流程当前项的 2px 黄线会在 2 秒内从 0% 填满至 100%，填满后切换下一张；步骤标题与功能轮播项保持一致，桌面为 36px 常规字重。
|
||
- “用强大功能，开启盈利快车道”左侧标题桌面端为 30px，四个功能项在 550px 高度内等分排列，与右侧轮播图上下对齐。
|
||
- 用户案例在桌面和移动端均无缝横向滚动，完整循环放慢至 30 秒；悬停或聚焦时暂停。
|
||
- `prefers-reduced-motion: reduce` 环境下关闭持续滚动动画。
|
||
- 导航中的“选品推荐”和“解决方案”入口暂时隐藏，相关实现代码保留以便后续恢复。
|
||
- 桌面导航使用 18px 字号，移动导航保持原有触控尺寸。
|
||
- “全球 POD 货盘”使用固定旗帜列对齐国家名称，“更多产品”操作固定在货盘区底部。
|
||
- 首屏“链通全球”使用主题橙色渐变，0 库存、0 关税、1 件起订以竖线分隔；平台数据卡的统计数值使用主题橙色。“全球 POD 货盘”的“更多产品”为无按钮容器的主题色文本链接。
|
||
- 官网全局使用随项目提供的 PingFang SC Thin、Regular、Medium、Semibold 字体，首屏副标题使用 Thin 字重。首屏渐变从“通”字开始，“通”字仅保留少量渐变过渡；主标题与副标题共用左对齐容器。平台数据卡会抵消插图上移造成的底部占位，减少卡片留白。
|
||
|
||
## 验证
|
||
|
||
```bash
|
||
pnpm --filter @inkreach/website test --run
|
||
pnpm --filter @inkreach/website build
|
||
```
|
||
|
||
浏览器以 `1440 x 1024` 视口检查首页总高、区块边界、图片加载和横向溢出。
|