Files
inkreach-uni/设计规格说明.md
2026-08-21 17:10:36 +08:00

983 lines
30 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 印美达小程序设计规格说明 (uniapp)
> 由 Figma API 自动提取,基于 inkreach 设计稿
> 设计稿宽度:390pxuniapp 中使用 rpx 适配,390px = 750rpx,即 1px = 1.923rpx
## 目录
- [首页](#首页)
- [货盘](#货盘)
- [产品详情](#产品详情)
- [全局设计规范](#全局设计规范)
- [交互状态规范](#交互状态规范)
- [横向滚动区域](#横向滚动区域)
- [资源文件](#资源文件)
## 全局设计规范
### 颜色规范
| 颜色 | 用途示例 |
|------|----------|
| `#000000` | 9:41 |
| `#1a1a1a` | 4步开始你的按需定制生意 |
| `#666666` | 男士服装 |
| `#929292` | 搜索产品 |
| `#979797` | SKU: DG120 |
| `#ff0000` | ¥19.00 |
| `#ff6800` | 11国 |
| `#ffffff` | 美国 |
| `rgba(0, 0, 0, 0.90)` | 产品详情 |
### 字号规范
| px | rpx (约) | 用途 |
|-----|---------|------|
| 28.0px | 54rpx | |
| 20.0px | 38rpx | |
| 18.0px | 35rpx | |
| 16.0px | 31rpx | |
| 15.0px | 29rpx | |
| 14.0px | 27rpx | |
| 13.0px | 25rpx | |
| 12.0px | 23rpx | |
| 11.0px | 21rpx | |
| 10.0px | 19rpx | |
### 布局适配说明
- 设计稿基于 **390px** 宽度
- uniapp 使用 **rpx** 单位:`1px ≈ 1.923rpx`
- 开发时将 px 值 × 1.923 四舍五入转为 rpx
- 顶部导航栏使用 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
- **有效开发区域**:y = 119px 以下(排除状态栏+导航栏)
- **区块数量**39 个主要区块
- **文本节点**69 个
- **图片资源**11 张
- **图标资源**4 个
### 区块结构
| # | 区块名称 | 类型 | Y坐标 | 尺寸 (W×H) | 关键样式 |
|---|---------|------|-------|-----------|----------|
| 1 | 全球POD供应链平台 | TEXT | 149.0 | 257.0×39.0 | fs:28.0 |
| 2 | 连接设计、生产、订单与全球物流,助力跨境卖家快速上新、稳定履约 | TEXT | 194.0 | 310.0×14.0 | fs:10.0 |
| 3 | Group 43 | GROUP | 226.0 | 276.0×38.0 | |
| 4 | Rectangle 178 | RECTANGLE | 259.0 | 390.0×390.0 | |
| 5 | Section Title | TEXT | 669.0 | 232.0×29.0 | fs:20.0 |
| 6 | Frame 53 | FRAME | 718.0 | 672.0×80.0 | |
| 7 | image 25 | RECTANGLE | 808.0 | 370.0×370.0 | r:6.0 |
| 8 | 全球POD货盘 | GROUP | 1198.0 | 577.0×630.0 | |
| 9 | Section Title | TEXT | 1848.0 | 280.0×29.0 | fs:20.0 |
| 10 | Frame 54 | FRAME | 1897.0 | 672.0×80.0 | |
| 11 | Rectangle 64 | RECTANGLE | 1987.0 | 370.0×257.0 | r:8.0 |
| 12 | Rectangle 179 | RECTANGLE | 2264.0 | 390.0×261.0 | bg:#f8f8f8 |
| 13 | Section Title | TEXT | 2286.0 | 201.0×29.0 | fs:20.0 |
| 14 | Rectangle 182 | RECTANGLE | 2335.0 | 180.0×80.0 | bg:#ffffff r:6.0 |
| 15 | Rectangle 183 | RECTANGLE | 2335.0 | 180.0×80.0 | bg:#ffffff r:6.0 |
| 16 | 快速生产图标 | FRAME | 2362.0 | 26.0×26.0 | bg:#ffffff |
| 17 | 零库存图标 | FRAME | 2362.0 | 26.0×26.0 | bg:#ffffff |
| 18 | 零库存 | TEXT | 2364.0 | 48.0×22.0 | fs:16.0 |
| 19 | 快速生产 | TEXT | 2364.0 | 64.0×22.0 | fs:16.0 |
| 20 | Rectangle 184 | RECTANGLE | 2425.0 | 180.0×80.0 | bg:#ffffff r:6.0 |
| 21 | Rectangle 185 | RECTANGLE | 2425.0 | 180.0×80.0 | bg:#ffffff r:6.0 |
| 22 | 优质产品图标 | FRAME | 2452.0 | 26.0×26.0 | bg:#ffffff |
| 23 | 全球配送图标 | FRAME | 2452.0 | 26.0×26.0 | bg:#ffffff |
| 24 | 优质产品 | TEXT | 2454.0 | 64.0×22.0 | fs:16.0 |
| 25 | 全球配送 | TEXT | 2454.0 | 64.0×22.0 | fs:16.0 |
| 26 | 公司简介背景 | RECTANGLE | 2525.0 | 391.0×544.0 | |
| 27 | 公司简介 | TEXT | 2545.0 | 80.0×28.0 | fs:20.0 |
| 28 | 用科技重新定义POD供应链 让每一个创意,都能高效抵达全球 | TEXT | 2593.0 | 257.0×50.0 | fs:18.0 |
| 29 | INKREACH印美达全球,一家以AI与智能印花技术驱动的全球化POD柔性供应链公司,致力于成为全球创业者最可靠的成长伙伴。 | TEXT | 2653.0 | 370.0×34.0 | fs:12.0 |
| 30 | 服务对象与场景 | TEXT | 2707.0 | 98.0×20.0 | fs:14.0 |
| 31 | 愿景 | TEXT | 2707.0 | 28.0×20.0 | fs:14.0 |
| 32 | 服务于数千家跨境独立站、TikTok、TEMU、SHEIN等平台商家,提供从海外生产到末端物流的一站式供应链服务,让电商创业者专注增长,无惧后端履约。 | TEXT | 2737.0 | 173.0×102.0 | fs:12.0 |
| 33 | 我们坚信,每一个创意都值得被完美呈现。
Inkreach将持续深耕智能供应链生态,用科技消除制造壁垒,让全球创业者专注发挥创造力,共同书写个性化电商的新纪元。 | TEXT | 2737.0 | 173.0×102.0 | fs:12.0 |
| 34 | Group 44 | GROUP | 2859.0 | 180.0×90.0 | |
| 35 | Group 45 | GROUP | 2859.0 | 180.0×90.0 | |
| 36 | Group 46 | GROUP | 2959.0 | 180.0×90.0 | |
| 37 | Group 47 | GROUP | 2959.0 | 180.0×90.0 | |
| 38 | Group 48 | GROUP | 3069.0 | 391.0×219.0 | |
| 39 | Group 57 | GROUP | 3289.0 | 390.0×56.0 | |
### 文本样式详情
**28.0px / 400 / transparent**
```css
font-size: 28.0px; /* 54rpx */
font-weight: 400;
color: transparent;
line-height: 39.2px;
```
示例:全球POD供应链平台
**20.0px / 400 / #1a1a1a**
```css
font-size: 20.0px; /* 38rpx */
font-weight: 400;
color: #1a1a1a;
line-height: 29.0px;
```
示例:4步开始你的按需定制生意、全球POD货盘、用强大的功能,开启盈利快车道
**20.0px / 400 / #000000**
```css
font-size: 20.0px; /* 38rpx */
font-weight: 400;
color: #000000;
line-height: 28.0px;
```
示例:公司简介
**18.0px / 400 / transparent**
```css
font-size: 18.0px; /* 35rpx */
font-weight: 400;
color: transparent;
line-height: 25.2px;
```
示例:用科技重新定义POD供应链 让每一个创意,都能高效抵达全球
**16.0px / 400 / #ff6800**
```css
font-size: 16.0px; /* 31rpx */
font-weight: 400;
color: #ff6800;
line-height: 22.4px;
```
示例:11国、24H、1000W+
**16.0px / 400 / #000000**
```css
font-size: 16.0px; /* 31rpx */
font-weight: 400;
color: #000000;
line-height: 22.4px;
```
示例:女士短款露脐T恤、零库存、优质产品
**16.0px / 900 / #ffffff**
```css
font-size: 16.0px; /* 31rpx */
font-weight: 900;
color: #ffffff;
line-height: 26.0px;
```
示例:01、04
**16.0px / 400 / #ffffff**
```css
font-size: 16.0px; /* 31rpx */
font-weight: 400;
color: #ffffff;
line-height: 22.4px;
```
示例:选择产品、设计工具、店铺集成
**16.0px / 900 / #ff6800**
```css
font-size: 16.0px; /* 31rpx */
font-weight: 900;
color: #ff6800;
line-height: 26.0px;
```
示例:02、03、04
**15.0px / 600 / #000000**
```css
font-size: 15.0px; /* 29rpx */
font-weight: 600;
color: #000000;
line-height: 20.0px;
```
示例:9:41
**14.0px / 400 / #000000**
```css
font-size: 14.0px; /* 27rpx */
font-weight: 400;
color: #000000;
line-height: 19.6px;
```
示例:服务对象与场景、愿景
**13.0px / 400 / #ffffff**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #ffffff;
line-height: 18.2px;
```
示例:美国
**13.0px / 400 / #000000**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #000000;
line-height: 18.2px;
```
示例:加拿大、墨西哥、巴西
**12.0px / 400 / #ff6800**
```css
font-size: 12.0px; /* 23rpx */
font-weight: 400;
color: #ff6800;
line-height: 16.8px;
```
示例:更多产品
**12.0px / 400 / #000000**
```css
font-size: 12.0px; /* 23rpx */
font-weight: 400;
color: #000000;
line-height: 16.8px;
```
示例:INKREACH印美达全球,一家以AI与智能印花技术驱动的全、服务于数千家跨境独立站、TikTok、TEMU、SHEIN等、我们坚信,每一个创意都值得被完美呈现。
Inkreach将持
**10.0px / 400 / #000000**
```css
font-size: 10.0px; /* 19rpx */
font-weight: 400;
color: #000000;
line-height: 14.0px;
```
示例:连接设计、生产、订单与全球物流,助力跨境卖家快速上新、稳定履、搭载最新智能印花工艺,品质与效率兼得、11国自营本土化POD工厂,日均产能超20万单
**10.0px / 400 / #ffffff**
```css
font-size: 10.0px; /* 19rpx */
font-weight: 400;
color: #ffffff;
line-height: 14.0px;
```
示例:海量精选产品,满足多元定制需求、轻松设计,快速定制、与全球主流电商平台无缝对接
## 货盘
- **页面尺寸**390.0px × 844.0px
- **有效开发区域**:y = 119px 以下(排除状态栏+导航栏)
- **区块数量**13 个主要区块
- **文本节点**42 个
- **图片资源**21 张
- **图标资源**0 个
### 区块结构
| # | 区块名称 | 类型 | Y坐标 | 尺寸 (W×H) | 关键样式 |
|---|---------|------|-------|-----------|----------|
| 1 | Country Filter Bar | FRAME | 119.0 | 390.0×99.0 | bg:#ffffff |
| 2 | Category Sidebar | FRAME | 218.0 | 90.0×794.0 | bg:#ffffff |
| 3 | Frame 55 | FRAME | 228.0 | 95.0×26.0 | bg:#ffffff r:60.0 |
| 4 | Frame 56 | FRAME | 228.0 | 94.0×26.0 | bg:#ffffff r:60.0 |
| 5 | Group 49 | GROUP | 264.0 | 135.0×180.0 | r:6.0 |
| 6 | Group 50 | GROUP | 264.0 | 135.0×180.0 | r:6.0 |
| 7 | Group 51 | GROUP | 454.0 | 135.0×180.0 | r:6.0 |
| 8 | Group 52 | GROUP | 454.0 | 135.0×180.0 | r:6.0 |
| 9 | Group 53 | GROUP | 644.0 | 135.0×180.0 | r:6.0 |
| 10 | Group 54 | GROUP | 644.0 | 135.0×180.0 | r:6.0 |
| 11 | Group 57 | GROUP | 819.0 | 390.0×56.0 | |
| 12 | Group 55 | GROUP | 834.0 | 135.0×180.0 | r:6.0 |
| 13 | Group 56 | GROUP | 834.0 | 135.0×180.0 | r:6.0 |
### 文本样式详情
**15.0px / 600 / #000000**
```css
font-size: 15.0px; /* 29rpx */
font-weight: 600;
color: #000000;
line-height: 20.0px;
```
示例:9:41
**15.0px / 400 / #ff0000**
```css
font-size: 15.0px; /* 29rpx */
font-weight: 400;
color: #ff0000;
line-height: 21.0px;
```
示例:¥19.00
**13.0px / 400 / #929292**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #929292;
line-height: 19.0px;
```
示例:搜索产品
**13.0px / 400 / #ffffff**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #ffffff;
line-height: 19.0px;
```
示例:搜索
**13.0px / 500 / #ff6800**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 500;
color: #ff6800;
line-height: 17.0px;
```
示例:全部商品
**13.0px / 400 / #666666**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #666666;
line-height: 17.0px;
```
示例:男士服装、女士服装、儿童服装
**13.0px / 400 / #000000**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #000000;
line-height: 18.2px;
```
示例:200g纯棉T恤
**12.0px / 400 / #000000**
```css
font-size: 12.0px; /* 23rpx */
font-weight: 400;
color: #000000;
line-height: 16.8px;
```
示例:美国、波兰、日本
**12.0px / 400 / #ff6800**
```css
font-size: 12.0px; /* 23rpx */
font-weight: 400;
color: #ff6800;
line-height: 16.8px;
```
示例:180G纯棉T恤
**10.0px / 400 / #000000**
```css
font-size: 10.0px; /* 19rpx */
font-weight: 400;
color: #000000;
line-height: 14.0px;
```
示例:首页、产品
## 产品详情
- **页面尺寸**390.0px × 1717.0px
- **有效开发区域**:y = 119px 以下(排除状态栏+导航栏)
- **区块数量**:111 个主要区块
- **文本节点**98 个
- **图片资源**1 张
- **图标资源**1 个
### 区块结构
| # | 区块名称 | 类型 | Y坐标 | 尺寸 (W×H) | 关键样式 |
|---|---------|------|-------|-----------|----------|
| 1 | Rectangle 194 | RECTANGLE | 119.0 | 390.0×260.0 | bg:#f2f2f2 |
| 2 | Frame 105 | FRAME | 361.0 | 72.0×8.0 | |
| 3 | Product Name | TEXT | 389.0 | 370.0×26.0 | fs:18.0 |
| 4 | SKU | TEXT | 419.0 | 70.0×17.0 | fs:12.0 |
| 5 | SKU | TEXT | 419.0 | 56.0×17.0 | fs:12.0 |
| 6 | ¥19.00 | TEXT | 446.0 | 54.0×34.0 | fs:15.0 |
| 7 | Line 23 | LINE | 490.0 | 370.0×0.0 | |
| 8 | 生产工艺 | TEXT | 501.0 | 40.0×14.0 | fs:10.0 |
| 9 | 发货时效 | TEXT | 501.0 | 40.0×14.0 | fs:10.0 |
| 10 | 印花 | TEXT | 501.0 | 20.0×14.0 | fs:10.0 |
| 11 | 产品编码 | TEXT | 501.0 | 40.0×14.0 | fs:10.0 |
| 12 | 白墨烫画 | TEXT | 521.0 | 52.0×17.0 | fs:13.0 |
| 13 | 48小时 | TEXT | 521.0 | 42.0×17.0 | fs:13.0 |
| 14 | 单面印 | TEXT | 521.0 | 39.0×17.0 | fs:13.0 |
| 15 | NS6001152 | TEXT | 521.0 | 73.0×17.0 | fs:13.0 |
| 16 | Rectangle 195 | RECTANGLE | 550.0 | 390.0×6.0 | bg:#f5f5f5 |
| 17 | 颜色 | TEXT | 571.0 | 30.0×17.0 | fs:15.0 |
| 18 | Frame 107 | FRAME | 603.0 | 73.0×29.0 | r:60.0 |
| 19 | Frame 108 | FRAME | 603.0 | 73.0×29.0 | r:60.0 |
| 20 | Frame 109 | FRAME | 603.0 | 73.0×29.0 | r:60.0 |
| 21 | Frame 110 | FRAME | 603.0 | 73.0×29.0 | r:60.0 |
| 22 | Frame 111 | FRAME | 642.0 | 73.0×29.0 | r:60.0 |
| 23 | Frame 112 | FRAME | 642.0 | 73.0×29.0 | r:60.0 |
| 24 | Rectangle 196 | RECTANGLE | 686.0 | 390.0×6.0 | bg:#f5f5f5 |
| 25 | 尺码 | TEXT | 707.0 | 30.0×17.0 | fs:15.0 |
| 26 | Frame 113 | FRAME | 739.0 | 244.0×34.0 | |
| 27 | Rectangle 197 | RECTANGLE | 788.0 | 390.0×6.0 | bg:#f5f5f5 |
| 28 | 产品参数 | TEXT | 809.0 | 60.0×17.0 | fs:15.0 |
| 29 | 克重 | TEXT | 851.0 | 26.0×17.0 | fs:13.0 |
| 30 | 180g | TEXT | 851.0 | 32.0×17.0 | fs:13.0 |
| 31 | Line 24 | LINE | 880.0 | 370.0×0.0 | |
| 32 | 材质 | TEXT | 892.0 | 26.0×17.0 | fs:13.0 |
| 33 | 纯棉 | TEXT | 892.0 | 26.0×17.0 | fs:13.0 |
| 34 | Line 25 | LINE | 921.0 | 370.0×0.0 | |
| 35 | 定制类型 | TEXT | 933.0 | 52.0×17.0 | fs:13.0 |
| 36 | 来图定制 | TEXT | 933.0 | 52.0×17.0 | fs:13.0 |
| 37 | Line 26 | LINE | 962.0 | 370.0×0.0 | |
| 38 | 补充说明 | TEXT | 974.0 | 52.0×17.0 | fs:13.0 |
| 39 | 【 材质说明 】 97%聚酯纤维 3%氨纶 【 产品性能 】 优质材料:这款露背T恤采用优质材料制成,面料柔软、轻薄贴身。 时尚外观:性感T恤设计,时尚性感,简约大方,适合大多数人的体型。 面料轻盈:舒适款式设计为您带来一个更加干净的外观,面料轻盈柔软,让您全天舒适。 轻松百搭:简单搭配外套、长裤、牛仔裤或沙滩休闲短裤,都是非常不错的选择,也可以选择就单穿,让您一直保持凉爽和放松。 【 适用情景 】 适用于日常生活、工作、出游、逛街等场合。 【 洗涤说明 】 可手洗可机洗,不要长时间浸泡,不可漂白,洗涤液温度不能超过45ºC。 【 温馨提醒 】 该图片展示效果仅供参考,最终效果以实物为准!由于生产批次、机器设备、纸样大小不同等客观因素原因,难以避免或将存在微小色差、位置及大小等误差,如遇以上问题均属于正常现象,将不予纳入售后处理范畴。 另外,根据各国本土政策要求,请勿上传科技单、跑水单等非正规来源面单,严禁使用侵权图案及未授权 IP、商标、赛事元素等内容。 违规订单将不予生产发货,已产生费用不予退还,相应风险与责任由下单方自行承担。感谢您的理解与配合。 | TEXT | 974.0 | 279.0×118.0 | fs:13.0 |
| 40 | Rectangle 207 | RECTANGLE | 1062.0 | 390.0×60.0 | |
| 41 | 展开 | TEXT | 1099.0 | 24.0×17.0 | fs:12.0 |
| 42 | 展开 | FRAME | 1102.0 | 12.0×12.0 | bg:#ffffff |
| 43 | Rectangle 198 | RECTANGLE | 1122.0 | 390.0×6.0 | bg:#f5f5f5 |
| 44 | 产品尺码 | TEXT | 1143.0 | 60.0×17.0 | fs:15.0 |
| 45 | 单位:cm | TEXT | 1145.0 | 49.0×17.0 | fs:11.0 |
| 46 | 单位:cm | TEXT | 1145.0 | 49.0×17.0 | fs:11.0 |
| 47 | Rectangle 199 | RECTANGLE | 1175.0 | 370.0×40.0 | bg:#dfdfdf r:6.0 |
| 48 | 尺码 | TEXT | 1186.0 | 26.0×17.0 | fs:13.0 |
| 49 | 肩宽 | TEXT | 1186.0 | 26.0×17.0 | fs:13.0 |
| 50 | 胸围 | TEXT | 1186.0 | 26.0×17.0 | fs:13.0 |
| 51 | 衣长 | TEXT | 1186.0 | 26.0×17.0 | fs:13.0 |
| 52 | 袖长 | TEXT | 1186.0 | 26.0×17.0 | fs:13.0 |
| 53 | S | TEXT | 1226.0 | 9.0×17.0 | fs:13.0 |
| 54 | 51 | TEXT | 1226.0 | 16.0×17.0 | fs:13.0 |
| 55 | 56 | TEXT | 1226.0 | 16.0×17.0 | fs:13.0 |
| 56 | 62 | TEXT | 1226.0 | 16.0×17.0 | fs:13.0 |
| 57 | 48 | TEXT | 1226.0 | 16.0×17.0 | fs:13.0 |
| 58 | Rectangle 201 | RECTANGLE | 1255.0 | 370.0×40.0 | bg:#f7f7f7 r:6.0 |
| 59 | 51 | TEXT | 1267.0 | 16.0×17.0 | fs:13.0 |
| 60 | 56 | TEXT | 1267.0 | 16.0×17.0 | fs:13.0 |
| 61 | 62 | TEXT | 1267.0 | 16.0×17.0 | fs:13.0 |
| 62 | 48 | TEXT | 1267.0 | 16.0×17.0 | fs:13.0 |
| 63 | M | TEXT | 1267.0 | 12.0×17.0 | fs:13.0 |
| 64 | 51 | TEXT | 1306.0 | 16.0×17.0 | fs:13.0 |
| 65 | 56 | TEXT | 1306.0 | 16.0×17.0 | fs:13.0 |
| 66 | 62 | TEXT | 1306.0 | 16.0×17.0 | fs:13.0 |
| 67 | 48 | TEXT | 1306.0 | 16.0×17.0 | fs:13.0 |
| 68 | L | TEXT | 1306.0 | 8.0×17.0 | fs:13.0 |
| 69 | Rectangle 202 | RECTANGLE | 1335.0 | 370.0×40.0 | bg:#f7f7f7 r:6.0 |
| 70 | 51 | TEXT | 1347.0 | 16.0×17.0 | fs:13.0 |
| 71 | 56 | TEXT | 1347.0 | 16.0×17.0 | fs:13.0 |
| 72 | 62 | TEXT | 1347.0 | 16.0×17.0 | fs:13.0 |
| 73 | 48 | TEXT | 1347.0 | 16.0×17.0 | fs:13.0 |
| 74 | XL | TEXT | 1347.0 | 16.0×17.0 | fs:13.0 |
| 75 | Rectangle 203 | RECTANGLE | 1390.0 | 390.0×6.0 | bg:#f5f5f5 |
| 76 | 包装规格 | TEXT | 1411.0 | 60.0×17.0 | fs:15.0 |
| 77 | Rectangle 204 | RECTANGLE | 1443.0 | 370.0×40.0 | bg:#dfdfdf r:6.0 |
| 78 | 尺码 | TEXT | 1454.0 | 26.0×17.0 | fs:13.0 |
| 79 | 尺寸 | TEXT | 1454.0 | 26.0×17.0 | fs:13.0 |
| 80 | 体积 | TEXT | 1454.0 | 26.0×17.0 | fs:13.0 |
| 81 | 重量 | TEXT | 1454.0 | 26.0×17.0 | fs:13.0 |
| 82 | 200.00g | TEXT | 1494.0 | 39.0×17.0 | fs:10.0 |
| 83 | 31.0*23.0*1.0cm | TEXT | 1495.0 | 81.0×17.0 | fs:10.0 |
| 84 | 713.00cm³ | TEXT | 1495.0 | 52.0×17.0 | fs:10.0 |
| 85 | S | TEXT | 1505.0 | 9.0×17.0 | fs:13.0 |
| 86 | 12.20*9.06*0.39in | TEXT | 1514.0 | 87.0×17.0 | fs:10.0 |
| 87 | 43.51in³ | TEXT | 1514.0 | 40.0×17.0 | fs:10.0 |
| 88 | 0.36lb | TEXT | 1514.0 | 29.0×17.0 | fs:10.0 |
| 89 | Rectangle 205 | RECTANGLE | 1543.0 | 370.0×60.0 | bg:#f7f7f7 r:6.0 |
| 90 | 200.00g | TEXT | 1554.0 | 39.0×17.0 | fs:10.0 |
| 91 | 31.0*23.0*1.0cm | TEXT | 1555.0 | 81.0×17.0 | fs:10.0 |
| 92 | 713.00cm³ | TEXT | 1555.0 | 52.0×17.0 | fs:10.0 |
| 93 | M | TEXT | 1565.0 | 12.0×17.0 | fs:13.0 |
| 94 | 12.20*9.06*0.39in | TEXT | 1574.0 | 87.0×17.0 | fs:10.0 |
| 95 | 43.51in³ | TEXT | 1574.0 | 40.0×17.0 | fs:10.0 |
| 96 | 0.36lb | TEXT | 1574.0 | 29.0×17.0 | fs:10.0 |
| 97 | 200.00g | TEXT | 1614.0 | 39.0×17.0 | fs:10.0 |
| 98 | 31.0*23.0*1.0cm | TEXT | 1615.0 | 81.0×17.0 | fs:10.0 |
| 99 | 713.00cm³ | TEXT | 1615.0 | 52.0×17.0 | fs:10.0 |
| 100 | L | TEXT | 1623.0 | 8.0×17.0 | fs:13.0 |
| 101 | 12.20*9.06*0.39in | TEXT | 1634.0 | 87.0×17.0 | fs:10.0 |
| 102 | 43.51in³ | TEXT | 1634.0 | 40.0×17.0 | fs:10.0 |
| 103 | 0.36lb | TEXT | 1634.0 | 29.0×17.0 | fs:10.0 |
| 104 | Rectangle 206 | RECTANGLE | 1663.0 | 370.0×60.0 | bg:#f7f7f7 r:6.0 |
| 105 | 200.00g | TEXT | 1674.0 | 39.0×17.0 | fs:10.0 |
| 106 | 31.0*23.0*1.0cm | TEXT | 1675.0 | 81.0×17.0 | fs:10.0 |
| 107 | 713.00cm³ | TEXT | 1675.0 | 52.0×17.0 | fs:10.0 |
| 108 | XL | TEXT | 1685.0 | 16.0×17.0 | fs:13.0 |
| 109 | 12.20*9.06*0.39in | TEXT | 1694.0 | 87.0×17.0 | fs:10.0 |
| 110 | 43.51in³ | TEXT | 1694.0 | 40.0×17.0 | fs:10.0 |
| 111 | 0.36lb | TEXT | 1694.0 | 29.0×17.0 | fs:10.0 |
### 文本样式详情
**18.0px / 400 / #1a1a1a**
```css
font-size: 18.0px; /* 35rpx */
font-weight: 400;
color: #1a1a1a;
line-height: 26.0px;
```
示例:180G牛奶丝T恤 DG120
**16.0px / 500 / rgba(0, 0, 0, 0.90)**
```css
font-size: 16.0px; /* 31rpx */
font-weight: 500;
color: rgba(0, 0, 0, 0.90);
line-height: 24.0px;
```
示例:产品详情
**15.0px / 600 / #000000**
```css
font-size: 15.0px; /* 29rpx */
font-weight: 600;
color: #000000;
line-height: 20.0px;
```
示例:9:41
**15.0px / 400 / #ff0000**
```css
font-size: 15.0px; /* 29rpx */
font-weight: 400;
color: #ff0000;
line-height: 21.0px;
```
示例:¥19.00
**15.0px / 400 / #000000**
```css
font-size: 15.0px; /* 29rpx */
font-weight: 400;
color: #000000;
line-height: 17.0px;
```
示例:颜色、尺码、产品参数
**14.0px / 400 / #000000**
```css
font-size: 14.0px; /* 27rpx */
font-weight: 400;
color: #000000;
line-height: 17.0px;
```
示例:白色、藏青、黑色
**14.0px / 400 / #ff6800**
```css
font-size: 14.0px; /* 27rpx */
font-weight: 400;
color: #ff6800;
line-height: 17.0px;
```
示例:灰色
**13.0px / 400 / #000000**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #000000;
line-height: 17.0px;
```
示例:白墨烫画、48小时、单面印
**13.0px / 400 / #ff6800**
```css
font-size: 13.0px; /* 25rpx */
font-weight: 400;
color: #ff6800;
line-height: 17.0px;
```
示例:L
**12.0px / 400 / #979797**
```css
font-size: 12.0px; /* 23rpx */
font-weight: 400;
color: #979797;
line-height: 17.0px;
```
示例:SKU: DG120、国家: 美国
**12.0px / 400 / #000000**
```css
font-size: 12.0px; /* 23rpx */
font-weight: 400;
color: #000000;
line-height: 17.0px;
```
示例:展开
**11.0px / 400 / #000000**
```css
font-size: 11.0px; /* 21rpx */
font-weight: 400;
color: #000000;
line-height: 17.0px;
```
示例:单位:cm
**10.0px / 400 / #979797**
```css
font-size: 10.0px; /* 19rpx */
font-weight: 400;
color: #979797;
line-height: 14.0px;
```
示例:生产工艺、发货时效、印花
**10.0px / 400 / #000000**
```css
font-size: 10.0px; /* 19rpx */
font-weight: 400;
color: #000000;
line-height: 17.0px;
```
示例:31.0*23.0*1.0cm、713.00cm³、12.20*9.06*0.39in
## 资源文件
### 图片资源
| 文件名 | 来源页面 | 说明 |
|--------|---------|------|
| `assets/home/images/Rectangle_178_1426_1248.png` | 首页 | 首页 |
| `assets/home/images/Rectangle_181_1455_1450.png` | 首页 | 女士短款 |
| `assets/home/images/Rectangle_181_1455_1456.png` | 首页 | 女士短款 |
| `assets/home/images/Rectangle_63_1446_1437.png` | 首页 | 女士短款 |
| `assets/home/images/Rectangle_63_1455_1461.png` | 首页 | 女士短款 |
| `assets/home/images/公司简介背景_1461_1606.png` | 首页 | 首页 |
| `assets/home/images/image_25_1484_1689.png` | 首页 | 首页 |
| `assets/home/images/Rectangle_64_1484_1735.png` | 首页 | 首页 |
| `assets/home/images/image_26_1496_1761.png` | 首页 | Group 48 |
| `assets/home/images/Rectangle_187_1470_1653.png` | 首页 | Group 48 |
| `assets/home/images/image_28_1498_1767.png` | 首页 | Group 48 |
| `assets/products/images/Rectangle_149_1519_255.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_389.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_381.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_383.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_391.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_387.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_149_1523_264.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_393.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_149_1523_324.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_385.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_150_1533_395.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_149_1523_272.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_149_1523_312.png` | 货盘 | Frame 94 |
| `assets/products/images/Rectangle_192_1523_347.png` | 货盘 | Group 49 |
| `assets/products/images/Rectangle_192_1529_361.png` | 货盘 | Group 51 |
| `assets/products/images/Rectangle_192_1529_371.png` | 货盘 | Group 53 |
| `assets/products/images/Rectangle_192_1544_408.png` | 货盘 | Group 55 |
| `assets/products/images/Rectangle_192_1529_356.png` | 货盘 | Group 50 |
| `assets/products/images/Rectangle_192_1529_366.png` | 货盘 | Group 52 |
| `assets/products/images/Rectangle_192_1529_376.png` | 货盘 | Group 54 |
| `assets/products/images/Rectangle_192_1544_413.png` | 货盘 | Group 56 |
| `assets/product-detail/images/Rectangle_194_1548_574.png` | 产品详情 | 产品详情 |
### 图标资源 (SVG)
| 文件名 | 来源页面 | 尺寸 | 说明 |
|--------|---------|------|------|
| `assets/home/icons/优质产品图标.svg` | 首页 | 26.0×26.0 | 首页 |
| `assets/home/icons/快速生产图标.svg` | 首页 | 26.0×26.0 | 首页 |
| `assets/home/icons/全球配送图标.svg` | 首页 | 26.0×26.0 | 首页 |
| `assets/home/icons/零库存图标.svg` | 首页 | 26.0×26.0 | 首页 |
| `assets/product-detail/icons/Outlined_back.svg` | 产品详情 | 24.0×24.0 | .Navigation Bar_Left |
---
*本文档由 Figma API 自动生成,数据精确到像素级。*