优化：深国际改革方案增加左侧固定导航菜单（17个锚点+滚动监听+移动端抽屉）
This commit is contained in:
zdh
@@ -21,9 +21,40 @@
|
||||
line-height: 1.8;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.page-wrapper { display: flex; max-width: 1400px; margin: 0 auto; min-height: 100vh; }
|
||||
.sidebar {
|
||||
width: 250px; flex-shrink: 0; background: #fff;
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 24px 0; position: sticky; top: 0; height: 100vh;
|
||||
overflow-y: auto; z-index: 100;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-size: 13px; font-weight: 700; color: var(--muted);
|
||||
padding: 0 20px 12px; letter-spacing: 2px; text-transform: uppercase;
|
||||
border-bottom: 1px solid var(--border); margin-bottom: 8px;
|
||||
}
|
||||
.sidebar a {
|
||||
display: block; padding: 7px 20px; font-size: 13px; color: var(--text);
|
||||
text-decoration: none; border-left: 3px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.sidebar a:hover { background: #f0f4f8; color: var(--primary); }
|
||||
.sidebar a.active { background: #e8f0fe; color: var(--primary); font-weight: 600; border-left-color: var(--accent); }
|
||||
.sidebar a.l2 { padding-left: 32px; font-size: 12px; color: var(--muted); }
|
||||
.sidebar a.l3 { padding-left: 44px; font-size: 11px; color: var(--muted); }
|
||||
.main-content { flex: 1; padding: 20px 40px; min-width: 0; }
|
||||
.menu-toggle {
|
||||
display: none; position: fixed; top: 12px; left: 12px; z-index: 200;
|
||||
background: var(--primary); color: #fff; border: none;
|
||||
width: 36px; height: 36px; border-radius: 6px; font-size: 18px;
|
||||
cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.sidebar { display: none; position: fixed; top: 0; left: 0; z-index: 199; width: 260px; box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
|
||||
.sidebar.open { display: block; }
|
||||
.menu-toggle { display: block; }
|
||||
.main-content { padding: 16px; }
|
||||
}
|
||||
.cover {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, #2c5f8a 100%);
|
||||
@@ -182,8 +213,36 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="menu-toggle" id="menuToggle" onclick="document.getElementById('sidebar').classList.toggle('open')">☰</button>
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- ==================== 左侧菜单 ==================== -->
|
||||
<nav class="sidebar" id="sidebar">
|
||||
<div class="sidebar-title">深国际改革方案</div>
|
||||
<a href="#cover">封面摘要</a>
|
||||
<a href="#s1">一、转型必要性与紧迫性</a>
|
||||
<a href="#s2">二、转型基础与战略定位</a>
|
||||
<a href="#s3">三、对标研究与差距分析</a>
|
||||
<a href="#s4">四、综合改革总体思路</a>
|
||||
<a href="#s5">五、六大改革举措</a>
|
||||
<a href="#s5-1" class="l2">5.1 对标调研与战略研究</a>
|
||||
<a href="#s5-2" class="l2">5.2 考核机制改革</a>
|
||||
<a href="#s5-3" class="l2">5.3 容错纠错机制</a>
|
||||
<a href="#s5-4" class="l2">5.4 薪酬激励机制</a>
|
||||
<a href="#s5-5" class="l2">5.5 授权体系优化</a>
|
||||
<a href="#s5-6" class="l2">5.6 协同机制建设</a>
|
||||
<a href="#s6">六、数字化与绿色低碳</a>
|
||||
<a href="#s7">七、国资改革方案融合</a>
|
||||
<a href="#s8">八、实施路线图与保障</a>
|
||||
<a href="#s9">九、参考文献与出处</a>
|
||||
</nav>
|
||||
|
||||
<!-- ==================== 正文 ==================== -->
|
||||
<main class="main-content">
|
||||
|
||||
<!-- ==================== 封面 ==================== -->
|
||||
<div class="cover">
|
||||
<div class="cover" id="cover">
|
||||
<div class="tag">深 圳 国 际 · 内 部 参 考</div>
|
||||
<h1>深圳国际控股有限公司<br>向物流综合服务商转型<br>综合改革方案</h1>
|
||||
<div class="subtitle">——以综合改革为抓手，自上而下谋篇布局，<br>推动集团从"物流园区开发商"向"智慧物流全产业链生态构建者"转型升级</div>
|
||||
@@ -792,5 +851,40 @@
|
||||
<p style="font-size:13px; color: var(--muted);">生成日期: 2026年6月3日 · 版本: V1.0</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div><!-- /.page-wrapper -->
|
||||
|
||||
<script>
|
||||
// Scroll spy — highlight active sidebar link
|
||||
(function() {
|
||||
var links = document.querySelectorAll('.sidebar a');
|
||||
var sections = [];
|
||||
links.forEach(function(a) {
|
||||
var id = a.getAttribute('href');
|
||||
if (id && id.startsWith('#')) {
|
||||
var el = document.querySelector(id);
|
||||
if (el) sections.push({ el: el, link: a });
|
||||
}
|
||||
});
|
||||
function onScroll() {
|
||||
var scrollY = window.scrollY + 120;
|
||||
var current = sections[0];
|
||||
for (var i = 0; i < sections.length; i++) {
|
||||
if (sections[i].el.offsetTop <= scrollY) current = sections[i];
|
||||
}
|
||||
links.forEach(function(l) { l.classList.remove('active'); });
|
||||
if (current) current.link.classList.add('active');
|
||||
}
|
||||
window.addEventListener('scroll', onScroll);
|
||||
// Close sidebar on link click (mobile)
|
||||
links.forEach(function(a) {
|
||||
a.addEventListener('click', function() {
|
||||
document.getElementById('sidebar').classList.remove('open');
|
||||
});
|
||||
});
|
||||
onScroll();
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user