Spaces:
Running
Running
File size: 6,282 Bytes
0ecd61a 28899d6 0d69f31 53d8478 28899d6 0d69f31 28899d6 53d8478 0d69f31 53d8478 28899d6 0d69f31 28899d6 0d69f31 28899d6 0d69f31 53d8478 28899d6 0d69f31 53d8478 28899d6 0d69f31 28899d6 0d69f31 28899d6 53d8478 28899d6 0d69f31 53d8478 0d69f31 28899d6 53d8478 28899d6 0ecd61a 53d8478 0ecd61a 53d8478 0ecd61a 0d69f31 28899d6 0d69f31 28899d6 0ecd61a d2dc4e8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>团课展示汇报</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
color: #333;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0,0,0,0.3);
overflow: hidden;
position: relative;
}
.page {
display: none; /* 隐藏所有页面 */
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.page.active {
display: block; /* 仅显示活动页面 */
opacity: 1;
transform: translateY(0);
}
h1 {
color: #c0392b;
text-align: center;
margin-bottom: 20px;
animation: fadeIn 0.8s forwards;
}
p, ul, ol {
line-height: 1.6;
font-size: 1.1em;
margin-bottom: 15px;
animation: slideIn 0.8s forwards;
}
button {
margin-top: 20px;
padding: 10px 20px;
border: none;
background-color: #c0392b;
color: white;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s;
}
button:hover {
background-color: #a52a2a;
transform: scale(1.05);
}
.footer {
text-align: center;
margin-top: 30px;
font-size: 0.9em;
color: #777;
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<div class="page" id="page1" class="active">
<h1>团课展示汇报</h1>
<p>欢迎大家来到本次团课展示汇报。在这里，我们将一起回顾我们团体的成长历程、所取得的成就以及未来的计划。</p>
<button onclick="nextPage(2)">下一页</button>
</div>
<div class="page" id="page2">
<h1>团队背景</h1>
<p>我们的团队成立于2022年，旨在通过团体合作、互帮互助，实现共同的学习与成长。</p>
<p>团队成员来自不同的背景和领域，但我们都有一个共同的目标：提升个人能力，增强团队协作。</p>
<button onclick="nextPage(3)">下一页</button>
<button onclick="prevPage(1)">上一页</button>
</div>
<div class="page" id="page3">
<h1>所取得的成就</h1>
<ul>
<li>成功举办了多次团体活动，包括团队建设、知识分享和志愿服务等。</li>
<li>提升了成员的沟通能力和团队协作能力，收到了积极的反馈。</li>
<li>在各类比赛中获得了优异的成绩，增强了团队的凝聚力和信任感。</li>
</ul>
<button onclick="nextPage(4)">下一页</button>
<button onclick="prevPage(2)">上一页</button>
</div>
<div class="page" id="page4">
<h1>未来计划</h1>
<p>为了继续提升团队的整体素质，我们计划：</p>
<ol>
<li>定期举办团队培训和工作坊，邀请行业专家进行分享。</li>
<li>加强团队之间的交流与合作，分享成功经验和教训。</li>
<li>参与更多的社会公益活动，提升团队的社会责任感。</li>
</ol>
<button onclick="nextPage(5)">下一页</button>
<button onclick="prevPage(3)">上一页</button>
</div>
<div class="page" id="page5">
<h1>团队文化</h1>
<p>我们的团队文化强调开放、包容和创新。我们鼓励每位成员分享自己的观点和创意，推动团队不断进步。</p>
<p>我们相信，只有在互相支持和理解的环境中，才能激发出每个人的潜力，实现更大的成就。</p>
<button onclick="nextPage(6)">下一页</button>
<button onclick="prevPage(4)">上一页</button>
</div>
<div class="page" id="page6">
<h1>成功案例</h1>
<p>在过去的一年里，我们完成了一些重要项目：</p>
<ul>
<li><strong>项目A：</strong>成功举办了一次大型的文化活动，吸引了超过500名参与者。</li>
<li><strong>项目B：</strong>开展了针对青少年的公益培训，帮助了30名学生提升技能。</li>
<li><strong>项目C：</strong>与其他组织合作，共同开展环境保护活动，得到了社会的广泛认可。</li>
</ul>
<button onclick="prevPage(5)">上一页</button>
</div>
</div>
<div class="footer">
<p>© 2024 团队展示</p>
</div>
<script>
let currentPage = 1;
showPage(currentPage);
function showPage(page) {
const pages = document.querySelectorAll('.page');
pages.forEach(p => {
p.classList.remove('active'); // 隐藏所有页面
});
const activePage = document.getElementById(`page${page}`);
activePage.classList.add('active'); // 显示当前页面
}
function nextPage(page) {
currentPage = page;
showPage(currentPage);
}
function prevPage(page) {
currentPage = page;
showPage(currentPage);
}
</script>
</body>
</html>
|