fix: H5 端 UI 与weapp微信小程序全局一致性修复

[newvision798]

修复原因

修复了项目在 H5 编译下与微信小程序产生的多处 UI 不一致问题（如卡片堆叠错乱、背景色丢失、间距异常等）。由于 H5 没有 page 元素包装，且原本存在双端单位重复转换等问题，本项目通过适配底层编译组合，实现真正的双端高保真一致。

详细改动

1. unocss.config.ts (解决单位错乱与布局崩溃)

   • 移除了 H5 端手动的 postprocess（rem到px硬转），彻底解决了跟 Taro 内部的 pxtransform 产生的单位二次转换导致间距巨大的问题。
   • 统一改用 presetRemRpx({ mode: isApplet ? "rem2rpx" : "rpx2rem" })，自动处理 H5 与小程序端的环境差异。

2. src/app.scss (解决全局样式、颜色丢失)

   • 增加 :root 选择器作用域。原本是 page { ... }，修改为 page, :root { ... }。确保依赖全局变量（比如 --primary-color-6）的样式在 H5 环境下的纯 web 节点下也能正确生效。

3. src/pages/index/index.tsx (解决动态内联样式的平台适配)

   • 包含的堆叠列表样式原本使用了写死的 rem 导致 H5 下完全挤在一起的情况。
   • 使用 Taro.pxTransform(70) 动态获取内联转换，调整了偏移和比例 scale。还原出跟原生小程序端一致的真实层叠感。
   • 为相对定位的父级补充了固定的 pxTransform 高度，解决 absolute 子元素产生的高度塌陷。

验证环境与效果

在运行 pnpm dev:h5 及微信开发者工具分别观察比对，双端 UI 达到像素级一致，特别是以下组件：

• 堆叠样式的项目列表（示例列表）
• Avatar 头像叠加样式
• 图标渲染与底部漂浮菜单

[kirklin]

h5:

weapp:

小程序的颜色丢失了。