提交mvcar页面
This commit is contained in:
parent
505ea6f365
commit
5e8ea8558a
|
|
@ -0,0 +1,180 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #4a6cf7, #6a82fb);
|
||||
color: white;
|
||||
padding: 25px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
opacity: 0.9;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #f8f9ff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
border-left: 4px solid #4a6cf7;
|
||||
}
|
||||
|
||||
.info-card h2 {
|
||||
color: #4a6cf7;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-card h2 i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 15px 0;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.call-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #4a6cf7;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.call-button i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.call-button:hover {
|
||||
background: #3a5ce5;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(74, 108, 247, 0.4);
|
||||
}
|
||||
|
||||
.car-info {
|
||||
background: #f8f9ff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.car-info h3 {
|
||||
color: #4a6cf7;
|
||||
margin-bottom: 15px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.car-info p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
margin-top: 30px;
|
||||
background: #f8f9ff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.instructions h3 {
|
||||
color: #4a6cf7;
|
||||
margin-bottom: 15px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.instructions ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.instructions li {
|
||||
margin-bottom: 12px;
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.instructions li:before {
|
||||
content: "•";
|
||||
color: #4a6cf7;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #4a6cf7, #6a82fb);
|
||||
color: white;
|
||||
padding: 25px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
opacity: 0.9;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-section h2 {
|
||||
color: #4a6cf7;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.license-input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 2px solid #e1e5f0;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.license-input:focus {
|
||||
border-color: #4a6cf7;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 100%;
|
||||
background: #4a6cf7;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3);
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #3a5ce5;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(74, 108, 247, 0.4);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #e74c3c;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background-color: #fdf2f2;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>挪车电话查询</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>挪车电话查询</h1>
|
||||
<p>请输入车牌号码查询车主联系方式</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="search-section">
|
||||
<h2>车牌号码查询</h2>
|
||||
<div class="input-group">
|
||||
<input type="text" class="license-input" id="licensePlate" placeholder="请输入车牌号码，例如：粤A12345">
|
||||
</div>
|
||||
<button class="search-button" id="searchButton">查询</button>
|
||||
<div class="error-message" id="errorMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>挪车电话服务 © kiki.kim</p>
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
[
|
||||
{
|
||||
"plate": "京B67890",
|
||||
"phone": "131-2222-2222",
|
||||
"brand": "本田雅阁"
|
||||
},
|
||||
{
|
||||
"plate": "沪C11111",
|
||||
"phone": "132-3333-3333",
|
||||
"brand": "大众帕萨特"
|
||||
},
|
||||
{
|
||||
"plate": "浙D22222",
|
||||
"phone": "133-4444-4444",
|
||||
"brand": "奔驰E级"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const phoneNumberElement = document.getElementById('phoneNumber');
|
||||
const plateNumberElement = document.getElementById('plateNumber');
|
||||
const carBrandElement = document.getElementById('carBrand');
|
||||
const callButton = document.getElementById('callButton');
|
||||
|
||||
// 从 sessionStorage 获取车辆信息
|
||||
const carInfoJson = sessionStorage.getItem('carInfo');
|
||||
|
||||
if (carInfoJson) {
|
||||
const carInfo = JSON.parse(carInfoJson);
|
||||
|
||||
// 显示车辆信息
|
||||
phoneNumberElement.textContent = carInfo.phone;
|
||||
plateNumberElement.textContent = carInfo.plate;
|
||||
carBrandElement.textContent = carInfo.brand;
|
||||
|
||||
// 设置拨号链接
|
||||
callButton.href = 'tel:' + carInfo.phone.replace(/-/g, '');
|
||||
} else {
|
||||
// 如果没有车辆信息，返回搜索页面
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const searchButton = document.getElementById('searchButton');
|
||||
const licensePlateInput = document.getElementById('licensePlate');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
|
||||
// 从JSON文件获取车辆数据库
|
||||
let carDatabase = [];
|
||||
let isDataLoaded = false;
|
||||
|
||||
// 加载车辆数据
|
||||
fetch('js/cars.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
carDatabase = data;
|
||||
isDataLoaded = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('加载车辆数据失败:', error);
|
||||
showError('无法加载车辆数据库');
|
||||
});
|
||||
|
||||
searchButton.addEventListener('click', function() {
|
||||
const plate = licensePlateInput.value.trim();
|
||||
|
||||
if (!plate) {
|
||||
showError('请输入车牌号码');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查数据是否已加载
|
||||
if (!isDataLoaded) {
|
||||
showError('数据加载中，请稍后再试...');
|
||||
return;
|
||||
}
|
||||
|
||||
// 在数据库中查找车牌（支持模糊匹配）
|
||||
const carInfo = carDatabase.find(car => car.plate.includes(plate));
|
||||
|
||||
if (carInfo) {
|
||||
// 将车辆信息存储到 sessionStorage
|
||||
sessionStorage.setItem('carInfo', JSON.stringify(carInfo));
|
||||
// 跳转到结果页面
|
||||
window.location.href = 'result.html';
|
||||
} else {
|
||||
showError('没有找到该车牌号码对应的车主信息');
|
||||
}
|
||||
});
|
||||
|
||||
// 回车键触发搜索
|
||||
licensePlateInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
searchButton.click();
|
||||
}
|
||||
});
|
||||
|
||||
function showError(message) {
|
||||
errorMessage.textContent = message;
|
||||
errorMessage.style.display = 'block';
|
||||
|
||||
// 3秒后隐藏错误信息
|
||||
setTimeout(() => {
|
||||
errorMessage.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>挪车电话</title>
|
||||
<link rel="stylesheet" href="css/result.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>挪车电话</h1>
|
||||
<p>如需挪车，请直接拨打下方电话</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="info-card">
|
||||
<h2><i>📞</i> 车主联系电话</h2>
|
||||
<p>如需挪车，请拨打下方电话联系车主</p>
|
||||
<div class="phone-number" id="phoneNumber">加载中...</div>
|
||||
<a href="#" class="call-button" id="callButton">
|
||||
<i>☎</i> 一键拨号
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="car-info">
|
||||
<h3>车辆信息</h3>
|
||||
<p>车牌号码: <span id="plateNumber">加载中...</span></p>
|
||||
<p>车辆品牌: <span id="carBrand">加载中...</span></p>
|
||||
</div>
|
||||
|
||||
<div class="instructions">
|
||||
<h3>使用说明</h3>
|
||||
<ul>
|
||||
<li>点击"一键拨号"按钮可直接拨打车主电话</li>
|
||||
<li>如遇电话无法接通，请稍后再试</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>挪车电话服务 © kiki.kim</p>
|
||||
</div>
|
||||
|
||||
<script src="js/result.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue