子比公益寻亲页面，助力每个寻亲的家庭

将代码保存为missing-kids.php，然后上传到此目录：/wp-content/themes/zibll/pages

<?php
/**
 * Template Name: 公益寻亲页面
 * Description: 展示宝贝回家失踪儿童信息
 */

get_header();
?>

<style>
/* 公益寻亲页面样式 */
.missing-kids-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border-radius: 16px;
    margin-bottom: 30px;
    color: #fff;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.page-header p {
    font-size: 1.1rem;
    opacity: 0.95;
}

/* 加载动画 */
.loading-container {
    text-align: center;
    padding: 60px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ff6b6b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 信息卡片 */
.kid-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

.kid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.kid-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background: #f5f5f5;
}

.kid-info {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.kid-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

.kid-sex {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.kid-sex.male {
    background: #e3f2fd;
    color: #1976d2;
}

.kid-sex.female {
    background: #fce4ec;
    color: #c2185b;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 4px;
}

.info-value {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

.kid-feature {
    background: #fff8e1;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #666;
}

.kid-contact {
    background: #e8f5e9;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #4caf50;
    margin-bottom: 15px;
}

.contact-label {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 4px;
}

.contact-phone {
    font-size: 1.2rem;
    color: #2e7d32;
    font-weight: 700;
    letter-spacing: 1px;
}

.kid-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-source, .btn-share {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-source {
    background: #ff6b6b;
    color: #fff;
}

.btn-source:hover {
    background: #ee5a24;
    color: #fff;
}

.btn-share {
    background: #f5f5f5;
    color: #666;
    border: 2px solid #e0e0e0;
    cursor: pointer;
}

.btn-share:hover {
    background: #e0e0e0;
}

/* 统计信息 */
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #ff6b6b;
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

/* 刷新按钮 */
.refresh-section {
    text-align: center;
    margin-bottom: 30px;
}

.btn-refresh {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-refresh:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.btn-refresh:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 错误提示 */
.error-message {
    text-align: center;
    padding: 40px;
    background: #ffebee;
    border-radius: 12px;
    color: #c62828;
}

/* 响应式 */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-bar {
        flex-direction: column;
        gap: 20px;
    }
    
    .page-header h1 {
        font-size: 1.8rem;
    }
}
</style>

<div class="missing-kids-page">
    <!-- 页面头部 -->
    <div class="page-header">
        <h1>🕯️ 公益寻亲</h1>
        <p>每一个失踪的孩子背后，都是一个破碎的家庭。让我们携手助力宝贝回家。</p>
    </div>

    <!-- 统计信息 -->
    <div class="stats-bar" id="statsBar" style="display: none;">
        <div class="stat-item">
            <span class="stat-number" id="missingDays">0</span>
            <div class="stat-label">已失踪天数</div>
        </div>
        <div class="stat-item">
            <span class="stat-number" id="currentAge">0</span>
            <div class="stat-label">现在年龄（岁）</div>
        </div>
        <div class="stat-item">
            <span class="stat-number" id="bornDate">--</span>
            <div class="stat-label">出生日期</div>
        </div>
    </div>

    <!-- 刷新按钮 -->
    <div class="refresh-section">
        <button class="btn-refresh" id="refreshBtn" onclick="loadKidData()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="23 4 23 10 17 10"></polyline>
                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
            </svg>
            换一位寻亲信息
        </button>
    </div>

    <!-- 加载容器 -->
    <div id="contentContainer">
        <div class="loading-container">
            <div class="spinner"></div>
            <p>正在加载寻亲信息...</p>
        </div>
    </div>
</div>

<script>
// 加载寻亲数据
async function loadKidData() {
    const container = document.getElementById('contentContainer');
    const refreshBtn = document.getElementById('refreshBtn');
    const statsBar = document.getElementById('statsBar');
    
    // 显示加载状态
    container.innerHTML = `
        <div class="loading-container">
            <div class="spinner"></div>
            <p>正在加载寻亲信息...</p>
        </div>
    `;
    refreshBtn.disabled = true;
    
    try {
        // 添加随机参数防止缓存
        const response = await fetch('https://apis.uctb.cn/api/babyHome?t=' + Date.now(), {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
            }
        });
        
        if (!response.ok) {
            throw new Error('网络请求失败');
        }
        
        const result = await response.json();
        
        if (result.code !== 200 || !result.data) {
            throw new Error(result.message || '数据获取失败');
        }
        
        const data = result.data;
        
        // 更新统计栏
        statsBar.style.display = 'flex';
        document.getElementById('missingDays').textContent = data.missing_days || '--';
        document.getElementById('currentAge').textContent = data.now_age || '--';
        document.getElementById('bornDate').textContent = data.born_date || '--';
        
        // 渲染卡片
        container.innerHTML = renderKidCard(data);
        
    } catch (error) {
        container.innerHTML = `
            <div class="error-message">
                <h3>⚠️ 加载失败</h3>
                <p>${error.message}</p>
                <button onclick="loadKidData()" style="margin-top: 15px; padding: 10px 25px; background: #ff6b6b; color: #fff; border: none; border-radius: 20px; cursor: pointer;">重新加载</button>
            </div>
        `;
        statsBar.style.display = 'none';
    } finally {
        refreshBtn.disabled = false;
    }
}

// 渲染寻亲卡片
function renderKidCard(data) {
    const sexClass = data.sex === '男' ? 'male' : 'female';
    const sexText = data.sex === '男' ? '男孩' : '女孩';
    
    return `
        <div class="kid-card">
            <img src="${data.photo || '/wp-content/themes/zibll/img/thumbnail-lg.svg'}" 
                 alt="${data.name}" 
                 class="kid-image"
                 onerror="this.src='/wp-content/themes/zibll/img/thumbnail-lg.svg'">
            
            <div class="kid-info">
                <div class="kid-header">
                    <h2 class="kid-name">${data.name}</h2>
                    <span class="kid-sex ${sexClass}">${sexText}</span>
                </div>
                
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">失踪时间</span>
                        <span class="info-value">${data.missing_date || '未知'}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">失踪地点</span>
                        <span class="info-value">${data.missing_address || '未知'}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">身高</span>
                        <span class="info-value">${data.height || '未知'}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">失踪时年龄</span>
                        <span class="info-value">${calculateAge(data.born_date, data.missing_date)}岁</span>
                    </div>
                </div>
                
                <div class="kid-feature">
                    <strong>特征描述：</strong>${data.missing_feature || '暂无特征描述'}
                </div>
                
                <div class="kid-contact">
                    <div class="contact-label">如有线索，请联系：</div>
                    <div class="contact-phone">${data.contact || '0435-3338090'}</div>
                </div>
                
                <div class="kid-actions">
                    <a href="${data.source_url}" target="_blank" class="btn-source">查看原始信息</a>
                    <button class="btn-share" onclick="shareInfo('${data.name}', '${data.missing_address}')">
                        扩散信息
                    </button>
                </div>
            </div>
        </div>
    `;
}

// 计算失踪时年龄
function calculateAge(bornDate, missingDate) {
    if (!bornDate || !missingDate) return '--';
    try {
        const born = new Date(bornDate);
        const missing = new Date(missingDate);
        const age = missing.getFullYear() - born.getFullYear();
        return age > 0 ? age : 1;
    } catch (e) {
        return '--';
    }
}

// 分享功能
function shareInfo(name, address) {
    const text = `【紧急寻亲】${name}在${address}附近失踪，如有线索请联系宝贝回家！让我们一起帮助宝贝回家！`;
    
    if (navigator.share) {
        navigator.share({
            title: '公益寻亲 - 宝贝回家',
            text: text,
            url: window.location.href
        }).catch(err => console.log('分享失败', err));
    } else {
        // 复制到剪贴板
        navigator.clipboard.writeText(text).then(() => {
            alert('寻亲信息已复制到剪贴板，请分享到朋友圈或微信群！');
        }).catch(() => {
            alert('请手动复制并分享：\n' + text);
        });
    }
}

// 页面加载时自动获取数据
document.addEventListener('DOMContentLoaded', loadKidData);
</script>

<?php get_footer(); ?>