修复:右侧导航改用 fixed 定位 + 补回丢失的 @section
- aside 用 position:fixed 固定在右侧,不再依赖 flex/sticky
- JS 控制 >= 1024px 显示,窗口缩放自动响应
- 补回被意外删除的 @section('content')
This commit is contained in:
@@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user