继续完善前端登录模块

2025-05-27 11:29:06 +08:00
parent 9352fd2a75
commit b8d3757397
18 changed files with 2574 additions and 286 deletions
@@ -0,0 +1,120 @@
+{include file="component/head" /}
+{include file="component/header-simple" /}
+
+<div class="profile-container">
+    <div class="profile-sidebar">
+        {include file="user/component/sidebar" /}
+    </div>
+
+    <div class="profile-main">
+        <div class="content-area">
+            <!-- 个人资料 -->
+            <div id="profile-basic" class="content-section active">
+                {include file="user/component/basic" /}
+            </div>
+
+            <!-- 修改头像 -->
+            <div id="profile-avatar" class="content-section">
+                {include file="user/component/avatar" /}
+            </div>
+
+            <!-- 修改密码 -->
+            <div id="profile-password" class="content-section">
+                {include file="user/component/password" /}
+            </div>
+
+            <!-- 我的消息 -->
+            <div id="profile-messages" class="content-section">
+                {include file="user/component/messages" /}
+            </div>
+
+            <!-- 系统通知 -->
+            <div id="profile-notifications" class="content-section">
+                {include file="user/component/notifications" /}
+            </div>
+
+            <!-- 基本设置 -->
+            <div id="profile-settings" class="content-section">
+                {include file="user/component/settings" /}
+            </div>
+
+            <!-- 安全设置 -->
+            <div id="profile-security" class="content-section">
+                {include file="user/component/security" /}
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .profile-container {
+        display: flex;
+        max-width: 1200px;
+        margin: 40px auto;
+        gap: 24px;
+        padding: 0 20px;
+    }
+
+    .profile-sidebar {
+        width: 260px;
+        flex-shrink: 0;
+    }
+
+    .profile-main {
+        flex: 1;
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+        padding: 32px;
+    }
+
+    .content-section {
+        display: none;
+    }
+
+    .content-section.active {
+        display: block;
+    }
+
+    /* 响应式适配 */
+    @media (max-width: 768px) {
+        .profile-container {
+            flex-direction: column;
+            margin: 20px auto;
+        }
+
+        .profile-sidebar {
+            width: 100%;
+        }
+
+        .profile-main {
+            padding: 20px;
+        }
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const menuItems = document.querySelectorAll('.menu-item');
+
+        menuItems.forEach(item => {
+            item.addEventListener('click', function () {
+                const target = this.getAttribute('data-target');
+
+                // 移除所有active类
+                document.querySelectorAll('.menu-item').forEach(menuItem => {
+                    menuItem.classList.remove('active');
+                });
+                document.querySelectorAll('.content-section').forEach(section => {
+                    section.classList.remove('active');
+                });
+
+                // 添加active类
+                this.classList.add('active');
+                document.getElementById(target).classList.add('active');
+            });
+        });
+    });
+</script>
+
+{include file="component/foot" /}