重构底部导航图标:照参考图重做形状与配色
- 5 个 Tab 图标形状改为参考图语言:房子(首页)/爱心(找对象)/对话气泡(消息)/日历加号(活动)/人物(我的) - 配色改为参考图方案:默认态藏青蓝 #47528C、选中态玫红 #F4005A(与导航栏品牌色同系) - 同步重生成 1x/2x/3x 共 30 张透明 RGBA PNG(Edge CDP 栅格化) - app.json tabBar.color/selectedColor 对齐新配色 - 守卫 tabbar-icons.mjs 增加两态颜色与 app.json 一致性断言 - 静态预览复刻 tabBar 配色同步更新;DESIGN.md 同步
@@ -23,15 +23,15 @@
|
|||||||
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
|
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
|
||||||
.wx-page { min-height:100%; }
|
.wx-page { min-height:100%; }
|
||||||
/* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段:
|
/* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段:
|
||||||
color #999999 / selectedColor #E96B6B / backgroundColor #FFFFFF / borderStyle black。
|
color #47528C / selectedColor #F4005A / backgroundColor #FFFFFF / borderStyle black。
|
||||||
图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */
|
图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */
|
||||||
.mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch;
|
.mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch;
|
||||||
background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; }
|
background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; }
|
||||||
.mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
|
.mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
|
||||||
align-items:center; justify-content:center; gap:2px; padding:6px 0 0; }
|
align-items:center; justify-content:center; gap:2px; padding:6px 0 0; }
|
||||||
.mini-tabbar__icon { width:26px; height:26px; display:block; }
|
.mini-tabbar__icon { width:26px; height:26px; display:block; }
|
||||||
.mini-tabbar__label { font-size:10px; line-height:14px; color:#999999; }
|
.mini-tabbar__label { font-size:10px; line-height:14px; color:#47528C; }
|
||||||
.mini-tabbar__item.is-active .mini-tabbar__label { color:#E96B6B; }
|
.mini-tabbar__item.is-active .mini-tabbar__label { color:#F4005A; }
|
||||||
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
|
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
|
||||||
/**
|
/**
|
||||||
* 丹阳公益婚恋服务平台 - 全局 Design Token
|
* 丹阳公益婚恋服务平台 - 全局 Design Token
|
||||||
|
|||||||
@@ -76,8 +76,8 @@
|
|||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
},
|
},
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"color": "#999999",
|
"color": "#47528C",
|
||||||
"selectedColor": "#E96B6B",
|
"selectedColor": "#F4005A",
|
||||||
"backgroundColor": "#FFFFFF",
|
"backgroundColor": "#FFFFFF",
|
||||||
"borderStyle": "black",
|
"borderStyle": "black",
|
||||||
"list": [
|
"list": [
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
## 概述
|
## 概述
|
||||||
|
|
||||||
为小程序 5 个底部导航 Tab 设计的圆润线性风格图标,包含未选中(灰色)和选中(玫瑰红)两种状态,适配三种屏幕密度(1x/2x/3x)。
|
为小程序 5 个底部导航 Tab 设计的圆润线性风格图标,包含未选中(藏青蓝 `#47528C`)和选中(玫红 `#F4005A`)两种状态,适配三种屏幕密度(1x/2x/3x)。配色取自产品参考图,藏青蓝与导航栏品牌色(`#171D72`)同系、玫红作为高对比激活色。
|
||||||
|
|
||||||
> ⚠️ **改动本目录前必读 —— 图标整排变「破图」的头号原因**
|
> ⚠️ **改动本目录前必读 —— 图标整排变「破图」的头号原因**
|
||||||
>
|
>
|
||||||
@@ -26,41 +26,41 @@
|
|||||||
| 安全区域 | 53 × 53 px(最小边距 14px) |
|
| 安全区域 | 53 × 53 px(最小边距 14px) |
|
||||||
| 线宽 | 4px(缩放到导航栏后约 1.3px) |
|
| 线宽 | 4px(缩放到导航栏后约 1.3px) |
|
||||||
| 圆角 | 端点圆角 + 转折圆角 |
|
| 圆角 | 端点圆角 + 转折圆角 |
|
||||||
| 填充 | 默认态线性;选中态填充核心爱心 |
|
| 填充 | 默认态线性描边;选中态实心填充 + 白点/白线点缀 |
|
||||||
|
|
||||||
## 颜色规范
|
## 颜色规范
|
||||||
|
|
||||||
| 状态 | 颜色值 | 用途 |
|
| 状态 | 颜色值 | 用途 |
|
||||||
|------|--------|------|
|
|------|--------|------|
|
||||||
| 未选中 | `#999999` | 默认状态图标 |
|
| 未选中 | `#47528C` | 默认状态图标(藏青蓝,与导航栏品牌色同系) |
|
||||||
| 选中 | `#E96B6B` | 激活状态图标 |
|
| 选中 | `#F4005A` | 激活状态图标(玫红/品红,高对比) |
|
||||||
| 背景 | `#FFFFFF` | 透明背景(PNG 支持 alpha) |
|
| 背景 | 透明 | PNG 支持 alpha,无需底色 |
|
||||||
|
|
||||||
## 图标清单
|
## 图标清单
|
||||||
|
|
||||||
### 1. 首页 (home)
|
### 1. 首页 (home)
|
||||||
- **意象**: 爱心小屋
|
- **意象**: 家
|
||||||
- **元素**: 圆角屋顶 + 房屋主体 + 门内爱心
|
- **元素**: 圆角屋顶 + 房屋主体 + 门洞(线条描边,选中态实心玫红)
|
||||||
- **文件**: `home.png` / `home-active.png`
|
- **文件**: `home.png` / `home-active.png`
|
||||||
|
|
||||||
### 2. 找对象 (discover)
|
### 2. 找对象 (discover)
|
||||||
- **意象**: 双人缘分
|
- **意象**: 心动缘分
|
||||||
- **元素**: 两个人物轮廓 + 中央爱心
|
- **元素**: 单颗爱心轮廓(选中态实心玫红),呼应「找对象」主题
|
||||||
- **文件**: `discover.png` / `discover-active.png`
|
- **文件**: `discover.png` / `discover-active.png`
|
||||||
|
|
||||||
### 3. 消息 (message)
|
### 3. 消息 (message)
|
||||||
- **意象**: 真诚沟通
|
- **意象**: 真诚沟通
|
||||||
- **元素**: 圆角气泡 + 爱心
|
- **元素**: 圆角对话气泡 + 三个圆点(选中态气泡实心玫红、圆点为白)
|
||||||
- **文件**: `message.png` / `message-active.png`
|
- **文件**: `message.png` / `message-active.png`
|
||||||
|
|
||||||
### 4. 活动 (activity)
|
### 4. 活动 (activity)
|
||||||
- **意象**: 公益相遇
|
- **意象**: 公益相遇
|
||||||
- **元素**: 日历主体 + 挂环 + 爱心
|
- **元素**: 圆角日历主体 + 顶部双挂环 + 中央加号(选中态日历实心玫红、加号为白)
|
||||||
- **文件**: `activity.png` / `activity-active.png`
|
- **文件**: `activity.png` / `activity-active.png`
|
||||||
|
|
||||||
### 5. 我的 (mine)
|
### 5. 我的 (mine)
|
||||||
- **意象**: 个人守护
|
- **意象**: 个人中心
|
||||||
- **元素**: 单人轮廓 + 胸前爱心
|
- **元素**: 圆形头像 + 半身轮廓(选中态实心玫红)
|
||||||
- **文件**: `mine.png` / `mine-active.png`
|
- **文件**: `mine.png` / `mine-active.png`
|
||||||
|
|
||||||
## 导出尺寸
|
## 导出尺寸
|
||||||
@@ -78,7 +78,7 @@
|
|||||||
所有图标均提供可编辑的 SVG 版本,位于 `svg/` 目录:
|
所有图标均提供可编辑的 SVG 版本,位于 `svg/` 目录:
|
||||||
- 可直接在 Figma 中导入编辑
|
- 可直接在 Figma 中导入编辑
|
||||||
- 可调整颜色、粗细、圆角等参数
|
- 可调整颜色、粗细、圆角等参数
|
||||||
- 颜色替换:将 `stroke="#999999"` 改为 `stroke="#E96B6B"` 即可切换激活状态
|
- 颜色替换:将 `stroke="#47528C"` 改为 `fill="#F4005A" stroke="#F4005A"` 即可切换激活状态(选中态为实心填充 + 白色点缀)
|
||||||
|
|
||||||
## 文件位置
|
## 文件位置
|
||||||
|
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 5.7 KiB |
@@ -1,5 +1,6 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>公益日历</title>
|
<title>日历</title>
|
||||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="17" y="20" width="47" height="44" rx="8"/><path d="M17 33h47M28 15v10M53 15v10"/><path class="heart" d="M40.5 57c-6.5-4.3-9.5-7.2-9.5-10.7 0-2.9 2.3-5.1 5.1-5.1 1.9 0 3.5.9 4.4 2.4.9-1.5 2.5-2.4 4.5-2.4 2.8 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-9.6 10.7Z"/></g>
|
<rect x="16" y="21" width="49" height="45" rx="9" fill="#F4005A" stroke="#F4005A" stroke-width="4"/>
|
||||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
<path d="M28 13 V23 M53 13 V23" stroke="#F4005A" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<path d="M29.5 43.5 H51.5 M40.5 32 V55" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 555 B After Width: | Height: | Size: 424 B |
@@ -1,5 +1,6 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>公益日历</title>
|
<title>日历</title>
|
||||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="17" y="20" width="47" height="44" rx="8"/><path d="M17 33h47M28 15v10M53 15v10"/><path class="heart" d="M40.5 57c-6.5-4.3-9.5-7.2-9.5-10.7 0-2.9 2.3-5.1 5.1-5.1 1.9 0 3.5.9 4.4 2.4.9-1.5 2.5-2.4 4.5-2.4 2.8 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-9.6 10.7Z"/></g>
|
<rect x="16" y="21" width="49" height="45" rx="9" stroke="#47528C" stroke-width="4"/>
|
||||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
<path d="M28 13 V23 M53 13 V23" stroke="#47528C" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<path d="M29.5 43.5 H51.5 M40.5 32 V55" stroke="#47528C" stroke-width="4" stroke-linecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 552 B After Width: | Height: | Size: 409 B |
@@ -1,5 +1,4 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>双人缘分</title>
|
<title>爱心</title>
|
||||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="26" cy="29" r="7"/><circle cx="55" cy="29" r="7"/><path d="M14 55c1-10 6-15 15-15 4 0 7 1 9 3M67 55c-1-10-6-15-15-15-4 0-7 1-9 3"/><path class="heart" d="M40.5 58c-6.8-4.5-10-7.6-10-11.2 0-3 2.3-5.3 5.3-5.3 2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3 0 5.3 2.3 5.3 5.3 0 3.6-3.2 6.7-10 11.2Z"/></g>
|
<path d="M40.5 63.5 C23.5 51.5 14.5 42.5 14.5 31.5 C14.5 23 21 16.5 29.5 16.5 C34.5 16.5 38.5 19.3 40.5 23.5 C42.5 19.3 46.5 16.5 51.5 16.5 C60 16.5 66.5 23 66.5 31.5 C66.5 42.5 57.5 51.5 40.5 63.5 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 599 B After Width: | Height: | Size: 428 B |
@@ -1,5 +1,4 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>双人缘分</title>
|
<title>爱心</title>
|
||||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="26" cy="29" r="7"/><circle cx="55" cy="29" r="7"/><path d="M14 55c1-10 6-15 15-15 4 0 7 1 9 3M67 55c-1-10-6-15-15-15-4 0-7 1-9 3"/><path class="heart" d="M40.5 58c-6.8-4.5-10-7.6-10-11.2 0-3 2.3-5.3 5.3-5.3 2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3 0 5.3 2.3 5.3 5.3 0 3.6-3.2 6.7-10 11.2Z"/></g>
|
<path d="M40.5 63.5 C23.5 51.5 14.5 42.5 14.5 31.5 C14.5 23 21 16.5 29.5 16.5 C34.5 16.5 38.5 19.3 40.5 23.5 C42.5 19.3 46.5 16.5 51.5 16.5 C60 16.5 66.5 23 66.5 31.5 C66.5 42.5 57.5 51.5 40.5 63.5 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 596 B After Width: | Height: | Size: 413 B |
@@ -1,5 +1,4 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>爱心小屋</title>
|
<title>房子</title>
|
||||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 38 40.5 19 63 38"/><rect x="22" y="35" width="37" height="28" rx="7"/><path d="M31 63V49h19v14"/><path class="heart" d="M40.5 54c-5-3.4-7-5.4-7-8.2 0-2.3 1.8-4.1 4.1-4.1 1.3 0 2.4.6 2.9 1.6.6-1 1.7-1.6 3-1.6 2.3 0 4.1 1.8 4.1 4.1 0 2.8-2.1 4.8-7.1 8.2Z"/></g>
|
<path d="M40.5 14.5 L68 38 L61 38 L61 57 A8 8 0 0 1 53 65 L47 65 L47 51.5 L34 51.5 L34 65 L28 65 A8 8 0 0 1 20 57 L20 38 L13 38 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 563 B After Width: | Height: | Size: 358 B |
@@ -1,5 +1,4 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>爱心小屋</title>
|
<title>房子</title>
|
||||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 38 40.5 19 63 38"/><rect x="22" y="35" width="37" height="28" rx="7"/><path d="M31 63V49h19v14"/><path class="heart" d="M40.5 54c-5-3.4-7-5.4-7-8.2 0-2.3 1.8-4.1 4.1-4.1 1.3 0 2.4.6 2.9 1.6.6-1 1.7-1.6 3-1.6 2.3 0 4.1 1.8 4.1 4.1 0 2.8-2.1 4.8-7.1 8.2Z"/></g>
|
<path d="M40.5 14.5 L68 38 L61 38 L61 57 A8 8 0 0 1 53 65 L47 65 L47 51.5 L34 51.5 L34 65 L28 65 A8 8 0 0 1 20 57 L20 38 L13 38 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 560 B After Width: | Height: | Size: 343 B |
@@ -1,5 +1,7 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>爱心对话</title>
|
<title>对话气泡</title>
|
||||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M23 60 15 66l2.4-11.2A12 12 0 0 1 14 46V29a12 12 0 0 1 12-12h29a12 12 0 0 1 12 12v17a12 12 0 0 1-12 12H27c-1.4 0-2.7.7-4 2Z"/><path class="heart" d="M40.5 48c-7.5-5-11-8.4-11-12.4 0-3.3 2.6-5.9 5.9-5.9 2.2 0 4.1 1.1 5.1 2.8 1.1-1.7 3-2.8 5.2-2.8 3.3 0 5.9 2.6 5.9 5.9 0 4-3.6 7.4-11.1 12.4Z"/></g>
|
<path d="M21.58 44.33 A22 22 0 1 1 27.46 51.34 L17 57.5 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
<circle cx="30.5" cy="34" r="2.9" fill="#FFFFFF"/>
|
||||||
|
<circle cx="41" cy="34" r="2.9" fill="#FFFFFF"/>
|
||||||
|
<circle cx="51.5" cy="34" r="2.9" fill="#FFFFFF"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 597 B After Width: | Height: | Size: 449 B |
@@ -1,5 +1,7 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>爱心对话</title>
|
<title>对话气泡</title>
|
||||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M23 60 15 66l2.4-11.2A12 12 0 0 1 14 46V29a12 12 0 0 1 12-12h29a12 12 0 0 1 12 12v17a12 12 0 0 1-12 12H27c-1.4 0-2.7.7-4 2Z"/><path class="heart" d="M40.5 48c-7.5-5-11-8.4-11-12.4 0-3.3 2.6-5.9 5.9-5.9 2.2 0 4.1 1.1 5.1 2.8 1.1-1.7 3-2.8 5.2-2.8 3.3 0 5.9 2.6 5.9 5.9 0 4-3.6 7.4-11.1 12.4Z"/></g>
|
<path d="M21.58 44.33 A22 22 0 1 1 27.46 51.34 L17 57.5 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
<circle cx="30.5" cy="34" r="2.9" fill="#47528C"/>
|
||||||
|
<circle cx="41" cy="34" r="2.9" fill="#47528C"/>
|
||||||
|
<circle cx="51.5" cy="34" r="2.9" fill="#47528C"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 594 B After Width: | Height: | Size: 434 B |
@@ -1,5 +1,5 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>个人守护</title>
|
<title>人物</title>
|
||||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="40.5" cy="27" r="8"/><path d="M20 64c.7-14 8-21 20.5-21S60.3 50 61 64"/><path class="heart" d="M40.5 59c-5.2-3.5-7.7-5.8-7.7-8.6 0-2.3 1.9-4.2 4.2-4.2 1.6 0 2.8.8 3.5 2 .8-1.2 2-2 3.6-2 2.3 0 4.2 1.9 4.2 4.2 0 2.8-2.5 5.1-7.8 8.6Z"/></g>
|
<circle cx="40.5" cy="23" r="10.5" fill="#F4005A" stroke="#F4005A" stroke-width="4"/>
|
||||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
<path d="M20 65 V57.5 A20.5 20.5 0 0 1 61 57.5 V65 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 540 B After Width: | Height: | Size: 369 B |
@@ -1,5 +1,5 @@
|
|||||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<title>个人守护</title>
|
<title>人物</title>
|
||||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="40.5" cy="27" r="8"/><path d="M20 64c.7-14 8-21 20.5-21S60.3 50 61 64"/><path class="heart" d="M40.5 59c-5.2-3.5-7.7-5.8-7.7-8.6 0-2.3 1.9-4.2 4.2-4.2 1.6 0 2.8.8 3.5 2 .8-1.2 2-2 3.6-2 2.3 0 4.2 1.9 4.2 4.2 0 2.8-2.5 5.1-7.8 8.6Z"/></g>
|
<circle cx="40.5" cy="23" r="10.5" stroke="#47528C" stroke-width="4"/>
|
||||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
<path d="M20 65 V57.5 A20.5 20.5 0 0 1 61 57.5 V65 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 537 B After Width: | Height: | Size: 339 B |
@@ -804,15 +804,15 @@ function main() {
|
|||||||
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
|
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
|
||||||
.wx-page { min-height:100%; }
|
.wx-page { min-height:100%; }
|
||||||
/* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段:
|
/* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段:
|
||||||
color #999999 / selectedColor #E96B6B / backgroundColor #FFFFFF / borderStyle black。
|
color #47528C / selectedColor #F4005A / backgroundColor #FFFFFF / borderStyle black。
|
||||||
图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */
|
图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */
|
||||||
.mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch;
|
.mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch;
|
||||||
background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; }
|
background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; }
|
||||||
.mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
|
.mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
|
||||||
align-items:center; justify-content:center; gap:2px; padding:6px 0 0; }
|
align-items:center; justify-content:center; gap:2px; padding:6px 0 0; }
|
||||||
.mini-tabbar__icon { width:26px; height:26px; display:block; }
|
.mini-tabbar__icon { width:26px; height:26px; display:block; }
|
||||||
.mini-tabbar__label { font-size:10px; line-height:14px; color:#999999; }
|
.mini-tabbar__label { font-size:10px; line-height:14px; color:#47528C; }
|
||||||
.mini-tabbar__item.is-active .mini-tabbar__label { color:#E96B6B; }
|
.mini-tabbar__item.is-active .mini-tabbar__label { color:#F4005A; }
|
||||||
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
|
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
|
||||||
${cssAll}
|
${cssAll}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,11 +5,11 @@ import { join } from 'node:path'
|
|||||||
const repoRoot = process.cwd()
|
const repoRoot = process.cwd()
|
||||||
const root = join(repoRoot, 'miniapp', 'assets', 'tabbar')
|
const root = join(repoRoot, 'miniapp', 'assets', 'tabbar')
|
||||||
const icons = {
|
const icons = {
|
||||||
home: '爱心小屋',
|
home: '房子',
|
||||||
discover: '双人缘分',
|
discover: '爱心',
|
||||||
message: '爱心对话',
|
message: '对话气泡',
|
||||||
activity: '公益日历',
|
activity: '日历',
|
||||||
mine: '个人守护',
|
mine: '人物',
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── 1. SVG 源文件:主题化标题 + 两态配色 ──────────────────────────────
|
// ── 1. SVG 源文件:主题化标题 + 两态配色 ──────────────────────────────
|
||||||
@@ -18,8 +18,8 @@ for (const [name, title] of Object.entries(icons)) {
|
|||||||
const active = readFileSync(join(root, 'svg', `${name}-active.svg`), 'utf8')
|
const active = readFileSync(join(root, 'svg', `${name}-active.svg`), 'utf8')
|
||||||
|
|
||||||
assert.match(normal, new RegExp(`<title>${title}</title>`), `${name} 缺少主题化标题`)
|
assert.match(normal, new RegExp(`<title>${title}</title>`), `${name} 缺少主题化标题`)
|
||||||
assert.match(normal, /#999999/i, `${name} 默认态颜色错误`)
|
assert.match(normal, /#47528C/i, `${name} 默认态颜色错误`)
|
||||||
assert.match(active, /#E96B6B/i, `${name} 选中态颜色错误`)
|
assert.match(active, /#F4005A/i, `${name} 选中态颜色错误`)
|
||||||
|
|
||||||
// ── 2. PNG 规格:正方形、1x/2x/3x、透明 RGBA ────────────────────────
|
// ── 2. PNG 规格:正方形、1x/2x/3x、透明 RGBA ────────────────────────
|
||||||
for (const suffix of ['', '_2x', '_3x']) {
|
for (const suffix of ['', '_2x', '_3x']) {
|
||||||
@@ -41,6 +41,11 @@ const appJson = JSON.parse(readFileSync(appJsonPath, 'utf8'))
|
|||||||
const tabList = appJson.tabBar?.list ?? []
|
const tabList = appJson.tabBar?.list ?? []
|
||||||
assert.equal(tabList.length, 5, 'tabBar.list 必须为 5 项(微信支持 2~5)')
|
assert.equal(tabList.length, 5, 'tabBar.list 必须为 5 项(微信支持 2~5)')
|
||||||
|
|
||||||
|
// 文字与图标同色:color 必须等于 SVG 默认态色,selectedColor 必须等于选中态色,
|
||||||
|
// 否则会出现「图标是藏青蓝/玫红、文字却是别的颜色」的割裂。
|
||||||
|
assert.equal(appJson.tabBar?.color, '#47528C', 'tabBar.color 必须与图标默认态同色(#47528C)')
|
||||||
|
assert.equal(appJson.tabBar?.selectedColor, '#F4005A', 'tabBar.selectedColor 必须与图标选中态同色(#F4005A)')
|
||||||
|
|
||||||
for (const item of tabList) {
|
for (const item of tabList) {
|
||||||
assert.ok(appJson.pages.includes(item.pagePath), `tabBar pagePath 未在 pages 中注册: ${item.pagePath}`)
|
assert.ok(appJson.pages.includes(item.pagePath), `tabBar pagePath 未在 pages 中注册: ${item.pagePath}`)
|
||||||
for (const key of ['iconPath', 'selectedIconPath']) {
|
for (const key of ['iconPath', 'selectedIconPath']) {
|
||||||
|
|||||||