diff --git a/mvcar/css/result.css b/mvcar/css/result.css new file mode 100644 index 0000000..a77a219 --- /dev/null +++ b/mvcar/css/result.css @@ -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; + } +} \ No newline at end of file diff --git a/mvcar/css/style.css b/mvcar/css/style.css new file mode 100644 index 0000000..af0cd9d --- /dev/null +++ b/mvcar/css/style.css @@ -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; + } +} \ No newline at end of file diff --git a/mvcar/index.html b/mvcar/index.html new file mode 100644 index 0000000..48dedd4 --- /dev/null +++ b/mvcar/index.html @@ -0,0 +1,34 @@ + + + + + + 挪车电话查询 + + + +
+
+

挪车电话查询

+

请输入车牌号码查询车主联系方式

+
+ +
+
+

车牌号码查询

+
+ +
+ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/mvcar/js/cars.json b/mvcar/js/cars.json new file mode 100644 index 0000000..f3a2704 --- /dev/null +++ b/mvcar/js/cars.json @@ -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级" + } +] diff --git a/mvcar/js/result.js b/mvcar/js/result.js new file mode 100644 index 0000000..9066dcc --- /dev/null +++ b/mvcar/js/result.js @@ -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'; + } +}); \ No newline at end of file diff --git a/mvcar/js/script.js b/mvcar/js/script.js new file mode 100644 index 0000000..e74a784 --- /dev/null +++ b/mvcar/js/script.js @@ -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); + } +}); \ No newline at end of file diff --git a/mvcar/result.html b/mvcar/result.html new file mode 100644 index 0000000..7078c4f --- /dev/null +++ b/mvcar/result.html @@ -0,0 +1,48 @@ + + + + + + 挪车电话 + + + +
+
+

挪车电话

+

如需挪车,请直接拨打下方电话

+
+ +
+
+

📞 车主联系电话

+

如需挪车,请拨打下方电话联系车主

+
加载中...
+ + 一键拨号 + +
+ +
+

车辆信息

+

车牌号码: 加载中...

+

车辆品牌: 加载中...

+
+ +
+

使用说明

+
    +
  • 点击"一键拨号"按钮可直接拨打车主电话
  • +
  • 如遇电话无法接通,请稍后再试
  • +
+
+
+
+ + + + + + \ No newline at end of file