root/Neo-ZQYY
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f9b1039970c423ecc4532ad29bc307cd295c5215
Neo-ZQYY/tmp/DEMO-miniprogram/miniprogram/pages/performance/MIGRATION_NOTES.md

10 KiB
Raw Blame History

Performance 页面迁移说明

迁移版本

  • H5 原型基准：docs/h5_ui/pages/performance.html
  • 桥文档版本：v3.0
  • 迁移日期：2026-03-15
  • 更新日期：2026-03-15（Banner背景改用灵活的SVG实现）

样式调整清单

1. 单位转换规则

遵循桥文档 §2.3 的混合单位策略：

  • 主要使用 rpx：页面宽度、横向布局、卡片尺寸、间距
  • 使用 px：导航栏高度（44px）、图标点击区域
  • 换算基准：H5 CSS px → 小程序 rpx（750宽基准，1px = 1.8204rpx）

2. 自定义导航栏（.custom-nav）

属性 H5 值 小程序值 说明
height 44px 44px 标准导航栏高度（使用px）
font-size text-base (16px) 32rpx 标题字号
icon size w-5 h-5 (20px) 24px 返回按钮图标

3. Banner 区域（.banner-section）

属性 H5 值 小程序值 说明
背景方案 CSS 渐变 SVG 图片 使用 /assets/images/banner-bg-combined.svg
height - 480rpx Banner 高度（可通过 WXSS 调整）
padding px-5 pt-2 pb-2 (20px 8px) 24rpx 40rpx 32rpx 内容区内边距

Banner SVG 背景实现（灵活可调）

  • 方案：SVG 做渐变底图（与 task-detail/task-list 保持一致）
  • 原因：SVG pattern 在小程序 image 组件中不渲染
  • WXML 实现： 
    <view class="banner-section">
  <image class="banner-bg-img" src="/assets/images/banner-bg-combined.svg" mode="aspectFill" />
  <view class="banner-content">
    <!-- 内容 -->
  </view>
</view>
  • WXSS 实现（可灵活调整）： 
    .banner-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 480rpx;  /* 调整此值改变 Banner 高度 */
}

.banner-bg-img {
  position: absolute;
  top: 0;      /* 调整此值改变背景垂直位置 */
  left: 0;     /* 调整此值改变背景水平位置 */
  width: 100%;
  height: 100%;
  z-index: 0;
}

.banner-content {
  position: relative;
  z-index: 2;
  padding: 24rpx 40rpx 32rpx;  /* 调整此值改变内容区内边距 */
  height: 100%;
  display: flex;
  flex-direction: column;
}
  • 调整方式：
    • 修改 .banner-section 的 height 调整 Banner 高度
    • 修改 .banner-bg-img 的 top/left 调整背景位置
    • 修改 .banner-bg-img 的 width/height 调整背景缩放
    • 修改 .banner-content 的 padding 调整内容区域

个人信息卡片

属性 H5 值 小程序值 说明
avatar size w-14 h-14 (56px) 112rpx 头像尺寸
avatar radius rounded-2xl (16px) 24rpx 头像圆角
name font-size text-xl (20px) 40rpx 姓名字号
role tag padding px-2 py-0.5 (8px 2px) 4rpx 16rpx 角色标签内边距

收入概览卡片

属性 H5 值 小程序值 说明
grid gap gap-3 (12px) 24rpx 卡片间距
card padding p-4 (16px) 24rpx 卡片内边距
card radius rounded-xl (12px) 24rpx 卡片圆角
label font-size text-xs (12px) 22rpx 标签字号
value font-size text-2xl (24px) 44rpx 数值字号

4. Section 卡片（.section-card）

属性 H5 值 小程序值 说明
border-radius rounded-2xl (16px) 32rpx 卡片圆角
padding p-4 (16px) 32rpx 卡片内边距
margin m-4 (16px) 24rpx 24rpx 0 卡片外边距
box-shadow shadow-sm 0 1px 2px rgba(0,0,0,0.05) 阴影

5. 收入档位卡片（.tier-card）

属性 H5 值 小程序值 说明
padding p-3 (12px) 24rpx 内边距
border-radius rounded-xl (12px) 24rpx 圆角
border 1px solid 2rpx solid 边框
emoji size text-2xl (24px) 48rpx 表情图标
rate value text-lg (18px) 36rpx 费率数值
rate unit text-xs (12px) 22rpx 单位字号
rate desc text-[10px] 20rpx 描述字号

档位徽章

属性 H5 值 小程序值 说明
top -8px -16rpx 顶部偏移
padding 2px 10px 4rpx 20rpx 内边距
font-size 10px 20rpx 字号

6. 升级提示（.upgrade-hint）

属性 H5 值 小程序值 说明
padding p-3 (12px) 24rpx 内边距
border-radius rounded-xl (12px) 24rpx 圆角
emoji size text-lg (18px) 36rpx 表情大小
label font-size text-xs (12px) 22rpx 标签字号
hours font-size text-sm (14px) 26rpx 小时数字号
bonus value text-lg (18px) 36rpx 奖金数值

7. 业绩明细列表（.income-list）

属性 H5 值 小程序值 说明
icon box size w-8 h-8 (32px) 64rpx 图标容器
icon box radius rounded-lg (8px) 16rpx 图标圆角
label font-size text-sm (14px) 26rpx 标签字号
desc font-size text-[10px] 20rpx 描述字号
value font-size text-base (16px) 30rpx 数值字号
total value text-xl (20px) 40rpx 合计数值

8. 服务记录（.service-records-section）

