清空,重构
This commit is contained in:
@@ -1,69 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block body_class %}bg-neutral-50 text-neutral-900{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div x-data="{ sidebarOpen: $persist(true).as('fonrey.sidebar.open') }" class="min-h-screen">
|
||||
<header class="sticky top-0 z-20 h-14 bg-primary-800 text-white flex items-center px-4 gap-4">
|
||||
<div class="w-[150px] font-semibold">Fonrey</div>
|
||||
<nav class="flex-1 flex items-center gap-2 overflow-x-auto">
|
||||
<a href="#" class="px-3 py-2 rounded bg-primary-700">主页</a>
|
||||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">房源</a>
|
||||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">客源</a>
|
||||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">营销</a>
|
||||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">交易</a>
|
||||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">数据</a>
|
||||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">人事</a>
|
||||
<a href="#" class="px-3 py-2 rounded hover:bg-primary-700">系统</a>
|
||||
<input class="ml-2 h-9 rounded px-3 text-neutral-900 w-64" placeholder="全局搜索">
|
||||
</nav>
|
||||
<div class="flex items-center gap-3">
|
||||
<button type="button" class="p-2 rounded hover:bg-primary-700">🔔</button>
|
||||
<button type="button" class="p-2 rounded hover:bg-primary-700">⚙️</button>
|
||||
<button type="button" class="h-8 w-8 rounded-full bg-primary-600">U</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<aside :class="sidebarOpen ? 'w-60' : 'w-16'" class="fixed top-14 left-0 bottom-0 z-20 bg-white border-r border-neutral-200 transition-all">
|
||||
<div class="p-3">
|
||||
<button type="button" class="text-sm text-primary-600" @click="sidebarOpen = !sidebarOpen">切换侧栏</button>
|
||||
</div>
|
||||
{% include "components/sidebar.html" %}
|
||||
</aside>
|
||||
|
||||
<main :class="sidebarOpen ? 'ml-60' : 'ml-16'" class="px-6 py-4 transition-all">
|
||||
{% include "components/topbar.html" %}
|
||||
<section hx-get="/property/" hx-trigger="load" hx-target="#page-async" hx-swap="innerHTML">
|
||||
<div id="page-async">
|
||||
{% block app_content %}{% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="toast-container" class="fixed bottom-4 right-4 z-70 space-y-2"></div>
|
||||
</div>
|
||||
|
||||
<div id="desktop-only-gate" class="hidden fixed inset-0 z-70 bg-neutral-900/80 text-white items-center justify-center p-6">
|
||||
<div class="max-w-lg text-center text-lg font-medium">Fonrey 当前仅支持桌面端(≥1280px),请在电脑上访问</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
(function () {
|
||||
function toggleGate() {
|
||||
var gate = document.getElementById('desktop-only-gate');
|
||||
if (!gate) return;
|
||||
if (window.innerWidth < 1280) {
|
||||
gate.classList.remove('hidden');
|
||||
gate.classList.add('flex');
|
||||
} else {
|
||||
gate.classList.add('hidden');
|
||||
gate.classList.remove('flex');
|
||||
}
|
||||
}
|
||||
toggleGate();
|
||||
window.addEventListener('resize', toggleGate);
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user