修复:右侧导航改用 fixed 定位 + 补回丢失的 @section
- aside 用 position:fixed 固定在右侧,不再依赖 flex/sticky
- JS 控制 >= 1024px 显示,窗口缩放自动响应
- 补回被意外删除的 @section('content')
This commit is contained in:
@@ -90,10 +90,23 @@
|
|||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
@section('content')
|
@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>
|
||||||
|
|
||||||
{{-- 左侧主内容 --}}
|
<main class="max-w-4xl mx-auto py-10 px-6">
|
||||||
<div class="flex-1 min-w-0">
|
|
||||||
|
<div>
|
||||||
|
|
||||||
{{-- 页面标题 --}}
|
{{-- 页面标题 --}}
|
||||||
<div class="text-center mb-10">
|
<div class="text-center mb-10">
|
||||||
@@ -336,21 +349,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div> {{-- /flex-1 主内容结束 --}}
|
</div>
|
||||||
|
|
||||||
{{-- 右侧固定导航 --}}
|
|
||||||
<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>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@section('scripts')
|
@section('scripts')
|
||||||
@@ -359,8 +358,17 @@
|
|||||||
* 滚动时高亮右侧导航当前所在板块
|
* 滚动时高亮右侧导航当前所在板块
|
||||||
*/
|
*/
|
||||||
(function() {
|
(function() {
|
||||||
|
// 屏幕宽度 >= 1024px 时显示右侧导航
|
||||||
|
const aside = document.getElementById('guide-aside');
|
||||||
const nav = document.getElementById('guide-nav');
|
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 links = nav.querySelectorAll('a');
|
||||||
const sections = [];
|
const sections = [];
|
||||||
links.forEach(a => {
|
links.forEach(a => {
|
||||||
|
|||||||
Reference in New Issue
Block a user