新增个人中心页面，在注册后填写班级功能
This commit is contained in:
129
accounts/templates/accounts/profile.html
Normal file
129
accounts/templates/accounts/profile.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>个人中心</title>
|
||||
<style>
|
||||
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #f5f6fa; margin: 0; }
|
||||
/* 侧边栏样式 */
|
||||
.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-sidebar { text-align: center; margin-bottom: 0px; }
|
||||
.sidebar h3 { margin-top: 0; font-size: 18px; color: #add8e6; text-align: center; margin-bottom: 20px; }
|
||||
.navigation-links { width: 100%; margin-top: 60px; }
|
||||
.sidebar a { display: block; color: #8be9fd; text-decoration: none; margin: 10px 0; font-size: 16px; padding: 15px; border-radius: 4px; transition: all 0.2s ease; }
|
||||
.sidebar a:hover { color: #ff79c6; background-color: rgba(139, 233, 253, 0.2); }
|
||||
|
||||
/* 主内容区 */
|
||||
.main-content { margin-left: 220px; padding: 40px; }
|
||||
.profile-card { background: #fff; border-radius: 14px; box-shadow: 0 10px 24px rgba(31,35,40,0.08); padding: 30px; margin-bottom: 30px; }
|
||||
.profile-header { display: flex; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
|
||||
.profile-info h2 { margin: 0; color: #1e1e2e; }
|
||||
.profile-info p { margin: 5px 0; color: #666; }
|
||||
.label { font-weight: bold; color: #333; margin-right: 10px; }
|
||||
|
||||
.section-title { font-size: 20px; font-weight: bold; margin-bottom: 20px; color: #1e1e2e; }
|
||||
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
|
||||
.image-item { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.2s; }
|
||||
.image-item:hover { transform: translateY(-5px); }
|
||||
.image-item img { width: 100%; height: 150px; object-fit: cover; cursor: pointer; }
|
||||
.image-item .info { padding: 10px; font-size: 12px; color: #888; text-align: center; }
|
||||
|
||||
.no-data { text-align: center; color: #999; padding: 40px; }
|
||||
|
||||
/* 图片放大模态框 */
|
||||
.image-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 2000; }
|
||||
.image-modal-content { max-width: 90%; max-height: 90%; border-radius: 8px; }
|
||||
.image-modal-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="user-id-sidebar">
|
||||
<h3>你好，{{ username|default:"访客" }}</h3>
|
||||
</div>
|
||||
<div class="navigation-links">
|
||||
<a href="{% url 'main:home' %}">返回主页</a>
|
||||
<a id="logoutBtn" style="cursor:pointer;">退出登录</a>
|
||||
{% csrf_token %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="profile-card">
|
||||
<div class="profile-header">
|
||||
<div class="profile-info">
|
||||
<h2>个人信息</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-details">
|
||||
<p><span class="label">用户名:</span> {{ profile_user.username }}</p>
|
||||
<p><span class="label">用户ID:</span> {{ profile_user.user_id }}</p>
|
||||
<p><span class="label">所属班级:</span> {{ user_class|default:"未填写" }}</p>
|
||||
<p><span class="label">权限级别:</span> {{ permission_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">我的提交</div>
|
||||
{% if achievements %}
|
||||
<div class="image-grid">
|
||||
{% for item in achievements %}
|
||||
<div class="image-item">
|
||||
{% if item.image_url %}
|
||||
<img src="{{ item.image_url }}" alt="提交的图片" onclick="openModal(this.src)">
|
||||
{% else %}
|
||||
<div style="height: 150px; background: #eee; display: flex; align-items: center; justify-content: center; color: #ccc;">无图片</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="profile-card no-data">
|
||||
<p>你还没有提交过任何图片。</p>
|
||||
<a href="/elastic/upload/" style="color: #2d8cf0; text-decoration: none;">去上传第一张图片吧！</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 图片放大模态框 -->
|
||||
<div id="imageModal" class="image-modal">
|
||||
<span class="image-modal-close" onclick="closeModal()">×</span>
|
||||
<img id="modalImg" class="image-modal-content">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getCookie(name){const v=`; ${document.cookie}`;const p=v.split(`; ${name}=`);if(p.length===2) return p.pop().split(';').shift();}
|
||||
|
||||
// 登出功能
|
||||
document.getElementById('logoutBtn').addEventListener('click', async () => {
|
||||
if(!confirm('确定要退出登录吗？')) return;
|
||||
const csrftoken = getCookie('csrftoken');
|
||||
try {
|
||||
const resp = await fetch('/accounts/logout/', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrftoken || '' }
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (data.ok) window.location.href = data.redirect_url;
|
||||
} catch (e) { alert('登出失败'); }
|
||||
});
|
||||
|
||||
// 图片放大功能
|
||||
function openModal(src) {
|
||||
const modal = document.getElementById('imageModal');
|
||||
const modalImg = document.getElementById('modalImg');
|
||||
modal.style.display = "flex";
|
||||
modalImg.src = src;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('imageModal').style.display = "none";
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
const modal = document.getElementById('imageModal');
|
||||
if (event.target == modal) closeModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user