pageType: content
background:
  type: image
  src: media/yu7-exterior.jpg
  fit: {mode: cover}
elements:
  - elementId: position-wash
    elementType: shape
    bounds: [0, 0, 500, 540]
    shapeName: rect
    fill: {type: solid, color: "#071013D4"}
  - elementId: position-index
    elementType: text
    bounds: [58, 42, 120, 24]
    content:
      fontFamily: MiSans
      color: "$orange"
      fontSize: 12
      bold: true
      letterSpacing: 2
      text: "01 / POSITION"
  - elementId: position-title
    elementType: text
    bounds: [58, 94, 400, 112]
    content:
      fontFamily: MiSans
      color: "$white"
      text: |
        <p><span style="font-size:43px;font-weight:700">从 SU7 到 YU7</span></p>
        <p><span style="font-size:25px;color:#FF6900;font-weight:700">小米的第二台车，第一台 SUV</span></p>
  - elementId: position-body
    elementType: text
    bounds: [60, 236, 360, 112]
    content:
      fontFamily: MiSans
      color: "$muted"
      fontSize: 17
      lineHeight: 1.45
      text: |
        <p>保留跑车式的低趴比例，</p>
        <p>把车内空间、舒适与长途能力</p>
        <p>放进同一台车。</p>
  - elementId: position-line
    elementType: line
    bounds: [60, 382, 354, 1]
    viewBox: [354, 1]
    points: "0,0.5 354,0.5"
    border: {style: solid, width: 2, color: "$orange"}
  - elementId: position-stats
    elementType: text
    bounds: [60, 405, 410, 88]
    content:
      fontFamily: MiSans
      color: "$white"
      text: |
        <p><span style="font-size:32px;font-weight:700">1:3</span><span style="font-size:15px;color:#C9D0D4"> 头身比　　</span><span style="font-size:32px;font-weight:700">0.245</span><span style="font-size:15px;color:#C9D0D4"> 风阻系数</span></p>
        <p><span style="font-size:16px;color:#C9D0D4">接近 5 米车长，仍然保留向前俯冲的姿态</span></p>
  - elementId: position-source
    elementType: text
    bounds: [58, 510, 850, 16]
    content:
      fontFamily: MiSans
      color: "#CCD4D7"
      fontSize: 9
      text: "数据来源：<a href=\"https://www.xiaomiev.com/yu7\">小米汽车官网 YU7</a>；图源同上"
animations:
  - elementId: position-title
    effect: fly-in
    direction: right
    trigger: afterPrevious
    durationMs: 600
    easing: ease-out
  - elementId: position-body
    effect: fade-in
    trigger: afterPrevious
    durationMs: 500
  - elementId: position-stats
    effect: zoom-in
    trigger: afterPrevious
    durationMs: 500