|
|
@@ -0,0 +1,862 @@
|
|
|
+<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --primary: #1a56db;
|
|
|
+ --secondary: #0e2a53;
|
|
|
+ --accent: #f59e0b;
|
|
|
+ --light: #f8fafc;
|
|
|
+ --dark: #0f172a;
|
|
|
+ --card-bg: rgba(255, 255, 255, 0.95);
|
|
|
+ --glass: rgba(255, 255, 255, 0.1);
|
|
|
+ --glass-border: rgba(255, 255, 255, 0.2);
|
|
|
+ --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background: linear-gradient(135deg, #0f172a, #1e293b);
|
|
|
+ color: var(--light);
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 0;
|
|
|
+ position: relative;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ body::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at 10% 20%, rgba(26, 86, 219, 0.15) 0%, transparent 30%),
|
|
|
+ radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 30%);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部导航栏 */
|
|
|
+ .top-nav {
|
|
|
+ background: rgba(15, 23, 42, 0.95);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-bottom: 1px solid var(--glass-border);
|
|
|
+ padding: 15px 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-btn {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ color: #e2e8f0;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-btn:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ transform: translateX(-3px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-title h1 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: linear-gradient(to right, #fbcfe8, #c7d2fe);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-btn {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ color: #e2e8f0;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-btn:hover {
|
|
|
+ background: rgba(26, 86, 219, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 内容容器 */
|
|
|
+ .content-container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 20px auto 40px;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 功能区域 */
|
|
|
+ .action-bar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ padding: 8px 15px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: linear-gradient(135deg, var(--accent), #fbbf24);
|
|
|
+ color: var(--dark);
|
|
|
+ box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-outline {
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid var(--glass-border);
|
|
|
+ color: #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-outline:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 筛选区域 */
|
|
|
+ .filter-bar {
|
|
|
+ background: var(--glass);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 1px solid var(--glass-border);
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ min-width: 180px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-group label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #94a3b8;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-group select,
|
|
|
+ .filter-group input {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid var(--glass-border);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ color: #e2e8f0;
|
|
|
+ width: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 宴会厅卡片 */
|
|
|
+ .hall-cards {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-card {
|
|
|
+ background: var(--card-bg);
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ color: var(--dark);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 15px 25px rgba(31, 38, 135, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-image {
|
|
|
+ height: 180px;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-image::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-name {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ left: 15px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-name h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: white;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-name p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-price {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ right: 15px;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ padding: 6px 12px;
|
|
|
+ border-radius: 30px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--dark);
|
|
|
+ z-index: 2;
|
|
|
+ box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .discount-price {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #ef4444;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-info {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-row:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #475569;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--dark);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12px 15px;
|
|
|
+ background: rgba(241, 245, 249, 0.7);
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-btn {
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ border: none;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hall-btn:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-book {
|
|
|
+ background: linear-gradient(135deg, var(--primary), #3b82f6);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-details {
|
|
|
+ background: rgba(203, 213, 225, 0.5);
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式调整 */
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .hall-cards {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-bar {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 结果计数 */
|
|
|
+ .results-count {
|
|
|
+ background: rgba(15, 23, 42, 0.7);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 8px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-results {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px 0;
|
|
|
+ color: #94a3b8;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-results i {
|
|
|
+ font-size: 32px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: #f59e0b;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 加载动画 */
|
|
|
+ .loader {
|
|
|
+ display: none;
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ margin: 20px auto;
|
|
|
+ border: 5px solid rgba(255,255,255,0.2);
|
|
|
+ border-radius: 50%;
|
|
|
+ border-top: 5px solid var(--accent);
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes spin {
|
|
|
+ 0% { transform: rotate(0deg); }
|
|
|
+ 100% { transform: rotate(360deg); }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <div class="top-nav">
|
|
|
+ <div class="back-btn">
|
|
|
+ <i class="fas fa-arrow-left"></i>
|
|
|
+ </div>
|
|
|
+ <div class="nav-title">
|
|
|
+ <h1>宴会厅管理</h1>
|
|
|
+ </div>
|
|
|
+ <div class="nav-actions">
|
|
|
+ <div class="nav-btn">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ </div>
|
|
|
+ <div class="nav-btn">
|
|
|
+ <i class="fas fa-bell"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <div class="content-container">
|
|
|
+ <!-- 操作区域 -->
|
|
|
+ <div class="action-bar">
|
|
|
+ <div class="section-title">
|
|
|
+ <h2>宴会厅列表</h2>
|
|
|
+ </div>
|
|
|
+ <div class="action-buttons">
|
|
|
+ <button class="btn btn-outline" id="resetFilters">
|
|
|
+ <i class="fas fa-sync-alt"></i> 重置筛选
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-primary">
|
|
|
+ <i class="fas fa-plus"></i> 新增宴会厅
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 筛选区域 -->
|
|
|
+ <div class="filter-bar">
|
|
|
+ <div class="filter-group">
|
|
|
+ <label for="area">位置区域</label>
|
|
|
+ <select id="area">
|
|
|
+ <option value="all">全部区域</option>
|
|
|
+ <option value="姑苏区">姑苏区</option>
|
|
|
+ <option value="工业园区">工业园区</option>
|
|
|
+ <option value="高新区">高新区</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="filter-group">
|
|
|
+ <label for="tables">容纳桌数</label>
|
|
|
+ <select id="tables">
|
|
|
+ <option value="all">不限</option>
|
|
|
+ <option value="0-20">20桌以下</option>
|
|
|
+ <option value="20-40">20-40桌</option>
|
|
|
+ <option value="40+">40桌以上</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="filter-group">
|
|
|
+ <label for="mealPrice">餐标范围</label>
|
|
|
+ <select id="mealPrice">
|
|
|
+ <option value="all">不限</option>
|
|
|
+ <option value="1000-1999">1000-1999元</option>
|
|
|
+ <option value="2000-2999">2000-2999元</option>
|
|
|
+ <option value="3000+">3000元以上</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="filter-group">
|
|
|
+ <label for="sort">排序方式</label>
|
|
|
+ <select id="sort">
|
|
|
+ <option value="default">默认排序</option>
|
|
|
+ <option value="price-low">价格从低到高</option>
|
|
|
+ <option value="price-high">价格从高到低</option>
|
|
|
+ <option value="area-high">面积从大到小</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 结果计数 -->
|
|
|
+ <div class="results-count" id="resultsCount">找到 <span id="count">4</span> 个宴会厅</div>
|
|
|
+
|
|
|
+ <!-- 加载动画 -->
|
|
|
+ <div class="loader" id="loader"></div>
|
|
|
+
|
|
|
+ <!-- 宴会厅卡片 -->
|
|
|
+ <div class="hall-cards" id="hallCards">
|
|
|
+ <!-- 苏州庄 -->
|
|
|
+ <div class="hall-card"
|
|
|
+ data-area="姑苏区"
|
|
|
+ data-min-tables="45"
|
|
|
+ data-max-tables="60"
|
|
|
+ data-meal-price="1999"
|
|
|
+ data-hall-price="456888"
|
|
|
+ data-area-size="728">
|
|
|
+ <div class="hall-image" style="background-image: url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');">
|
|
|
+ <div class="hall-name">
|
|
|
+ <h3>LUXURS 苏州庄</h3>
|
|
|
+ <p>古典与现代完美融合</p>
|
|
|
+ </div>
|
|
|
+ <div class="hall-price">¥456,888.00</div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-info">
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">餐标</span>
|
|
|
+ <span class="info-value">1999元/桌</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">宴会厅高</span>
|
|
|
+ <span class="info-value">4.5m</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">全厅面积</span>
|
|
|
+ <span class="info-value">728㎡</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">容纳桌数</span>
|
|
|
+ <span class="info-value">45-60桌</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-footer">
|
|
|
+ <button class="hall-btn btn-details">
|
|
|
+ <i class="fas fa-info-circle"></i> 详情
|
|
|
+ </button>
|
|
|
+ <button class="hall-btn btn-book">
|
|
|
+ <i class="fas fa-calendar-check"></i> 预订
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 奥斯卡 -->
|
|
|
+ <div class="hall-card"
|
|
|
+ data-area="工业园区"
|
|
|
+ data-min-tables="30"
|
|
|
+ data-max-tables="40"
|
|
|
+ data-meal-price="1999"
|
|
|
+ data-hall-price="388800"
|
|
|
+ data-area-size="500">
|
|
|
+ <div class="hall-image" style="background-image: url('https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');">
|
|
|
+ <div class="hall-name">
|
|
|
+ <h3>OSCARS 奥斯卡</h3>
|
|
|
+ <p>欧式奢华宴会厅</p>
|
|
|
+ </div>
|
|
|
+ <div class="hall-price">¥388,800.00</div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-info">
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">餐标</span>
|
|
|
+ <span class="info-value">1999元/桌</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">宴会厅高</span>
|
|
|
+ <span class="info-value">4.5m</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">餐厅面积</span>
|
|
|
+ <span class="info-value">500㎡</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">容纳桌数</span>
|
|
|
+ <span class="info-value">30-40桌</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-footer">
|
|
|
+ <button class="hall-btn btn-details">
|
|
|
+ <i class="fas fa-info-circle"></i> 详情
|
|
|
+ </button>
|
|
|
+ <button class="hall-btn btn-book">
|
|
|
+ <i class="fas fa-calendar-check"></i> 预订
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 星空之镜 -->
|
|
|
+ <div class="hall-card"
|
|
|
+ data-area="高新区"
|
|
|
+ data-min-tables="25"
|
|
|
+ data-max-tables="35"
|
|
|
+ data-meal-price="1999"
|
|
|
+ data-hall-price="229999"
|
|
|
+ data-area-size="428">
|
|
|
+ <div class="hall-image" style="background-image: url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');">
|
|
|
+ <div class="hall-name">
|
|
|
+ <h3>SHARRY 星空之镜</h3>
|
|
|
+ <p>梦幻星空主题宴会厅</p>
|
|
|
+ </div>
|
|
|
+ <div class="hall-price">¥229,999.00 <span class="discount-price">(原价¥289,999)</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-info">
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">餐标</span>
|
|
|
+ <span class="info-value">1999元/桌</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">宴会厅高</span>
|
|
|
+ <span class="info-value">4.5m</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">全厅面积</span>
|
|
|
+ <span class="info-value">428㎡</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">容纳桌数</span>
|
|
|
+ <span class="info-value">25-35桌</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-footer">
|
|
|
+ <button class="hall-btn btn-details">
|
|
|
+ <i class="fas fa-info-circle"></i> 详情
|
|
|
+ </button>
|
|
|
+ <button class="hall-btn btn-book">
|
|
|
+ <i class="fas fa-calendar-check"></i> 预订
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 盛世厅 -->
|
|
|
+ <div class="hall-card"
|
|
|
+ data-area="姑苏区"
|
|
|
+ data-min-tables="60"
|
|
|
+ data-max-tables="80"
|
|
|
+ data-meal-price="2999"
|
|
|
+ data-hall-price="528000"
|
|
|
+ data-area-size="950">
|
|
|
+ <div class="hall-image" style="background-image: url('https://images.unsplash.com/photo-1556911220-ef412ae179a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');">
|
|
|
+ <div class="hall-name">
|
|
|
+ <h3>GRAND HALL 盛世厅</h3>
|
|
|
+ <p>豪华宴会与会议空间</p>
|
|
|
+ </div>
|
|
|
+ <div class="hall-price">¥528,000.00</div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-info">
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">餐标</span>
|
|
|
+ <span class="info-value">2999元/桌</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">宴会厅高</span>
|
|
|
+ <span class="info-value">5.2m</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">全厅面积</span>
|
|
|
+ <span class="info-value">950㎡</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="info-label">容纳桌数</span>
|
|
|
+ <span class="info-value">60-80桌</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hall-footer">
|
|
|
+ <button class="hall-btn btn-details">
|
|
|
+ <i class="fas fa-info-circle"></i> 详情
|
|
|
+ </button>
|
|
|
+ <button class="hall-btn btn-book">
|
|
|
+ <i class="fas fa-calendar-check"></i> 预订
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 页面加载后初始化
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ // 初始化筛选功能
|
|
|
+ initFilters();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 初始化筛选功能
|
|
|
+ function initFilters() {
|
|
|
+ // 获取筛选元素
|
|
|
+ const areaFilter = document.getElementById('area');
|
|
|
+ const tablesFilter = document.getElementById('tables');
|
|
|
+ const mealPriceFilter = document.getElementById('mealPrice');
|
|
|
+ const sortFilter = document.getElementById('sort');
|
|
|
+ const resetButton = document.getElementById('resetFilters');
|
|
|
+
|
|
|
+ // 添加事件监听器
|
|
|
+ areaFilter.addEventListener('change', filterHalls);
|
|
|
+ tablesFilter.addEventListener('change', filterHalls);
|
|
|
+ mealPriceFilter.addEventListener('change', filterHalls);
|
|
|
+ sortFilter.addEventListener('change', filterHalls);
|
|
|
+ resetButton.addEventListener('click', resetFilters);
|
|
|
+
|
|
|
+ // 初始筛选
|
|
|
+ filterHalls();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 筛选和排序宴会厅
|
|
|
+ function filterHalls() {
|
|
|
+ // 显示加载动画
|
|
|
+ const loader = document.getElementById('loader');
|
|
|
+ loader.style.display = 'block';
|
|
|
+
|
|
|
+ // 模拟加载延迟
|
|
|
+ setTimeout(() => {
|
|
|
+ // 获取筛选值
|
|
|
+ const areaValue = document.getElementById('area').value;
|
|
|
+ const tablesValue = document.getElementById('tables').value;
|
|
|
+ const mealPriceValue = document.getElementById('mealPrice').value;
|
|
|
+ const sortValue = document.getElementById('sort').value;
|
|
|
+
|
|
|
+ // 获取所有卡片
|
|
|
+ const cards = Array.from(document.querySelectorAll('.hall-card'));
|
|
|
+ let visibleCards = cards.slice(); // 初始为所有卡片
|
|
|
+
|
|
|
+ // 区域筛选
|
|
|
+ if (areaValue !== 'all') {
|
|
|
+ visibleCards = visibleCards.filter(card => card.dataset.area === areaValue);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 容纳桌数筛选
|
|
|
+ if (tablesValue !== 'all') {
|
|
|
+ if (tablesValue === '0-20') {
|
|
|
+ visibleCards = visibleCards.filter(card => parseInt(card.dataset.maxTables) <= 20);
|
|
|
+ } else if (tablesValue === '20-40') {
|
|
|
+ visibleCards = visibleCards.filter(card =>
|
|
|
+ parseInt(card.dataset.minTables) >= 20 &&
|
|
|
+ parseInt(card.dataset.maxTables) <= 40
|
|
|
+ );
|
|
|
+ } else if (tablesValue === '40+') {
|
|
|
+ visibleCards = visibleCards.filter(card => parseInt(card.dataset.minTables) >= 40);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 餐标范围筛选
|
|
|
+ if (mealPriceValue !== 'all') {
|
|
|
+ if (mealPriceValue === '1000-1999') {
|
|
|
+ visibleCards = visibleCards.filter(card =>
|
|
|
+ parseInt(card.dataset.mealPrice) >= 1000 &&
|
|
|
+ parseInt(card.dataset.mealPrice) <= 1999
|
|
|
+ );
|
|
|
+ } else if (mealPriceValue === '2000-2999') {
|
|
|
+ visibleCards = visibleCards.filter(card =>
|
|
|
+ parseInt(card.dataset.mealPrice) >= 2000 &&
|
|
|
+ parseInt(card.dataset.mealPrice) <= 2999
|
|
|
+ );
|
|
|
+ } else if (mealPriceValue === '3000+') {
|
|
|
+ visibleCards = visibleCards.filter(card => parseInt(card.dataset.mealPrice) >= 3000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 排序功能实现
|
|
|
+ if (sortValue !== 'default') {
|
|
|
+ visibleCards.sort((a, b) => {
|
|
|
+ const priceA = parseInt(a.dataset.hallPrice);
|
|
|
+ const priceB = parseInt(b.dataset.hallPrice);
|
|
|
+ const areaA = parseInt(a.dataset.areaSize);
|
|
|
+ const areaB = parseInt(b.dataset.areaSize);
|
|
|
+
|
|
|
+ if (sortValue === 'price-low') {
|
|
|
+ return priceA - priceB;
|
|
|
+ } else if (sortValue === 'price-high') {
|
|
|
+ return priceB - priceA;
|
|
|
+ } else if (sortValue === 'area-high') {
|
|
|
+ return areaB - areaA;
|
|
|
+ }
|
|
|
+ return 0;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 隐藏所有卡片
|
|
|
+ cards.forEach(card => {
|
|
|
+ card.style.display = 'none';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 显示符合条件的卡片
|
|
|
+ visibleCards.forEach(card => {
|
|
|
+ card.style.display = 'block';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新结果计数
|
|
|
+ document.getElementById('count').textContent = visibleCards.length;
|
|
|
+
|
|
|
+ // 重新排序DOM以反映排序顺序
|
|
|
+ const hallCardsContainer = document.getElementById('hallCards');
|
|
|
+ visibleCards.forEach(card => {
|
|
|
+ hallCardsContainer.appendChild(card);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果没有结果，显示提示
|
|
|
+ const hallCards = document.getElementById('hallCards');
|
|
|
+ const noResults = document.querySelector('.no-results');
|
|
|
+
|
|
|
+ if (visibleCards.length === 0) {
|
|
|
+ if (!noResults) {
|
|
|
+ const noResultsElement = document.createElement('div');
|
|
|
+ noResultsElement.className = 'no-results';
|
|
|
+ noResultsElement.innerHTML = `
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ <h3>未找到符合条件的宴会厅</h3>
|
|
|
+ <p>请尝试调整筛选条件</p>
|
|
|
+ `;
|
|
|
+ hallCards.appendChild(noResultsElement);
|
|
|
+ }
|
|
|
+ } else if (noResults) {
|
|
|
+ hallCards.removeChild(noResults);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 隐藏加载动画
|
|
|
+ loader.style.display = 'none';
|
|
|
+ }, 500); // 模拟加载时间
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置筛选条件
|
|
|
+ function resetFilters() {
|
|
|
+ document.getElementById('area').value = 'all';
|
|
|
+ document.getElementById('tables').value = 'all';
|
|
|
+ document.getElementById('mealPrice').value = 'all';
|
|
|
+ document.getElementById('sort').value = 'default';
|
|
|
+
|
|
|
+ filterHalls();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 返回按钮功能
|
|
|
+ document.querySelector('.back-btn').addEventListener('click', function() {
|
|
|
+ alert('返回上一级页面');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 预订按钮交互
|
|
|
+ const bookButtons = document.querySelectorAll('.btn-book');
|
|
|
+ bookButtons.forEach(button => {
|
|
|
+ button.addEventListener('click', function() {
|
|
|
+ const hallName = this.closest('.hall-card').querySelector('h3').textContent;
|
|
|
+ alert(`您已开始预订: ${hallName} 宴会厅`);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 详情按钮交互
|
|
|
+ const detailButtons = document.querySelectorAll('.btn-details');
|
|
|
+ detailButtons.forEach(button => {
|
|
|
+ button.addEventListener('click', function() {
|
|
|
+ const hallName = this.closest('.hall-card').querySelector('h3').textContent;
|
|
|
+ alert(`查看 ${hallName} 的详细信息`);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 新增宴会厅按钮
|
|
|
+ document.querySelector('.btn-primary').addEventListener('click', function() {
|
|
|
+ alert('打开新增宴会厅表单');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 卡片悬停效果
|
|
|
+ const cards = document.querySelectorAll('.hall-card');
|
|
|
+ cards.forEach(card => {
|
|
|
+ card.addEventListener('mouseenter', function() {
|
|
|
+ this.style.transform = 'translateY(-5px)';
|
|
|
+ });
|
|
|
+
|
|
|
+ card.addEventListener('mouseleave', function() {
|
|
|
+ this.style.transform = 'translateY(0)';
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
0235711