course-card.md
组件 · COMPONENT

课程卡 CourseCard

综合首页与落地页共用的课程卡：16:9 暗底头图（封面或星座线稿）+ 名称、简介、适合人群、元数据与脚注动作。

来源同步自 edu v23.5.1源components/v4/CourseCard.jsx机读components/course-card.md

登录后的综合首页卡就是基准形态；落地页不再维护变体，只换脚注文案与颜色。

综合首页脚注「进入课程 →」墨色；悬停上浮
01
Obsidian 知识管理
从零搭建一套以你为中心、能用十年的知识管理系统。
适合 · 刚开始整理数字笔记的知识工作者
6 系列 · 67 节进入课程 →
import { CourseCard } from './components/v4/CourseCard.jsx'

const DEMO = {
  num: '01',
  name: 'Obsidian 知识管理',
  intro: '从零搭建一套以你为中心、能用十年的知识管理系统。',
  aud: '刚开始整理数字笔记的知识工作者',
  cover: null,
  art: {
    pl: [{ pts: '28,78 84,30 132,62 186,22 214,52', c: 'rgba(255,255,255,.28)', w: '1.2' }],
    dt: [
      { x: 28, y: 78, r: 2.4, f: '#FFFFFF' }, { x: 84, y: 30, r: 2.4, f: '#FFFFFF' },
      { x: 132, y: 62, r: 3.2, f: '@' }, { x: 186, y: 22, r: 2.4, f: '#FFFFFF' }, { x: 214, y: 52, r: 2.4, f: '#FFFFFF' },
    ],
  },
}

export function Hub() {
  return (
    <div style={{ width: 300 }}>
      <CourseCard course={DEMO} meta="6 系列 · 67 节" />
    </div>
  )
}
落地页脚注换成朱色的下一步
01
Obsidian 知识管理
从零搭建一套以你为中心、能用十年的知识管理系统。
适合 · 刚开始整理数字笔记的知识工作者
6 系列 · 67 节免费试 3 节 →
import { CourseCard } from './components/v4/CourseCard.jsx'

const DEMO = {
  num: '01',
  name: 'Obsidian 知识管理',
  intro: '从零搭建一套以你为中心、能用十年的知识管理系统。',
  aud: '刚开始整理数字笔记的知识工作者',
  cover: null,
  art: {
    pl: [{ pts: '28,78 84,30 132,62 186,22 214,52', c: 'rgba(255,255,255,.28)', w: '1.2' }],
    dt: [
      { x: 28, y: 78, r: 2.4, f: '#FFFFFF' }, { x: 84, y: 30, r: 2.4, f: '#FFFFFF' },
      { x: 132, y: 62, r: 3.2, f: '@' }, { x: 186, y: 22, r: 2.4, f: '#FFFFFF' }, { x: 214, y: 52, r: 2.4, f: '#FFFFFF' },
    ],
  },
}

export function Landing() {
  return (
    <div style={{ width: 300 }}>
      <CourseCard course={DEMO} meta="6 系列 · 67 节" cta="免费试 3 节 →" ctaColor="var(--zzm-accent,#A6402F)" />
    </div>
  )
}
骨架态
import { CourseCard } from './components/v4/CourseCard.jsx'

export function Loading() {
  return (
    <div style={{ width: 300 }}>
      <CourseCard loading />
    </div>
  )
}

属性

属性取值默认说明
course{ num, name, intro, aud, cover?, art: { pl, dt } }—art 是星座线稿：pl 折线、dt 圆点；颜色 "@" 表示品牌朱
metastring—左下 mono 元数据，如「6 系列 · 67 节」
ctastring'进入课程 →'右下动作文案
ctaColorstring'#161616'动作文案颜色
onClick() => void—整卡点击
loadingbooleanfalse骨架态（同一段布局）

铁律

✓ 要封面按上传原图呈现，不叠蒙层
✗ 不要为了一行小字压暗整幅封面
✓ 要编号用深色小底自持可读性
✗ 不要用 textShadow 救浅字——白底海报上一样糊