npm - dsh-design-studio - Versions diffs - 0.10.0 → 0.12.0 - Mend

dsh-design-studio 0.10.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/README.en.md +4 -3
package/README.md +6 -5
package/assets/demo.gif +0 -0
package/assets/hero-sm.jpg +0 -0
package/cordis.patch.yml +5 -0
package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/_shots/menu.jpg +0 -0
package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/app.css +64 -0
package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/cart.html +120 -0
package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/design.json +56 -0
package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/menu.html +200 -0
package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/order.html +135 -0
package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/tokens.css +43 -0
package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/_shots/email.jpg +0 -0
package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/design.json +20 -0
package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/email.html +268 -0
package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/_shots/courses.jpg +0 -0
package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/courses.html +364 -0
package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/design.json +49 -0
package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/lesson.html +196 -0
package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/tokens.css +55 -0
package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/ui.css +255 -0
package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/_shots/poster.jpg +0 -0
package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/design.json +21 -0
package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/poster.html +165 -0
package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/tokens.css +35 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/_shots/home.jpg +0 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/app.css +155 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/booking.html +232 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/design.json +57 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/health.html +221 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/home.html +225 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/tokens.css +54 -0
package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/_shots/overview.jpg +0 -0
package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/app.css +79 -0
package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/design.json +51 -0
package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/entries.html +161 -0
package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/icons.svg +30 -0
package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/overview.html +181 -0
package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/tokens.css +50 -0
package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/_shots/home.jpg +0 -0
package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/book.html +279 -0
package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/design.json +21 -0
package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/home.html +348 -0
package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/style.css +297 -0
package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/tokens.css +49 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/01-cover.html +133 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/02-highlights.html +67 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/03-growth.html +89 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/04-milestones.html +92 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/05-next.html +99 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/06-thanks.html +61 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/_shots/01-cover.jpg +0 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/deck.css +67 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/design.json +25 -0
package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/tokens.css +30 -0
package/gallery-seed/index.json +1 -0
package/gallery-seed/thumbs/orderg-x__alley-noodles.webp +0 -0
package/gallery-seed/thumbs/orderg-x__autumn-sale.webp +0 -0
package/gallery-seed/thumbs/orderg-x__little-painter.webp +0 -0
package/gallery-seed/thumbs/orderg-x__moon-fair.webp +0 -0
package/gallery-seed/thumbs/orderg-x__paw-diary.webp +0 -0
package/gallery-seed/thumbs/orderg-x__pocket-ledger.webp +0 -0
package/gallery-seed/thumbs/orderg-x__time-bookshop.webp +0 -0
package/gallery-seed/thumbs/orderg-x__year-review.webp +0 -0
package/lib/browser.js +23 -9
package/lib/bundle.js +12 -3
package/lib/client.js +3253 -483
package/lib/core.js +231 -7
package/lib/draft-page.js +763 -0
package/lib/draft.js +151 -0
package/lib/gallery/css.js +230 -0
package/lib/gallery/html.js +313 -0
package/lib/gallery/index.js +22 -0
package/lib/gallery/market-routes.js +306 -0
package/lib/gallery/market.js +623 -0
package/lib/gallery/pack.js +311 -0
package/lib/gallery/policy.js +1560 -0
package/lib/gallery/qrfind.js +181 -0
package/lib/gallery/render.js +148 -0
package/lib/gallery/routes.js +360 -0
package/lib/gallery/tar.js +118 -0
package/lib/gallery/use.js +125 -0
package/lib/gallery/zip.js +212 -0
package/lib/handoff.js +190 -36
package/lib/history.js +3 -1
package/lib/index.js +123 -22
package/lib/inspire.js +142 -0
package/lib/offline.js +17 -0
package/lib/picker.js +260 -1
package/lib/serve.js +264 -11
package/lib/tweaks.js +58 -24
package/lib/works.js +238 -0
package/locale/en.json +2 -1
package/locale/offline/en.json +6 -0
package/locale/offline/zh.json +6 -0
package/locale/zh.json +2 -1
package/package.json +9 -2
package/skills/ui-design/SKILL.md +9 -0

