|
|
| 第1行： |
第1行： |
| <div id="contributor-container">
| | {{widget:afd}} |
| <div class="jiazai">数据加载中...</div>
| |
| </div>
| |
| | |
| <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 = '<div class="jiazai">暂无贡献伙伴数据~</div>';
| |
| return;
| |
| }
| |
| | |
| // 渲染贡献伙伴列表
| |
| let html = '<div class="grid-container">';
| |
| data.forEach((sponsor, index) => {
| |
| // 避免空头像/空名称导致的显示异常
| |
| const avatarSrc = sponsor.avatar || 'https://via.placeholder.com/80'; // 占位图
| |
| const sponsorName = sponsor.name || '匿名伙伴';
| |
|
| |
| html += `
| |
| <div class="card" key="${index}">
| |
| <img src="${avatarSrc}" alt="${sponsorName}" class="avatar" />
| |
| <div class="info">
| |
| <div class="name">${sponsorName}</div>
| |
| <!-- 如需显示金额，取消下面注释： -->
| |
| <!-- <div class="amount">￥${sponsor.amount || '0'}</div> -->
| |
| </div>
| |
| </div>
| |
| `;
| |
| });
| |
| html += '</div>';
| |
|
| |
| container.innerHTML = html;
| |
| })
| |
| .catch(error => {
| |
| console.error('加载失败:', error);
| |
| container.innerHTML = '<div class="jiazai">数据加载失败，请稍后重试~</div>';
| |
| });
| |
| }); | |
| </script>
| |
