gwd
/
math_cms


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>知识点聚类连线 - PDF场景复刻</title>
  <style>
    :root {
      --bg: #f5f7fb;
      --card: #ffffff;
      --line: #0f172a;         /* 连线颜色（独立于标签文字） */
      --line-dense: #111827;   /* 密集场景更深线色 */
      --text: #0f172a;
      --muted: #64748b;
      --tag-text: #92400e;     /* 标签文字色 */
      --dot-mastered: #22c55e;
      --dot-weak: #f59e0b;
      --dot-beginner: #ef4444;
      --dot-unlearned: #d1d5db;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: var(--bg);
      padding: 24px;
    }
    .wrap { max-width: 1420px; margin: 0 auto; }
    h1 { margin: 0 0 8px; font-size: 34px; }
    .legend { margin-bottom: 18px; color: var(--muted); font-size: 18px; }
    .legend .dot {
      width: 13px; height: 13px; border-radius: 999px; display: inline-block; margin: 0 6px 0 16px;
      vertical-align: middle;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .card {
      background: var(--card);
      border: 1px solid #dfe4ea;
      border-radius: 16px;
      padding: 14px 16px 16px;
      min-height: 250px;
    }
    .card h2 { margin: 0 0 10px; font-size: 38px; }
    .group {
      border-left: 3px solid #e5e7eb;
      margin-bottom: 10px;
      padding-left: 10px;
      position: relative;
      padding-right: 230px; /* 右侧留给标签区 */
    }
    .group-title { font-size: 34px; font-weight: 700; margin-bottom: 6px; line-height: 1.25; }
    .points {
      display: flex;
      gap: 7px;
      align-items: center;
      flex-wrap: wrap;
      min-height: 20px;
      position: relative;
    }
    .point {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1px solid #bfc7d1;
      position: relative;
      flex: 0 0 auto;
    }
    .mastered { background: var(--dot-mastered); }
    .weak { background: var(--dot-weak); }
    .beginner { background: var(--dot-beginner); }
    .unlearned { background: var(--dot-unlearned); }

    .point.focus {
      box-shadow: 0 0 0 3px rgba(253, 224, 71, .45);
    }
    .focus-tag {
      position: absolute;
      left: 138px; /* 与最右侧方块拉开安全间距 */
      top: 50%;
      transform: translateY(-50%);
      border: 2px solid var(--line);
      border-radius: 999px;
      padding: 2px 10px;
      font-size: 27px;
      line-height: 1.3;
      color: var(--tag-text);
      background: #fff7ed;
      white-space: nowrap;
      max-width: none;
      overflow: visible;
      text-overflow: clip;
    }
    .focus-tag.dense { left: 178px; top: 50%; }
    .focus-tag.bottom { left: 148px; top: 44%; }

    .focus-svg {
      position: absolute;
      left: 0;
      top: -36px;
      width: 162px;
      height: 64px;
      overflow: visible;
      pointer-events: none;
    }
    .focus-svg path {
      fill: none;
      stroke: var(--line);
      stroke-width: 2.2;
      stroke-linecap: round;
    }
    .focus-svg.dense {
      width: 170px;
      height: 58px;
      top: -30px;
    }
    .focus-svg.dense path { stroke: var(--line-dense); }
    .note {
      margin-top: 16px;
      padding: 10px 14px;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      color: #334155;
      background: #fff;
      font-size: 16px;
    }
    .span-2 { grid-column: 1 / -1; min-height: 170px; }
    .mini { min-height: 190px; }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>二、知识点掌握聚类视图（PDF场景复刻）</h1>
    <div class="legend">
      <span class="dot" style="background:var(--dot-mastered)"></span>已掌握
      <span class="dot" style="background:var(--dot-weak)"></span>薄弱
      <span class="dot" style="background:var(--dot-beginner)"></span>未入门
      <span class="dot" style="background:var(--dot-unlearned)"></span>未学习
      按“模块 -> 子模块 -> 知识点”聚类展示
    </div>

    <div class="grid">
      <section class="card">
        <h2>函数</h2>
        <div class="group">
          <div class="group-title">二次函数</div>
          <div class="points">
            <span class="point weak"></span><span class="point weak"></span><span class="point beginner"></span><span class="point beginner"></span><span class="point beginner"></span><span class="point unlearned"></span>
          </div>
        </div>
        <div class="group">
          <div class="group-title">锐角三角函数</div>
          <div class="points">
            <span class="point beginner"></span>
            <span class="point beginner focus">
              <svg class="focus-svg" viewBox="0 0 150 64" aria-hidden="true">
                <!-- 普通场景：起点锚定点中心(8,40)，终点进入标签内侧(136,40) -->
                <path d="M8,40 C16,40 22,26 40,20 C84,16 114,34 130,39 L136,40" />
              </svg>
              <span class="focus-tag">三角函数的应用</span>
            </span>
            <span class="point unlearned"></span>
          </div>
        </div>
        <div class="group">
          <div class="group-title">反比例函数</div>
          <div class="points">
            <span class="point mastered"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
      </section>

      <section class="card">
        <h2>相似与勾股</h2>
        <div class="group">
          <div class="group-title">相似三角形判定</div>
          <div class="points">
            <span class="point mastered"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
        <div class="group">
          <div class="group-title">相似三角形性质</div>
          <div class="points">
            <span class="point weak"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
        <div class="group">
          <div class="group-title">勾股定理与直角三角形</div>
          <div class="points">
            <span class="point beginner focus">
              <svg class="focus-svg" viewBox="0 0 150 64" aria-hidden="true">
                <path d="M8,40 C16,40 22,26 38,20 C80,16 110,34 130,39 L136,40" />
              </svg>
              <span class="focus-tag">直角三角形性质</span>
            </span>
            <span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
        <div class="group">
          <div class="group-title">相似与勾股在压轴题中的整合</div>
          <div class="points">
            <span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
      </section>

      <section class="card span-2 mini">
        <h2>图形变化与度量 / 图形度量</h2>
        <div class="group">
          <div class="group-title">立体几何度量（表面积与体积）</div>
          <div class="points">
            <span class="point beginner focus">
              <svg class="focus-svg bottom" viewBox="0 0 150 64" aria-hidden="true">
                <!-- 跨列底部场景：弧线更高，避免贴近点阵 -->
                <path d="M8,40 C16,40 22,24 40,18 C82,15 112,33 130,39 L136,40" />
              </svg>
              <span class="focus-tag bottom">立体几何展开图</span>
            </span>
            <span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
      </section>

      <section class="card">
        <h2>方程与不等式</h2>
        <div class="group">
          <div class="group-title">一元二次方程</div>
          <div class="points">
            <span class="point beginner"></span><span class="point beginner"></span><span class="point beginner"></span>
            <span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
        <div class="group">
          <div class="group-title">分式方程</div>
          <div class="points">
            <span class="point beginner focus">
              <svg class="focus-svg" viewBox="0 0 150 64" aria-hidden="true">
                <path d="M8,40 C16,40 22,26 38,20 C80,16 110,34 130,39 L136,40" />
              </svg>
              <span class="focus-tag">分式方程的应用</span>
            </span>
            <span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
      </section>

      <section class="card">
        <h2>数与代数</h2>
        <div class="group">
          <div class="group-title">数的认识与运算</div>
          <div class="points">
            <span class="point beginner"></span><span class="point beginner"></span><span class="point weak"></span>
            <span class="point beginner focus">
              <svg class="focus-svg dense" viewBox="0 0 150 64" aria-hidden="true">
                <!-- 密集场景：前段快速抬升 + 终点内插，避免擦到后续灰块 -->
                <path d="M8,40 C14,40 20,26 34,22 C78,18 124,26 154,34 L162,36" />
              </svg>
              <span class="focus-tag dense">幂与指数</span>
            </span>
            <span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
            <span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
        <div class="group">
          <div class="group-title">代数式与整式运算</div>
          <div class="points">
            <span class="point beginner"></span><span class="point beginner"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span><span class="point unlearned"></span>
          </div>
        </div>
      </section>
    </div>

    <div class="note">
      这版覆盖了 PDF 中常见情况：长标题换行、密集点阵、上下卡片、多个关注点位置、右侧标签区。你确认这页视觉后，我再同步回正式模板。
    </div>
  </div>
</body>
</html>