子比主题修复版显示网站数据信息

安装教程：
1.子比主题后台-外观-小工具-自定义hmtl(在首页主内容上面）增加以下代码
2.代码此处更换成自已绑定的域名
3.在网站根目录增加api目录，上传下载的文件到此目录

<section class="cards pcbdmapss">
    <div class="cardhu card--oil">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
               <img src="https://www.dh139.cn/api/img/20240415221350248-用户.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><strong id="tj_jstext">0</strong>人</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">会员总数</div>
        </div>
    </div>


    <div class="cardhu card--tree">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.dh139.cn/api/img/20240415221347579-包裹.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_rzzs">0</span>个</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">资源总量</div>
        </div>
    </div>


    <div class="cardhu card--water">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.dh139.cn/api/img/20240415221343243-旅游.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_wdyx">0</span>天</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">运营天数</div>
        </div>
    </div>


    <div class="cardhu card--oil1">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.dh139.cn/api/img/20240415221341707-标签.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_24h">0</span>个</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">今日发布</div>
        </div>
    </div>


    <div class="cardhu card--tree2">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="https://www.dh139.cn/api/img/20240415221345126-奖杯.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><span id="tj_view">0</span>人</span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">访问人数</div>
        </div>
    </div>


    <div class="cardhu card--water3">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img style="animation:fa-spin 10s linear infinite;" src="https://www.dh139.cn/api/img/20240507093426247-%E6%99%B4%E5%A4%A9.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><p id="ptime">00:00:00</p></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-text">系统时间</div>
        </div>
    </div>
</section>


<style>
/* 统计卡片整体布局 */
.cards.pcbdmapss {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    flex-wrap: wrap;
    box-sizing: border-box;
}


/* 卡片基础样式 */
.cardhu {
    flex: 1;
    min-width: 160px;
    height: 90px !important;
    background: #ffffff;
    border-radius: 8px;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: initial;
    gap: 4px;
    box-sizing: border-box;
}


/* 卡片底部渐变装饰条 */
.cardhu::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 0 0 8px 8px;
}


/* 标题上方彩色渐变横条 - 通用 */
.card__title-bar {
    height: 2px;
    width: 30px;
    border-radius: 1px;
    margin: 2px 0;
}


/* 会员总数 - 黄色渐变 */
.card--oil .card__title-bar {
    background: linear-gradient(90deg, #FFD166, #FFB74D);
}
.card--oil::after {
    background: linear-gradient(90deg, #FFD166, #FFB74D);
}


/* 资源总量 - 橙红渐变 */
.card--tree .card__title-bar {
    background: linear-gradient(90deg, #FF9E80, #FF6E6E);
}
.card--tree::after {
    background: linear-gradient(90deg, #FF9E80, #FF6E6E);
}


/* 运营天数 - 红色渐变 */
.card--water .card__title-bar {
    background: linear-gradient(90deg, #FF8A80, #F44336);
}
.card--water::after {
    background: linear-gradient(90deg, #FF8A80, #F44336);
}


/* 今日发布 - 蓝色渐变 */
.card--oil1 .card__title-bar {
    background: linear-gradient(90deg, #81D4FA, #4FC3F7);
}
.card--oil1::after {
    background: linear-gradient(90deg, #81D4FA, #4FC3F7);
}


/* 访问人数 - 橙黄渐变 */
.card--tree2 .card__title-bar {
    background: linear-gradient(90deg, #FFCC80, #FFB74D);
}
.card--tree2::after {
    background: linear-gradient(90deg, #FFCC80, #FFB74D);
}


/* 系统时间 - 亮黄渐变 */
.card--water3 .card__title-bar {
    background: linear-gradient(90deg, #FFF176, #FFEB3B);
}
.card--water3::after {
    background: linear-gradient(90deg, #FFF176, #FFEB3B);
}


/* 图标容器 */
.card__svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 去掉圆形背景、无边框无底色 */
.card__svg-wrapper {
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}


/* 图标大小 28*25px */
.card__svg-wrapper img {
    width: 28px;
    height: 25px;
    object-fit: contain;
}


/* 数字统计容器 */
.card__count-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 数字文字样式 */
.card__count-text {
    line-height: 1.1;
}


.card__count-text--big {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.1;
}


/* 系统时间特殊样式 */
#ptime {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.1;
}


/* 底部标题容器 */
.card__stuff-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 底部标题文字 */
.card__stuff-text {
    font-size: 12px;
    color: #999;
}


/* 图标旋转动画 */
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* 响应式适配 - 平板 */
@media (max-width: 768px) {
    .cardhu {
        flex: 0 0 calc(50% - 8px);
    }
}


/* 响应式适配 - 手机 */
@media (max-width: 480px) {
    .cardhu {
        flex: 0 0 100%;
    }
}
</style>


<script>
// 数据变量
var tj_jstext = 0, tj_rzzs = 0, tj_wdyx = 100, tj_24h = 0, tj_view = 0;
const API_URL = "https://www.dh139.cn/api/stats.php";


// 渲染数据
function renderStats(){
    document.getElementById("tj_jstext").textContent = tj_jstext || 0;
    document.getElementById("tj_rzzs").textContent = tj_rzzs || 0;
    document.getElementById("tj_wdyx").textContent = tj_wdyx || 0;
    document.getElementById("tj_24h").textContent = tj_24h || 0;
    document.getElementById("tj_view").textContent = tj_view || 0;
}


// 获取数据
async function fetchStats(){
    try{
        let res = await fetch(API_URL);
        let result = await res.json();
        if(result.code === 200){
            tj_jstext = result.data.tj_jstext;
            tj_rzzs = result.data.tj_rzzs;
            // tj_wdyx = result.data.tj_wdyx;
            tj_24h = result.data.tj_24h;
            tj_view = result.data.tj_view;
            renderStats();
        }
    }catch(e){}
}


// 实时时间
function updateTime(){
    let d = new Date();
    let h = String(d.getHours()).padStart(2,0);
    let m = String(d.getMinutes()).padStart(2,0);
    let s = String(d.getSeconds()).padStart(2,0);
    document.getElementById("ptime").textContent = `${h}:${m}:${s}`;
}


// 初始化
document.addEventListener("DOMContentLoaded",function(){
    updateTime();
    fetchStats();
    setInterval(updateTime,1000);
    setInterval(fetchStats,60000);
});
</script>