当前位置：首页 > news >正文

集合车位租售、充电桩共享、二手市场、便民服务的家政服务平台，带源码

news 2025/8/16 13:06:13

一个服务与小区的家政服务平台
小区便民家政服务平台摘要该平台是一个专为小区居民设计的家政服务网站，主要功能包括车位租售信息发布与管理。平台采用响应式设计，适配不同设备，具有以下特点：用户界面：简洁明了的蓝色主题界面，顶部导航栏显示"小区便民服务"标题核心功能：车位租售信息发布（支持出租/出售分类）智能化筛选功能（按类型、价格区间过滤）信息卡片展示，悬停有动态效果技术特点：使用Tailwind CSS框架实现现代化UI 响应式布局适配移动端交互式表单验证和价格滑块控件模态对话框实现信息发布该平台旨
在这里插入图片描述


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小区便民服务</title><script src="https://cdn.tailwindcss.com/3.3.3"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"><style>body {font-family: 'Noto Sans SC', sans-serif;background-color: #f8fafc;}.active-tab {color: #3b82f6;border-top: 2px solid #3b82f6;}.card-hover {transition: all 0.3s ease;}.card-hover:hover {transform: translateY(-2px);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.form-input {border: 1px solid #e2e8f0;border-radius: 0.375rem;padding: 0.5rem 0.75rem;width: 100%;}.form-input:focus {outline: none;border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);}.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 1000;}.modal-content {background-color: white;border-radius: 0.5rem;width: 90%;max-width: 400px;max-height: 90vh;overflow-y: auto;}.price-slider {-webkit-appearance: none;width: 100%;height: 8px;border-radius: 5px;background: #e2e8f0;outline: none;}.price-slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 20px;height: 20px;border-radius: 50%;background: #3b82f6;cursor: pointer;}.price-slider::-moz-range-thumb {width: 20px;height: 20px;border-radius: 50%;background: #3b82f6;cursor: pointer;}.empty-state {text-align: center;padding: 2rem;color: #64748b;}.empty-state i {font-size: 3rem;color: #cbd5e1;margin-bottom: 1rem;}</style>
</head>
<body class="min-h-screen flex flex-col"><!-- 顶部标题栏 --><header class="bg-blue-600 text-white p-4 shadow-md"><div class="container mx-auto"><h1 class="text-xl font-bold">小区便民服务</h1></div></header><!-- 内容区域 --><main class="flex-1 container mx-auto p-4"><!-- 车位租售内容 --><div id="parking-content" class="content-section"><div class="flex justify-between items-center mb-4"><h2 class="text-lg font-semibold text-gray-800">车位租售信息</h2><button onclick="showParkingForm()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm"><i class="fas fa-plus mr-1"></i>发布信息</button></div><!-- 筛选区域 --><div class="bg-white rounded-lg shadow p-4 mb-4"><div class="flex flex-wrap gap-4"><div class="flex-1 min-w-[150px]"><label class="block text-sm font-medium text-gray-700 mb-1">类型</label><select id="parking-type-filter" class="form-input" onchange="filterParkingList()"><option value="all">全部</option><option value="rent">出租</option><option value="sell">出售</option></select></div><div class="flex-1 min-w-[150px]"><label class="block text-sm font-medium text-gray-700 mb-1">价格区间</label><div class="flex items-center gap-2"><input type="number" id="min-price" placeholder="最低" class="form-input w-20" onchange="filterParkingList()"><span>-</span><input type="number" id="max-price" placeholder="最高" class="form-input w-20" onchange="filterParkingList()"></div></div></div></div><!-- 列表区域 --><div id="parking-list" class="grid gap-4"><!-- 动态生成的车位信息卡片 --></div><!-- 空状态 --><div id="parking-empty" class="empty-state hidden"><i class="fas fa-parking"></i><p>暂无车位信息，点击上方按钮发布</p></div></div><!-- 二手交易内容 --><div id="secondhand-content" class="content-section hidden"><div class="flex justify-between items-center mb-4"><h2 class="text-lg font-semibold text-gray-800">二手物品交易</h2><button onclick="showSecondhandForm()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm"><i class="fas fa-plus mr-1"></i>发布信息</button></div><!-- 筛选区域 --><div class="bg-white rounded-lg shadow p-4 mb-4"><div class="flex flex-wrap gap-4"><div class="flex-1 min-w-[150px]"><label class="block text-sm font-medium text-gray-700 mb-1">分类</label><select id="secondhand-category-filter" class="form-input" onchange="filterSecondhandList()"><option value="all">全部</option><option value="appliance">家电</option><option value="furniture">家具</option><option value="digital">数码</option><option value="other">其他</option></select></div><div class="flex-1 min-w-[150px]"><label class="block text-sm font-medium text-gray-700 mb-1">价格区间</label><div class="flex items-center gap-2"><input type="number" id="secondhand-min-price" placeholder="最低" class="form-input w-20" onchange="filterSecondhandList()"><span>-</span><input type="number" id="secondhand-max-price" placeholder="最高" class="form-input w-20" onchange="filterSecondhandList()"></div></div></div></div><!-- 列表区域 --><div id="secondhand-list" class="grid gap-4"><!-- 动态生成的二手物品卡片 --></div><!-- 空状态 --><div id="secondhand-empty" class="empty-state hidden"><i class="fas fa-exchange-alt"></i><p>暂无二手物品信息，点击上方按钮发布</p></div></div><!-- 充电桩内容 --><div id="charging-content" class="content-section hidden"><div class="flex justify-between items-center mb-4"><h2 class="text-lg font-semibold text-gray-800">充电桩信息</h2><button onclick="showChargingForm()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm"><i class="fas fa-plus mr-1"></i>发布信息</button></div><!-- 列表区域 --><div id="charging-list" class="grid gap-4"><!-- 动态生成的充电桩信息卡片 --></div><!-- 空状态 --><div id="charging-empty" class="empty-state hidden"><i class="fas fa-charging-station"></i><p>暂无充电桩信息，点击上方按钮发布</p></div></div><!-- 家政服务内容 --><div id="housekeeping-content" class="content-section hidden"><div class="flex justify-between items-center mb-4"><h2 class="text-lg font-semibold text-gray-800">家政服务</h2><button onclick="showServiceList()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm"><i class="fas fa-broom mr-1"></i>预约服务</button></div><!-- 服务列表 --><div id="service-list" class="grid gap-4"><div class="bg-white rounded-lg shadow p-4 card-hover"><div class="flex justify-between items-start"><div><h3 class="font-medium">日常保洁</h3><p class="text-sm text-gray-500">基础清洁服务，包括地面清洁、家具擦拭等</p></div><span class="text-blue-500 font-medium">50元/小时</span></div></div><div class="bg-white rounded-lg shadow p-4 card-hover"><div class="flex justify-between items-start"><div><h3 class="font-medium">深度保洁</h3><p class="text-sm text-g