跳到主要内容

文章列表

文章、资讯列表的显示和交互。

CoDesign 设计稿


基础列表

视觉规则

文章标题:单行显示,溢出样式用...表示。

文章描述:两行显示,溢出样式用...表示。

交互样式

交互区域

鼠标可触发交互样式的区域。

尺寸适配

卡片根据屏幕宽度自适应,卡片最小宽度为400px

网格列表

图文

  • 图片尺寸:192x128px,图片属性:object-fit: cover。。
  • 两列卡片高度固定不变,并保持对齐。
  • 标题、文章简介单行显示,超过最大宽度溢出样式使用...
  • 正文内容三行显示,超过最大宽度溢出样式使用...

文本

  • 标题单行显示,超过最大宽度溢出样式使用...

卡片列表

视觉规则

文章标题:两行显示,溢出样式用...表示。

文章描述:两行显示,溢出样式用...表示。

图片属性:object-fit: cover

交互区域

尺寸适配