更新个人中心

app/index/view/user/profile.php

@@ -3,7 +3,28 @@
 
 <div class="profile-container">
     <div class="profile-sidebar">
-        {include file="user/component/sidebar" /}
+        <div class="menu">
+            <div class="menu-item active" data-target="profile-basic">
+                <i class="layui-icon layui-icon-user"></i>
+                <span>基本资料</span>
+            </div>
+            <div class="menu-item" data-target="profile-wallet">
+                <i class="layui-icon layui-icon-wallet"></i>
+                <span>我的钱包</span>
+            </div>
+            <div class="menu-item" data-target="profile-messages">
+                <i class="layui-icon layui-icon-message"></i>
+                <span>我的消息</span>
+            </div>
+            <div class="menu-item" data-target="profile-notifications">
+                <i class="layui-icon layui-icon-notice"></i>
+                <span>系统通知</span>
+            </div>
+            <div class="menu-item" data-target="profile-security">
+                <i class="layui-icon layui-icon-password"></i>
+                <span>安全设置</span>
+            </div>
+        </div>
     </div>
 
     <div class="profile-main">
@@ -50,6 +71,38 @@
         flex-shrink: 0;
     }
 
+    .menu {
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+        padding: 16px 0;
+    }
+
+    .menu-item {
+        padding: 16px 24px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        color: #666;
+        transition: all 0.3s;
+    }
+
+    .menu-item:hover {
+        color: #1677ff;
+        background: #f5f5f5;
+    }
+
+    .menu-item.active {
+        color: #1677ff;
+        background: #e6f4ff;
+        border-right: 3px solid #1677ff;
+    }
+
+    .menu-item .layui-icon {
+        font-size: 18px;
+    }
+
     .profile-main {
         flex: 1;
         background: #fff;
@@ -77,6 +130,23 @@
             width: 100%;
         }
 
+        .menu {
+            display: flex;
+            overflow-x: auto;
+            padding: 8px;
+        }
+
+        .menu-item {
+            flex-shrink: 0;
+            border-right: none;
+            border-bottom: 3px solid transparent;
+        }
+
+        .menu-item.active {
+            border-right: none;
+            border-bottom: 3px solid #1677ff;
+        }
+
         .profile-main {
             padding: 20px;
         }
@@ -84,27 +154,22 @@
 </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');
-            });
-        });
+layui.use(['jquery'], function(){
+    var $ = layui.jquery;
+    
+    // 菜单切换
+    $('.menu-item').on('click', function(){
+        var target = $(this).data('target');
+        
+        // 移除所有active类
+        $('.menu-item').removeClass('active');
+        $('.content-section').removeClass('active');
+        
+        // 添加active类
+        $(this).addClass('active');
+        $('#' + target).addClass('active');
     });
+});
 </script>
 
 {include file="component/foot" /}