|
|
<!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> |
|
|
|
