| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>团日初绽映初心，菁英思政铸辉煌</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: "Microsoft YaHei", sans-serif; |
| overflow: hidden; |
| background: #fff; |
| } |
| |
| .slide { |
| position: absolute; |
| width: 100vw; |
| height: 100vh; |
| display: none; |
| opacity: 0; |
| transition: opacity 0.8s ease-in-out; |
| } |
| |
| .slide.active { |
| display: flex; |
| opacity: 1; |
| flex-direction: column; |
| } |
| |
| |
| #cover { |
| background: linear-gradient(135deg, #e74c3c, #c0392b); |
| color: white; |
| justify-content: center; |
| align-items: center; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| #cover::before { |
| content: ''; |
| position: absolute; |
| width: 200%; |
| height: 200%; |
| background: rgba(255,255,255,0.1); |
| transform: translateX(-50%) translateY(-50%) rotate(-45deg); |
| animation: shine 4s infinite linear; |
| } |
| |
| @keyframes shine { |
| 0% { transform: translateX(-50%) translateY(-50%) rotate(-45deg); } |
| 100% { transform: translateX(50%) translateY(50%) rotate(-45deg); } |
| } |
| |
| #cover h1 { |
| font-size: 5.5vw; |
| font-weight: bold; |
| margin-bottom: 2rem; |
| text-shadow: 3px 3px 6px rgba(0,0,0,0.3); |
| animation: fadeInDown 1.5s ease; |
| position: relative; |
| z-index: 1; |
| letter-spacing: 0.1em; |
| background: linear-gradient(to right, #ffffff, #f8f9fa); |
| -webkit-background-clip: text; |
| color: transparent; |
| text-stroke: 2px rgba(255,255,255,0.5); |
| -webkit-text-stroke: 2px rgba(255,255,255,0.5); |
| } |
| |
| #cover h2 { |
| font-size: 3.5vw; |
| margin-bottom: 4rem; |
| animation: fadeInUp 1.5s ease 0.5s both; |
| position: relative; |
| z-index: 1; |
| letter-spacing: 0.05em; |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
| } |
| |
| .presenter { |
| animation: fadeInUp 1.5s ease 1s both; |
| position: relative; |
| z-index: 1; |
| background: rgba(255,255,255,0.1); |
| padding: 2rem 4rem; |
| border-radius: 15px; |
| backdrop-filter: blur(5px); |
| } |
| |
| |
| #contents { |
| background: linear-gradient(135deg, #f8f9fa, #e9ecef); |
| padding: 4rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| #contents::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: radial-gradient(circle at 50% 50%, rgba(231, 76, 60, 0.1) 0%, transparent 70%); |
| animation: pulse 4s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); opacity: 0.5; } |
| 50% { transform: scale(1.2); opacity: 0.3; } |
| 100% { transform: scale(1); opacity: 0.5; } |
| } |
| |
| .content-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2.5rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| position: relative; |
| z-index: 1; |
| padding: 2rem; |
| } |
| |
| .content-card { |
| background: rgba(255,255,255,0.9); |
| padding: 2rem; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| display: flex; |
| align-items: center; |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .content-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), transparent); |
| opacity: 0; |
| transition: opacity 0.4s ease; |
| } |
| |
| .content-card:hover { |
| transform: translateY(-10px) scale(1.02); |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); |
| } |
| |
| .content-card:hover::before { |
| opacity: 1; |
| } |
| |
| .content-card h3 { |
| font-size: 1.5rem; |
| color: #e74c3c; |
| margin-bottom: 0.5rem; |
| } |
| |
| .content-card p { |
| color: #666; |
| font-size: 1.1rem; |
| } |
| |
| .icon { |
| width: 48px; |
| height: 48px; |
| margin-right: 1.5rem; |
| fill: #e74c3c; |
| } |
| |
| .page-title { |
| font-size: 3rem; |
| color: #e74c3c; |
| margin-bottom: 3rem; |
| text-align: center; |
| font-weight: bold; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .page-title::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 100px; |
| height: 3px; |
| background: linear-gradient(to right, #e74c3c, transparent); |
| } |
| |
| @keyframes fadeInDown { |
| from { opacity: 0; transform: translateY(-50px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| @keyframes fadeInUp { |
| from { opacity: 0; transform: translateY(50px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .opening-container { |
| background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); |
| padding: 4rem; |
| height: 100%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| position: relative; |
| } |
| |
| .opening-container::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: radial-gradient(circle at 30% 30%, rgba(231, 76, 60, 0.1) 0%, transparent 70%); |
| } |
| |
| .opening-content { |
| max-width: 1200px; |
| width: 100%; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .quote-card { |
| background: white; |
| padding: 3rem; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| margin: 2rem 0; |
| position: relative; |
| animation: slideIn 1s ease; |
| } |
| |
| .quote-icon { |
| width: 48px; |
| height: 48px; |
| fill: #e74c3c; |
| opacity: 0.2; |
| position: absolute; |
| top: 2rem; |
| left: 2rem; |
| } |
| |
| .opening-text { |
| font-size: 1.2rem; |
| line-height: 2; |
| color: #333; |
| padding-left: 4rem; |
| } |
| |
| .opening-text p { |
| margin-bottom: 1.5rem; |
| text-indent: 2em; |
| } |
| |
| .journey-preview { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 3rem; |
| gap: 2rem; |
| } |
| |
| .journey-item { |
| flex: 1; |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| background: rgba(255,255,255,0.9); |
| padding: 1.5rem; |
| border-radius: 15px; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| transition: transform 0.3s ease; |
| } |
| |
| .journey-item:hover { |
| transform: translateY(-5px); |
| } |
| |
| .journey-icon { |
| width: 40px; |
| height: 40px; |
| background: #e74c3c; |
| color: white; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 1.2rem; |
| font-weight: bold; |
| } |
| |
| |
| .experience-container { |
| background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); |
| padding: 4rem; |
| height: 100%; |
| overflow-y: auto; |
| } |
| |
| .experience-content { |
| max-width: 1000px; |
| margin: 0 auto; |
| } |
| |
| .experience-timeline { |
| position: relative; |
| padding: 2rem 0; |
| } |
| |
| .experience-timeline::before { |
| content: ''; |
| position: absolute; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 2px; |
| height: 100%; |
| background: linear-gradient(to bottom, #e74c3c 0%, rgba(231, 76, 60, 0.3) 100%); |
| } |
| |
| .timeline-item { |
| display: flex; |
| justify-content: flex-end; |
| padding-left: 50%; |
| position: relative; |
| margin: 2rem 0; |
| } |
| |
| .timeline-item:nth-child(odd) { |
| justify-content: flex-start; |
| padding-right: 50%; |
| padding-left: 0; |
| } |
| |
| .timeline-icon { |
| position: absolute; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 40px; |
| height: 40px; |
| background: white; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2); |
| } |
| |
| .timeline-icon svg { |
| width: 24px; |
| height: 24px; |
| fill: #e74c3c; |
| } |
| |
| .timeline-content { |
| background: white; |
| padding: 1.5rem; |
| border-radius: 15px; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| width: 80%; |
| margin: 0 2rem; |
| animation: slideIn 1s ease; |
| } |
| |
| .timeline-content h3 { |
| color: #e74c3c; |
| margin-bottom: 0.5rem; |
| font-size: 1.2rem; |
| } |
| |
| .timeline-item.highlight .timeline-content { |
| background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); |
| border: 2px solid rgba(231, 76, 60, 0.2); |
| } |
| |
| @keyframes slideIn { |
| from { opacity: 0; transform: translateX(-30px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| |
| .elite-container { |
| background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); |
| padding: 4rem; |
| height: 100%; |
| overflow-y: auto; |
| position: relative; |
| } |
| |
| .elite-container::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: radial-gradient(circle at 70% 30%, rgba(231, 76, 60, 0.1) 0%, transparent 70%); |
| } |
| |
| .elite-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .elite-card { |
| background: white; |
| padding: 2rem; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| margin-bottom: 2rem; |
| position: relative; |
| transition: all 0.3s ease; |
| } |
| |
| .elite-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 40px rgba(0,0,0,0.15); |
| } |
| |
| .main-card { |
| background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); |
| border: 2px solid rgba(231, 76, 60, 0.2); |
| padding: 3rem; |
| margin-bottom: 3rem; |
| } |
| |
| .elite-icon { |
| width: 48px; |
| height: 48px; |
| fill: #e74c3c; |
| margin-bottom: 1rem; |
| } |
| |
| .elite-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2rem; |
| } |
| |
| .elite-step { |
| width: 40px; |
| height: 40px; |
| background: #e74c3c; |
| color: white; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 1.2rem; |
| font-weight: bold; |
| margin-bottom: 1rem; |
| } |
| |
| |
| .competition-container { |
| background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); |
| padding: 4rem; |
| height: 100%; |
| position: relative; |
| } |
| |
| .competition-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .stage-info { |
| background: white; |
| padding: 3rem; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| margin-bottom: 3rem; |
| text-align: center; |
| } |
| |
| .stage-numbers { |
| display: flex; |
| justify-content: center; |
| gap: 4rem; |
| margin-bottom: 2rem; |
| } |
| |
| .number-card { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .number { |
| font-size: 3rem; |
| font-weight: bold; |
| color: #e74c3c; |
| margin-bottom: 0.5rem; |
| } |
| |
| .label { |
| color: #666; |
| font-size: 1.2rem; |
| } |
| |
| .competition-title { |
| font-size: 1.5rem; |
| color: #333; |
| font-weight: bold; |
| } |
| |
| .journey-stages { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 4rem; |
| position: relative; |
| } |
| |
| .journey-stages::before { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: linear-gradient(to right, #e74c3c, #e74c3c); |
| z-index: 0; |
| } |
| |
| .stage-card { |
| background: white; |
| padding: 1.5rem; |
| border-radius: 15px; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| position: relative; |
| z-index: 1; |
| flex: 1; |
| margin: 0 1rem; |
| text-align: center; |
| transition: all 0.3s ease; |
| } |
| |
| .stage-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .stage-card.highlight { |
| background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); |
| border: 2px solid rgba(231, 76, 60, 0.2); |
| } |
| |
| |
| .skills-container { |
| background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); |
| padding: 4rem; |
| height: 100%; |
| position: relative; |
| } |
| |
| .skills-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2rem; |
| max-width: 1200px; |
| margin: 0 auto 3rem auto; |
| } |
| |
| .skill-card { |
| background: white; |
| padding: 2rem; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| transition: all 0.3s ease; |
| } |
| |
| .skill-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 40px rgba(0,0,0,0.15); |
| } |
| |
| .skill-icon { |
| width: 48px; |
| height: 48px; |
| fill: #e74c3c; |
| margin-bottom: 1rem; |
| } |
| |
| .team-quote { |
| text-align: center; |
| font-size: 1.5rem; |
| color: #e74c3c; |
| font-style: italic; |
| max-width: 800px; |
| margin: 0 auto; |
| padding: 2rem; |
| background: white; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| } |
| |
| |
| .reflection-container { |
| background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); |
| padding: 4rem; |
| height: 100%; |
| position: relative; |
| } |
| |
| .reflection-content { |
| max-width: 1000px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2rem; |
| } |
| |
| .insight-card, .vision-card { |
| background: white; |
| padding: 2rem; |
| border-radius: 20px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .insight-card:hover, .vision-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 40px rgba(0,0,0,0.15); |
| } |
| |
| .vision-card { |
| grid-column: 1 / -1; |
| background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); |
| border: 2px solid rgba(231, 76, 60, 0.2); |
| } |
| |
| |
| .thanks-container { |
| background: linear-gradient(135deg, #e74c3c, #c0392b); |
| height: 100%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .thanks-container::before { |
| content: ''; |
| position: absolute; |
| width: 200%; |
| height: 200%; |
| background: rgba(255,255,255,0.1); |
| transform: translateX(-50%) translateY(-50%) rotate(-45deg); |
| animation: shine 4s infinite linear; |
| } |
| |
| .thanks-content { |
| text-align: center; |
| color: white; |
| position: relative; |
| z-index: 1; |
| padding: 2rem; |
| } |
| |
| .thanks-icon { |
| width: 80px; |
| height: 80px; |
| fill: white; |
| margin-bottom: 2rem; |
| animation: pulse 2s infinite; |
| } |
| |
| .thanks-content h2 { |
| font-size: 4rem; |
| margin-bottom: 2rem; |
| font-weight: bold; |
| } |
| |
| .final-words { |
| font-size: 1.5rem; |
| opacity: 0.9; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.1); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="cover" class="slide active"> |
| <h1>团日初绽映初心</h1> |
| <h2>菁英思政铸辉煌</h2> |
| <div class="presenter"> |
| <p style="font-size: 1.5rem; margin-bottom: 1rem;">讲述人：XXX</p> |
| <p style="font-size: 1.2rem;">XX学院 XX班</p> |
| </div> |
| </div> |
|
|
| |
| <div id="contents" class="slide"> |
| <h2 class="page-title">目 录</h2> |
| <div class="content-grid"> |
| <div class="content-card"> |
| <svg class="icon" viewBox="0 0 24 24"> |
| <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/> |
| </svg> |
| <div> |
| <h3>开场白</h3> |
| <p>从听众到分享者的蜕变</p> |
| </div> |
| </div> |
| <div class="content-card"> |
| <svg class="icon" viewBox="0 0 24 24"> |
| <path d="M12 14l9-5-9-5-9 5 9 5z"/> |
| <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/> |
| </svg> |
| <div> |
| <h3>三个第一次</h3> |
| <p>成长历程的重要时刻</p> |
| </div> |
| </div> |
| <div class="content-card"> |
| <svg class="icon" viewBox="0 0 24 24"> |
| <path d="M13 10V3L4 14h7v7l9-11h-7z"/> |
| </svg> |
| <div> |
| <h3>能力提升</h3> |
| <p>团支书的能力培养</p> |
| </div> |
| </div> |
| <div class="content-card"> |
| <svg class="icon" viewBox="0 0 24 24"> |
| <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> |
| </svg> |
| <div> |
| <h3>思政感悟</h3> |
| <p>教育体会与未来展望</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="opening" class="slide"> |
| <div class="opening-container"> |
| <div class="opening-content"> |
| <h2 class="page-title">开场白</h2> |
| <div class="quote-card"> |
| <svg class="quote-icon" viewBox="0 0 24 24"> |
| <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/> |
| </svg> |
| <div class="opening-text"> |
| <p>尊敬的各位领导、老师，亲爱的同学们：</p> |
| <p>很荣幸能再次来到这个舞台和大家分享。我仍记得去年的这个时候，我也作为一名新生团支书，带着懵懂与好奇来到这个地方，当时我的身份是听众，是学习者，但这一次，我是分享者。</p> |
| <p>接下来，我将通过三个"第一次"来展开我的分享"团日初绽映初心，菁英思政铸辉煌"。</p> |
| </div> |
| </div> |
| <div class="journey-preview"> |
| <div class="journey-item"> |
| <div class="journey-icon">1</div> |
| <p>团日活动登上校月展播</p> |
| </div> |
| <div class="journey-item"> |
| <div class="journey-icon">2</div> |
| <p>加入菁英班的经历</p> |
| </div> |
| <div class="journey-item"> |
| <div class="journey-icon">3</div> |
| <p>思政技能大比武</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="first-experience" class="slide"> |
| <div class="experience-container"> |
| <h2 class="page-title">团日活动第一次登上校月展播</h2> |
| <div class="experience-content"> |
| <div class="experience-timeline"> |
| <div class="timeline-item"> |
| <div class="timeline-icon"> |
| <svg viewBox="0 0 24 24"> |
| <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/> |
| </svg> |
| </div> |
| <div class="timeline-content"> |
| <h3>初期思考</h3> |
| <p>如何主持好一次团日活动？带着这个问题，开始思考、学习、模仿。</p> |
| </div> |
| </div> |
| <div class="timeline-item"> |
| <div class="timeline-icon"> |
| <svg viewBox="0 0 24 24"> |
| <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> |
| </svg> |
| </div> |
| <div class="timeline-content"> |
| <h3>学习探索</h3> |
| <p>每个月观察"南通大学共青团"公众号的优秀展播活动，学习其特色。</p> |
| </div> |
| </div> |
| <div class="timeline-item"> |
| <div class="timeline-icon"> |
| <svg viewBox="0 0 24 24"> |
| <path d="M13 10V3L4 14h7v7l9-11h-7z"/> |
| </svg> |
| </div> |
| <div class="timeline-content"> |
| <h3>创新实践</h3> |
| <p>将专业与主题结合，走出教室，通过游戏和分享，让活动更有意义。</p> |
| </div> |
| </div> |
| <div class="timeline-item highlight"> |
| <div class="timeline-icon"> |
| <svg viewBox="0 0 24 24"> |
| <path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21h14.878a2 2 0 0 0 1.94-1.515L22 17"/> |
| </svg> |
| </div> |
| <div class="timeline-content"> |
| <h3>成功突破</h3> |
| <p>开展"劳模精神"团日活动，探寻机械领域的劳模，最终登上校优秀展播。</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="second-experience" class="slide"> |
| <div class="elite-container"> |
| <h2 class="page-title">第一次加入菁英班</h2> |
| <div class="elite-content"> |
| <div class="elite-card main-card"> |
| <svg class="elite-icon" viewBox="0 0 24 24"> |
| <path d="M12 14l9-5-9-5-9 5 9 5z"/> |
| <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/> |
| </svg> |
| <h3>菁英班的意义</h3> |
| <p>菁英班全称南通大学大学生菁英人才学校，是为提高学生干部的理论素养、研究能力和实践能力的学习平台。</p> |
| </div> |
| <div class="elite-grid"> |
| <div class="elite-card"> |
| <div class="elite-step">1</div> |
| <h4>选拔过程</h4> |
| <p>通过笔试和面试层层选拔，以团支书身份进入菁英班</p> |
| </div> |
| <div class="elite-card"> |
| <div class="elite-step">2</div> |
| <h4>延安实践</h4> |
| <p>暑假期间代表菁英班赴延安进行为期10天的社会实践</p> |
| </div> |
| <div class="elite-card"> |
| <div class="elite-step">3</div> |
| <h4>精神传承</h4> |
| <p>将延安精神传播到班级每一位团员青年</p> |
| </div> |
| <div class="elite-card highlight"> |
| <div class="elite-step">4</div> |
| <h4>收获成长</h4> |
| <p>全方面提升政治素养，收获深厚友谊</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="third-experience" class="slide"> |
| <div class="competition-container"> |
| <h2 class="page-title">第一次走上"大舞台"</h2> |
| <div class="competition-content"> |
| <div class="stage-info"> |
| <div class="stage-numbers"> |
| <div class="number-card"> |
| <span class="number">140</span> |
| <span class="label">参赛高校</span> |
| </div> |
| <div class="number-card"> |
| <span class="number">658</span> |
| <span class="label">入围师生</span> |
| </div> |
| </div> |
| <div class="competition-title"> |
| 第四届江苏高校百校万名团干部思政技能大比武 |
| </div> |
| </div> |
| <div class="journey-stages"> |
| <div class="stage-card"> |
| <h3>校初赛</h3> |
| <div class="stage-line"></div> |
| </div> |
| <div class="stage-card"> |
| <h3>校决赛</h3> |
| <div class="stage-line"></div> |
| </div> |
| <div class="stage-card"> |
| <h3>省初赛</h3> |
| <div class="stage-line"></div> |
| </div> |
| <div class="stage-card highlight"> |
| <h3>省决赛</h3> |
| <div class="stage-line"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="skills-improvement" class="slide"> |
| <div class="skills-container"> |
| <h2 class="page-title">能力提升与收获</h2> |
| <div class="skills-grid"> |
| <div class="skill-card"> |
| <svg class="skill-icon" viewBox="0 0 24 24"> |
| <path d="M12 14l9-5-9-5-9 5 9 5z"/> |
| <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/> |
| </svg> |
| <h3>语言表达</h3> |
| <p>通过比赛磨练，提升表达技巧和演讲能力</p> |
| </div> |
| <div class="skill-card"> |
| <svg class="skill-icon" viewBox="0 0 24 24"> |
| <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> |
| </svg> |
| <h3>文稿撰写</h3> |
| <p>学会撰写有温度、有深度的文稿</p> |
| </div> |
| <div class="skill-card"> |
| <svg class="skill-icon" viewBox="0 0 24 24"> |
| <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/> |
| </svg> |
| <h3>视频制作</h3> |
| <p>掌握视频拍摄和剪辑技能</p> |
| </div> |
| <div class="skill-card"> |
| <svg class="skill-icon" viewBox="0 0 24 24"> |
| <path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/> |
| </svg> |
| <h3>团队协作</h3> |
| <p>培养团队精神，共同进步</p> |
| </div> |
| </div> |
| <div class="team-quote"> |
| <p>"一个人可以走得很快，但一群人可以走得很远。"</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="reflection" class="slide"> |
| <div class="reflection-container"> |
| <h2 class="page-title">思政感悟</h2> |
| <div class="reflection-content"> |
| <div class="insight-card"> |
| <h3>思政教育的真谛</h3> |
| <p>思政教育不是简单的说教和灌输，而是需要用心去感知、用情去感染、用理去说服。</p> |
| </div> |
| <div class="insight-card"> |
| <h3>团支书的使命</h3> |
| <p>作为团支书，要勇于突破"第一次"，秉持"学无止境、勇攀高峰"的精神。</p> |
| </div> |
| <div class="vision-card"> |
| <h3>未来展望</h3> |
| <p>不断提升自己的思政素养和能力，努力成为"有理想、敢担当、能吃苦、肯奋斗"的新时代青年。</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="thanks" class="slide"> |
| <div class="thanks-container"> |
| <div class="thanks-content"> |
| <svg class="thanks-icon" viewBox="0 0 24 24"> |
| <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> |
| </svg> |
| <h2>感谢聆听</h2> |
| <p class="final-words">愿我们携手共进，在青春的道路上留下属于我们的印记</p> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| let currentSlide = 0; |
| const slides = document.querySelectorAll('.slide'); |
| const totalSlides = slides.length; |
| |
| function showSlide(index) { |
| slides[currentSlide].classList.remove('active'); |
| currentSlide = index; |
| slides[currentSlide].classList.add('active'); |
| } |
| |
| function nextSlide() { |
| if (currentSlide < totalSlides - 1) { |
| showSlide(currentSlide + 1); |
| } |
| } |
| |
| function prevSlide() { |
| if (currentSlide > 0) { |
| showSlide(currentSlide - 1); |
| } |
| } |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { |
| nextSlide(); |
| e.preventDefault(); |
| } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { |
| prevSlide(); |
| e.preventDefault(); |
| } |
| }); |
| |
| document.addEventListener('click', (e) => { |
| if (e.clientX > window.innerWidth / 2) { |
| nextSlide(); |
| } else { |
| prevSlide(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
