闲着没事写的一个单页方便查询一下当地和其他地区的油价
提供最新的油价数据，包括全国各地的 92 号、95 号、98 号汽油和 0 号柴油的价格
在线查询油价：http://qgyj.yqjxa.cn/
![图片[1]-全国油价查询系统（附源码）-软件聚-专注互联网技术分享](https://im.gurl.eu.org/file/AgACAgEAAxkDAAEBVxZpQ7ID2y6vFudkOGLVrfIdBvuGdQACmQtrG_nqGUY9kEj9B_300gEAAwIAA3cAAzYE.png)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>全国油价查询 - 实时油价查询工具</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome图标 -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind自定义配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1E88E5', // 主色调：蓝色
secondary: '#64B5F6', // 辅助色：浅蓝色
neutral: '#F5F7FA', // 中性色：浅灰
dark: '#263238', // 深色：深灰
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(30, 136, 229, 0.1), 0 8px 10px -6px rgba(30, 136, 229, 0.1);
}
.btn-hover {
transition: all 0.3s ease;
}
.btn-hover:hover {
transform: translateY(-2px);
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
.search-result-item:hover {
background-color: #F0F7FF;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* 移动端触控优化 */
.touch-friendly {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
}
</style>
<!-- 基础样式重置（适配移动端） -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 移动端输入框优化 */
input[type="text"] {
font-size: 16px; /* 避免iOS输入框缩放 */
}
/* 适配小屏手机 */
@media (max-width: 360px) {
.container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.card-shadow {
padding: 16px !important;
}
}
</style>
</head>
<body class="bg-neutral min-h-screen font-sans text-dark touch-friendly">
<!-- 顶部导航栏（极简设计，适配移动端） -->
<header class="bg-white shadow-md fixed w-full top-0 z-50 touch-friendly">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-gas-pump text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-dark">全国油价查询</h1>
</div>
</div>
</header>
<!-- 主内容区域（强化移动端适配） -->
<main class="container mx-auto px-4 pt-20 pb-12 md:pt-24 md:pb-16">
<!-- 搜索区域（移动端优先布局） -->
<section class="bg-white rounded-xl p-4 md:p-6 card-shadow mb-6 md:mb-8 fade-in touch-friendly">
<div class="text-center mb-4 md:mb-6">
<h2 class="text-[clamp(1.2rem,5vw,2rem)] font-bold text-dark mb-2">实时查询全国各地油价</h2>
<p class="text-gray-600 text-sm md:text-base">数据来源于官方渠道，每小时更新一次，仅供参考</p>
</div>
<div class="flex flex-col gap-3 md:gap-4 items-center justify-center w-full">
<!-- 可搜索的城市输入框（100%宽度适配移动端） -->
<div class="w-full relative">
<div class="relative">
<input
type="text"
id="citySearchInput"
placeholder="请输入查询地区（如：北京、大连）"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/30 outline-none touch-friendly"
>
<i class="fa fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
</div>
<!-- 热门城市快捷提示（适配移动端滚动） -->
<div id="searchSuggestions" class="absolute w-full mt-1 bg-white rounded-lg shadow-lg max-h-52 md:max-h-60 overflow-y-auto z-10 hidden touch-friendly">
<div class="p-2 md:p-3 text-gray-500 text-xs md:text-sm border-b border-gray-100">热门参考</div>
<div id="suggestionList" class="divide-y divide-gray-100">
<!-- 仅展示热门城市 -->
</div>
</div>
</div>
<!-- 查询按钮（100%宽度，适配移动端触控） -->
<button id="queryBtn" class="w-full md:w-auto md:min-w-[120px] bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg btn-hover flex items-center justify-center touch-friendly">
<i class="fa fa-search mr-2"></i>立即查询
</button>
</div>
</section>
<!-- 加载状态（移动端居中优化） -->
<section id="loadingSection" class="hidden text-center py-8 md:py-12 fade-in">
<div class="inline-block animate-spin rounded-full h-10 w-10 md:h-12 md:w-12 border-t-2 border-b-2 border-primary"></div>
<p class="mt-3 md:mt-4 text-gray-600 text-sm md:text-base">正在获取油价数据，请稍候...</p>
</section>
<!-- 错误提示（移动端适配） -->
<section id="errorSection" class="hidden bg-red-50 border border-red-200 rounded-xl p-4 md:p-6 text-center fade-in touch-friendly">
<i class="fa fa-exclamation-circle text-red-500 text-2xl md:text-3xl mb-2 md:mb-3"></i>
<p id="errorMessage" class="text-red-600 text-sm md:text-base">获取数据失败，请稍后重试</p>
</section>
<!-- 结果展示区域（删除查看详情，强化移动端适配） -->
<section id="resultSection" class="hidden fade-in">
<div class="bg-white rounded-xl p-4 md:p-6 card-shadow mb-4 md:mb-6 touch-friendly">
<div class="flex flex-col justify-between items-start mb-4 md:mb-6">
<div>
<h3 id="resultRegion" class="text-lg md:text-xl font-bold text-dark"></h3>
<p class="text-gray-500 text-xs md:text-sm mt-1">
<i class="fa fa-refresh mr-1"></i>数据更新时间：<span id="updateTime"></span>
</p>
</div>
<!-- 已删除查看详情链接 -->
</div>
<!-- 表格（移动端横向滚动优化） -->
<div class="overflow-x-auto -mx-4 md:-mx-6 px-4 md:px-6 pb-2">
<table class="w-full min-w-[300px]">
<thead>
<tr class="bg-gray-50 border-b border-gray-200">
<th class="py-2 md:py-3 px-3 md:px-4 text-left font-semibold text-gray-700 text-xs md:text-sm">油品类型</th>
<th class="py-2 md:py-3 px-3 md:px-4 text-center font-semibold text-gray-700 text-xs md:text-sm">价格（元/升）</th>
<th class="py-2 md:py-3 px-3 md:px-4 text-center font-semibold text-gray-700 text-xs md:text-sm">备注</th>
</tr>
</thead>
<tbody id="priceTableBody">
<!-- 动态渲染油价数据 -->
</tbody>
</table>
</div>
</div>
<!-- 价格卡片展示（移动端单列，逐步适配） -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 fade-in" style="animation-delay: 0.2s">
<div class="bg-white rounded-xl p-4 md:p-5 card-shadow hover:shadow-lg transition-shadow touch-friendly">
<div class="flex justify-between items-start mb-2 md:mb-3">
<h4 class="font-medium text-gray-700 text-sm md:text-base">92#汽油</h4>
<i class="fa fa-leaf text-green-500 text-xs md:text-sm"></i>
</div>
<p id="gas92Price" class="text-xl md:text-2xl font-bold text-primary"></p>
<p class="text-gray-500 text-xs mt-1">最常用汽油标号</p>
</div>
<div class="bg-white rounded-xl p-4 md:p-5 card-shadow hover:shadow-lg transition-shadow touch-friendly">
<div class="flex justify-between items-start mb-2 md:mb-3">
<h4 class="font-medium text-gray-700 text-sm md:text-base">95#汽油</h4>
<i class="fa fa-star text-yellow-500 text-xs md:text-sm"></i>
</div>
<p id="gas95Price" class="text-xl md:text-2xl font-bold text-primary"></p>
<p class="text-gray-500 text-xs mt-1">高端车型常用</p>
</div>
<div class="bg-white rounded-xl p-4 md:p-5 card-shadow hover:shadow-lg transition-shadow touch-friendly">
<div class="flex justify-between items-start mb-2 md:mb-3">
<h4 class="font-medium text-gray-700 text-sm md:text-base">98#汽油</h4>
<i class="fa fa-diamond text-purple-500 text-xs md:text-sm"></i>
</div>
<p id="gas98Price" class="text-xl md:text-2xl font-bold text-primary"></p>
<p class="text-gray-500 text-xs mt-1">高性能车辆专用</p>
</div>
<div class="bg-white rounded-xl p-4 md:p-5 card-shadow hover:shadow-lg transition-shadow touch-friendly">
<div class="flex justify-between items-start mb-2 md:mb-3">
<h4 class="font-medium text-gray-700 text-sm md:text-base">0#柴油</h4>
<i class="fa fa-truck text-blue-500 text-xs md:text-sm"></i>
</div>
<p id="diesel0Price" class="text-xl md:text-2xl font-bold text-primary"></p>
<p class="text-gray-500 text-xs mt-1">柴油车、货车适用</p>
</div>
</div>
</section>
</main>
<!-- 页脚（极简设计，适配移动端） -->
<footer class="bg-dark text-white py-6 md:py-8 touch-friendly">
<div class="container mx-auto px-4">
<div class="flex flex-col justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="flex items-center space-x-2 justify-center">
<i class="fa fa-gas-pump text-primary text-xl"></i>
<span class="font-bold text-lg">全国油价查询</span>
</div>
<p class="text-gray-400 text-sm mt-2 text-center">© 2025 油价查询工具 版权所有</p>
</div>
<!-- 仅保留关于我们，链接指向指定地址 -->
<div class="flex flex-wrap justify-center gap-6 mt-4">
<a href="https://yqjxa.cn/" target="_blank" class="text-gray-400 hover:text-white transition-colors text-sm">
<i class="fa fa-info-circle mr-1"></i>关于我们
</a>
</div>
</div>
<!-- 简化版权说明，适配移动端 -->
<div class="border-t border-gray-700 mt-4 md:mt-6 pt-4 md:pt-6 text-center text-gray-500 text-xs">
<p>数据来源：第三方API接口 | 本站仅提供查询服务，不承担任何法律责任</p>
</div>
</div>
</footer>
<!-- 核心业务逻辑（保留功能，优化移动端交互） -->
<script>
// 仅保留热门城市快捷提示（不做任何过滤/校验）
const hotCities = ["北京", "上海", "广州", "深圳", "成都", "杭州", "重庆", "武汉", "大连"];
// DOM元素获取
const citySearchInput = document.getElementById('citySearchInput');
const searchSuggestions = document.getElementById('searchSuggestions');
const suggestionList = document.getElementById('suggestionList');
const queryBtn = document.getElementById('queryBtn');
const loadingSection = document.getElementById('loadingSection');
const errorSection = document.getElementById('errorSection');
const resultSection = document.getElementById('resultSection');
const errorMessage = document.getElementById('errorMessage');
const resultRegion = document.getElementById('resultRegion');
const updateTime = document.getElementById('updateTime');
const priceTableBody = document.getElementById('priceTableBody');
const gas92Price = document.getElementById('gas92Price');
const gas95Price = document.getElementById('gas95Price');
const gas98Price = document.getElementById('gas98Price');
const diesel0Price = document.getElementById('diesel0Price');
// API配置（直接提交region参数）
const API_URL = 'https://api.nxvav.cn/api/fuel-price/';
// 初始化：仅渲染热门城市提示
function initHotCities() {
suggestionList.innerHTML = '';
hotCities.forEach(city => {
const item = document.createElement('div');
item.className = 'px-3 py-2 md:px-4 md:py-2 cursor-pointer search-result-item text-sm touch-friendly';
item.textContent = city;
// 点击仅填充输入框，不做任何校验
item.addEventListener('click', () => {
citySearchInput.value = city;
searchSuggestions.classList.add('hidden');
});
suggestionList.appendChild(item);
});
}
// 渲染查询结果（直接展示接口返回的数据）
function renderResult(data, inputRegion) {
// 显示用户输入的原始地区名称
resultRegion.textContent = `${inputRegion} 最新油价`;
updateTime.textContent = data.updated || '未知';
// 清空表格
priceTableBody.innerHTML = '';
// 初始化价格变量
let price92 = '暂无数据';
let price95 = '暂无数据';
let price98 = '暂无数据';
let price0 = '暂无数据';
// 直接渲染接口返回的所有油品数据
if (data.items && Array.isArray(data.items)) {
data.items.forEach(item => {
const row = document.createElement('tr');
row.className = 'border-b border-gray-100 hover:bg-gray-50 transition-colors touch-friendly';
// 匹配对应油品价格
switch (item.name) {
case '92#汽油':
price92 = item.price_desc || `${item.price} 元/升`;
break;
case '95#汽油':
price95 = item.price_desc || `${item.price} 元/升`;
break;
case '98#汽油':
price98 = item.price_desc || `${item.price} 元/升`;
break;
case '0#柴油':
price0 = item.price_desc || `${item.price} 元/升`;
break;
}
row.innerHTML = `
<td class="py-2 md:py-3 px-3 md:px-4 text-xs md:text-sm">
<div class="flex items-center">
<span class="ml-1">${item.name}</span>
</div>
</td>
<td class="py-2 md:py-3 px-3 md:px-4 text-center font-medium text-xs md:text-sm">${item.price_desc || `${item.price} 元/升`}</td>
<td class="py-2 md:py-3 px-3 md:px-4 text-center text-gray-500 text-xs">
${item.remark || '常规油品'}
</td>
`;
priceTableBody.appendChild(row);
});
}
// 设置卡片价格
gas92Price.textContent = price92;
gas95Price.textContent = price95;
gas98Price.textContent = price98;
diesel0Price.textContent = price0;
}
// 仅监听输入框聚焦显示热门提示（不做任何过滤）
citySearchInput.addEventListener('focus', () => {
initHotCities();
searchSuggestions.classList.remove('hidden');
});
// 点击其他区域关闭提示
document.addEventListener('click', (e) => {
if (!citySearchInput.contains(e.target) && !searchSuggestions.contains(e.target)) {
searchSuggestions.classList.add('hidden');
}
});
// 回车查询
citySearchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
queryBtn.click();
}
});
// 核心逻辑：仅非空验证，直接提交输入的region给接口
queryBtn.addEventListener('click', () => {
// 1. 仅做非空验证
const region = citySearchInput.value.trim();
if (!region) {
alert('请输入查询地区');
citySearchInput.focus();
return;
}
// 2. 显示加载状态
loadingSection.classList.remove('hidden');
errorSection.classList.add('hidden');
resultSection.classList.add('hidden');
// 3. 直接拼接用户输入的region参数，提交给接口（无任何本地处理）
const url = `${API_URL}?region=${encodeURIComponent(region)}`;
// 4. 发送请求，完全依赖接口返回结果
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP错误，状态码：${response.status}`);
}
return response.json();
})
.then(data => {
loadingSection.classList.add('hidden');
// 接口返回成功就展示，失败就提示（完全按接口逻辑）
if (data.code === 200 && data.data) {
resultSection.classList.remove('hidden');
renderResult(data.data, region);
} else {
errorSection.classList.remove('hidden');
errorMessage.textContent = data.message || '接口返回数据失败，请检查输入或稍后重试';
}
})
.catch(error => {
loadingSection.classList.add('hidden');
errorSection.classList.remove('hidden');
errorMessage.textContent = `请求失败：${error.message}`;
console.error('API请求错误：', error);
});
});
// 页面滚动导航栏样式变化（适配移动端触控）
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 10) {
header.classList.add('py-2');
header.classList.remove('py-3');
} else {
header.classList.add('py-3');
header.classList.remove('py-2');
}
});
// 页面初始化
window.addEventListener('DOMContentLoaded', () => {
initHotCities();
citySearchInput.focus();
// 移动端输入框自动聚焦（可选）
if (window.innerWidth < 768) {
citySearchInput.focus();
}
});
// 适配移动端旋转屏幕
window.addEventListener('resize', () => {
searchSuggestions.classList.add('hidden');
});
</script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容