    <!-- 新增：详情弹窗结构 -->
    <div id="detailModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2 id="detailTitle"></h2>
            <div class="detail-meta" id="detailMeta"></div>
            <div class="content" id="detailContent"></div>
        </div>
    </div>
</main>
<script src="scripts.js"></script>

` `document.addEventListener('DOMContentLoaded', function() { let currentPage = 0; const pageSize = 10;

// 初始化加载第一页数据
loadPolicies({}, currentPage);

// 查询按钮点击事件
document.getElementById('searchBtn').addEventListener('click', function() {
    currentPage = 0; // 重置到第一页

    const searchParams = {
        name: document.getElementById('nameKeyword').value,
        text: document.getElementById('textKeyword').value,
        organ: document.getElementById('organKeyword').value,
        type: document.getElementById('typeSelect').value,
        document: document.getElementById('documentKeyword').value
    };

    loadPolicies(searchParams, currentPage);
});

// 加载政策列表
function loadPolicies(params, page) {
    const urlParams = new URLSearchParams({
        page: page,
        size: pageSize
    });

    // 添加查询参数
    if (params.name) urlParams.append('name', params.name);
    if (params.text) urlParams.append('text', params.text);
    if (params.organ) urlParams.append('organ', params.organ);
    if (params.type) urlParams.append('type', params.type);
    if (params.document) urlParams.append('document', params.document);

    fetch(`/api/policy/search?${urlParams.toString()}`)
        .then(response => response.json())
        .then(data => {
            displayPolicies(data.content);
            setupPagination(data.totalPages, page);
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('policyList').innerHTML =
                '<div class="error">加载失败，请稍后再试</div>';
        });
}

// 显示政策列表
function displayPolicies(policies) {
    const container = document.getElementById('policyList');
    container.innerHTML = '';

    if (policies.length === 0) {
        container.innerHTML = '<div class="no-data">没有找到符合条件的政策</div>';
        return;
    }

    policies.forEach(policy => {
        const item = document.createElement('div');
        item.className = 'policy-item';
        item.onclick = () => showDetail(policy.id);
        item.innerHTML = `
            <h3>${policy.name || '未命名政策'}</h3>
            <p class="meta">
                发文机构：${policy.organ || '未知'} | 
                文号：${policy.document || '无'} | 
                分类：${policy.type || '未分类'}
            </p>
        `;
        container.appendChild(item);
    });
}

// 设置分页
function setupPagination(totalPages, currentPage) {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';

    // 上一页按钮
    if (currentPage > 0) {
        const prevBtn = document.createElement('button');
        prevBtn.innerHTML = '&laquo; 上一页';
        prevBtn.addEventListener('click', () => {
            loadPolicies(getCurrentSearchParams(), currentPage - 1);
        });
        pagination.appendChild(prevBtn);
    }

    // 页码按钮
    for (let i = 0; i < totalPages; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.innerText = i + 1;
        pageBtn.className = i === currentPage ? 'active' : '';
        pageBtn.addEventListener('click', () => {
            loadPolicies(getCurrentSearchParams(), i);
        });
        pagination.appendChild(pageBtn);
    }

    // 下一页按钮
    if (currentPage < totalPages - 1) {
        const nextBtn = document.createElement('button');
        nextBtn.innerHTML = '下一页 &raquo;';
        nextBtn.addEventListener('click', () => {
            loadPolicies(getCurrentSearchParams(), currentPage + 1);
        });
        pagination.appendChild(nextBtn);
    }
}

// 获取当前搜索条件
function getCurrentSearchParams() {
    return {
        name: document.getElementById('nameKeyword').value,
        text: document.getElementById('textKeyword').value,
        organ: document.getElementById('organKeyword').value,
        type: document.getElementById('typeSelect').value,
        document: document.getElementById('documentKeyword').value
    };
}

// 显示详情弹窗（保持不变）
function showDetail(id) {
    fetch(`/api/policy/detail/${id}`)
        .then(response => response.json())
        .then(policy => {
            document.getElementById('detailTitle').textContent = policy.name;
            document.getElementById('detailMeta').innerHTML = `
                发文机构：${policy.organ || '未知'}<br>
                文号：${policy.document || '无'}<br>
                分类：${policy.type || '未分类'}<br>
                发布日期：${policy.pubdata ? new Date(policy.pubdata).toLocaleDateString() : '未公布'}
            `;
            document.getElementById('detailContent').textContent = policy.text || '暂无详细内容';
            document.getElementById('detailModal').style.display = 'block';
        });
}

// 关闭弹窗（保持不变）
window.closeModal = function() {
    document.getElementById('detailModal').style.display = 'none';
};

});
/* 导航栏样式 /
nav ul {
list-style-type: none;
padding: 0;
display: flex; / 使用 Flexbox 布局 /
justify-content: space-between; / 水平均匀分布 */
}

nav ul li {
margin: 0 10px; /* 调整项目之间的间距 */
}

nav ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
}
/* 政策列表样式 */
.policy-list {
display: grid;
gap: 15px;
}

.policy-item {
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}

.policy-item:hover {
background-color: #f5f5f5;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.policy-item h3 {
margin: 0 0 8px 0;
color: #333;
}

.policy-item .meta {
margin: 0;
color: #666;
font-size: 14px;
}

/* 详情弹窗样式 */
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}

.modal-content {
background-color: #fff;
margin: 5% auto;
padding: 20px;
width: 70%;
max-width: 800px;
border-radius: 5px;
}

.close {
float: right;
font-size: 24px;
cursor: pointer;
}

.detail-meta {
color: #666;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
}

.search-filter {
background: #f5f5f5;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}

.search-row {
display: flex;
margin-bottom: 10px;
}

.search-item {
flex: 1;
margin-right: 15px;
}

.search-item:last-child {
margin-right: 0;
}

.search-item label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.search-item input, .search-item select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

searchBtn {

padding: 8px 20px;
background: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;

}

searchBtn:hover {

background: #40a9ff;

}

.pagination {
margin-top: 20px;
text-align: center;
}

.pagination button {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ddd;
background: white;
cursor: pointer;
}

.pagination button.active {
background: #1890ff;
color: white;
border-color: #1890ff;
}

.error, .no-data {
padding: 20px;
text-align: center;
color: #f5222d;
}

/* 详情弹窗样式保持不变 */

body {
font-family: Arial, sans-serif;
}

header {
background-color: #007bff;
color: white;
padding: 10px;
}

.search-bar {
margin-top: 10px;
}

aside {
width: 200px;
float: left;
padding: 10px;
}

section {
margin-left: 220px;
padding: 10px;
}

.policy-item {
margin-bottom: 10px;
}

.search-filter {
margin-bottom: 10px;
}
`

ytrkkaa

科技一点通前端页面

科技政策一点通

searchBtn {

searchBtn:hover {

公告