docs: specify unified explore card gradient
This commit is contained in:
@@ -0,0 +1,29 @@
|
|||||||
|
# ExploreCards 统一媒体渐变设计
|
||||||
|
|
||||||
|
## 目标
|
||||||
|
|
||||||
|
统一 ExploreCards 中图片和视频上方的渐变浮层。渐变不再随卡片 `tone` 使用不同主题色,而是固定为顶部透明、底部浅黑半透明,以保持不同媒体内容上的文字可读性和视觉一致性。
|
||||||
|
|
||||||
|
## 实现范围
|
||||||
|
|
||||||
|
- 在 `src/pages/Discovery/components/ExploreCards/styles/index.scss` 中保留一条公共 `.explore-card-gradient` 规则。
|
||||||
|
- 公共渐变使用以下色阶:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(5, 24, 24, 0) 0%,
|
||||||
|
rgba(5, 24, 24, 0.18) 46%,
|
||||||
|
rgba(5, 24, 24, 0.34) 100%
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
- 删除 `culture`、`adventure` 和 `nightlife` 对 `.explore-card-gradient` 的主题色覆盖。
|
||||||
|
- 保留各 `tone` 的卡片底色,确保没有封面媒体时现有视觉不变。
|
||||||
|
- 不调整图片或视频渲染、文字内容区、箭头和点击行为。
|
||||||
|
|
||||||
|
## 验证
|
||||||
|
|
||||||
|
- 静态检查样式中仅存在一条 `.explore-card-gradient` 背景定义。
|
||||||
|
- 检查所有渐变色标均为 `rgba(5, 24, 24, ...)`,且顶部透明度为 `0`、底部透明度为 `0.34`。
|
||||||
|
- 运行 `git diff --check`,确认没有空白符错误。
|
||||||
Reference in New Issue
Block a user