for (const item of jsonRes) { if (item.code === 'customerInfo') {} //客户信息展示 if (item.code === 'loan') { // 合同展示 const buttonContainer = document.createElement('div'); buttonContainer.innerHTM...-Go服务器开发

要修改这四个按钮的布局，可以通过 CSS 来调整它们的样式。你可以为 .button-container 或者每个按钮添加适当的样式，以实现你想要的布局效果。

以下是一个示例，假设你想将这些按钮水平排列，并给它们一些间距和背景颜色。你可以在创建 buttonContainer 时直接加入 CSS 样式：

const buttonContainer = document.createElement('div');
buttonContainer.style.display = 'flex'; // 使用flexbox进行布局
buttonContainer.style.justifyContent = 'space-around'; // 水平分散对齐
buttonContainer.style.marginTop = '20px'; // 顶部间距
// 为按钮设置一些样式
buttonContainer.innerHTML = `
    <div class="button-container">
        <button class="btn" data-action="action1">按钮1</button>
        <button class="btn" data-action="action2">按钮2</button>
        <button class="btn" data-action="action3">按钮3</button>
        <button class="btn" data-action="action4">按钮4</button>
    </div>
`;
document.body.appendChild(buttonContainer);
// 继续监听事件

其他CSS选项

如果需要更复杂的布局或响应式设计，你可能希望在 <style> 标签中或者单独的 CSS 文件中添加以下样式：

.button-container {
    display: flex; /* 使用Flexbox进行布局 */
    justify-content: space-around; /* 在主轴上均匀分配空间 */
    margin-top: 20px; /* 顶部间距 */
}
.btn {
    padding: 10px 20px; /* 内边距增加点击面积 */
    background-color: #007bff; /* 按钮背景色 */
    color: white; /* 字体颜色 */
    border: none; /* 去掉默认边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标指针形状变为手型 */
}
.btn:hover {
    background-color: #0056b3; /* 悬停状态下改变背景色 */
}