package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/courses.html ADDED Viewed

@@ -0,0 +1,364 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="dsh-design" content="tablet">
+<title>课程 · 小画家</title>
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="ui.css">
+</head>
+<body>
+  <div class="status" aria-hidden="true">
+    <span>9:41&nbsp;&nbsp;11月7日 周六</span>
+    <span class="status-r">
+      <svg viewBox="0 0 17 12"><path d="M8.5 11.2 6.4 9.1a3 3 0 0 1 4.2 0z" fill="currentColor"/><path d="M3.6 6.4a7 7 0 0 1 9.8 0M1 3.8a10.6 10.6 0 0 1 15 0" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
+      86%
+      <svg viewBox="0 0 27 12"><rect x=".7" y=".7" width="22.6" height="10.6" rx="3" fill="none" stroke="currentColor" stroke-opacity=".45" stroke-width="1.2"/><rect x="2.4" y="2.4" width="16.8" height="7.2" rx="1.6" fill="currentColor"/><path d="M25 4.2v3.6c.8-.3 1.3-1 1.3-1.8S25.8 4.5 25 4.2z" fill="currentColor" fill-opacity=".45"/></svg>
+    </span>
+  </div>
+  <div class="shell">
+    <nav class="rail" aria-label="主导航">
+      <a class="rail-logo" href="courses.html" aria-label="小画家">
+        <svg viewBox="0 0 32 32" aria-hidden="true"><path d="M27 5 16.5 15.5" stroke="#fff" stroke-width="3" stroke-linecap="round"/><path d="M17.2 14.8c-1.6-1.6-4.4-1.5-6 .2-2 2-1.4 6.5-5.7 10.3 4.6 1 9.6-.1 11.6-2.3 1.7-1.7 1.8-4.5.1-6.2z" fill="#fff"/><circle cx="25" cy="22" r="3" fill="#F2C94C"/></svg>
+      </a>
+      <a class="rail-item on" href="courses.html" aria-current="page"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>课程</a>
+      <button class="rail-item" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4" width="17" height="16" rx="3"/><path d="m4 16.5 4.5-4.5 4 4 2.5-2.5 4.5 4.5"/><circle cx="15.5" cy="8.8" r="1.6"/></svg>画册</button>
+      <button class="rail-item" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8.5 3v4M15.5 3v4"/></svg>课表</button>
+      <button class="rail-item" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.8 20.5c.9-3.7 3.7-5.8 7.2-5.8s6.3 2.1 7.2 5.8"/></svg>我的</button>
+      <span class="rail-gap"></span>
+      <button class="rail-item" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="7.8" r="3"/><circle cx="17" cy="9.6" r="2.2"/><path d="M3.5 19.5c.6-3.2 2.8-5 5.5-5s4.9 1.8 5.5 5"/><path d="M15.4 14.8c2.4-.3 4.4 1.1 5.1 4.2"/></svg>家长</button>
+    </nav>
+    <main class="main">
+      <header class="hello">
+        <svg class="avatar" viewBox="0 0 60 60" role="img" aria-label="朵朵的头像">
+          <defs><clipPath id="av"><circle cx="30" cy="30" r="30"/></clipPath></defs>
+          <g clip-path="url(#av)">
+            <rect width="60" height="60" fill="#F8EDCF"/>
+            <circle cx="15" cy="17" r="7" fill="#4A3426"/><circle cx="45" cy="17" r="7" fill="#4A3426"/>
+            <circle cx="30" cy="31" r="19" fill="#4A3426"/>
+            <path d="M9 62q2-13 21-13t21 13z" fill="#6FAE7E"/>
+            <path d="M25 46h10v5a5 5 0 0 1-10 0z" fill="#EDC7A5"/>
+            <ellipse cx="30" cy="34" rx="15" ry="15" fill="#F6D5B5"/>
+            <path d="M15 32q1-15 15-16 14 1 15 16-5-7-11-6-4-4-9 0-6-1-10 6z" fill="#4A3426"/>
+            <circle cx="24.5" cy="35.5" r="1.8" fill="#2A1E16"/><circle cx="35.5" cy="35.5" r="1.8" fill="#2A1E16"/>
+            <circle cx="21" cy="40.5" r="2.6" fill="#F2A99A" opacity=".75"/><circle cx="39" cy="40.5" r="2.6" fill="#F2A99A" opacity=".75"/>
+            <path d="M27 41.5q3 3 6 0" stroke="#A0523C" stroke-width="1.6" fill="none" stroke-linecap="round"/>
+            <circle cx="45" cy="17" r="3" fill="#F2C94C"/>
+          </g>
+        </svg>
+        <div class="hello-t">
+          <h1>下午好，朵朵</h1>
+          <p>6 岁 · 已经画了 42 幅画</p>
+        </div>
+        <div class="hello-r">
+          <span class="pill pill-sun leaf-count"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19.5C4.6 11 9.5 5.2 19.8 4.2 20.2 14 14.6 19.6 5 19.5z" fill="#C9962A" stroke="none"/><path d="M5.5 19 13 11.5" stroke="#FFF7DF" stroke-width="1.8" stroke-linecap="round"/></svg>128 片叶子</span>
+          <button class="btn btn-ghost btn-round" type="button" aria-label="搜索课程"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg></button>
+        </div>
+      </header>
+      <section class="card week" aria-label="本周进度">
+        <div class="week-l">
+          <div class="week-top">
+            <div>
+              <p class="week-k">本周进度</p>
+              <p class="week-num"><b>3 节</b><span>/ 目标 5 节</span></p>
+            </div>
+            <svg class="week-deco" viewBox="0 0 132 84" aria-hidden="true"><circle cx="98" cy="30" r="26" fill="#F8EDCF"/><circle cx="98" cy="30" r="13" fill="#F2C94C"/><path d="M14 80C30 60 52 50 80 52" stroke="#9A6B44" stroke-width="3" fill="none" stroke-linecap="round"/><path transform="translate(34 66) rotate(-70) scale(0.9)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/><path transform="translate(52 57) rotate(-60) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#4E9A5F"/><path transform="translate(62 54) rotate(20) scale(0.85)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#B9DDB4"/><path transform="translate(40 64) rotate(30) scale(0.8)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#A9D3A6"/></svg>
+          </div>
+          <ol class="days">
+            <li class="day done"><i><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></i>一</li>
+            <li class="day rest"><i></i>二</li>
+            <li class="day done"><i><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></i>三</li>
+            <li class="day done"><i><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></i>四</li>
+            <li class="day rest"><i></i>五</li>
+            <li class="day today"><i><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 3.5 12 12"/><path d="M12.6 11.4c-1.2-1.2-3.4-1.1-4.7.2C6.4 13.1 6.8 16.6 3.5 19.5c3.6.8 7.4-.1 9-1.8 1.3-1.3 1.4-3.5.1-4.7z"/></svg></i>今天</li>
+            <li class="day plan"><i></i>日</li>
+          </ol>
+          <p class="week-goal"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5v-8"/><path d="M12 12.5C12 8.4 9.4 6 4.5 6c0 4.2 2.6 6.5 7.5 6.5z"/><path d="M12 10.5c0-3.6 2.4-6 7.5-6 0 3.9-2.5 6-7.5 6z"/></svg><span>再上 <b>2 节</b>，就能点亮「小树苗」徽章</span></p>
+        </div>
+        <div class="next">
+          <p class="next-k"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>今天 16:00 · 接着画</p>
+          <div class="next-row">
+            <svg class="thumb" viewBox="0 0 56 56" aria-hidden="true"><rect width="56" height="56" fill="#F8EDCF"/><circle cx="44" cy="12" r="6" fill="#F2C94C"/><g transform="translate(22 46) rotate(-16) scale(0.75)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#E9B949" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g><g transform="translate(36 48) rotate(22) scale(0.6)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#D9A23A" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g></svg>
+            <div>
+              <h3>秋天的银杏</h3>
+              <p>第 4 课 · 叶子的渐变</p>
+            </div>
+          </div>
+          <a class="btn btn-primary" href="lesson.html">继续上课 <svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9.5 6 6 6-6 6"/></svg></a>
+        </div>
+      </section>
+      <nav class="chips" aria-label="课程分类">
+        <button class="chip on" type="button">全部 <small>38</small></button>
+        <button class="chip" type="button">水彩 <small>12</small></button>
+        <button class="chip" type="button">蜡笔 <small>9</small></button>
+        <button class="chip" type="button">手工 <small>7</small></button>
+        <button class="chip" type="button">彩铅 <small>6</small></button>
+        <button class="chip" type="button">黏土 <small>4</small></button>
+      </nav>
+      <section class="group">
+        <div class="group-h">
+          <h2>水彩<span>12 门课</span></h2>
+          <button class="more" type="button">全部 <svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9.5 6 6 6-6 6"/></svg></button>
+        </div>
+        <div class="grid">
+        <a class="course" href="lesson.html">
+          <div class="art">
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#F8EDCF"/>
+        <circle cx="166" cy="34" r="30" fill="#FBE3A0" opacity=".7"/>
+        <circle cx="166" cy="34" r="14" fill="#F2C94C"/>
+        <ellipse cx="100" cy="126" rx="90" ry="12" fill="#EFD9A0" opacity=".7"/>
+        <g transform="translate(64 106) rotate(-30) scale(1.15)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#E9B949" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+        <g transform="translate(106 100) rotate(6) scale(1.35)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#D9A23A" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+        <g transform="translate(146 114) rotate(36) scale(1)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#F0C75E" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+        <g transform="translate(36 44) rotate(-64) scale(0.5)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#E9B949" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+        <g transform="translate(124 30) rotate(118) scale(0.42)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#D9A23A" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>秋天的银杏</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>8 课时 · 5–7 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 2 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="prog">3/8 课<i><b style="width:38%"></b></i></span>
+            </div>
+          </div>
+        </a>
+        <article class="course">
+          <div class="art"><span class="pill pill-sun tag">新课</span>
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#E2EFDF"/>
+        <circle cx="188" cy="24" r="22" fill="#F7E7A8" opacity=".7"/>
+        <circle cx="188" cy="24" r="11" fill="#F2C94C"/>
+        <rect x="68" y="-6" width="12" height="150" rx="6" fill="#6FAE7E"/>
+        <rect x="110" y="-6" width="14" height="150" rx="7" fill="#4E9A5F"/>
+        <rect x="152" y="-6" width="10" height="150" rx="5" fill="#8BC28F"/>
+        <path d="M68 34h12M68 76h12M68 116h12" stroke="#4E9A5F" stroke-width="2.4"/>
+        <path d="M110 24h14M110 66h14M110 108h14" stroke="#3D7F4C" stroke-width="2.4"/>
+        <path d="M152 44h10M152 90h10" stroke="#6FAE7E" stroke-width="2.4"/>
+        <path transform="translate(80 34) rotate(-24) scale(1.1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#4E9A5F"/><path transform="translate(80 76) rotate(18) scale(0.9)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/>
+        <path transform="translate(110 66) rotate(200) scale(1.1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/><path transform="translate(124 24) rotate(-30) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#3D7F4C"/>
+        <path transform="translate(152 44) rotate(210) scale(0.9)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#4E9A5F"/><path transform="translate(162 90) rotate(20) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/>
+        <path d="M30 74l-4 10M48 98l-4 10M186 56l-4 10M196 98l-4 10M96 112l-3 8" stroke="#8CC7BD" stroke-width="2.4" stroke-linecap="round"/>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>雨后的竹林</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>6 课时 · 6–8 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 2 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>每节 25 分钟</span>
+            </div>
+          </div>
+        </article>
+        <article class="course">
+          <div class="art"><span class="pill pill-green tag"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>学完了</span>
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#E3F1EE"/>
+        <ellipse cx="104" cy="104" rx="92" ry="22" fill="none" stroke="#C3E0D8" stroke-width="2"/>
+        <ellipse cx="104" cy="104" rx="66" ry="15" fill="none" stroke="#C3E0D8" stroke-width="2"/>
+        <ellipse cx="38" cy="112" rx="22" ry="7" fill="#8BC28F"/>
+        <ellipse cx="104" cy="102" rx="54" ry="20" fill="#6FAE7E"/>
+        <path d="M104 102 160 92v14z" fill="#E3F1EE"/>
+        <path d="M104 102 62 96M104 102 76 116M104 102 132 118M104 102 96 84" stroke="#8BC28F" stroke-width="2" stroke-linecap="round"/>
+        <ellipse cx="90" cy="98" rx="7" ry="4" fill="#4E9A5F"/><ellipse cx="118" cy="98" rx="7" ry="4" fill="#4E9A5F"/>
+        <ellipse cx="104" cy="82" rx="24" ry="18" fill="#4E9A5F"/>
+        <ellipse cx="104" cy="88" rx="14" ry="9" fill="#B9DDB4"/>
+        <circle cx="92" cy="65" r="8" fill="#4E9A5F"/><circle cx="116" cy="65" r="8" fill="#4E9A5F"/>
+        <circle cx="92" cy="65" r="5.4" fill="#fff"/><circle cx="116" cy="65" r="5.4" fill="#fff"/>
+        <circle cx="93" cy="66" r="2.6" fill="#1F2A22"/><circle cx="117" cy="66" r="2.6" fill="#1F2A22"/>
+        <path d="M96 77q8 6 16 0" stroke="#1F2A22" stroke-width="1.8" fill="none" stroke-linecap="round"/>
+        <circle cx="87" cy="77" r="3" fill="#F2B8A0"/><circle cx="121" cy="77" r="3" fill="#F2B8A0"/>
+        <g transform="translate(166 52)"><ellipse rx="5" ry="9" transform="translate(0 -8)" fill="#F7E3A2"/><ellipse rx="5" ry="9" transform="rotate(72) translate(0 -8)" fill="#F7E3A2"/><ellipse rx="5" ry="9" transform="rotate(144) translate(0 -8)" fill="#F7E3A2"/><ellipse rx="5" ry="9" transform="rotate(216) translate(0 -8)" fill="#F7E3A2"/><ellipse rx="5" ry="9" transform="rotate(288) translate(0 -8)" fill="#F7E3A2"/><circle r="5" fill="#E9B949"/></g>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>荷塘小青蛙</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>5 课时 · 4–6 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 1 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>每节 20 分钟</span>
+            </div>
+          </div>
+        </article>
+        </div>
+      </section>
+      <section class="group">
+        <div class="group-h">
+          <h2>蜡笔<span>9 门课</span></h2>
+          <button class="more" type="button">全部 <svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9.5 6 6 6-6 6"/></svg></button>
+        </div>
+        <div class="grid">
+        <article class="course">
+          <div class="art">
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#F8EDCF"/>
+        <path d="M16 26l12-6 12 6 12-6 12 6M118 18l12-6 12 6" stroke="#F3DE9F" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+        <g stroke="#E9B949" stroke-width="3" stroke-linecap="round"><path d="M182 14v-6M182 46v6M166 30h-6M198 30h6M171 19l-4-4M193 41l4 4M171 41l-4 4M193 19l4-4"/></g>
+        <circle cx="182" cy="30" r="10" fill="#F2C94C"/>
+        <ellipse cx="104" cy="150" rx="140" ry="40" fill="#B9DDB4"/>
+        <path d="M70 136q3-30 0-62M140 136q-3-26 1-48" stroke="#4E9A5F" stroke-width="5" fill="none" stroke-linecap="round"/>
+        <path transform="translate(71 112) rotate(-150) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/><path transform="translate(70 100) rotate(-30) scale(0.9)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/><path transform="translate(139 116) rotate(-28) scale(0.9)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/>
+        <g transform="translate(70 62) scale(1.1)"><ellipse rx="5.5" ry="11" transform="rotate(0) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(30) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(60) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(90) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(120) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(150) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(180) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(210) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(240) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(270) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(300) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(330) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><circle r="10.5" fill="#8A5A2B"/><circle cx="-3" cy="-3" r="1.6" fill="#5E3B1C"/><circle cx="3" cy="-1" r="1.6" fill="#5E3B1C"/><circle cx="-1" cy="4" r="1.6" fill="#5E3B1C"/></g><g transform="translate(141 80) scale(0.85)"><ellipse rx="5.5" ry="11" transform="rotate(0) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(30) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(60) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(90) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(120) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(150) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(180) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(210) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(240) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(270) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(300) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><ellipse rx="5.5" ry="11" transform="rotate(330) translate(0 -15)" fill="#F2C94C" stroke="#D9A23A" stroke-width="1.2"/><circle r="10.5" fill="#8A5A2B"/><circle cx="-3" cy="-3" r="1.6" fill="#5E3B1C"/><circle cx="3" cy="-1" r="1.6" fill="#5E3B1C"/><circle cx="-1" cy="4" r="1.6" fill="#5E3B1C"/></g>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>向日葵花园</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>4 课时 · 4–6 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 1 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>每节 20 分钟</span>
+            </div>
+          </div>
+        </article>
+        <article class="course">
+          <div class="art">
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#E2EFDF"/>
+        <circle cx="38" cy="30" r="20" fill="#F7E7A8" opacity=".75"/>
+        <circle cx="38" cy="30" r="11" fill="#F2C94C"/>
+        <ellipse cx="104" cy="150" rx="150" ry="44" fill="#B9DDB4"/>
+        <rect x="47" y="104" width="6" height="14" fill="#9A6B44"/><path d="M28 108 50 58l22 50z" fill="#4E9A5F"/>
+        <rect x="167" y="104" width="6" height="14" fill="#9A6B44"/><path d="M150 108l20-52 20 52z" fill="#6FAE7E"/>
+        <path d="M184 114l10-26 10 26z" fill="#4E9A5F"/>
+        <rect x="124" y="54" width="9" height="18" fill="#9A6B44"/>
+        <path d="M129 48q-7-6 0-12t0-12" stroke="#A8B8AA" stroke-width="2.4" fill="none" stroke-linecap="round"/>
+        <rect x="84" y="76" width="54" height="42" fill="#E9C48A" stroke="#9A6B44" stroke-width="2.4" stroke-linejoin="round"/>
+        <path d="M78 80l33-28 33 28z" fill="#C9962A" stroke="#9A6B44" stroke-width="2.4" stroke-linejoin="round"/>
+        <rect x="105" y="94" width="14" height="24" rx="2" fill="#9A6B44"/>
+        <rect x="90" y="86" width="11" height="11" fill="#FBE3A0" stroke="#9A6B44" stroke-width="1.8"/>
+        <path d="M60 124h96" stroke="#8BC28F" stroke-width="3" stroke-linecap="round" stroke-dasharray="1 8"/>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>森林里的小木屋</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>6 课时 · 5–7 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 2 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="prog">2/6 课<i><b style="width:33%"></b></i></span>
+            </div>
+          </div>
+        </article>
+        <article class="course">
+          <div class="art"><span class="pill pill-sun tag">新课</span>
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#EDF4EB"/>
+        <path d="M18 116C34 56 116 30 194 44 176 108 96 132 18 116z" fill="#A9D3A6"/>
+        <circle cx="132" cy="114" r="10" fill="#EDF4EB"/>
+        <circle cx="146" cy="112" r="7" fill="#EDF4EB"/>
+        <path d="M26 112Q100 84 188 48" stroke="#8BC28F" stroke-width="2.6" fill="none" stroke-linecap="round"/>
+        <path d="M72 100l-2 8M90 94l-2 8M108 88l-2 8M126 80l-2 8" stroke="#3D7F4C" stroke-width="2.4" stroke-linecap="round"/>
+        <circle cx="66" cy="90" r="11" fill="#4E9A5F"/><circle cx="84" cy="84" r="12" fill="#6FAE7E"/>
+        <circle cx="103" cy="78" r="12" fill="#4E9A5F"/><circle cx="122" cy="71" r="12" fill="#6FAE7E"/>
+        <circle cx="143" cy="61" r="14" fill="#F2C94C"/>
+        <path d="M137 49l-5-10M149 48l3-11" stroke="#1F2A22" stroke-width="1.8" stroke-linecap="round"/>
+        <circle cx="132" cy="38" r="2.6" fill="#1F2A22"/><circle cx="152" cy="36" r="2.6" fill="#1F2A22"/>
+        <circle cx="139" cy="59" r="2.2" fill="#1F2A22"/><circle cx="149" cy="58" r="2.2" fill="#1F2A22"/>
+        <path d="M139 66q5 4 10-1" stroke="#1F2A22" stroke-width="1.6" fill="none" stroke-linecap="round"/>
+        <g transform="translate(186 116)"><circle r="4" fill="#F7E3A2" transform="translate(0 -5)"/><circle r="4" fill="#F7E3A2" transform="translate(5 0)"/><circle r="4" fill="#F7E3A2" transform="translate(0 5)"/><circle r="4" fill="#F7E3A2" transform="translate(-5 0)"/><circle r="3" fill="#E9B949"/></g>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>毛毛虫去散步</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>3 课时 · 3–5 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 1 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>每节 20 分钟</span>
+            </div>
+          </div>
+        </article>
+        </div>
+      </section>
+      <section class="group">
+        <div class="group-h">
+          <h2>手工<span>7 门课</span></h2>
+          <button class="more" type="button">全部 <svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9.5 6 6 6-6 6"/></svg></button>
+        </div>
+        <div class="grid">
+        <article class="course">
+          <div class="art">
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#F8EDCF"/>
+        <path transform="translate(66 68) rotate(-150) scale(1.5)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#4E9A5F"/><path transform="translate(66 68) rotate(150) scale(1.5)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/>
+        <path d="M62 68Q108 24 158 68 108 112 62 68z" fill="#E9B949"/>
+        <path transform="translate(82 58) rotate(-12) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#C9962A"/><path transform="translate(82 78) rotate(12) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#C9962A"/>
+        <path transform="translate(104 50) rotate(-10) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/><path transform="translate(104 68) rotate(0) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#D9A23A"/><path transform="translate(104 86) rotate(10) scale(1)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/>
+        <path transform="translate(124 60) rotate(-8) scale(0.8)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#C9962A"/><path transform="translate(124 78) rotate(8) scale(0.8)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#C9962A"/>
+        <circle cx="142" cy="62" r="6" fill="#fff" stroke="#1F2A22" stroke-width="1.6"/><circle cx="143" cy="63" r="2.6" fill="#1F2A22"/>
+        <path d="M152 74q-4 3-8 1" stroke="#1F2A22" stroke-width="1.6" fill="none" stroke-linecap="round"/>
+        <circle cx="174" cy="44" r="5" fill="none" stroke="#D9A23A" stroke-width="2"/><circle cx="184" cy="30" r="3.4" fill="none" stroke="#D9A23A" stroke-width="2"/>
+        <path d="M24 118q16-8 32 0t32 0" stroke="#E0C98A" stroke-width="2.4" fill="none" stroke-linecap="round"/>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>树叶拼小鱼</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>3 课时 · 4–6 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 1 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>每节 20 分钟</span>
+            </div>
+          </div>
+        </article>
+        <article class="course">
+          <div class="art">
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#E3F1EE"/>
+        <ellipse cx="104" cy="112" rx="78" ry="9" fill="#C9E3DB"/>
+        <ellipse cx="68" cy="102" rx="13" ry="8" fill="#6FAE7E"/><ellipse cx="136" cy="102" rx="13" ry="8" fill="#6FAE7E"/>
+        <path d="M44 90l-12 6 12 2z" fill="#6FAE7E"/>
+        <circle cx="166" cy="76" r="15" fill="#8BC28F"/>
+        <circle cx="170" cy="72" r="5" fill="#fff"/><circle cx="171" cy="73" r="2.4" fill="#1F2A22"/>
+        <path d="M168 84q5 3 9-1" stroke="#1F2A22" stroke-width="1.6" fill="none" stroke-linecap="round"/>
+        <path d="M44 96a60 54 0 0 1 112 0z" fill="#fff"/>
+        <path d="M44 96a60 54 0 0 1 112 0" fill="none" stroke="#DCE6DA" stroke-width="4" stroke-dasharray="2 3"/>
+        <path d="M54 94a50 44 0 0 1 92 0z" fill="#4E9A5F"/>
+        <path d="M86 94l4-18h20l4 18M90 76l-12-14M110 76l12-14M100 50v0M78 62q22-10 44 0" stroke="#B9DDB4" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>纸盘小乌龟</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>4 课时 · 5–7 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 2 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class=""><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>每节 20 分钟</span>
+            </div>
+          </div>
+        </article>
+        <article class="course">
+          <div class="art">
+      <svg viewBox="0 0 208 136" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+        <rect width="208" height="136" fill="#EDF4EB"/>
+        <ellipse cx="104" cy="118" rx="82" ry="8" fill="#DCE6DA"/>
+        <ellipse cx="78" cy="114" rx="7" ry="4" fill="#6E4A2C"/><ellipse cx="118" cy="114" rx="7" ry="4" fill="#6E4A2C"/>
+        <ellipse cx="94" cy="82" rx="46" ry="33" fill="#9A6B44"/>
+        <path d="M58 70q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M76 62q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M94 60q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M112 66q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M64 88q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M82 80q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M100 78q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M118 84q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M72 104q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M90 98q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/><path d="M108 100q8 10 16 0" fill="#B58556" stroke="#6E4A2C" stroke-width="1.6" stroke-linejoin="round"/>
+        <path d="M132 74q30 6 40 18-18 12-42 6z" fill="#E9C48A"/>
+        <circle cx="172" cy="91" r="4.5" fill="#1F2A22"/>
+        <circle cx="149" cy="83" r="2.6" fill="#1F2A22"/>
+        <circle cx="150" cy="93" r="3.2" fill="#F2B8A0"/>
+        <path transform="translate(78 52) rotate(-40) scale(0.9)" d="M0 0Q16-8 34 0Q16 8 0 0Z" fill="#6FAE7E"/>
+        <circle cx="104" cy="50" r="6" fill="#C9962A"/><path d="M104 44v-4" stroke="#6E4A2C" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+          </div>
+          <div class="course-b">
+            <h3>松果小刺猬</h3>
+            <p class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10.4 5.2 8.2 4.5 4 4.5v14c4.2 0 6.4.7 8 2 1.6-1.3 3.8-2 8-2v-14c-4.2 0-6.4.7-8 2z"/><path d="M12 6.5v14"/></svg>5 课时 · 6–8 岁</p>
+            <div class="course-f">
+              <span class="lv">难度 <span class="stars" role="img" aria-label="难度 3 星"><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg><svg viewBox="0 0 24 24" class="on"><path d="M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z"/></svg></span></span>
+              <span class="course-meta"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>每节 20 分钟</span>
+            </div>
+          </div>
+        </article>
+        </div>
+      </section>
+    </main>
+  </div>
+</body>
+</html>

package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/design.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "format": 1,
+  "type": "template",
+  "title": {
+    "zh": "小画家",
+    "en": "Little Painter"
+  },
+  "description": {
+    "zh": "儿童美术网课的平板 App：课程表和跟着画的上课页",
+    "en": "A tablet app for kids’ art classes: a course list and a paint-along lesson screen"
+  },
+  "kind": "tablet",
+  "screens": [
+    {
+      "file": "courses.html",
+      "title": {
+        "zh": "课程",
+        "en": "Courses"
+      }
+    },
+    {
+      "file": "lesson.html",
+      "title": {
+        "zh": "上课",
+        "en": "Lesson"
+      }
+    }
+  ],
+  "style": "fresh",
+  "categories": [
+    "kids",
+    "education"
+  ],
+  "tags": [
+    "list",
+    "detail",
+    "illustration"
+  ],
+  "lang": "zh",
+  "license": "CC0-1.0",
+  "author": {
+    "login": "orderg-x",
+    "id": 271418316
+  },
+  "ai": {
+    "generated": true,
+    "tool": "dsh-design-studio@0.11.0"
+  }
+}