一个红色主题的智慧团建系统，包含团队活动、任务管理、进度跟踪等功能：
<!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;
background: linear-gradient(135deg, #dc143c 0%, #b22222 50%, #8b0000 100%);
min-height: 100vh;
color: #333;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 30px;
color: white;
}
.header h1 {
font-size: 2.8em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.header p {
font-size: 1.2em;
opacity: 0.9;
}
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-title {
font-size: 1.5em;
font-weight: bold;
color: #dc143c;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.team-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: linear-gradient(135deg, #dc143c, #b22222);
color: white;
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(220, 20, 60, 0.3);
}
.stat-value {
font-size: 2em;
font-weight: bold;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9em;
opacity: 0.9;
}
.activity-list {
max-height: 400px;
overflow-y: auto;
}
.activity-item {
background: #f8f9fa;
border-radius: 12px;
padding: 15px;
margin-bottom: 15px;
border-left: 4px solid #dc143c;
transition: all 0.3s ease;
cursor: pointer;
}
.activity-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(220, 20, 60, 0.2);
}
.activity-item.completed {
border-left-color: #28a745;
background: #d4edda;
}
.activity-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.activity-title {
font-weight: bold;
color: #333;
}
.activity-status {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: bold;
}
.status-pending {
background: #fff3cd;
color: #856404;
}
.status-in-progress {
background: #cce5ff;
color: #004085;
}
.status-completed {
background: #d4edda;
color: #155724;
}
.activity-desc {
color: #666;
font-size: 0.9em;
margin-bottom: 10px;
}
.activity-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8em;
color: #888;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #dc143c, #ff6b6b);
transition: width 0.3s ease;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
color: #555;
margin-bottom: 8px;
}
input[type="text"], input[type="number"], select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1em;
transition: border-color 0.3s ease;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
outline: none;
border-color: #dc143c;
}
textarea {
resize: vertical;
min-height: 80px;
}
.button-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
button {
padding: 12px 24px;
border: none;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1em;
}
.btn-primary {
background: linear-gradient(135deg, #dc143c, #b22222);
color: white;
box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(220, 20, 60, 0.4);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-success {
background: #28a745;
color: white;
}
.btn-warning {
background: #ffc107;
color: #212529;
}
.team-members {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.member-card {
background: #f8f9fa;
border-radius: 12px;
padding: 15px;
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.member-card:hover {
border-color: #dc143c;
transform: translateY(-2px);
}
.member-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #dc143c, #b22222);
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
font-weight: bold;
}
.member-name {
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.member-role {
color: #666;
font-size: 0.9em;
margin-bottom: 10px;
}
.member-points {
color: #dc143c;
font-weight: bold;
}
.leaderboard {
background: linear-gradient(135deg, #dc143c, #b22222);
color: white;
border-radius: 15px;
padding: 20px;
margin-top: 20px;
}
.leaderboard-title {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}
.leaderboard-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: 8px;
}
.leaderboard-rank {
font-weight: bold;
font-size: 1.2em;
}
.leaderboard-name {
flex: 1;
margin-left: 15px;
}
.leaderboard-points {
font-weight: bold;
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2.2em;
}
.team-stats {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🏆 智慧团建系统</h1>
<p>激发团队活力，共创美好未来</p>
</div>
<div class="team-stats">
<div class="stat-card">
<div class="stat-value" id="totalMembers">12</div>
<div class="stat-label">团队成员</div>
</div>
<div class="stat-card">
<div class="stat-value" id="activeActivities">8</div>
<div class="stat-label">进行中活动</div>
</div>
<div class="stat-card">
<div class="stat-value" id="totalPoints">2,450</div>
<div class="stat-label">团队积分</div>
</div>
<div class="stat-card">
<div class="stat-value" id="completionRate">85%</div>
<div class="stat-label">完成率</div>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-title">📋 团队活动</div>
<div class="activity-list" id="activityList">
<!-- 活动列表将通过JavaScript动态生成 -->
</div>
</div>
<div class="card">
<div class="card-title">👥 团队成员</div>
<div class="team-members" id="teamMembers">
<!-- 团队成员将通过JavaScript动态生成 -->
</div>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-title">➕ 添加活动</div>
<form id="activityForm">
<div class="form-group">
<label for="activityName">活动名称</label>
<input type="text" id="activityName" placeholder="输入活动名称" required>
</div>
<div class="form-group">
<label for="activityDesc">活动描述</label>
<textarea id="activityDesc" placeholder="描述活动内容和目标"></textarea>
</div>
<div class="form-group">
<label for="activityType">活动类型</label>
<select id="activityType">
<option value="team-building">团队建设</option>
<option value="training">技能培训</option>
<option value="competition">竞赛活动</option>
<option value="celebration">庆祝活动</option>
<option value="volunteer">志愿服务</option>
</select>
</div>
<div class="form-group">
<label for="activityPoints">积分奖励</label>
<input type="number" id="activityPoints" min="10" max="1000" value="50">
</div>
<div class="button-group">
<button type="submit" class="btn-primary">添加活动</button>
<button type="button" class="btn-secondary" onclick="clearForm()">清空表单</button>
</div>
</form>
</div>
<div class="card">
<div class="card-title">🏅 积分排行榜</div>
<div class="leaderboard">
<div class="leaderboard-title">本月积分榜</div>
<div id="leaderboardList">
<!-- 排行榜将通过JavaScript动态生成 -->
</div>
</div>
</div>
</div>
</div>
<script>
// 团队数据
let activities = [
{
id: 1,
name: "团队拓展训练",
description: "户外拓展活动，提升团队协作能力",
type: "team-building",
status: "in-progress",
points: 100,
participants: 12,
progress: 60,
startDate: "2024-01-15",
endDate: "2024-01-20"
},
{
id: 2,
name: "技能分享会",
description: "团队成员分享专业技能和经验",
type: "training",
status: "completed",
points: 80,
participants: 8,
progress: 100,
startDate: "2024-01-10",
endDate: "2024-01-12"
},
{
id: 3,
name: "创新竞赛",
description: "团队创新项目竞赛",
type: "competition",
status: "pending",
points: 150,
participants: 6,
progress: 0,
startDate: "2024-01-25",
endDate: "2024-02-05"
}
];
let teamMembers = [
{ id: 1, name: "张三", role: "项目经理", points: 450, avatar: "张" },
{ id: 2, name: "李四", role: "技术主管", points: 380, avatar: "李" },
{ id: 3, name: "王五", role: "设计师", points: 320, avatar: "王" },
{ id: 4, name: "赵六", role: "开发工程师", points: 290, avatar: "赵" },
{ id: 5, name: "钱七", role: "测试工程师", points: 260, avatar: "钱" },
{ id: 6, name: "孙八", role: "产品经理", points: 240, avatar: "孙" }
];
// 初始化
function init() {
renderActivities();
renderTeamMembers();
renderLeaderboard();
updateStats();
}
// 渲染活动列表
function renderActivities() {
const activityList = document.getElementById('activityList');
activityList.innerHTML = '';
activities.forEach(activity => {
const activityItem = document.createElement('div');
activityItem.className = `activity-item ${activity.status === 'completed' ? 'completed' : ''}`;
activityItem.innerHTML = `
<div class="activity-header">
<div class="activity-title">${activity.name}</div>
<div class="activity-status status-${activity.status}">
${getStatusText(activity.status)}
</div>
</div>
<div class="activity-desc">${activity.description}</div>
<div class="progress-bar">
<div class="progress-fill" style="width: ${activity.progress}%"></div>
</div>
<div class="activity-meta">
<span>🏆 ${activity.points}积分</span>
<span>👥 ${activity.participants}人参与</span>
<span>📅 ${activity.startDate}</span>
</div>
`;
activityItem.onclick = () => toggleActivityStatus(activity.id);
activityList.appendChild(activityItem);
});
}
// 渲染团队成员
function renderTeamMembers() {
const teamMembersContainer = document.getElementById('teamMembers');
teamMembersContainer.innerHTML = '';
teamMembers.forEach(member => {
const memberCard = document.createElement('div');
memberCard.className = 'member-card';
memberCard.innerHTML = `
<div class="member-avatar">${member.avatar}</div>
<div class="member-name">${member.name}</div>
<div class="member-role">${member.role}</div>
<div class="member-points">🏆 ${member.points}积分</div>
`;
teamMembersContainer.appendChild(memberCard);
});
}
// 渲染排行榜
function renderLeaderboard() {
const leaderboardList = document.getElementById('leaderboardList');
leaderboardList.innerHTML = '';
const sortedMembers = [...teamMembers].sort((a, b) => b.points - a.points);
sortedMembers.forEach((member, index) => {
const leaderboardItem = document.createElement('div');
leaderboardItem.className = 'leaderboard-item';
leaderboardItem.innerHTML = `
<div class="leaderboard-rank">${index + 1}</div>
<div class="leaderboard-name">${member.name}</div>
<div class="leaderboard-points">🏆 ${member.points}</div>
`;
leaderboardList.appendChild(leaderboardItem);
});
}
// 更新统计信息
function updateStats() {
const totalMembers = teamMembers.length;
const activeActivities = activities.filter(a => a.status === 'in-progress').length;
const totalPoints = teamMembers.reduce((sum, member) => sum + member.points, 0);
const completedActivities = activities.filter(a => a.status === 'completed').length;
const completionRate = activities.length > 0 ? Math.round((completedActivities / activities.length) * 100) : 0;
document.getElementById('totalMembers').textContent = totalMembers;
document.getElementById('activeActivities').textContent = activeActivities;
document.getElementById('totalPoints').textContent = totalPoints.toLocaleString();
document.getElementById('completionRate').textContent = completionRate + '%';
}
// 获取状态文本
function getStatusText(status) {
const statusMap = {
'pending': '待开始',
'in-progress': '进行中',
'completed': '已完成'
};
return statusMap[status] || status;
}
// 切换活动状态
function toggleActivityStatus(activityId) {
const activity = activities.find(a => a.id === activityId);
if (activity) {
const statusOrder = ['pending', 'in-progress', 'completed'];
const currentIndex = statusOrder.indexOf(activity.status);
const nextIndex = (currentIndex + 1) % statusOrder.length;
activity.status = statusOrder[nextIndex];
if (activity.status === 'completed') {
activity.progress = 100;
// 给参与者分配积分
distributePoints(activity.points, activity.participants);
} else if (activity.status === 'in-progress') {
activity.progress = 60;
} else {
activity.progress = 0;
}
renderActivities();
renderTeamMembers();
renderLeaderboard();
updateStats();
}
}
// 分配积分
function distributePoints(totalPoints, participants) {
const pointsPerPerson = Math.floor(totalPoints / participants);
const remainingPoints = totalPoints % participants;
// 随机选择成员分配积分
const shuffledMembers = [...teamMembers].sort(() => Math.random() - 0.5);
for (let i = 0; i < participants && i < shuffledMembers.length; i++) {
const extraPoints = i < remainingPoints ? 1 : 0;
shuffledMembers[i].points += pointsPerPerson + extraPoints;
}
}
// 添加新活动
document.getElementById('activityForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('activityName').value;
const description = document.getElementById('activityDesc').value;
const type = document.getElementById('activityType').value;
const points = parseInt(document.getElementById('activityPoints').value);
const newActivity = {
id: Date.now(),
name: name,
description: description,
type: type,
status: 'pending',
points: points,
participants: Math.floor(Math.random() * 10) + 5,
progress: 0,
startDate: new Date().toISOString().split('T')[0],
endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
};
activities.push(newActivity);
renderActivities();
updateStats();
clearForm();
});
// 清空表单
function clearForm() {
document.getElementById('activityForm').reset();
}
// 初始化应用
init();
</script>
</body>
</html>
🏆 主要功能
1. 团队统计面板
- 团队成员数量
- 进行中活动数量
- 团队总积分
- 活动完成率
2. 活动管理系统
- 添加新活动
- 活动状态管理（待开始、进行中、已完成）
- 活动类型分类（团队建设、技能培训、竞赛活动等）
- 积分奖励系统
3. 团队成员展示
- 成员头像和基本信息
- 个人积分显示
- 角色分工展示
4. 积分排行榜
- 实时积分排名
- 动态更新机制
- 红色主题设计
5. 交互功能
- 点击活动切换状态
- 表单添加新活动
- 自动积分分配
- 进度条显示
🎨 设计特色
红色主题
- 渐变红色背景
- 红色强调色
- 白色卡片设计
- 现代化UI界面
响应式布局
- 适配不同屏幕尺寸
- 网格布局系统
- 流畅的动画效果
数据管理
- 活动数据管理
- 成员积分系统
- 实时统计更新
- 状态跟踪
🎯 使用说明
- 查看团队状态：顶部统计面板显示团队整体情况
- 管理活动：左侧活动列表，点击可切换状态
- 添加活动：使用表单添加新的团队活动
- 查看成员：右侧显示团队成员和积分
- 排行榜：底部显示积分排行榜
�� 特色功能
- 智能积分分配：活动完成时自动分配积分
- 进度可视化：活动进度条显示
- 状态管理：活动状态循环切换
- 实时更新：数据变化时自动刷新显示
这个系统可以帮助团队：
- 组织和管理团建活动
- 激励成员参与
- 跟踪活动进度
- 建立积分奖励机制
扫一扫
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
