86 lines
2.1 KiB
PHP
86 lines
2.1 KiB
PHP
<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> |