修复:右侧导航改用 fixed 定位 + 补回丢失的 @section

- aside 用 position:fixed 固定在右侧,不再依赖 flex/sticky
- JS 控制 >= 1024px 显示,窗口缩放自动响应
- 补回被意外删除的 @section('content')
This commit is contained in:
2026-02-27 01:28:08 +08:00
parent 78b0a43c48
commit 92835d44e4

View File

@@ -90,10 +90,23 @@
@endphp
@section('content')
<main class="max-w-6xl mx-auto py-10 px-6 flex gap-8">
{{-- 右侧固定导航fixed 定位,独立于主内容之外) --}}
<aside id="guide-aside" style="position:fixed;top:80px;right:24px;width:160px;z-index:40;display:none;">
<nav class="guide-nav space-y-1" id="guide-nav">
<a href="#sec-exp"> 经验与等级</a>
<a href="#sec-gold">💰 金币系统</a>
<a href="#sec-charm"> 魅力系统</a>
<a href="#sec-gift">🎁 礼物系统</a>
<a href="#sec-vip">👑 VIP 会员</a>
<a href="#sec-admin">🛡️ 管理权限</a>
<a href="#sec-rank">🏆 排行榜</a>
<a href="#sec-basic">💬 基础操作</a>
</nav>
</aside>
{{-- 左侧主内容 --}}
<div class="flex-1 min-w-0">
<main class="max-w-4xl mx-auto py-10 px-6">
<div>
{{-- 页面标题 --}}
<div class="text-center mb-10">
@@ -336,21 +349,7 @@
</a>
</div>
</div> {{-- /flex-1 主内容结束 --}}
{{-- 右侧固定导航 --}}
<aside class="hidden lg:block w-44 shrink-0 self-start sticky top-24">
<nav class="guide-nav space-y-1" id="guide-nav">
<a href="#sec-exp"> 经验与等级</a>
<a href="#sec-gold">💰 金币系统</a>
<a href="#sec-charm"> 魅力系统</a>
<a href="#sec-gift">🎁 礼物系统</a>
<a href="#sec-vip">👑 VIP 会员</a>
<a href="#sec-admin">🛡️ 管理权限</a>
<a href="#sec-rank">🏆 排行榜</a>
<a href="#sec-basic">💬 基础操作</a>
</nav>
</aside>
</div>
</main>
@section('scripts')
@@ -359,8 +358,17 @@
* 滚动时高亮右侧导航当前所在板块
*/
(function() {
// 屏幕宽度 >= 1024px 时显示右侧导航
const aside = document.getElementById('guide-aside');
const nav = document.getElementById('guide-nav');
if (!nav) return;
if (!aside || !nav) return;
function checkWidth() {
aside.style.display = window.innerWidth >= 1024 ? 'block' : 'none';
}
window.addEventListener('resize', checkWidth);
checkWidth();
const links = nav.querySelectorAll('a');
const sections = [];
links.forEach(a => {