Viajero/Achievement_Inputing
2
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases 2 Wiki Activity

主页初步UI和搜索初步UI

Browse Source
This commit is contained in:
DSQ
2025-11-14 22:34:36 +08:00
parent e2c93d6933
commit 42758deeae
2 changed files with 622 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
main/templates/main/home.html
View File

@@ -1,40 +1,110 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>主页</title>
<style>
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #fafafa; }
.container { max-width: 720px; margin: 8vh auto; padding: 24px; }
.card { background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 24px; }
</style>
{% csrf_token %}
<!-- CSRF token to assist logout POST via cookie/header -->
<meta charset="UTF-8" />
<title>固定左侧栏目</title>
<style>
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 180px; /* 导航栏变窄 */
height: 100vh;
background: #1e1e2e;
color: white;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
}
.user-id {
text-align: center;
margin-bottom: auto; /* 用户ID保持在顶部 */
}
.sidebar h3 {
margin-top: 0;
font-size: 18px;
color: #ff79c6;
text-align: center;
margin-bottom: 20px; /* 调整标题与下方内容的距离 */
}
.navigation-links {
width: 100%;
margin-top: 60px; /* 空出一个正方形位置（约 60x60px） */
}
.sidebar a,
.sidebar button {
display: block;
color: #8be9fd;
text-decoration: none;
margin: 10px 0; /* 减少上下间距 */
font-size: 16px; /* 根据需要调整字体大小 */
padding: 15px; /* 增加内边距以填充整个宽度 */
border-radius: 4px; /* 减少圆角半径 */
background: transparent;
border: none;
cursor: pointer;
width: calc(100% - 40px); /* 适应padding-left/right 20px */
text-align: left;
transition: all 0.2s ease;
}
.sidebar a:hover,
.sidebar button:hover {
color: #ff79c6;
background-color: rgba(139, 233, 253, 0.2);
}
.main-content {
margin-left: 200px; /* 调整主内容区左外边距，与新侧边栏宽度匹配 */
padding: 20px;
color: #333;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
#logoutMsg {
color: #ff5555;
font-size: 14px;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container" style="display:flex; gap:16px;">
<aside style="width:220px; background:#fff; border-radius:10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding:16px; height: fit-content;">
<h3 style="margin-top:0; font-size:16px;">导航</h3>
<nav>
<ul style="list-style:none; padding-left:0; line-height:1.9;">
<li><a href="/" style="text-decoration:none; color:#1677ff;">主页</a></li>
<li><a href="/elastic/upload-page/" style="text-decoration:none; color:#1677ff;">图片上传与识别</a></li>
<li><a href="/elastic/manage/" style="text-decoration:none; color:#1677ff;">数据管理（管理员）</a></li>
</ul>
</nav>
<hr/>
<button id="logoutBtn" style="padding:8px 12px; width:100%; background:#ff4d4f; color:#fff; border:none; border-radius:6px; cursor:pointer;">退出登录</button>
<div id="logoutMsg" class="muted" style="margin-top:8px;"></div>
</aside>
<div class="card" style="flex:1;">
<h2>主页（留白）</h2>
<p>用户ID：{{ user_id }}</p>
<p>这里留白即可，主页不由当前实现负责。</p>
<p class="muted">提示：已使用安全的会话 Cookie 管理登录状态。</p>
<!-- 左侧固定栏目 -->
<div class="sidebar">
<div class="user-id">
<h3>用户ID：{{ user_id }}</h3>
</div>
<script>
<div class="navigation-links">
<a href="/">主页</a>
<a href="{% url 'elastic:upload_page' %}">图片上传与识别</a>
<a href="{% url 'elastic:manage_page' %}">数据管理（管理员）</a>
<button id="logoutBtn">退出登录</button>
<div id="logoutMsg"></div>
{% csrf_token %}
</div>
</div>
<!-- 主内容区域 -->
<div class="main-content">
<h1>欢迎来到系统</h1>
<p>这里是一大堆内容……</p>
<p style="height: 200vh;">滚动试试看，左边菜单不会消失哦！✨</p>
</div>
<!-- 登出脚本（保持不变） -->
<script>
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
@@ -65,8 +135,6 @@
msg.textContent = e.message || '发生错误';
}
});
</script>
</div>
</script>
</body>
</html>
</html>