docs: define community locked card gradient

2026-08-02 12:30:32 +08:00
parent 451198ba35
commit 35483f0ccf
1 changed files with 58 additions and 0 deletions
@@ -0,0 +1,58 @@
+# 社区付费帖子未解锁区域纵向渐变设计
+
+## 背景
+
+社区信息流中的付费帖子未解锁区域当前是横向浅蓝色提示条：左侧显示解锁说明，右侧显示“查看详情”按钮。设计稿中的未解锁区域则是具有明显纵向层次的大块预览面板，上部为蓝灰色遮罩感，下部逐渐过渡为白色，并将操作按钮放在底部居中位置。
+
+## 目标
+
+- 仅优化社区信息流帖子卡片的未解锁区域，使其从上往下呈现蓝灰色到白色的渐变。
+- 将未解锁区域由横向提示条改为纵向预览面板，形成与设计稿一致的内容遮罩感。
+- 保留现有“深度内容待解锁”“解锁后阅读完整分析与讨论”和“查看详情”文案与点击行为。
+- 不修改付费积分、作者信息、帖子正文、标签、互动栏、接口或解锁逻辑。
+- 使用 uni-app 多端稳定支持的基础 CSS，兼容 H5、App 和小程序。
+
+## 方案比较
+
+### 方案 A：纯 CSS 纵向渐变（采用）
+
+使用 `linear-gradient(180deg, ...)` 构建上深下浅的蓝灰到白色过渡，并通过纵向 Flex 布局将说明放在顶部、按钮放在底部居中。实现轻量、无需新增资源，多端表现最稳定。
+
+### 方案 B：滤镜模糊
+
+在内容层上使用 `filter` 或 `backdrop-filter` 制造真实模糊。视觉更接近被遮挡正文，但不同 uni-app 端的支持和渲染效果不一致，容易出现性能或兼容问题。
+
+### 方案 C：背景图片
+
+使用设计稿导出的渐变模糊图作为背景。视觉可固定，但会增加静态资源和适配成本，卡片宽度变化时也容易拉伸失真。
+
+## 视觉结构
+
+- 未解锁区域保持现有圆角，改为约 `180rpx` 的纵向面板，突出其作为正文预览遮罩的区域感。
+- 背景按 `180deg` 从蓝灰色逐步过渡到接近白色：顶部颜色最明显，中部降低饱和度，底部与卡片背景自然融合。
+- 解锁标题与说明位于面板顶部，继续使用左对齐的信息层级；文字颜色调整为适合蓝灰背景的深蓝灰与次级灰。
+- “查看详情”按钮位于面板底部水平居中，使用较宽的胶囊描边按钮，并保留轻微透明白底保证渐变上的可读性。
+- 面板内部使用纵向 Flex 的 `space-between` 组织内容，避免依赖绝对定位和固定文本高度。
+
+## 交互与数据
+
+- 点击未解锁区域或“查看详情”继续触发现有 `unlock` 事件。
+- 不新增状态、不修改组件参数、不调整接口响应和付费购买流程。
+- 已解锁帖子、免费帖子和其他卡片区域不受影响。
+
+## 跨端边界
+
+- 只使用线性渐变、Flex、圆角和透明色等基础样式能力。
+- 不使用伪元素、滤镜、背景模糊、遮罩图片或平台条件编译。
+- 长文案由现有文本流自然换行，按钮通过 `flex-shrink: 0` 保持尺寸稳定。
+
+## 改动范围
+
+- 修改 `uniapp/src/packages_community/components/post-card.vue` 中未解锁区域的样式。
+- 同步更新 `docs/业务进度管理.md` 与 `docs/设计稿映射.md` 的对应记录。
+- 不修改模板结构、业务逻辑、后端、数据库、路由和静态资源。
+
+## 验证边界
+
+- 本次按项目规则不主动执行 H5 构建或自动化测试。
+- 实施后进行改动范围、样式选择器和 Git diff 静态检查；如需实际页面验收，可在用户明确要求后使用当前 H5 页面复核。