属性 H5 值 小程序值 说明
avatar size w-[38px] h-[38px] 76rpx 头像尺寸
avatar radius rounded-lg (8px) 16rpx 头像圆角
name font-size text-sm (14px) 26rpx 姓名字号
time font-size text-xs (12px) 22rpx 时间字号
hours font-size text-sm (14px) 26rpx 小时数字号
tag padding px-1.5 py-px (6px 1px) 2rpx 12rpx 标签内边距
tag font-size text-[11px] 22rpx 标签字号

日期分隔线

属性 H5 值 小程序值 说明
date font-size 11px 22rpx 日期字号
line height 1px 2rpx 分隔线高度
padding 14px 16px 4px 20rpx 0 8rpx 内边距

9. 客户列表（.customer-list）

属性 H5 值 小程序值 说明
avatar size w-[38px] h-[38px] 76rpx 头像尺寸
avatar radius rounded-lg (8px) 16rpx 头像圆角
name font-size text-sm (14px) 26rpx 姓名字号
detail font-size text-xs (12px) 22rpx 详情字号
icon size - 24px 右侧箭头图标

10. 颜色映射（附录C）

用途 色值 说明
主品牌色 #0052d9 primary
成功色 #00a870 success
背景色 #f3f3f3 gray-1
正文色 #242424 gray-13
次级文字 #a6a6a6 gray-6
三级文字 #8b8b8b gray-7
四级文字 #c5c5c5 gray-5
分割线 #f3f3f3 gray-1

11. 渐变色系统

头像渐变（8种）

  • from-blue: #60a5fa → #6366f1
  • from-pink: #f472b6 → #f43f5e
  • from-teal: #2dd4bf → #10b981
  • from-green: #4ade80 → #14b8a6
  • from-orange: #fb923c → #f59e0b
  • from-purple: #c084fc → #8b5cf6
  • from-violet: #a78bfa → #7c3aed
  • from-amber: #fbbf24 → #eab308

档位卡片渐变

  • 当前档位：#f0fdf4 → #dcfce7（绿色系）
  • 下一阶段：#fefce8 → #fef9c3（黄色系）
  • 升级提示：#eff6ff → #eef2ff（蓝色系）
  • 奖金按钮：#fbbf24 → #f97316（橙色系）

关键调整点

1. 全局 line-height 设置

page {
  line-height: 1.5;
}

view {
  line-height: inherit;
}

原因：微信小程序 <text> 组件不能直接设置 line-height，必须在外层 <view> 设置（附录B.2.3）

2. 单位统一为 rpx（除特殊情况）

  • 主要尺寸使用 rpx，确保不同设备自适应
  • 导航栏高度、图标点击区域使用 px
  • 换算公式：1px = 1.8204rpx（750宽基准）

3. 移除 CSS 变量依赖

  • 原：var(--color-gray-2, #eeeeee)
  • 新：直接使用 #eeeeee
  • 原因：确保样式独立，不依赖全局变量

4. Icon 尺寸调整

  • 导航栏返回按钮：size="24px"（标准点击区域）
  • 列表箭头图标：size="24px"
  • 加载/错误图标：size="40px"

5. 复杂背景还原

  • Banner 背景：使用 SVG 图片 /assets/images/banner-bg-combined.svg（与 task-detail/task-list 保持一致）
    • 原因：SVG pattern 在小程序 image 组件中不渲染
    • 灵活可调：通过 WXSS 可调整 Banner 高度、背景位置、内容区内边距
  • 档位卡片使用双色渐变背景
  • 头像使用 8 种预设渐变色
  • 升级提示使用渐变背景 + 渐变按钮

6. 数值字体特性

.perf-value {
  font-variant-numeric: tabular-nums;
}

确保数字等宽对齐

验收清单

  • 导航栏高度与H5对齐（44px）
  • Banner SVG背景与H5对齐
  • Banner 高度可通过 WXSS 调整（480rpx）
  • Banner 背景位置可通过 WXSS 调整
  • 个人信息卡片尺寸与H5对齐
  • 收入概览卡片样式与H5对齐
  • 档位卡片渐变背景与H5对齐
  • 档位徽章位置与H5对齐
  • 升级提示样式与H5对齐
  • 业绩明细列表与H5对齐
  • 服务记录样式与H5对齐
  • 日期分隔线与H5对齐
  • 客户列表样式与H5对齐
  • 头像渐变色与H5对齐
  • 所有字号与H5对齐
  • 所有间距与H5对齐
  • 所有圆角与H5对齐
  • 所有颜色与H5对齐
  • 行高设置正确（在view上设置）
  • Banner背景使用灵活的SVG实现（与task-detail保持一致）

已知限制

  1. 动画效果：H5 中的 bonus-highlight 闪烁动画未实现（需要 CSS animation）
  2. backdrop-filter：收入卡片的 backdrop-blur 效果在部分安卓设备可能不支持
  3. SVG兼容性：banner-bg-combined.svg 需要确保存在于 /assets/images/ 目录

后续维护

  • 若真机测试发现尺寸偏差，优先检查 line-height 设置
  • 若需要调整 Banner 高度，修改 .banner-section 的 height 属性
  • 若需要调整 Banner 背景位置，修改 .banner-bg-img 的 top/left 属性
  • 若需要调整间距，参考附录A的spacing表
  • 若需要调整字号，参考附录B的字体表
  • 颜色调整参考附录C的颜色字典
  • Banner背景问题参考task-detail页面的实现方式
Reference in New Issue View Git Blame Copy Permalink