鍗楁箹瀛︽牎鍒涙剰缇庢湳澶忎护钀?/title> <style> :root { --bg: #f6eee2; --paper: rgba(255, 250, 244, 0.92); --paper-strong: #fffaf5; --ink: #2f241d; --muted: #6d5e53; --accent: #d9673d; --accent-2: #4f7b67; --accent-3: #f0bf6c; --line: rgba(70, 49, 37, 0.12); --shadow: 0 24px 70px rgba(74, 49, 34, 0.14); --radius-xl: 34px; --radius-lg: 26px; --radius-md: 20px; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: var(--ink); background: radial-gradient(circle at 12% 18%, rgba(240, 191, 108, 0.35), transparent 20rem), radial-gradient(circle at 82% 16%, rgba(79, 123, 103, 0.18), transparent 20rem), radial-gradient(circle at 88% 86%, rgba(217, 103, 61, 0.12), transparent 24rem), linear-gradient(135deg, #f2e4cf 0%, #f7f0e6 48%, #f5ece0 100%); } body { overflow-x: hidden; } .screen { display: none; } .screen.active { display: block; } .home-shell { width: min(1380px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 42px; } .hero { position: relative; overflow: hidden; padding: 42px; border-radius: var(--radius-xl); background: linear-gradient(135deg, rgba(255, 252, 248, 0.97), rgba(255, 245, 237, 0.94)), var(--paper-strong); border: 1px solid rgba(255, 255, 255, 0.84); box-shadow: var(--shadow); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .hero::before { width: 320px; height: 320px; right: -90px; top: -110px; background: radial-gradient(circle, rgba(217, 103, 61, 0.16), transparent 70%); } .hero::after { width: 240px; height: 240px; left: -40px; bottom: -110px; background: radial-gradient(circle, rgba(79, 123, 103, 0.16), transparent 70%); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 26px; align-items: end; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(217, 103, 61, 0.1); color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; } .hero h1 { margin: 18px 0 14px; font-size: clamp(42px, 6vw, 78px); line-height: 1.05; letter-spacing: 0.02em; } .hero p { margin: 0; max-width: 820px; color: var(--muted); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.85; } .hero-stats { display: grid; gap: 14px; } .stat { padding: 20px 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); backdrop-filter: blur(10px); } .stat strong { display: block; margin-bottom: 8px; color: var(--accent-2); font-size: 14px; letter-spacing: 0.04em; } .stat span { font-size: 28px; line-height: 1.45; font-weight: 700; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 28px 4px 18px; } .section-head h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); } .section-head p { margin: 0; max-width: 640px; color: var(--muted); font-size: 17px; line-height: 1.8; text-align: right; } .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .lesson-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 272px; padding: 22px; border-radius: 28px; text-decoration: none; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.84); box-shadow: var(--shadow); overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .lesson-card:hover { transform: translateY(-6px); box-shadow: 0 30px 76px rgba(74, 49, 34, 0.18); border-color: rgba(217, 103, 61, 0.24); } .lesson-card::before { content: ""; position: absolute; right: -36px; top: -38px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.62), transparent 72%); } .lesson-card > * { position: relative; z-index: 1; } .theme-1 { background: linear-gradient(180deg, #fff3e7, #fffaf4); } .theme-2 { background: linear-gradient(180deg, #fff0ee, #fffaf6); } .theme-3 { background: linear-gradient(180deg, #eef8f2, #fbfffd); } .theme-4 { background: linear-gradient(180deg, #f2f3ff, #fffdfd); } .theme-5 { background: linear-gradient(180deg, #fff8eb, #fffdf8); } .theme-6 { background: linear-gradient(180deg, #eef7ff, #fbfeff); } .theme-7 { background: linear-gradient(180deg, #fdf1f7, #fffdfd); } .theme-8 { background: linear-gradient(180deg, #f2f7ec, #fcfff8); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 8px 12px; border-radius: 999px; background: rgba(47, 36, 29, 0.08); font-size: 13px; font-weight: 700; } .icon { width: 52px; height: 52px; border-radius: 18px; background: rgba(255, 255, 255, 0.84); display: grid; place-items: center; font-size: 24px; box-shadow: inset 0 0 0 1px rgba(47, 36, 29, 0.06); } .lesson-card h3 { margin: 18px 0 10px; font-size: 28px; line-height: 1.28; } .time { margin: 0 0 12px; color: var(--accent-2); font-size: 16px; font-weight: 700; line-height: 1.75; } .desc { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; } .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--accent); font-size: 15px; font-weight: 700; } .panel { margin-top: 22px; padding: 24px 26px; border-radius: 28px; background: rgba(255, 251, 246, 0.88); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--shadow); } .panel h3 { margin: 0 0 12px; font-size: 28px; } .panel p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.85; } .lesson-shell { width: min(1380px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 34px; } .back-btn { border: 0; background: rgba(255, 255, 255, 0.92); color: var(--ink); padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px rgba(74, 49, 34, 0.12); } .slides { display: grid; gap: 22px; margin-top: 18px; } .slide { position: relative; min-height: 92vh; padding: 34px; border-radius: var(--radius-xl); background: var(--paper); border: 1px solid rgba(255, 255, 255, 0.86); box-shadow: var(--shadow); overflow: hidden; } .slide::before { content: ""; position: absolute; right: -70px; top: -70px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 103, 61, 0.14), transparent 70%); } .slide::after { content: ""; position: absolute; left: -50px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 123, 103, 0.12), transparent 70%); } .slide-inner { position: relative; z-index: 1; height: 100%; } .slide-number { position: absolute; right: 26px; bottom: 20px; color: rgba(47, 36, 29, 0.38); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; } #lesson1Screen .slide { background: linear-gradient(180deg, rgba(255, 252, 248, 0.96), rgba(255, 246, 239, 0.92)), var(--paper); } #lesson1Screen .slide.theme-warm { background: linear-gradient(180deg, rgba(255, 247, 238, 0.98), rgba(255, 239, 228, 0.94)), var(--paper); } #lesson1Screen .slide.theme-fresh { background: linear-gradient(180deg, rgba(245, 252, 248, 0.98), rgba(235, 247, 240, 0.94)), var(--paper); } #lesson1Screen .slide.theme-playful { background: linear-gradient(180deg, rgba(250, 245, 255, 0.98), rgba(244, 236, 252, 0.94)), var(--paper); } #lesson1Screen .slide.theme-sun { background: linear-gradient(180deg, rgba(255, 250, 238, 0.98), rgba(255, 244, 223, 0.94)), var(--paper); } #lesson1Screen .slide .slide-inner { padding-top: 46px; padding-bottom: 52px; } .master-head { position: absolute; left: 28px; right: 28px; top: 20px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .master-brand { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(217, 103, 61, 0.14); color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; box-shadow: 0 10px 24px rgba(74, 49, 34, 0.08); } .master-brand::before { content: ""; width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-3)); box-shadow: 16px 0 0 rgba(79, 123, 103, 0.18); margin-right: 8px; } .master-tag { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; background: rgba(79, 123, 103, 0.1); color: var(--accent-2); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; } .master-footer { position: absolute; left: 28px; right: 28px; bottom: 18px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .master-caption { color: rgba(47, 36, 29, 0.52); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; } .master-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .master-dot { width: 12px; height: 12px; border-radius: 999px; background: rgba(47, 36, 29, 0.12); box-shadow: inset 0 0 0 1px rgba(47, 36, 29, 0.06); } .master-dot.active { width: 30px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); } .master-step-label { padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(47, 36, 29, 0.06); color: rgba(47, 36, 29, 0.48); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; } .master-step-label.active { color: #fff; background: linear-gradient(90deg, var(--accent), #ef9f4f); border-color: transparent; } .master-sticker { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 10px 22px rgba(74, 49, 34, 0.08); font-size: 20px; transform: rotate(-6deg); backdrop-filter: blur(8px); } .master-sticker.s1 { top: 90px; right: 34px; } .master-sticker.s2 { top: 96px; right: 108px; transform: rotate(8deg); } .master-sticker.s3 { top: 94px; right: 186px; transform: rotate(-3deg); } .lesson-nav { position: sticky; top: 14px; z-index: 20; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 999px; background: rgba(255, 250, 244, 0.88); border: 1px solid rgba(255, 255, 255, 0.84); box-shadow: 0 12px 30px rgba(74, 49, 34, 0.1); backdrop-filter: blur(10px); } .lesson-nav strong { color: var(--accent); font-size: 14px; letter-spacing: 0.06em; } .lesson-nav a { padding: 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; transition: background 160ms ease, transform 160ms ease, color 160ms ease; } .lesson-nav a:hover { transform: translateY(-1px); background: rgba(255, 243, 232, 0.96); color: var(--accent); } .ppt-deck { display: grid; gap: 28px; margin-top: 18px; } .ppt-page { position: relative; min-height: calc(100vh - 120px); padding: 26px; border-radius: 34px; background: linear-gradient(180deg, rgba(248, 238, 228, 0.96), rgba(241, 227, 213, 0.94)), #f6ede5; border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 22px 56px rgba(59, 36, 18, 0.14); scroll-margin-top: 110px; overflow: hidden; } .ppt-page::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 28%), radial-gradient(circle at bottom right, rgba(217, 103, 61, 0.12), transparent 24%); pointer-events: none; } .ppt-frame { position: relative; z-index: 1; width: min(100%, 1320px); margin: 0 auto; padding: 18px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 248, 244, 0.98)); box-shadow: 0 16px 34px rgba(65, 40, 21, 0.14), inset 0 0 0 1px rgba(210, 193, 177, 0.6); } .ppt-frame img { display: block; width: 100%; height: auto; border-radius: 20px; background: #fff; } .ppt-page-meta { position: absolute; right: 34px; bottom: 26px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 20px rgba(74, 49, 34, 0.12); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; } .ppt-page-meta span:last-child { color: var(--muted); font-weight: 600; } .ppt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 0 4px; color: var(--muted); } .ppt-toolbar strong { font-size: 18px; color: var(--accent); } .ppt-toolbar p { margin: 0; font-size: 14px; line-height: 1.7; text-align: right; } .ppt-player { position: relative; margin-top: 18px; padding: 18px 72px; border-radius: 34px; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.26), transparent 26%), linear-gradient(180deg, rgba(99, 70, 43, 0.9), rgba(55, 39, 26, 0.94)); box-shadow: 0 22px 56px rgba(59, 36, 18, 0.18); min-height: calc(100vh - 190px); display: flex; align-items: center; justify-content: center; } .ppt-stage { width: min(100%, 1280px); } .ppt-stage .ppt-frame { padding: 14px; border-radius: 24px; background: rgba(255, 255, 255, 0.98); } .ppt-stage img { display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; } .ppt-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 28px; font-weight: 700; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform 160ms ease, background 160ms ease, opacity 160ms ease; z-index: 3; } .ppt-arrow:hover { transform: translateY(-50%) scale(1.04); background: #fff4ea; } .ppt-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .ppt-arrow.prev { left: 12px; } .ppt-arrow.next { right: 12px; } .ppt-counter { position: absolute; right: 24px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); font-size: 14px; font-weight: 700; z-index: 3; } .ppt-counter span:last-child { color: var(--muted); font-weight: 600; } .cover-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: center; min-height: calc(92vh - 68px); } .cover-title { margin: 18px 0 16px; font-size: clamp(46px, 6vw, 82px); line-height: 1.04; } .cover-text { margin: 0; color: var(--muted); font-size: clamp(18px, 2vw, 24px); line-height: 1.9; max-width: 760px; } .cover-side { display: grid; gap: 14px; } .info-box { padding: 20px 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); } .info-box strong { display: block; margin-bottom: 8px; color: var(--accent-2); font-size: 14px; } .info-box span { font-size: 27px; line-height: 1.45; font-weight: 700; } .art-panel { position: relative; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 238, 0.88)); border: 1px solid var(--line); overflow: hidden; min-height: 320px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); } .art-panel svg { display: block; width: 100%; height: 100%; } .art-photo { display: block; width: 100%; height: 100%; object-fit: cover; } .samples-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .sample-note { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.74); border: 1px solid var(--line); color: var(--muted); font-size: 18px; line-height: 1.8; } .fun-chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .fun-chip { padding: 10px 14px; border-radius: 999px; background: rgba(79, 123, 103, 0.1); color: var(--accent-2); font-size: 15px; font-weight: 700; } .two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: stretch; min-height: calc(92vh - 68px); } .card { height: 100%; padding: 26px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); } .card h2, .card h3 { margin-top: 0; } .big-title { margin: 14px 0 18px; font-size: clamp(36px, 4vw, 56px); line-height: 1.14; } .meta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .pill { padding: 10px 14px; border-radius: 999px; background: rgba(217, 103, 61, 0.1); color: var(--accent); font-size: 15px; font-weight: 700; } .lead { margin: 0; color: var(--muted); font-size: 24px; line-height: 1.9; } .list-title { margin: 0 0 12px; color: var(--accent-2); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; } .card ul { margin: 0; padding-left: 24px; } .card li { margin-bottom: 8px; font-size: 23px; line-height: 1.8; color: var(--muted); } .steps { display: grid; gap: 14px; } .step { padding: 18px 18px 18px 72px; border-radius: 20px; background: rgba(255, 255, 255, 0.84); border: 1px solid var(--line); position: relative; } .step-no { position: absolute; left: 18px; top: 18px; width: 40px; height: 40px; border-radius: 14px; background: rgba(217, 103, 61, 0.12); color: var(--accent); display: grid; place-items: center; font-size: 18px; font-weight: 800; } .step strong { display: block; margin-bottom: 8px; font-size: 22px; } .step p { margin: 0; font-size: 20px; line-height: 1.8; color: var(--muted); } .tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: calc(92vh - 68px); } .tip-box { padding: 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); } .tip-box h3 { margin: 0 0 12px; font-size: 30px; } .tip-box p, .tip-box li { color: var(--muted); font-size: 22px; line-height: 1.85; } .tip-box ul { margin: 0; padding-left: 22px; } .game-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .game-card { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); } .game-card strong { display: block; margin-bottom: 8px; font-size: 22px; } .game-card p { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.8; } .placeholder-wrap { min-height: calc(100vh - 120px); display: grid; place-items: center; } .placeholder-card { width: min(1100px, 100%); padding: 40px; border-radius: var(--radius-xl); background: var(--paper); border: 1px solid rgba(255, 255, 255, 0.84); box-shadow: var(--shadow); } .placeholder-card h2 { margin: 18px 0 16px; font-size: clamp(36px, 5vw, 64px); line-height: 1.12; } .placeholder-card p, .placeholder-card li { color: var(--muted); font-size: 22px; line-height: 1.9; } .placeholder-card ul { margin: 0; padding-left: 24px; } @media (max-width: 1100px) { .hero-grid, .cover-grid, .two-col, .tips-grid, .samples-wrap, .game-board { grid-template-columns: 1fr; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section-head { flex-direction: column; align-items: flex-start; } .section-head p { text-align: left; } } @media (max-width: 720px) { .home-shell, .lesson-shell { width: min(100% - 18px, 1380px); } .hero, .slide, .placeholder-card, .ppt-page { padding: 22px; border-radius: 26px; } .ppt-frame { padding: 10px; border-radius: 18px; } .ppt-page-meta { right: 20px; bottom: 18px; padding: 8px 14px; } .ppt-toolbar { flex-direction: column; align-items: flex-start; } .ppt-toolbar p { text-align: left; } .ppt-player { min-height: auto; padding: 56px 12px 72px; } .ppt-arrow { width: 46px; height: 46px; font-size: 24px; } .ppt-arrow.prev { left: 10px; } .ppt-arrow.next { right: 10px; } .ppt-counter { right: 14px; bottom: 14px; } .card-grid { grid-template-columns: 1fr; } .lesson-card { min-height: 230px; } .lead, .card li, .step p, .tip-box p, .tip-box li, .placeholder-card p, .placeholder-card li { font-size: 18px; } } </style> </head> <body> <main id="homeScreen" class="screen active"> <div class="home-shell"> <section class="hero"> <div class="hero-grid"> <div> <span class="eyebrow">闈掑窞鍗楁箹瀛︽牎路鐗硅壊鍏泭澶忎护钀?/span> <h1>鍒涙剰缇庢湳璇剧▼<br>浜掑姩璇句欢棣栭〉</h1> <p>杩欐槸涓€寮犻€傚悎鐩存帴鎶曞睆浣跨敤鐨勮绋嬫€诲叆鍙ｃ€傞椤靛睍绀烘€绘爣棰樹笌鍏妭璇惧崱鐗囷紝鐐瑰嚮浠绘剰鍗＄墖杩涘叆瀵瑰簲璇句欢銆備粖澶╁厛瀹屾垚绗?1 鑺傘€婅惀鍦版枃鍒?路濮撳悕鐗岃璁°€嬶紝鍚庨潰鎴戜滑鍐嶆寜椤哄簭閫愯妭琛ラ綈瀹屾暣 PPT 璇句欢銆?/p> </div> <div class="hero-stats"> <div class="stat"> <strong>璇剧▼鎬昏</strong> <span>8 鑺傜編鏈鍗＄墖鍏ュ彛</span> </div> <div class="stat"> <strong>褰撳墠宸插畬鎴?/strong> <span>绗?1 鑺傚畬鏁存姇灞忚浠?/span> </div> <div class="stat"> <strong>浣跨敤鏂瑰紡</strong> <span>棣栭〉閫夎锛岃繘鍏ュ悗鐩存帴涓婅</span> </div> </div> </div> </section> <div class="section-head"> <h2>璇剧▼鍏ュ彛鍗＄墖</h2> <p>鍗＄墖宸茬粡鎸夌嫭绔嬭浠跺叆鍙ｆ潵璁捐銆傜 1 鑺傜幇鍦ㄥ彲浠ョ洿鎺ヨ繘鍏ヤ笂璇撅紝鍏朵綑 7 鑺傚厛淇濈暀璇句欢鍗犱綅椤碉紝鏂逛究鎴戜滑鍚庣画缁х画鍒朵綔銆?/p> </div> <section class="card-grid"> <a class="lesson-card theme-1" href="#lesson-1" data-lesson="1"> <div> <div class="card-top"> <span class="badge">绗?1 鑺?/span> <span class="icon">馃帹</span> </div> <h3>钀ュ湴鏂囧垱<br>濮撳悕鐗岃璁?/h3> <p class="time">Day1 路涓婂崍绗笁鑺?路 10:30-11:10</p> <p class="desc">鐢ㄥ浘褰€侀鑹插拰瑁呴グ鍋氬嚭涓撳睘濮撳悕鐗岋紝甯姪瀛╁瓙蹇€熻瀺鍏ヨ惀鍦版皼鍥淬€?/p> </div> <div class="card-foot"> <span>杩涘叆瀹屾暣璇句欢</span> <span>鈫?/span> </div> </a> <a class="lesson-card theme-2" href="#lesson-2" data-lesson="2"> <div> <div class="card-top"> <span class="badge">绗?2 鑺?/span> <span class="icon">馃枍锔?/span> </div> <h3>鎴戠殑鑷敾鍍?br>鍒荤敾鑷垜鎬ф牸</h3> <p class="time">Day1 路涓嬪崍绗竷鑺?路 15:40-16:20</p> <p class="desc">鍥寸粫鈥滄垜鏄皝鈥濆睍寮€琛ㄨ揪锛屾妸浜斿畼銆佽〃鎯呭拰鎬ф牸鐗圭偣鍙樻垚鐢婚潰鍐呭銆?/p> </div> <div class="card-foot"> <span>杩涘叆璇句欢</span> <span>鈫?/span> </div> </a> <a class="lesson-card theme-3" href="#lesson-3" data-lesson="3"> <div> <div class="card-top"> <span class="badge">绗?3 鑺?/span> <span class="icon">馃彏锔?/span> </div> <h3>澶х編闈掑窞<br>瀹朵埂涓婚缁樼敾</h3> <p class="time">Day2 路涓婂崍绗簩鑺?路 09:40-10:20</p> <p class="desc">浠庡涔℃櫙鑹层€佸缓绛戝拰鐢熸椿鍗拌薄涓彁鐐间富棰橈紝鐢诲嚭蹇冧腑鐨勯潚宸炪€?/p> </div> <div class="card-foot"> <span>杩涘叆璇句欢</span> <span>鈫?/span> </div> </a> <a class="lesson-card theme-4" href="#lesson-4" data-lesson="4"> <div> <div class="card-top"> <span class="badge">绗?4 鑺?/span> <span class="icon">馃Ц</span> </div> <h3>榛忓湡鎵嬪伐<br>娌绘剤绯诲皬鎽嗕欢</h3> <p class="time">Day2 路涓嬪崍绗叚鑺?路 14:50-15:30</p> <p class="desc">閫氳繃鎹忋€佹悡銆佸帇銆佽创瀹屾垚灏忔憜浠讹紝浣撻獙绔嬩綋鍒涗綔鐨勪箰瓒ｅ拰鎴愬氨鎰熴€?/p> </div> <div class="card-foot"> <span>杩涘叆璇句欢</span> <span>鈫?/span> </div> </a> <a class="lesson-card theme-5" href="#lesson-5" data-lesson="5"> <div> <div class="card-top"> <span class="badge">绗?5 鑺?/span> <span class="icon">馃寛</span> </div> <h3>鑹插僵瑙ｅ帇<br>鑷敱娑傞甫琛ㄨ揪</h3> <p class="time">Day3 路涓婂崍绗洓鑺?路 11:20-12:00</p> <p class="desc">鍏堢敤棰滆壊鍜岀嚎鏉￠噴鏀惧績鎯咃紝鍐嶆妸瑙嗚鎯呯华鍙樻垚瀹屾暣鐨勫垱浣滆〃杈俱€?/p> </div> <div class="card-foot"> <span>杩涘叆璇句欢</span> <span>鈫?/span> </div> </a> <a class="lesson-card theme-6" href="#lesson-6" data-lesson="6"> <div> <div class="card-top"> <span class="badge">绗?6 鑺?/span> <span class="icon">馃</span> </div> <h3>缁撹惀鎵嬩妇鐗?br>灞曠ず閬撳叿鍒朵綔</h3> <p class="time">Day3 路涓婂崍绗洓鑺傚欢灞曚换鍔?/p> <p class="desc">鍥寸粫缁撹惀灞曠ず涓婚鍒朵綔鎵嬩妇鐗岋紝璁╀綔鍝佸吋鍏疯鍫傛垚鏋滀笌鐜板満姘涘洿鎰熴€?/p> </div> <div class="card-foot"> <span>杩涘叆璇句欢</span> <span>鈫?/span> </div> </a> <a class="lesson-card theme-7" href="#lesson-7" data-lesson="7"> <div> <div class="card-top"> <span class="badge">绗?7 鑺?/span> <span class="icon">馃拰</span> </div> <h3>鎰熸仼璐哄崱<br>绁濈琛ㄨ揪璁捐</h3> <p class="time">Day3 路涓婂崍绗洓鑺傚欢灞曚换鍔?/p> <p class="desc">鎶婃劅璋€佺绂忓拰鎴愰暱鎰熷彈鍐欒繘浣滃搧閲岋紝褰㈡垚鏇存湁娓╁害鐨勭編鏈〃杈俱€?/p> </div> <div class="card-foot"> <span>杩涘叆璇句欢</span> <span>鈫?/span> </div> </a> <a class="lesson-card theme-8" href="#lesson-8" data-lesson="8"> <div> <div class="card-top"> <span class="badge">绗?8 鑺?/span> <span class="icon">馃柤锔?/span> </div> <h3>缁撹惀灞曞尯<br>浣滃搧闄堝垪甯冪疆</h3> <p class="time">Day4 路涓婂崍绗簩鑺?路 09:40-10:20</p> <p class="desc">瀵瑰洓澶╀綔鍝佽繘琛岀瓫閫夈€佹暣鐞嗕笌闄堝垪锛屽畬鎴愮粨钀ュ睍绀哄尯鐨勬暣浣撹瑙夊竷缃€?/p> </div> <div class="card-foot"> <span>杩涘叆璇句欢</span> <span>鈫?/span> </div> </a> </section> <section class="panel"> <h3>涓嬩竴姝?/h3> <p>绗?1 鑺傚凡缁忓仛鎴愬畬鏁村彲鎶曞睆鐨勮浠堕〉闈紝鍖呭惈瀵煎叆銆佺洰鏍囥€佹潗鏂欍€佹楠ゃ€佸睍绀哄拰璇惧爞鎻愰啋銆傚悗闈㈡垜浠彲浠ョ户缁寜鍚屾牱鐨勬爣鍑嗭紝鎶婄 2 鑺傚埌绗?8 鑺傞€愪竴鍋氭垚鐪熸鑳戒笂璇剧殑缃戦〉璇句欢銆?/p> </section> </div> </main> <section id="lesson1ScreenLegacy" class="screen" hidden> <div class="lesson-shell"> <button type="button" class="back-btn" data-back="home">鈫?杩斿洖棣栭〉</button> <nav class="lesson-nav"> <strong>绗竴鑺傚鑸?/strong> <a href="#slide-l1-1">灏侀潰</a> <a href="#slide-l1-2">鐩爣</a> <a href="#slide-l1-3">鏉愭枡</a> <a href="#slide-l1-5">姝ラ</a> <a href="#slide-l1-8">鐏垫劅</a> <a href="#slide-l1-10">浜掑姩</a> <a href="#slide-l1-11">鎬荤粨</a> </nav> <div class="slides"> <section class="slide theme-warm" id="slide-l1-1"> <div class="slide-inner cover-grid"> <div> <span class="eyebrow">绗?1 鑺傚垱鎰忕編鏈浠?/span> <h1 class="cover-title">钀ュ湴鏂囧垱<br>涓撳睘濮撳悕鐗岃璁?/h1> <p class="cover-text">浠婂ぉ锛屾垜浠鎶婅嚜宸辩殑鍚嶅瓧鍙樻垚涓€寮犳紓浜張鐗瑰埆鐨勫鍚嶇墝銆傚畠涓嶅彧鏄啓鍚嶅瓧锛岃繕鑳藉憡璇夊ぇ瀹朵綘鍠滄浠€涔堛€佷綘鏄粈涔堟牱鐨勫瀛愶紝璁╁埆浜轰竴鐪煎氨璁颁綇浣犮€?/p> </div> <div class="cover-side"> <div class="info-box"> <strong>涓婅鏃堕棿</strong> <span>Day1 涓婂崍绗笁鑺?br>10:30-11:10</span> </div> <div class="info-box"> <strong>璇炬椂闀垮害</strong> <span>40 鍒嗛挓</span> </div> <div class="info-box"> <strong>鍏抽敭璇?/strong> <span>鍚嶅瓧路鑹插僵路鍥炬 路涓€ц〃杈?/span> </div> <div class="art-panel" aria-label="瀛︾敓鍦ㄦ暀瀹ら噷鍒朵綔濮撳悕鐗岀殑鍐欏疄鐓х墖"> <img class="art-photo" src="assets/lesson1/cover-classroom.jpg?v=20260623f" alt="濮撳悕鐗岃璁¤绋嬪皝闈㈠浘锛屽睍绀哄鍚嶇墝鎴愬搧涓庡僵绗旀憜鏀炬晥鏋? /> </div> </div> </div> <div class="slide-number">01</div> </section> <section class="slide theme-fresh" id="slide-l1-2"> <div class="slide-inner two-col"> <article class="card"> <span class="eyebrow">璇惧爞鐩爣</span> <h2 class="big-title">杩欒妭璇句綘瑕佸畬鎴愪粈涔?/h2> <div class="meta-row"> <span class="pill">璁よ瘑濮撳悕鐗岀殑浣滅敤</span> <span class="pill">瀛︿細鍥炬瑁呴グ</span> <span class="pill">琛ㄨ揪涓汉鐗圭偣</span> </div> <p class="lead">杩欒妭璇撅紝浣犺鎶婅嚜宸辩殑鍚嶅瓧璁捐寰楁洿鏈夎叮銆佹洿濂界湅锛岃涓€寮犲皬灏忕殑濮撳悕鐗屽彉鎴愬睘浜庝綘鑷繁鐨勭涓€浠跺浠よ惀浣滃搧銆?/p> </article> <aside class="card"> <div class="list-title">浣犱細瀛﹀埌</div> <ul> <li>鐭ラ亾濮撳悕鐗屼笉鍙槸鍐欏悕瀛楋紝杩樺彲浠ュ睍绀鸿嚜宸辩殑鐗圭偣銆?/li> <li>瀛︿細鐢ㄩ鑹层€佸浘妗堝拰瑁呴グ琛ㄨ揪鑷繁鐨勫叴瓒ｇ埍濂姐€?/li> <li>鐭ラ亾鍚嶅瓧鏀惧湪鍝噷浼氭洿娓呮銆佹洿閱掔洰銆?/li> <li>瀹屾垚涓€寮犲彲浠ヤ僵鎴淬€佸睍绀恒€佷粙缁嶈嚜宸辩殑濮撳悕鐗屻€?/li> </ul> </aside> </div> <div class="slide-number">02</div> </section> <section class="slide theme-sun" id="slide-l1-3"> <div class="slide-inner two-col"> <article class="card"> <span class="eyebrow">鏉愭枡鍑嗗</span> <h2 class="big-title">鍏堢湅鐪嬮渶瑕佸摢浜涙潗鏂?/h2> <div class="meta-row"> <span class="pill">鍗＄焊</span> <span class="pill">椹厠绗?/span> <span class="pill">鍓垁鑳舵按</span> <span class="pill">瑁呴グ璐寸焊</span> </div> <p class="lead">杩欎簺鏉愭枡浼氬府鍔╀綘鎶婂悕瀛楀彉寰楁洿涓板瘜銆佹洿鏈夎叮銆傚噯澶囧ソ浠ュ悗锛屾垜浠氨鍙互寮€濮嬪姩鎵嬭璁″暒銆?/p> </article> <aside class="card"> <div class="list-title">浣犲彲鑳戒細鐢ㄥ埌</div> <ul> <li>鍗＄焊鎴栧帤涓€浜涚殑褰╃焊</li> <li>閾呯瑪銆佹鐨€佸嬀绾跨瑪銆侀┈鍏嬬瑪</li> <li>瀹夊叏鍓垁銆佸浐浣撹兌鎴栧弻闈㈣兌</li> <li>璐寸焊銆佷寒鐗囥€佸僵鑹茬焊鏉＄瓑灏忚楗?/li> <li>缁冲瓙銆佸埆閽堝す鎴栨寕缁抽厤浠?/li> </ul> <div class="art-panel" aria-label="缇庢湳鏉愭枡鍐欏疄鐓х墖" style="margin-top:16px; min-height:260px;"> <img class="art-photo" src="assets/lesson1/materials-flatlay.jpg?v=20260623f" alt="濮撳悕鐗岃璁¤绋嬫墍闇€鏉愭枡鐨勫啓瀹炲睍绀哄浘锛屽寘鎷崱绾搞€佸僵绗斻€佸壀鍒€鍜岃兌妫? /> </div> </aside> </div> <div class="slide-number">03</div> </section> <section class="slide theme-playful" id="slide-l1-4"> <div class="slide-inner two-col"> <article class="card"> <span class="eyebrow">璇惧爞瀵煎叆</span> <h2 class="big-title">鍏堟兂涓€鎯充綘鐨勫悕瀛楀儚浠€涔?/h2> <p class="lead">濡傛灉浣犵殑鍚嶅瓧鏈夐鑹层€佹湁琛ㄦ儏銆佹湁鍥炬锛屽畠浼氭槸浠€涔堟牱瀛愬憿锛熶粖澶╋紝鎴戜滑灏辨妸杩欎釜鎯虫硶鐢诲嚭鏉ャ€佸仛鍑烘潵銆?/p> </article> <aside class="card"> <div class="list-title">璇蜂綘鎯充竴鎯?/div> <ul> <li>濡傛灉浣犵殑鍚嶅瓧鏈夐鑹诧紝浣犺寰楀畠鏄粈涔堥鑹诧紵</li> <li>濡傛灉浣犵殑鍚嶅瓧鏈夎〃鎯咃紝瀹冧細鏄紑蹇冦€佸畨闈欒繕鏄媷鏁紵</li> <li>浣犳渶鎯冲湪濮撳悕鐗屼笂鐢讳粈涔堝浘妗堬紝浠ｈ〃浣犺嚜宸憋紵</li> <li>鍒汉涓€鐪嬪埌浣犵殑濮撳悕鐗岋紝甯屾湜璁颁綇浣犱粈涔堢壒鐐癸紵</li> </ul> </aside> </div> <div class="slide-number">04</div> </section> <section class="slide theme-warm" id="slide-l1-5"> <div class="slide-inner"> <span class="eyebrow">绀鸿寖姝ラ</span> <h2 class="big-title">璺熺潃姝ラ涓€璧峰仛</h2> <div class="steps"> <div class="step"> <div class="step-no">1</div> <strong>鍏堢‘瀹氬鍚嶇墝澶栧舰</strong> <p>浣犲彲浠ュ仛鎴愰暱鏂瑰舰銆佸渾瑙掑舰銆佷簯鏈靛舰銆佹槦鏄熷舰锛屽厛鎯冲ソ浣犵殑濮撳悕鐗屽闈㈤暱浠€涔堟牱銆?/p> </div> <div class="step"> <div class="step-no">2</div> <strong>鎶婂悕瀛楁斁鍦ㄦ渶閲嶈鐨勪綅缃?/strong> <p>鍏堢敤閾呯瑪杞昏交鍐欎竴鍐欙紝鍐嶅喅瀹氬悕瀛楁斁鍦ㄤ腑闂淬€佷笂闈㈣繕鏄枩鐫€鏀撅紝璁╁悕瀛楃湅璧锋潵娓呮鍙堟紓浜€?/p> </div> <div class="step"> <div class="step-no">3</div> <strong>鍔犱笂鑳戒唬琛ㄨ嚜宸辩殑鍥炬</strong> <p>鍠滄闊充箰鍙互鐢婚煶绗︼紝鍠滄杩愬姩鍙互鐢诲皬鐞冿紝鍠滄鑷劧鍙互鐢昏姳鑽夛紝璁╁浘妗堢湡姝ｄ唬琛ㄤ綘鑷繁銆?/p> </div> <div class="step"> <div class="step-no">4</div> <strong>瀹屾垚涓婅壊鍜屽眬閮ㄨ楗?/strong> <p>棰滆壊涓嶇敤澶锛岄€?2 鍒?3 绉嶄綘鏈€鍠滄鐨勪富鑹诧紝鍐嶅姞涓€鐐硅创绾搞€佽竟妗嗗拰灏忚楗板氨鏇村畬鏁村暒銆?/p> </div> </div> <div class="samples-wrap"> <div class="art-panel" aria-label="瀛︾敓鍒朵綔濮撳悕鐗岀殑鍐欏疄鐓х墖"> <img class="art-photo" src="assets/lesson1/making-name-tags.jpg?v=20260623f" alt="濮撳悕鐗岃璁″埗浣滆繃绋嬬ず鎰忓浘锛屽睍绀哄啓鍚嶅瓧銆侀€夐鑹插拰瑁呴グ姝ラ" /> </div> <div class="art-panel" aria-label="鍒涙剰璇惧爞姘涘洿鍐欏疄鐓х墖"> <img class="art-photo" src="assets/lesson1/creative-classroom.jpg?v=20260623f" alt="濮撳悕鐗岀伒鎰熷绀烘剰鍥撅紝灞曠ず澶氬紶涓嶅悓椋庢牸鐨勫鍚嶇墝浣滃搧" /> </div> </div> </div> <div class="slide-number">05</div> </section> <section class="slide theme-fresh" id="slide-l1-6"> <div class="slide-inner tips-grid"> <article class="tip-box"> <h3>鍋氱殑鏃跺€欒浣?/h3> <ul> <li>涓嶈涓€寮€濮嬪氨鐢绘弧锛屽厛鎶婂悕瀛楃殑浣嶇疆鐣欏嚭鏉ャ€?/li> <li>鍚嶅瓧鍙互鍐欏緱澶т竴浜涳紝璁╁埆浜烘洿瀹规槗鐪嬫竻銆?/li> <li>浣犵殑浣滃搧涓嶉渶瑕佸拰鍒汉涓€鏍凤紝瓒婃湁鑷繁鐨勬牱瀛愯秺濂姐€?/li> <li>棰滆壊閫?2 鍒?3 绉嶄富鑹诧紝鐢婚潰浼氭洿鏁存磥銆佹洿鑸掓湇銆?/li> </ul> </article> <article class="tip-box"> <h3>閬囧埌鍥伴毦鎬庝箞鍔?/h3> <ul> <li>濡傛灉涓嶇煡閬撶敾浠€涔堬紝灏卞厛鎶婂悕瀛楀啓鍑烘潵銆?/li> <li>濡傛灉涓嶄細鐢诲浘妗堬紝鍙互鍏堢敾鏄熸槦銆佽姳鏈点€佺埍蹇冦€侀煶绗﹁繖浜涚畝鍗曞浘妗堛€?/li> <li>濡傛灉浣犲仛寰楁瘮杈冨揩锛屽彲浠ョ户缁姞杈规鍜屽皬瑁呴グ銆?/li> <li>鐢ㄥ壀鍒€鍜岃兌姘寸殑鏃跺€欙紝瑕佽寰楁敞鎰忓畨鍏ㄣ€?/li> </ul> </article> </div> <div class="slide-number">06</div> </section> <section class="slide theme-playful" id="slide-l1-7"> <div class="slide-inner two-col"> <article class="card"> <span class="eyebrow">浣滃搧灞曠ず</span> <h2 class="big-title">瀹屾垚鍚庡媷鏁粙缁嶈嚜宸?/h2> <p class="lead">鍋氬ソ浠ュ悗锛岃浣犱妇璧疯嚜宸辩殑濮撳悕鐗岋紝璇翠竴璇达細鈥滃ぇ瀹跺ソ锛屾垜鍙玙__锛屾垜鐢ㄤ簡___棰滆壊锛屽洜涓哄畠浠ｈ〃___銆傗€?/p> </article> <aside class="card"> <div class="list-title">鍙互娆ｈ祻浠€涔?/div> <ul> <li>璋佺殑鍚嶅瓧鏈€娓呮銆佹渶閱掔洰</li> <li>璋佺殑鍥炬鏈€鍍忎粬鑷繁</li> <li>璋佺殑棰滆壊鎼厤鏈€鑸掓湇</li> <li>璋佺殑浣滃搧鏈€鏈夊垱鎰?/li> </ul> </aside> </div> <div class="slide-number">07</div> </section> <section class="slide theme-sun" id="slide-l1-8"> <div class="slide-inner"> <span class="eyebrow">鍙傝€冨浘妗?/span> <h2 class="big-title">鐪嬬湅杩欎簺濮撳悕鐗岀伒鎰?/h2> <div class="samples-wrap"> <div class="art-panel" aria-label="濮撳悕鐗屽弬鑰冩牱寮忎竴"> <svg viewBox="0 0 520 320" xmlns="http://www.w3.org/2000/svg" role="img"> <rect width="520" height="320" fill="#fff8f0"/> <rect x="42" y="56" width="132" height="82" rx="24" fill="#ffd36b" transform="rotate(-8 42 56)"/> <rect x="192" y="48" width="142" height="88" rx="26" fill="#9fd7ff" transform="rotate(5 192 48)"/> <rect x="350" y="62" width="126" height="82" rx="24" fill="#ffc1d0" transform="rotate(-4 350 62)"/> <rect x="62" y="178" width="136" height="88" rx="24" fill="#b7e4c7" transform="rotate(6 62 178)"/> <rect x="218" y="182" width="132" height="82" rx="24" fill="#efe2ff" transform="rotate(-5 218 182)"/> <rect x="366" y="172" width="108" height="90" rx="24" fill="#ffcf86" transform="rotate(4 366 172)"/> <path d="M84 88h58M84 103h34" stroke="#d9673d" stroke-width="5" stroke-linecap="round"/> <path d="M220 84h64M220 100h42" stroke="#4f7b67" stroke-width="5" stroke-linecap="round"/> <path d="M374 94h54M374 110h32" stroke="#9c4dcc" stroke-width="5" stroke-linecap="round"/> <path d="M100 210h66M100 226h40" stroke="#2b5c46" stroke-width="5" stroke-linecap="round"/> <path d="M242 212h58M242 228h35" stroke="#d9673d" stroke-width="5" stroke-linecap="round"/> <path d="M390 208h44M390 224h30" stroke="#5a4c33" stroke-width="5" stroke-linecap="round"/> <circle cx="156" cy="76" r="12" fill="#fff"/> <path d="M156 66l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#fff2a8"/> <circle cx="312" cy="60" r="8" fill="#fff"/> <path d="M312 52c3 0 6 3 6 8s-3 8-6 8-6-3-6-8 3-8 6-8z" fill="#ff8aa1"/> <circle cx="438" cy="156" r="14" fill="#fff"/> <circle cx="438" cy="156" r="8" fill="#8ed081"/> <path d="M74 162c8-4 14-10 16-18 8 12 14 16 24 18-10 3-16 8-20 20-4-10-10-16-20-20z" fill="#ffd166"/> </svg> </div> <div class="art-panel" aria-label="濮撳悕鐗屽弬鑰冩牱寮忎簩"> <svg viewBox="0 0 520 320" xmlns="http://www.w3.org/2000/svg" role="img"> <rect width="520" height="320" fill="#f9f3ff"/> <path d="M78 110c0-18 14-32 32-32h74c18 0 32 14 32 32v10c0 18-14 32-32 32h-74c-18 0-32-14-32-32z" fill="#ffe18d"/> <path d="M250 76h82c24 0 44 20 44 44s-20 44-44 44h-82c-24 0-44-20-44-44s20-44 44-44z" fill="#a9e3c2"/> <path d="M118 196h66l22 22-22 22h-66l-22-22z" fill="#ffb4c8"/> <path d="M286 186c28 0 50 22 50 50s-22 50-50 50-50-22-50-50 22-50 50-50z" fill="#9fd7ff"/> <path d="M388 176h70c16 0 28 12 28 28v40c0 16-12 28-28 28h-70c-16 0-28-12-28-28v-40c0-16 12-28 28-28z" fill="#ffd087"/> <path d="M106 118h56M106 134h28" stroke="#5a4c33" stroke-width="5" stroke-linecap="round"/> <path d="M266 118h64M266 136h42" stroke="#2b5c46" stroke-width="5" stroke-linecap="round"/> <path d="M116 218h58M116 236h38" stroke="#d9673d" stroke-width="5" stroke-linecap="round"/> <path d="M260 230h54M260 248h30" stroke="#7c5ce0" stroke-width="5" stroke-linecap="round"/> <path d="M392 218h54M392 236h34" stroke="#5a4c33" stroke-width="5" stroke-linecap="round"/> <path d="M179 89c10-5 18-13 20-24 10 16 18 22 30 24-12 4-20 11-25 27-5-14-12-22-25-27z" fill="#ffd166"/> <circle cx="348" cy="74" r="8" fill="#ff8aa1"/> <circle cx="360" cy="64" r="8" fill="#ffd166"/> <circle cx="372" cy="74" r="8" fill="#8ed081"/> <circle cx="384" cy="64" r="8" fill="#8bc4ff"/> <path d="M296 242c14-12 28-12 42 0" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round"/> </svg> </div> </div> <div class="sample-note">杩欎簺鍥炬涓嶆槸璁╀綘鐓х潃鎶勶紝鑰屾槸甯綘鎵惧埌鐏垫劅銆備綘鍙互鎯充竴鎯筹細鎴戝枩娆粈涔堬紵鎴戞兂璁╁埆浜烘€庝箞璁よ瘑鎴戯紵鐒跺悗鎶婂畠鐢昏繘濮撳悕鐗岄噷銆?/div> <div class="fun-chip-row"> <span class="fun-chip">杩愬姩涓婚</span> <span class="fun-chip">闊充箰涓婚</span> <span class="fun-chip">鑷劧涓婚</span> <span class="fun-chip">鍗￠€氫富棰?/span> <span class="fun-chip">鏄熺┖涓婚</span> </div> </div> <div class="slide-number">08</div> </section> <section class="slide theme-warm" id="slide-l1-9"> <div class="slide-inner two-col"> <article class="card"> <span class="eyebrow">鑰佸笀绀鸿寖浣滃搧</span> <h2 class="big-title">鐪嬬湅涓嶅悓椋庢牸鐨勭ず鑼冧綔鍝?/h2> <p class="lead">鍚屾牱鏄鍚嶇墝锛屾湁鐨勫彲浠ュ彲鐖变竴鐐癸紝鏈夌殑鍙互绠€鍗曚竴鐐癸紝鏈夌殑鍙互鎶婅嚜宸辩殑鍏磋叮鐢昏繘鍘汇€傛瘡涓汉閮藉彲浠ュ仛鍑轰笉涓€鏍风殑浣滃搧銆?/p> <div class="fun-chip-row"> <span class="fun-chip">鍚嶅瓧瑕侀啋鐩?/span> <span class="fun-chip">鍥炬瑕佽创杩戣嚜宸?/span> <span class="fun-chip">棰滆壊涓嶅繀澶</span> </div> </article> <aside class="card"> <div class="art-panel" aria-label="鍎跨鍒涙剰璇惧爞鍐欏疄鐓х墖"> <img class="art-photo" src="assets/lesson1/creative-classroom.jpg?v=20260623f" alt="濮撳悕鐗岀伒鎰熷绀烘剰鍥撅紝灞曠ず澶氬紶涓嶅悓椋庢牸鐨勫鍚嶇墝浣滃搧" /> </div> </aside> </div> <div class="slide-number">09</div> </section> <section class="slide theme-playful" id="slide-l1-10"> <div class="slide-inner"> <span class="eyebrow">浜掑姩娓告垙</span> <h2 class="big-title">鎴戜滑鏉ョ帺涓€涓兂娉曞皬娓告垙</h2> <p class="lead">濡傛灉浣犺繕娌℃兂濂芥€庝箞鐢伙紝涓嶇敤鐫€鎬ャ€傛垜浠彲浠ュ厛鐜╀竴涓皬娓告垙锛岃鑴戣閲岀殑鍒涙剰蹇偣璺冲嚭鏉ャ€?/p> <div class="game-board"> <div class="game-card"> <strong>娓告垙 1锛氬悕瀛楅鑹茬寽鐚滅湅</strong> <p>璇峰ぇ瀹剁寽涓€鐚滐細濡傛灉涓€涓悕瀛楁湁棰滆壊锛屽畠浼氭槸浠€涔堥鑹诧紵鐒跺悗璇磋涓轰粈涔堛€?/p> </div> <div class="game-card"> <strong>娓告垙 2锛氬浘妗堝瀵圭</strong> <p>鍚埌鈥滅埍杩愬姩鈥濃€滅埍闊充箰鈥濃€滅埍灏忓姩鐗┾€濊繖浜涜瘝鏃讹紝浣犱細鎯冲埌浠€涔堝浘妗堬紵蹇揩璇村嚭鏉ャ€?/p> </div> <div class="game-card"> <strong>娓告垙 3锛氫笁绉掗挓閫変富棰?/strong> <p>鍙埍椋庛€佸媷鏁㈤銆佹竻鏂伴锛屼綘鏈€鎯抽€夊摢涓€绉嶏紵閫夊ソ浠ュ悗锛屼綔鍝佹柟鍚戝氨鏇存竻妤氬暒銆?/p> </div> <div class="game-card"> <strong>娓告垙 4锛氭垜鏉ヤ粙缁嶆垜鑷繁</strong> <p>鍏堢敤涓€鍙ヨ瘽浠嬬粛鑷繁锛屽啀鎶婅繖鍙ヨ瘽鍙樻垚鍥炬銆傛瘮濡傗€滄垜鍠滄濂旇窇鈥濓紝灏卞彲浠ユ兂鍒板皬鐞冨拰闂數銆?/p> </div> </div> </div> <div class="slide-number">10</div> </section> <section class="slide theme-fresh" id="slide-l1-11"> <div class="slide-inner two-col"> <article class="card"> <span class="eyebrow">璇惧爞鎬荤粨</span> <h2 class="big-title">浠婂ぉ浣犲凡缁忓畬鎴愪簡涓€浠跺皬浣滃搧</h2> <p class="lead">浠婂ぉ锛屾垜浠妸鑷繁鐨勫悕瀛楀彉鎴愪簡涓€寮犵壒鍒殑濮撳悕鐗屻€傚師鏉ュ悕瀛椾篃鍙互鐢ㄥ浘鐢汇€侀鑹插拰瑁呴グ璁叉晠浜嬶紝杩欏氨鏄垱鎰忕編鏈湁瓒ｇ殑鍦版柟銆?/p> </article> <aside class="card"> <div class="list-title">鏈€鍚庡埆蹇樹簡</div> <ul> <li>鍦ㄥ鍚嶇墝鑳岄潰鍐欎笂鐝骇鍜屽鍚?/li> <li>鎶婃涓婄殑鏉愭枡杞昏交鏁寸悊濂?/li> <li>鎶婂畬鎴愮殑浣滃搧璐村埌灞曠ず鍖烘垨鎸傝捣鏉?/li> <li>濂藉ソ鐪嬬湅澶у涓嶅悓鐨勫垱鎰忎綔鍝?/li> </ul> <div class="art-panel" aria-label="瀛︾敓浣滃搧灞曠ず澧欏啓瀹炵収鐗? style="margin-top:16px; min-height:250px;"> <img class="art-photo" src="assets/lesson1/art-display-wall.jpg?v=20260623f" alt="绗竴鑺傚鍚嶇墝浣滃搧灞曠ず鍥撅紝绐佸嚭鍚嶅瓧銆佽壊褰┿€佸浘妗堝拰涓€ц〃杈? /> </div> </aside> </div> <div class="slide-number">11</div> </section> </div> </div> </section> <section id="lesson1Screen" class="screen"> <div class="lesson-shell"> <button type="button" class="back-btn" data-back="home">鈫?杩斿洖棣栭〉</button> <div class="ppt-toolbar"> <strong>钀ュ湴鏂囧垱涓撳睘濮撳悕鐗岃璁?/strong> <p>褰撳墠椤甸潰涓哄崟椤垫斁鏄犳ā寮忋€傜偣鍑诲乏鍙崇澶村嵆鍙垏鎹紝浣撻獙鏇存帴杩戣鍫傛姇灞忔椂鐨?PPT 婕旂ず銆?/p> </div> <div class="ppt-player"> <button type="button" class="ppt-arrow prev" id="lesson1Prev" aria-label="Previous slide">‹</button> <div class="ppt-stage"> <div class="ppt-frame"> <img id="lesson1Image" src="assets/ppt-name-tag/slide_01.png?v=20260624b" alt="钀ュ湴鏂囧垱涓撳睘濮撳悕鐗岃璁＄ 1 椤?PPT" /> </div> </div> <button type="button" class="ppt-arrow next" id="lesson1Next" aria-label="Next slide">›</button> <div class="ppt-counter"> <span id="lesson1Counter">01 / 17</span> <span id="lesson1Label">灏侀潰</span> </div> </div> </div> </section> <section id="placeholderScreen" class="screen"> <div class="lesson-shell"> <button type="button" class="back-btn" data-back="home">鈫?杩斿洖棣栭〉</button> <div class="placeholder-wrap"> <div class="placeholder-card"> <span class="eyebrow" id="placeholderEyebrow">璇剧▼璇句欢</span> <h2 id="placeholderTitle">璇句欢姝ｅ湪鍒朵綔涓?/h2> <p id="placeholderTime">鏃堕棿淇℃伅</p> <p id="placeholderDesc">杩欒妭璇剧殑瀹屾暣鎶曞睆璇句欢杩樻病鏈夊睍寮€鍒朵綔銆備笅涓€姝ユ垜浼氭寜绗?1 鑺傚悓鏍风殑鏍囧噯锛屾妸杩欒妭璇句篃鍋氭垚鍙洿鎺ヤ笂璇剧殑缃戦〉璇句欢銆?/p> <ul> <li>璇剧▼鐩爣</li> <li>鏉愭枡鍑嗗</li> <li>璇惧爞瀵煎叆</li> <li>绀鸿寖姝ラ</li> <li>浜掑姩鎻愰棶</li> <li>浣滃搧灞曠ず涓庢€荤粨</li> </ul> </div> </div> </div> </section> <script> const placeholderLessons = { 2: { eyebrow: "绗?2 鑺傝浠?, title: "鎴戠殑鑷敾鍍?路鍒荤敾鑷垜鎬ф牸", time: "Day1 涓嬪崍绗竷鑺?15:40-16:20", desc: "杩欒妭璇惧悗闈細閲嶇偣鍋氭垚閫傚悎璁茶В浜斿畼瑙傚療銆佹€ф牸琛ㄨ揪鍜屼汉鐗╃粯鐢荤殑瀹屾暣缃戦〉璇句欢銆? }, 3: { eyebrow: "绗?3 鑺傝浠?, title: "澶х編闈掑窞路瀹朵埂涓婚缁樼敾", time: "Day2 涓婂崍绗簩鑺?09:40-10:20", desc: "杩欒妭璇惧悗闈㈤€傚悎鍔犲叆闈掑窞鍏冪礌銆佹瀯鍥惧紩瀵煎拰涓婚鍒涗綔灞曠ず銆? }, 4: { eyebrow: "绗?4 鑺傝浠?, title: "榛忓湡鎵嬪伐路娌绘剤绯诲皬鎽嗕欢", time: "Day2 涓嬪崍绗叚鑺?14:50-15:30", desc: "杩欒妭璇惧悗闈㈤€傚悎鍔犲叆榛忓湡濉戝舰姝ラ銆侀€犲瀷鍙傝€冨拰棰滆壊鎼厤銆? }, 5: { eyebrow: "绗?5 鑺傝浠?, title: "鑹插僵瑙ｅ帇路鑷敱娑傞甫琛ㄨ揪", time: "Day3 涓婂崍绗洓鑺?11:20-12:00", desc: "杩欒妭璇惧悗闈㈤€傚悎鍋氭垚鏇存湁鑹插僵寮犲姏鐨勬儏缁〃杈惧瀷璇句欢銆? }, 6: { eyebrow: "绗?6 鑺傝浠?, title: "缁撹惀鎵嬩妇鐗?路灞曠ず閬撳叿鍒朵綔", time: "Day3 涓婂崍绗洓鑺傚欢灞曚换鍔?, desc: "杩欒妭璇惧悗闈㈤€傚悎鍔犲叆鐗堝紡璁捐銆佹枃瀛楀彛鍙峰拰鎷嶇収灞曠ず鏋勫浘銆? }, 7: { eyebrow: "绗?7 鑺傝浠?, title: "鎰熸仼璐哄崱路绁濈琛ㄨ揪璁捐", time: "Day3 涓婂崍绗洓鑺傚欢灞曚换鍔?, desc: "杩欒妭璇惧悗闈㈤€傚悎鍔犲叆鏂囧瓧鎺掔増銆佽竟妗嗚楗板拰鎯呮劅琛ㄨ揪寮曞銆? }, 8: { eyebrow: "绗?8 鑺傝浠?, title: "缁撹惀灞曞尯路浣滃搧闄堝垪甯冪疆", time: "Day4 涓婂崍绗簩鑺?09:40-10:20", desc: "杩欒妭璇惧悗闈㈤€傚悎鍔犲叆浣滃搧鍒嗙被銆佸睍绛捐璁″拰灞曞尯鍔ㄧ嚎甯冪疆銆? } }; const homeScreen = document.getElementById("homeScreen"); const lesson1Screen = document.getElementById("lesson1Screen"); const placeholderScreen = document.getElementById("placeholderScreen"); const placeholderEyebrow = document.getElementById("placeholderEyebrow"); const placeholderTitle = document.getElementById("placeholderTitle"); const placeholderTime = document.getElementById("placeholderTime"); const placeholderDesc = document.getElementById("placeholderDesc"); const lesson1Slides = []; const lesson1Image = document.getElementById("lesson1Image"); const lesson1Counter = document.getElementById("lesson1Counter"); const lesson1Label = document.getElementById("lesson1Label"); const lesson1Prev = document.getElementById("lesson1Prev"); const lesson1Next = document.getElementById("lesson1Next"); // Legacy lesson 1 slide decoration logic removed. const lesson1Deck = [ { src: "assets/ppt-name-tag/slide_01.png?v=20260624b", label: "P01" }, { src: "assets/ppt-name-tag/slide_02.png?v=20260624b", label: "P02" }, { src: "assets/ppt-name-tag/slide_03.png?v=20260624b", label: "P03" }, { src: "assets/ppt-name-tag/slide_04.png?v=20260624b", label: "P04" }, { src: "assets/ppt-name-tag/slide_05.png?v=20260624b", label: "P05" }, { src: "assets/ppt-name-tag/slide_06.png?v=20260624b", label: "P06" }, { src: "assets/ppt-name-tag/slide_07.png?v=20260624b", label: "P07" }, { src: "assets/ppt-name-tag/slide_08.png?v=20260624b", label: "P08" }, { src: "assets/ppt-name-tag/slide_09.png?v=20260624b", label: "P09" }, { src: "assets/ppt-name-tag/slide_10.png?v=20260624b", label: "P10" }, { src: "assets/ppt-name-tag/slide_11.png?v=20260624b", label: "P11" }, { src: "assets/ppt-name-tag/slide_12.png?v=20260624b", label: "P12" }, { src: "assets/ppt-name-tag/slide_13.png?v=20260624b", label: "P13" }, { src: "assets/ppt-name-tag/slide_14.png?v=20260624b", label: "P14" }, { src: "assets/ppt-name-tag/slide_15.png?v=20260624b", label: "P15" }, { src: "assets/ppt-name-tag/slide_16.png?v=20260624b", label: "P16" }, { src: "assets/ppt-name-tag/slide_17.png?v=20260624b", label: "P17" } ]; let lesson1Index = 0; function renderLesson1Slide(index) { const slide = lesson1Deck[index]; if (!slide) return; const current = String(index + 1).padStart(2, "0"); const total = String(lesson1Deck.length).padStart(2, "0"); lesson1Image.src = slide.src; lesson1Image.alt = `钀ュ湴鏂囧垱涓撳睘濮撳悕鐗岃璁＄ ${index + 1} 椤?PPT`; lesson1Counter.textContent = `${current} / ${total}`; lesson1Label.textContent = slide.label; lesson1Prev.disabled = index === 0; lesson1Next.disabled = index === lesson1Deck.length - 1; } function goLesson1Slide(offset) { const nextIndex = lesson1Index + offset; if (nextIndex < 0 || nextIndex >= lesson1Deck.length) return; lesson1Index = nextIndex; renderLesson1Slide(lesson1Index); } lesson1Prev.addEventListener("click", () => goLesson1Slide(-1)); lesson1Next.addEventListener("click", () => goLesson1Slide(1)); document.addEventListener("keydown", (event) => { if (!lesson1Screen.classList.contains("active")) return; if (event.key === "ArrowLeft") goLesson1Slide(-1); if (event.key === "ArrowRight") goLesson1Slide(1); }); renderLesson1Slide(lesson1Index); function showScreen(screen) { homeScreen.classList.remove("active"); lesson1Screen.classList.remove("active"); placeholderScreen.classList.remove("active"); screen.classList.add("active"); window.scrollTo({ top: 0, behavior: "smooth" }); } function showHome() { showScreen(homeScreen); history.replaceState(null, "", "#home"); } function showLesson(id) { if (id === "1") { lesson1Index = 0; renderLesson1Slide(lesson1Index); showScreen(lesson1Screen); history.replaceState(null, "", "#lesson-1"); return; } const lesson = placeholderLessons[id]; if (!lesson) return; placeholderEyebrow.textContent = lesson.eyebrow; placeholderTitle.textContent = lesson.title; placeholderTime.textContent = lesson.time; placeholderDesc.textContent = lesson.desc; showScreen(placeholderScreen); history.replaceState(null, "", `#lesson-${id}`); } document.querySelectorAll("[data-lesson]").forEach((card) => { card.addEventListener("click", (event) => { event.preventDefault(); showLesson(card.dataset.lesson); }); }); document.querySelectorAll("[data-back='home']").forEach((button) => { button.addEventListener("click", showHome); }); const hash = window.location.hash; if (hash.startsWith("#lesson-")) { const id = hash.replace("#lesson-", ""); if (id === "1" || placeholderLessons[id]) { showLesson(id); } } </script> </body> </html>