body {
fontfamily: Arial, sansserif;
margin: 0;
padding: 20px;
}
h1 {
textalign: center;
marginbottom: 20px;
}
form {
width: 50%;
margin: 0 auto;
display: flex;
flexdirection: column;
}
label {
fontweight: bold;
marginbottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 5px;
marginbottom: 10px;
}
button {
padding: 10px 20px;
backgroundcolor: 4CAF50;
color: white;
border: none;
cursor: pointer;
}
.result {
margintop: 20px;
padding: 20px;
border: 1px solid ccc;
borderradius: 5px;
}
.footer {
textalign: center;
margintop: 10px;
}
document.getElementById('违章查询form').addEventListener('submit', async (e) => {
e.preventDefault();
const vehiclePlate = document.getElementById('vehiclePlate').value;
// 这里是模拟查询违章数据的逻辑,实际请使用相关API或服务
// 假设从后端获取数据
const违章数据 = {
// 假设违章信息
violations: [
{
date: '20220101',
violationType: '超速',
location: '某路段',
action: '罚款100元'
},
// ...
]
};
document.getElementById('result').innerHTML = `
${违章数据.violations.map((violation, index) => `
`).join('\n')}
`;
});