代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书后台管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#4080FF',
neutral: '#F5F7FA',
dark: '#1D2129',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.menu-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.menu-transition {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-icon {
width: 20px;
text-align: center;
}
/* 禁止选择文本样式 */
.no-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
}
</style>
</head>
<body class="bg-gray-50 font-sans no-select" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
<div class="flex h-screen overflow-hidden">
<aside class="w-64 bg-white shadow-lg menu-transition z-20">
<nav class="p-4">
<ul class="space-y-1">
<!-- 图书管理模块 -->
<li class="menu-item">
<button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
<div class="flex items-center">
<i class="fa-solid fa-book-open text-primary mr-3 menu-icon"></i>
<span>图书管理</span>
</div>
<i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
</button>
<ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
<li>
<a href="book_right.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
图书统计
</a>
</li>
<li>
<a href="book_list.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
新书管理
</a>
</li>
<li>
<a href="add_book.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
新书入库
</a>
</li>
</ul>
</li>
<!-- 其他模块代码保持不变 -->
<li class="menu-item">
<button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
<div class="flex items-center">
<i class="fa-solid fa-paperclip text-primary mr-3 menu-icon"></i>
<span>图书附件</span>
</div>
<i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
</button>
<ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
<li>
<a href="upload.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
文件上传
</a>
</li>
</ul>
</li>
<li class="menu-item">
<button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
<div class="flex items-center">
<i class="fa-solid fa-eye text-primary mr-3 menu-icon"></i>
<span>图书阅览</span>
</div>
<i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition">
</i>
</button>
<ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
<li>
<a href="insert_book.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
添加图书信息
</a>
</li>
<li>
<a href="book_display.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
图书浏览
</a>
</li>
</ul>
</li>
<li class="menu-item">
<button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
<div class="flex items-center">
<i class="fa-solid fa-cog text-primary mr-3 menu-icon"></i>
<span>系统设置</span>
</div>
<i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
</button>
<ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
<li>
<a href="password_update.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
修改密码
</a>
</li>
<li>
<a href="denlurizhi.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
登录日志
</a>
</li>
</ul>
</li>
<li class="menu-item">
<button class="w-full flex items-center justify-between p-3 text-left rounded-lg hover:bg-primary/5 menu-transition" onclick="toggleSubmenu(this)">
<div class="flex items-center">
<i class="fa-solid fa-info-circle text-primary mr-3 menu-icon"></i>
<span>关于我们</span>
</div>
<i class="fa-solid fa-chevron-down text-xs text-gray-500 menu-transition"></i>
</button>
<ul class="submenu mt-1 ml-10 space-y-1 hidden menu-transition">
<li>
<a href="me.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
关于我们
</a>
</li>
<li>
<a href="map.php" target="rightFrame" class="block p-2 rounded-lg hover:bg-primary/5 text-gray-700 menu-transition">
区域地图
</a>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
<script>
// 禁止右键菜单
document.addEventListener('contextmenu', (e) => e.preventDefault());
// 禁止文本选择
document.addEventListener('selectstart', (e) => e.preventDefault());
// 禁止拖拽
document.addEventListener('dragstart', (e) => e.preventDefault());
function toggleSubmenu(button) {
const submenu = button.nextElementSibling;
const icon = button.querySelector('.fa-chevron-down');
document.querySelectorAll('.submenu').forEach(item => {
if (item !== submenu && !item.classList.contains('hidden')) {
item.classList.add('hidden');
item.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180');
}
});
submenu.classList.toggle('hidden');
icon.classList.toggle('rotate-180');
}
document.addEventListener('DOMContentLoaded', function() {
const firstMenu = document.querySelector('.menu-item button');
if (firstMenu) {
firstMenu.click();
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手