'实现文档'

设计规格说明.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
+<view class="color-item" :class="{ active: activeColorId === item.id }" @click="selectColor(item)">
+  <view class="color-dot" :style="{ background: item.color }"></view>
+  <text class="color-name">{{ item.name }}</text>
+</view>
+```
+
+```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
+<scroll-view scroll-x class="pod-scroll" show-scrollbar="false">
+  <view class="pod-list">
+    <view class="pod-card" v-for="item in goodsList" :key="item.id">
+      <!-- 产品卡片内容 -->
+    </view>
+  </view>
+</scroll-view>
+```
+
+```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