赞助会员

数据加载中...

<style> .grid-container {

 display: grid;
 grid-template-columns: repeat(
   auto-fill,
   minmax(100px, 1fr)
 ); /* 自动填充网格列，每列最小200px，最大1fr */
 gap: 20px; /* 设置网格项之间的间距 */
 /* padding: 20px; */
 margin-bottom: 1em;

}

.card {

 display: flex;
 flex-direction: column; /* 设置项目垂直排列 */
 align-items: center; /* 水平居中对齐项目 */
 background: #f9f9f9; /* 浅灰色背景 */
 border-radius: 10px; /* 圆角 */
 padding: 15px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 盒子阴影 */

}

.avatar {

 width: 60px; /* 头像宽度 */
 height: 60px; /* 头像高度 */
 border-radius: 50%; /* 圆形头像 */
 margin-bottom: 10px; /* 头像与下面文本的间距 */

}

.info {

 text-align: center; /* 文本居中 */
 width: 100%;

}

.name {

 font-size: 16px; /* 字体大小 */
 color: #333; /* 字体颜色 */
 margin-bottom: 5px; /* 与金额间距 */
 word-wrap: break-word;

}

.amount {

 font-size: 14px;
 color: #666;

}

.jiazai {

   min-height: 101vh;

} </style>

<script> // 等待页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() {

 const container = document.getElementById('contributor-container');
 
 // 发起请求（和原 React 代码的 /afd.php 接口一致）
 fetch('/afd.php')
   .then(response => {
     if (!response.ok) throw new Error('接口请求失败');
     return response.json();
   })
   .then(data => {
     if (data.length === 0) {

container.innerHTML = '

暂无贡献伙伴数据~

';

       return;
     }

     // 渲染贡献伙伴列表

let html = '

';

     data.forEach((sponsor, index) => {
       // 避免空头像/空名称导致的显示异常
       const avatarSrc = sponsor.avatar || 'https://via.placeholder.com/80'; // 占位图
       const sponsorName = sponsor.name || '匿名伙伴';
       
       html += `

           <img src="${avatarSrc}" alt="${sponsorName}" class="avatar" />

${sponsorName}

       `;
     });

html += '

';

     container.innerHTML = html;
   })
   .catch(error => {
     console.error('加载失败:', error);

container.innerHTML = '

数据加载失败，请稍后重试~

';

   });

}); </script>