From 75135effde93d6a82a577a35abab9b7b0932699f Mon Sep 17 00:00:00 2001
From: RyRh <3123294924@qq.com>
Date: Fri, 21 Aug 2026 17:10:36 +0800
Subject: [PATCH] =?UTF-8?q?'=E5=AE=9E=E7=8E=B0=E6=96=87=E6=A1=A3'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
设计规格说明.md | 216 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 216 insertions(+)
diff --git a/设计规格说明.md b/设计规格说明.md
index 712af88..2bc0345 100644
--- a/设计规格说明.md
+++ b/设计规格说明.md
@@ -9,6 +9,8 @@
- [货盘](#货盘)
- [产品详情](#产品详情)
- [全局设计规范](#全局设计规范)
+- [交互状态规范](#交互状态规范)
+- [横向滚动区域](#横向滚动区域)
- [资源文件](#资源文件)
## 全局设计规范
@@ -50,6 +52,220 @@
- 顶部导航栏使用 uniapp 原生 `navigationBarTitleText`，无需自定义
- 底部安全区使用 `padding-bottom: env(safe-area-inset-bottom)`
+## 交互状态规范
+
+> Figma 中使用静态设计表达选中/默认状态，以下为各页面可交互元素的状态对比。
+> 所有状态的主色均为 `#ff6800`（橙色），默认态为灰色边框/白色背景。
+
+### 产品详情页
+
+#### 颜色选择按钮
+| 状态 | 边框色 | 边框宽度 | 圆角 | 尺寸 | 文字色 |
+|------|--------|---------|------|------|--------|
+| 默认态 | `#f2f2f2` | 1px | 60px（胶囊） | 73×29px | `#1a1a1a` |
+| 选中态 | `#ff6800` | 1px | 60px（胶囊） | 73×29px | `#1a1a1a` |
+
+- 交互方式：点击切换，单选
+- 内部有颜色圆点（实际颜色由数据决定）
+- uniapp 实现：`view` 标签 + `border`，通过 `:class` 切换选中样式
+
+```vue
+
+
+ {{ item.name }}
+
+```
+
+```css
+.color-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 58rpx;
+ padding: 0 24rpx;
+ border: 2rpx solid #f2f2f2;
+ border-radius: 120rpx;
+}
+.color-item.active {
+ border-color: #ff6800;
+}
+```
+
+#### 尺码选择按钮
+| 状态 | 背景色 | 边框色 | 圆角 | 尺寸 | 文字色 | 字重 |
+|------|--------|--------|------|------|--------|------|
+| 默认态 | `#ffffff` | `#f2f2f2` | 6px | 约 40×34px | `#1a1a1a` | 400 |
+| 选中态 | `#ff6800` | `#ff6800` | 6px | 约 40×34px | `#ffffff` | 700 |
+
+- 交互方式：点击切换，单选
+- 容器横向排列，间距 6px
+- uniapp 实现：`view` 横向排列，flex 布局
+
+```css
+.size-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12rpx;
+}
+.size-item {
+ min-width: 80rpx;
+ height: 68rpx;
+ padding: 0 16rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 2rpx solid #f2f2f2;
+ border-radius: 12rpx;
+ font-size: 24rpx;
+ color: #1a1a1a;
+ background: #fff;
+}
+.size-item.active {
+ background: #ff6800;
+ border-color: #ff6800;
+ color: #fff;
+ font-weight: 700;
+}
+```
+
+### 货盘页
+
+#### 国家选择按钮
+| 状态 | 背景色 | 文字色 | 圆角 | 说明 |
+|------|--------|--------|------|------|
+| 默认态 | `#f5f5f5` | `#1a1a1a` | 较大圆角 | 灰底黑字 |
+| 选中态 | `#ff6800` | `#ffffff` | 较大圆角 | 橙底白字 |
+
+- 交互方式：点击切换，单选；再次点击已选中的国家则取消选中
+- 横向滚动（国家数量多时可左右滑动）
+- 每个国家按钮含国旗图标 + 国家名称
+
+#### 左侧分类选中态
+| 状态 | 背景色 | 文字色 | 文字大小 | 左侧指示条 |
+|------|--------|--------|---------|-----------|
+| 默认态 | `#f8f8f8` | `#666666` | 14px | 无 |
+| 选中态 | `#ffffff` | `#1a1a1a` | 14px | 左侧 3px 橙色竖条 |
+
+- 交互方式：点击切换，单选
+- 左侧竖条高度与文字行高一致或稍高
+- uniapp 实现：左侧用 `view` 做指示条，通过 `:class` 控制显示
+
+```css
+.category-item {
+ position: relative;
+ padding: 24rpx 16rpx;
+ background: #f8f8f8;
+ font-size: 28rpx;
+ color: #666;
+ text-align: center;
+}
+.category-item.active {
+ background: #fff;
+ color: #1a1a1a;
+ font-weight: 500;
+}
+.category-item.active::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 6rpx;
+ height: 32rpx;
+ background: #ff6800;
+ border-radius: 0 4rpx 4rpx 0;
+}
+```
+
+#### 筛选标签按钮
+| 状态 | 背景色 | 文字色 | 边框色 | 圆角 |
+|------|--------|--------|--------|------|
+| 默认态 | `#ffffff` | `#666666` | `#f2f2f2` | 4px |
+| 选中态 | `#ff6800` | `#ffffff` | `#ff6800` | 4px |
+
+- 交互方式：点击切换，多选（可同时选中多个标签）
+- 标签按类型分组（物流渠道/印刷位置/印刷工艺）
+- 确认按钮应用筛选，重置按钮清空选择
+
+### 首页
+
+首页主要为展示型内容，交互状态较少：
+- **4步流程卡片**：静态展示，无选中态
+- **平台功能卡片**：静态展示，无选中态
+- **优势卡片**（零库存/快速生产/优质产品/全球配送）：静态展示，带图标 + 文字
+
+## 横向滚动区域
+
+> 设计稿中宽度超过 390px 的区域，实际开发时使用横向滚动（`scroll-view` 或 `swiper`）。
+> 最终显示数量由后端数据决定，但布局样式按设计稿实现。
+
+### 首页
+
+#### 全球POD货盘 横向滚动
+- **位置**：首页中部，"全球POD货盘"标题下方
+- **内容**：多个产品卡片横向排列
+- **实现方式**：`scroll-view scroll-x`
+- **卡片间距**：按设计稿间距设置
+- **左右内边距**：与页面左右边距一致
+
+```vue
+
+
+
+
+
+
+
+```
+
+```css
+.pod-scroll {
+ width: 100%;
+ white-space: nowrap;
+}
+.pod-list {
+ display: inline-flex;
+ gap: 24rpx;
+ padding: 0 32rpx;
+}
+```
+
+#### 平台功能卡片 横向滚动
+- **位置**：首页中下部，"用强大的功能，开启盈利快车道" 标题下方
+- **内容**：多个功能卡片横向排列
+- **实现方式**：`scroll-view scroll-x`
+
+### 货盘页
+
+#### 国家选择条 横向滚动
+- **位置**：货盘页顶部，搜索栏下方
+- **内容**：国家按钮横向排列（12+ 个国家）
+- **实现方式**：`scroll-view scroll-x`
+- **注意**：总宽度超出 390px，必须横向滚动
+- **左右内边距**：与页面内容对齐
+
+#### 商品列表
+- **布局**：双列网格（2 列），纵向滚动
+- **宽度**：在 390px 以内，正常流布局，不横向滚动
+
+### 产品详情页
+
+#### 产品图片轮播
+- **位置**：详情页顶部
+- **实现方式**：`swiper` 组件
+- **自动轮播**：可选，建议开启
+
+#### 尺码表 横向滚动
+- **位置**：产品尺码区域
+- **内容**：尺码 × 肩宽/胸围/衣长/袖长 等维度表格
+- **实现方式**：`scroll-view scroll-x` 包裹 `view` 表格
+- **注意**：尺码列数较多时可能超出屏幕宽度
+
+#### 包装规格表 横向滚动
+- **位置**：包装规格区域
+- **内容**：尺寸/体积/重量 等多列表格
+- **实现方式**：`scroll-view scroll-x`
+
## 首页
- **页面尺寸**：390.0px × 3314.0px