更新前端个人中心

2025-06-05 17:06:39 +08:00
parent d4017014f5
commit e1e51c8c6f
9 changed files with 2640 additions and 564 deletions
@@ -0,0 +1,86 @@
+<div class="basic-info">
+    <div class="layui-tab">
+        <ul class="layui-tab-title">
+            <li class="layui-this">积分</li>
+            <li>云币</li>
+        </ul>
+        <div class="layui-tab-content">
+            <div class="layui-tab-item layui-show">
+                <p>您当前的积分余额：<span id="points-balance">0</span></p>
+            </div>
+            <div class="layui-tab-item">
+                <p>您当前的云币余额：<span id="cloud-coins-balance">0</span></p>
+                <p>云币是真钱充值后获得的平台币。</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    layui.use(['element'], function () {
+        var element = layui.element;
+    });
+</script>
+<script>
+    // JavaScript 部分，处理 tab 切换
+    const tabs = document.querySelectorAll('.tab');
+    const contents = document.querySelectorAll('.content-item');
+
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            // 移除所有 tab 的 active 类
+            tabs.forEach(t => t.classList.remove('active'));
+            // 给当前点击的 tab 添加 active 类
+            tab.classList.add('active');
+
+            const target = tab.dataset.target;
+            // 隐藏所有内容项
+            contents.forEach(content => {
+                content.classList.remove('active');
+                if (content.id === target) {
+                    content.classList.add('active');
+                }
+            });
+        });
+    });
+</script>
+
+
+<style>
+    /* 样式部分 */
+    .tab-container {
+        display: flex;
+        border-bottom: 1px solid #ccc;
+    }
+
+    .tab {
+        padding: 10px 20px;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-bottom: none;
+    }
+
+    .tab.active {
+        border-color: #ccc;
+        border-bottom: 1px solid white;
+        margin-bottom: -1px;
+    }
+
+    .tab-content {
+        padding: 20px;
+        border: 1px solid #ccc;
+        border-top: none;
+    }
+
+    .content-item {
+        display: none;
+    }
+
+    .content-item.active {
+        display: block;
+    }
+
+    .layui-unselect.layui-tab-bar {
+        display: none;
+    }
+</style>