<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teambition 帮助手册</title>
<style>
/* 导航栏样式 - 减少缩进并添加折叠功能 */
.sidebar {
width: 240px;
background-color: #f5f9ff; /* 浅蓝色背景 */
padding: 20px 0;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.nav-menu ul {
list-style: none;
padding-left: 10px; /* 减少缩进 */
margin: 0;
display: none; /* 默认隐藏子菜单 */
}
.nav-item {
padding: 8px 15px;
cursor: pointer;
transition: all 0.2s;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-item:hover {
background-color: #e1ecff;
}
.nav-item.active {
background-color: #d6e4ff;
color: #1a73e8;
}
/* 可折叠菜单箭头 */
.has-children::after {
content: "▶";
position: absolute;
right: 15px;
font-size: 10px;
transition: transform 0.3s;
}
.has-children.expanded::after {
transform: rotate(90deg);
}
/* 分级缩进样式 - 减少缩进 */
.level-1 {
font-weight: bold;
padding-left: 15px;
font-size: 15px;
}
.level-2 {
padding-left: 25px;
font-size: 14px;
}
.level-3 {
padding-left: 35px;
font-size: 13px;
}
/* 保持其他原有样式不变 */
body {
margin: 0;
padding: 0;
background-color: #f5f7fa;
color: #333;
}
.container {
display: flex;
min-height: 100vh;
}
.logo {
padding: 0 20px 20px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #e1e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.share-btn {
color: #1a73e8;
font-size: 14px;
cursor: pointer;
}
.main-content {
flex: 1;
background-color: white;
padding: 30px 40px;
}
.toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 0;
margin-bottom: 20px;
}
.search-box {
position: relative;
margin-right: 15px;
}
.search-box input {
width: 200px;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 20px;
outline: none;
}
.ai-assistant {
width: 36px;
height: 36px;
background-color: #f0f7ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.ai-assistant:hover {
background-color: #1a73e8;
color: white;
}
h1 {
font-size: 24px;
margin-top: 0;
margin-bottom: 20px;
color: #333;
}
.content-text {
line-height: 1.6;
color: #444;
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<!-- 左侧导航栏 - 减少缩进并添加折叠功能 -->
<div class="sidebar">
<div class="logo">
<span>Teambition 帮助手册</span>
<span class="share-btn">分享</span>
</div>
<ul class="nav-menu">
<!-- 一级菜单 -->
<li class="nav-item level-1 has-children">首页</li>
<li class="nav-item level-1 has-children">产品
<!-- 二级菜单 -->
<ul>
<li class="nav-item level-2">产品介绍</li>
<li class="nav-item level-2">核心功能</li>
<li class="nav-item level-2 has-children">解决方案
<!-- 三级菜单 -->
<ul>
<li class="nav-item level-3">企业版</li>
<li class="nav-item level-3">团队版</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item level-1 has-children">帮助中心
<!-- 二级菜单 -->
<ul>
<li class="nav-item level-2">使用指南</li>
<li class="nav-item level-2">常见问题</li>
<li class="nav-item level-2">视频教程</li>
</ul>
</li>
<li class="nav-item level-1">关于我们</li>
</ul>
</div>
<!-- 右侧内容区 -->
<div class="main-content">
<!-- 顶部工具栏 -->
<div class="toolbar">
<div class="search-box">
<input type="text" placeholder="搜索帮助文档...">
</div>
<div class="ai-assistant" id="aiAssistant">
AI
</div>
</div>
<!-- 主要内容 -->
<h1>Teambition 是什么</h1>
<div class="content-text">
<p>Teambition 是一个创新的项目管理工具，它为企业、团队、工作者以及客户，股东提供全面的项目管理服务。基于此，Teambition将从项目管理服务向全面的企业管理转变。</p>
<p>Teambition的项目管理平台基于云计算，提供全面的项目管理服务，帮助企业、团队、工作者以及客户，股东提供全面的项目管理服务。</p>
<p>它可以帮助您：</p>
<ol>
<li>项目计划与跟踪</li>
<li>资源分配与管理</li>
<li>工作分解与控制</li>
<li>质量管理与控制</li>
<li>项目成本管理</li>
<li>项目进度控制</li>
<li>项目文件管理</li>
<li>项目资料管理</li>
<li>项目报告与分析</li>
<li>项目文档管理</li>
<li>项目决策与控制</li>
<li>项目收尾与总结</li>
</ol>
</div>
</div>
</div>
<script>
// 折叠菜单功能
document.querySelectorAll('.has-children').forEach(item => {
item.addEventListener('click', function(e) {
// 阻止事件冒泡，避免与选中状态冲突
e.stopPropagation();
// 切换展开状态
this.classList.toggle('expanded');
// 显示/隐藏子菜单
const subMenu = this.querySelector('ul');
if (subMenu) {
subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
}
});
});
// 选中状态
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function(e) {
if (!this.classList.contains('has-children')) {
document.querySelectorAll('.nav-item').forEach(nav => {
nav.classList.remove('active');
});
this.classList.add('active');
}
});
});
// 默认展开第一级菜单
document.querySelectorAll('.nav-menu > .has-children').forEach(item => {
item.classList.add('expanded');
const subMenu = item.querySelector('ul');
if (subMenu) {
subMenu.style.display = 'block';
}
});
// AI助手点击事件
document.getElementById('aiAssistant').addEventListener('click', function() {
alert('AI助手功能');
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html