room.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>宴会厅管理 - 九州系统</title>
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  14. }
  15. :root {
  16. --primary: #1a56db;
  17. --secondary: #0e2a53;
  18. --accent: #f59e0b;
  19. --light: #f8fafc;
  20. --dark: #0f172a;
  21. --card-bg: rgba(255, 255, 255, 0.95);
  22. --glass: rgba(255, 255, 255, 0.1);
  23. --glass-border: rgba(255, 255, 255, 0.2);
  24. --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  25. }
  26. body {
  27. background: linear-gradient(135deg, #0f172a, #1e293b);
  28. color: var(--light);
  29. min-height: 100vh;
  30. padding: 0;
  31. position: relative;
  32. overflow-x: hidden;
  33. }
  34. body::before {
  35. content: '';
  36. position: absolute;
  37. top: 0;
  38. left: 0;
  39. right: 0;
  40. bottom: 0;
  41. background:
  42. radial-gradient(circle at 10% 20%, rgba(26, 86, 219, 0.15) 0%, transparent 30%),
  43. radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 30%);
  44. z-index: -1;
  45. }
  46. /* 顶部导航栏 */
  47. .top-nav {
  48. background: rgba(15, 23, 42, 0.95);
  49. backdrop-filter: blur(10px);
  50. border-bottom: 1px solid var(--glass-border);
  51. padding: 15px 20px;
  52. display: flex;
  53. align-items: center;
  54. gap: 15px;
  55. }
  56. .back-btn {
  57. width: 40px;
  58. height: 40px;
  59. border-radius: 50%;
  60. display: flex;
  61. align-items: center;
  62. justify-content: center;
  63. background: rgba(255, 255, 255, 0.1);
  64. color: #e2e8f0;
  65. cursor: pointer;
  66. transition: all 0.3s ease;
  67. }
  68. .back-btn:hover {
  69. background: rgba(255, 255, 255, 0.2);
  70. transform: translateX(-3px);
  71. }
  72. .nav-title {
  73. flex: 1;
  74. }
  75. .nav-title h1 {
  76. font-size: 20px;
  77. font-weight: 700;
  78. background: linear-gradient(to right, #fbcfe8, #c7d2fe);
  79. -webkit-background-clip: text;
  80. -webkit-text-fill-color: transparent;
  81. }
  82. .nav-actions {
  83. display: flex;
  84. gap: 10px;
  85. }
  86. .nav-btn {
  87. width: 40px;
  88. height: 40px;
  89. border-radius: 50%;
  90. display: flex;
  91. align-items: center;
  92. justify-content: center;
  93. background: rgba(255, 255, 255, 0.1);
  94. color: #e2e8f0;
  95. cursor: pointer;
  96. transition: all 0.3s ease;
  97. }
  98. .nav-btn:hover {
  99. background: rgba(26, 86, 219, 0.3);
  100. }
  101. /* 内容容器 */
  102. .content-container {
  103. max-width: 1200px;
  104. margin: 20px auto 40px;
  105. padding: 0 20px;
  106. }
  107. /* 功能区域 */
  108. .action-bar {
  109. display: flex;
  110. justify-content: space-between;
  111. margin-bottom: 20px;
  112. padding: 0 10px;
  113. }
  114. .section-title h2 {
  115. font-size: 18px;
  116. font-weight: 700;
  117. color: #e2e8f0;
  118. }
  119. .action-buttons {
  120. display: flex;
  121. gap: 10px;
  122. }
  123. .btn {
  124. padding: 8px 15px;
  125. border-radius: 10px;
  126. font-weight: 600;
  127. cursor: pointer;
  128. transition: all 0.3s ease;
  129. border: none;
  130. display: flex;
  131. align-items: center;
  132. gap: 8px;
  133. font-size: 14px;
  134. }
  135. .btn-primary {
  136. background: linear-gradient(135deg, var(--accent), #fbbf24);
  137. color: var(--dark);
  138. box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
  139. }
  140. .btn-primary:hover {
  141. transform: translateY(-2px);
  142. box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
  143. }
  144. .btn-outline {
  145. background: transparent;
  146. border: 1px solid var(--glass-border);
  147. color: #e2e8f0;
  148. }
  149. .btn-outline:hover {
  150. background: rgba(255, 255, 255, 0.1);
  151. }
  152. /* 筛选区域 */
  153. .filter-bar {
  154. background: var(--glass);
  155. backdrop-filter: blur(10px);
  156. border-radius: 15px;
  157. border: 1px solid var(--glass-border);
  158. padding: 15px;
  159. margin-bottom: 25px;
  160. display: flex;
  161. flex-wrap: wrap;
  162. gap: 15px;
  163. }
  164. .filter-group {
  165. display: flex;
  166. flex-direction: column;
  167. gap: 8px;
  168. min-width: 180px;
  169. flex: 1;
  170. }
  171. .filter-group label {
  172. font-size: 14px;
  173. color: #94a3b8;
  174. font-weight: 500;
  175. }
  176. .filter-group select,
  177. .filter-group input {
  178. background: rgba(255, 255, 255, 0.1);
  179. border: 1px solid var(--glass-border);
  180. border-radius: 10px;
  181. padding: 10px 15px;
  182. color: #e2e8f0;
  183. width: 100%;
  184. cursor: pointer;
  185. }
  186. /* 宴会厅卡片 */
  187. .hall-cards {
  188. display: grid;
  189. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  190. gap: 20px;
  191. margin-bottom: 40px;
  192. }
  193. .hall-card {
  194. background: var(--card-bg);
  195. border-radius: 15px;
  196. border: 1px solid rgba(255, 255, 255, 0.2);
  197. overflow: hidden;
  198. box-shadow: var(--shadow);
  199. transition: all 0.3s ease;
  200. color: var(--dark);
  201. position: relative;
  202. }
  203. .hall-card:hover {
  204. transform: translateY(-5px);
  205. box-shadow: 0 15px 25px rgba(31, 38, 135, 0.2);
  206. }
  207. .hall-image {
  208. height: 180px;
  209. background-size: cover;
  210. background-position: center;
  211. position: relative;
  212. }
  213. .hall-image::after {
  214. content: '';
  215. position: absolute;
  216. top: 0;
  217. left: 0;
  218. right: 0;
  219. bottom: 0;
  220. background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  221. }
  222. .hall-name {
  223. position: absolute;
  224. bottom: 15px;
  225. left: 15px;
  226. z-index: 2;
  227. }
  228. .hall-name h3 {
  229. font-size: 20px;
  230. font-weight: 700;
  231. color: white;
  232. margin-bottom: 3px;
  233. }
  234. .hall-name p {
  235. font-size: 14px;
  236. color: #e2e8f0;
  237. }
  238. .hall-price {
  239. position: absolute;
  240. top: 15px;
  241. right: 15px;
  242. background: rgba(255, 255, 255, 0.9);
  243. padding: 6px 12px;
  244. border-radius: 30px;
  245. font-weight: 700;
  246. font-size: 16px;
  247. color: var(--dark);
  248. z-index: 2;
  249. box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  250. }
  251. .discount-price {
  252. text-decoration: line-through;
  253. color: #ef4444;
  254. font-size: 12px;
  255. margin-left: 5px;
  256. }
  257. .hall-info {
  258. padding: 15px;
  259. }
  260. .info-row {
  261. display: flex;
  262. justify-content: space-between;
  263. padding: 10px 0;
  264. border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  265. }
  266. .info-row:last-child {
  267. border-bottom: none;
  268. }
  269. .info-label {
  270. font-weight: 600;
  271. color: #475569;
  272. font-size: 14px;
  273. }
  274. .info-value {
  275. font-weight: 600;
  276. color: var(--dark);
  277. font-size: 14px;
  278. }
  279. .hall-footer {
  280. display: flex;
  281. justify-content: space-between;
  282. padding: 12px 15px;
  283. background: rgba(241, 245, 249, 0.7);
  284. border-top: 1px solid rgba(0, 0, 0, 0.05);
  285. }
  286. .hall-btn {
  287. padding: 8px 12px;
  288. border-radius: 8px;
  289. font-size: 13px;
  290. font-weight: 600;
  291. cursor: pointer;
  292. display: flex;
  293. align-items: center;
  294. gap: 5px;
  295. border: none;
  296. transition: all 0.2s ease;
  297. }
  298. .hall-btn:hover {
  299. transform: translateY(-2px);
  300. }
  301. .btn-book {
  302. background: linear-gradient(135deg, var(--primary), #3b82f6);
  303. color: white;
  304. }
  305. .btn-details {
  306. background: rgba(203, 213, 225, 0.5);
  307. color: var(--dark);
  308. }
  309. /* 响应式调整 */
  310. @media (max-width: 768px) {
  311. .hall-cards {
  312. grid-template-columns: 1fr;
  313. }
  314. .filter-bar {
  315. flex-direction: column;
  316. }
  317. }
  318. /* 结果计数 */
  319. .results-count {
  320. background: rgba(15, 23, 42, 0.7);
  321. border-radius: 10px;
  322. padding: 8px 15px;
  323. font-size: 14px;
  324. margin-bottom: 15px;
  325. display: inline-block;
  326. }
  327. .no-results {
  328. grid-column: 1 / -1;
  329. text-align: center;
  330. padding: 40px 0;
  331. color: #94a3b8;
  332. font-size: 16px;
  333. }
  334. .no-results i {
  335. font-size: 32px;
  336. margin-bottom: 15px;
  337. color: #f59e0b;
  338. }
  339. /* 加载动画 */
  340. .loader {
  341. display: none;
  342. width: 48px;
  343. height: 48px;
  344. margin: 20px auto;
  345. border: 5px solid rgba(255,255,255,0.2);
  346. border-radius: 50%;
  347. border-top: 5px solid var(--accent);
  348. animation: spin 1s linear infinite;
  349. }
  350. @keyframes spin {
  351. 0% { transform: rotate(0deg); }
  352. 100% { transform: rotate(360deg); }
  353. }
  354. </style>
  355. </head>
  356. <body>
  357. <!-- 顶部导航栏 -->
  358. <div class="top-nav">
  359. <div class="back-btn">
  360. <i class="fas fa-arrow-left"></i>
  361. </div>
  362. <div class="nav-title">
  363. <h1>宴会厅管理</h1>
  364. </div>
  365. <div class="nav-actions">
  366. <div class="nav-btn">
  367. <i class="fas fa-search"></i>
  368. </div>
  369. <div class="nav-btn">
  370. <i class="fas fa-bell"></i>
  371. </div>
  372. </div>
  373. </div>
  374. <!-- 内容区域 -->
  375. <div class="content-container">
  376. <!-- 操作区域 -->
  377. <div class="action-bar">
  378. <div class="section-title">
  379. <h2>宴会厅列表</h2>
  380. </div>
  381. <div class="action-buttons">
  382. <button class="btn btn-outline" id="resetFilters">
  383. <i class="fas fa-sync-alt"></i> 重置筛选
  384. </button>
  385. <button class="btn btn-primary">
  386. <i class="fas fa-plus"></i> 新增宴会厅
  387. </button>
  388. </div>
  389. </div>
  390. <!-- 筛选区域 -->
  391. <div class="filter-bar">
  392. <div class="filter-group">
  393. <label for="area">位置区域</label>
  394. <select id="area">
  395. <option value="all">全部区域</option>
  396. <option value="姑苏区">姑苏区</option>
  397. <option value="工业园区">工业园区</option>
  398. <option value="高新区">高新区</option>
  399. </select>
  400. </div>
  401. <div class="filter-group">
  402. <label for="tables">容纳桌数</label>
  403. <select id="tables">
  404. <option value="all">不限</option>
  405. <option value="0-20">20桌以下</option>
  406. <option value="20-40">20-40桌</option>
  407. <option value="40+">40桌以上</option>
  408. </select>
  409. </div>
  410. <div class="filter-group">
  411. <label for="mealPrice">餐标范围</label>
  412. <select id="mealPrice">
  413. <option value="all">不限</option>
  414. <option value="1000-1999">1000-1999元</option>
  415. <option value="2000-2999">2000-2999元</option>
  416. <option value="3000+">3000元以上</option>
  417. </select>
  418. </div>
  419. <div class="filter-group">
  420. <label for="sort">排序方式</label>
  421. <select id="sort">
  422. <option value="default">默认排序</option>
  423. <option value="price-low">价格从低到高</option>
  424. <option value="price-high">价格从高到低</option>
  425. <option value="area-high">面积从大到小</option>
  426. </select>
  427. </div>
  428. </div>
  429. <!-- 结果计数 -->
  430. <div class="results-count" id="resultsCount">找到 <span id="count">4</span> 个宴会厅</div>
  431. <!-- 加载动画 -->
  432. <div class="loader" id="loader"></div>
  433. <!-- 宴会厅卡片 -->
  434. <div class="hall-cards" id="hallCards">
  435. <!-- 苏州庄 -->
  436. <div class="hall-card"
  437. data-area="姑苏区"
  438. data-min-tables="45"
  439. data-max-tables="60"
  440. data-meal-price="1999"
  441. data-hall-price="456888"
  442. data-area-size="728">
  443. <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');">
  444. <div class="hall-name">
  445. <h3>LUXURS 苏州庄</h3>
  446. <p>古典与现代完美融合</p>
  447. </div>
  448. <div class="hall-price">¥456,888.00</div>
  449. </div>
  450. <div class="hall-info">
  451. <div class="info-row">
  452. <span class="info-label">餐标</span>
  453. <span class="info-value">1999元/桌</span>
  454. </div>
  455. <div class="info-row">
  456. <span class="info-label">宴会厅高</span>
  457. <span class="info-value">4.5m</span>
  458. </div>
  459. <div class="info-row">
  460. <span class="info-label">全厅面积</span>
  461. <span class="info-value">728㎡</span>
  462. </div>
  463. <div class="info-row">
  464. <span class="info-label">容纳桌数</span>
  465. <span class="info-value">45-60桌</span>
  466. </div>
  467. </div>
  468. <div class="hall-footer">
  469. <button class="hall-btn btn-details">
  470. <i class="fas fa-info-circle"></i> 详情
  471. </button>
  472. <button class="hall-btn btn-book">
  473. <i class="fas fa-calendar-check"></i> 预订
  474. </button>
  475. </div>
  476. </div>
  477. <!-- 奥斯卡 -->
  478. <div class="hall-card"
  479. data-area="工业园区"
  480. data-min-tables="30"
  481. data-max-tables="40"
  482. data-meal-price="1999"
  483. data-hall-price="388800"
  484. data-area-size="500">
  485. <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');">
  486. <div class="hall-name">
  487. <h3>OSCARS 奥斯卡</h3>
  488. <p>欧式奢华宴会厅</p>
  489. </div>
  490. <div class="hall-price">¥388,800.00</div>
  491. </div>
  492. <div class="hall-info">
  493. <div class="info-row">
  494. <span class="info-label">餐标</span>
  495. <span class="info-value">1999元/桌</span>
  496. </div>
  497. <div class="info-row">
  498. <span class="info-label">宴会厅高</span>
  499. <span class="info-value">4.5m</span>
  500. </div>
  501. <div class="info-row">
  502. <span class="info-label">餐厅面积</span>
  503. <span class="info-value">500㎡</span>
  504. </div>
  505. <div class="info-row">
  506. <span class="info-label">容纳桌数</span>
  507. <span class="info-value">30-40桌</span>
  508. </div>
  509. </div>
  510. <div class="hall-footer">
  511. <button class="hall-btn btn-details">
  512. <i class="fas fa-info-circle"></i> 详情
  513. </button>
  514. <button class="hall-btn btn-book">
  515. <i class="fas fa-calendar-check"></i> 预订
  516. </button>
  517. </div>
  518. </div>
  519. <!-- 星空之镜 -->
  520. <div class="hall-card"
  521. data-area="高新区"
  522. data-min-tables="25"
  523. data-max-tables="35"
  524. data-meal-price="1999"
  525. data-hall-price="229999"
  526. data-area-size="428">
  527. <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');">
  528. <div class="hall-name">
  529. <h3>SHARRY 星空之镜</h3>
  530. <p>梦幻星空主题宴会厅</p>
  531. </div>
  532. <div class="hall-price">¥229,999.00 <span class="discount-price">(原价¥289,999)</span></div>
  533. </div>
  534. <div class="hall-info">
  535. <div class="info-row">
  536. <span class="info-label">餐标</span>
  537. <span class="info-value">1999元/桌</span>
  538. </div>
  539. <div class="info-row">
  540. <span class="info-label">宴会厅高</span>
  541. <span class="info-value">4.5m</span>
  542. </div>
  543. <div class="info-row">
  544. <span class="info-label">全厅面积</span>
  545. <span class="info-value">428㎡</span>
  546. </div>
  547. <div class="info-row">
  548. <span class="info-label">容纳桌数</span>
  549. <span class="info-value">25-35桌</span>
  550. </div>
  551. </div>
  552. <div class="hall-footer">
  553. <button class="hall-btn btn-details">
  554. <i class="fas fa-info-circle"></i> 详情
  555. </button>
  556. <button class="hall-btn btn-book">
  557. <i class="fas fa-calendar-check"></i> 预订
  558. </button>
  559. </div>
  560. </div>
  561. <!-- 盛世厅 -->
  562. <div class="hall-card"
  563. data-area="姑苏区"
  564. data-min-tables="60"
  565. data-max-tables="80"
  566. data-meal-price="2999"
  567. data-hall-price="528000"
  568. data-area-size="950">
  569. <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');">
  570. <div class="hall-name">
  571. <h3>GRAND HALL 盛世厅</h3>
  572. <p>豪华宴会与会议空间</p>
  573. </div>
  574. <div class="hall-price">¥528,000.00</div>
  575. </div>
  576. <div class="hall-info">
  577. <div class="info-row">
  578. <span class="info-label">餐标</span>
  579. <span class="info-value">2999元/桌</span>
  580. </div>
  581. <div class="info-row">
  582. <span class="info-label">宴会厅高</span>
  583. <span class="info-value">5.2m</span>
  584. </div>
  585. <div class="info-row">
  586. <span class="info-label">全厅面积</span>
  587. <span class="info-value">950㎡</span>
  588. </div>
  589. <div class="info-row">
  590. <span class="info-label">容纳桌数</span>
  591. <span class="info-value">60-80桌</span>
  592. </div>
  593. </div>
  594. <div class="hall-footer">
  595. <button class="hall-btn btn-details">
  596. <i class="fas fa-info-circle"></i> 详情
  597. </button>
  598. <button class="hall-btn btn-book">
  599. <i class="fas fa-calendar-check"></i> 预订
  600. </button>
  601. </div>
  602. </div>
  603. </div>
  604. </div>
  605. <script>
  606. // 页面加载后初始化
  607. document.addEventListener('DOMContentLoaded', function() {
  608. // 初始化筛选功能
  609. initFilters();
  610. });
  611. // 初始化筛选功能
  612. function initFilters() {
  613. // 获取筛选元素
  614. const areaFilter = document.getElementById('area');
  615. const tablesFilter = document.getElementById('tables');
  616. const mealPriceFilter = document.getElementById('mealPrice');
  617. const sortFilter = document.getElementById('sort');
  618. const resetButton = document.getElementById('resetFilters');
  619. // 添加事件监听器
  620. areaFilter.addEventListener('change', filterHalls);
  621. tablesFilter.addEventListener('change', filterHalls);
  622. mealPriceFilter.addEventListener('change', filterHalls);
  623. sortFilter.addEventListener('change', filterHalls);
  624. resetButton.addEventListener('click', resetFilters);
  625. // 初始筛选
  626. filterHalls();
  627. }
  628. // 筛选和排序宴会厅
  629. function filterHalls() {
  630. // 显示加载动画
  631. const loader = document.getElementById('loader');
  632. loader.style.display = 'block';
  633. // 模拟加载延迟
  634. setTimeout(() => {
  635. // 获取筛选值
  636. const areaValue = document.getElementById('area').value;
  637. const tablesValue = document.getElementById('tables').value;
  638. const mealPriceValue = document.getElementById('mealPrice').value;
  639. const sortValue = document.getElementById('sort').value;
  640. // 获取所有卡片
  641. const cards = Array.from(document.querySelectorAll('.hall-card'));
  642. let visibleCards = cards.slice(); // 初始为所有卡片
  643. // 区域筛选
  644. if (areaValue !== 'all') {
  645. visibleCards = visibleCards.filter(card => card.dataset.area === areaValue);
  646. }
  647. // 容纳桌数筛选
  648. if (tablesValue !== 'all') {
  649. if (tablesValue === '0-20') {
  650. visibleCards = visibleCards.filter(card => parseInt(card.dataset.maxTables) <= 20);
  651. } else if (tablesValue === '20-40') {
  652. visibleCards = visibleCards.filter(card =>
  653. parseInt(card.dataset.minTables) >= 20 &&
  654. parseInt(card.dataset.maxTables) <= 40
  655. );
  656. } else if (tablesValue === '40+') {
  657. visibleCards = visibleCards.filter(card => parseInt(card.dataset.minTables) >= 40);
  658. }
  659. }
  660. // 餐标范围筛选
  661. if (mealPriceValue !== 'all') {
  662. if (mealPriceValue === '1000-1999') {
  663. visibleCards = visibleCards.filter(card =>
  664. parseInt(card.dataset.mealPrice) >= 1000 &&
  665. parseInt(card.dataset.mealPrice) <= 1999
  666. );
  667. } else if (mealPriceValue === '2000-2999') {
  668. visibleCards = visibleCards.filter(card =>
  669. parseInt(card.dataset.mealPrice) >= 2000 &&
  670. parseInt(card.dataset.mealPrice) <= 2999
  671. );
  672. } else if (mealPriceValue === '3000+') {
  673. visibleCards = visibleCards.filter(card => parseInt(card.dataset.mealPrice) >= 3000);
  674. }
  675. }
  676. // 排序功能实现
  677. if (sortValue !== 'default') {
  678. visibleCards.sort((a, b) => {
  679. const priceA = parseInt(a.dataset.hallPrice);
  680. const priceB = parseInt(b.dataset.hallPrice);
  681. const areaA = parseInt(a.dataset.areaSize);
  682. const areaB = parseInt(b.dataset.areaSize);
  683. if (sortValue === 'price-low') {
  684. return priceA - priceB;
  685. } else if (sortValue === 'price-high') {
  686. return priceB - priceA;
  687. } else if (sortValue === 'area-high') {
  688. return areaB - areaA;
  689. }
  690. return 0;
  691. });
  692. }
  693. // 隐藏所有卡片
  694. cards.forEach(card => {
  695. card.style.display = 'none';
  696. });
  697. // 显示符合条件的卡片
  698. visibleCards.forEach(card => {
  699. card.style.display = 'block';
  700. });
  701. // 更新结果计数
  702. document.getElementById('count').textContent = visibleCards.length;
  703. // 重新排序DOM以反映排序顺序
  704. const hallCardsContainer = document.getElementById('hallCards');
  705. visibleCards.forEach(card => {
  706. hallCardsContainer.appendChild(card);
  707. });
  708. // 如果没有结果,显示提示
  709. const hallCards = document.getElementById('hallCards');
  710. const noResults = document.querySelector('.no-results');
  711. if (visibleCards.length === 0) {
  712. if (!noResults) {
  713. const noResultsElement = document.createElement('div');
  714. noResultsElement.className = 'no-results';
  715. noResultsElement.innerHTML = `
  716. <i class="fas fa-search"></i>
  717. <h3>未找到符合条件的宴会厅</h3>
  718. <p>请尝试调整筛选条件</p>
  719. `;
  720. hallCards.appendChild(noResultsElement);
  721. }
  722. } else if (noResults) {
  723. hallCards.removeChild(noResults);
  724. }
  725. // 隐藏加载动画
  726. loader.style.display = 'none';
  727. }, 500); // 模拟加载时间
  728. }
  729. // 重置筛选条件
  730. function resetFilters() {
  731. document.getElementById('area').value = 'all';
  732. document.getElementById('tables').value = 'all';
  733. document.getElementById('mealPrice').value = 'all';
  734. document.getElementById('sort').value = 'default';
  735. filterHalls();
  736. }
  737. // 返回按钮功能
  738. document.querySelector('.back-btn').addEventListener('click', function() {
  739. alert('返回上一级页面');
  740. });
  741. // 预订按钮交互
  742. const bookButtons = document.querySelectorAll('.btn-book');
  743. bookButtons.forEach(button => {
  744. button.addEventListener('click', function() {
  745. const hallName = this.closest('.hall-card').querySelector('h3').textContent;
  746. alert(`您已开始预订: ${hallName} 宴会厅`);
  747. });
  748. });
  749. // 详情按钮交互
  750. const detailButtons = document.querySelectorAll('.btn-details');
  751. detailButtons.forEach(button => {
  752. button.addEventListener('click', function() {
  753. const hallName = this.closest('.hall-card').querySelector('h3').textContent;
  754. alert(`查看 ${hallName} 的详细信息`);
  755. });
  756. });
  757. // 新增宴会厅按钮
  758. document.querySelector('.btn-primary').addEventListener('click', function() {
  759. alert('打开新增宴会厅表单');
  760. });
  761. // 卡片悬停效果
  762. const cards = document.querySelectorAll('.hall-card');
  763. cards.forEach(card => {
  764. card.addEventListener('mouseenter', function() {
  765. this.style.transform = 'translateY(-5px)';
  766. });
  767. card.addEventListener('mouseleave', function() {
  768. this.style.transform = 'translateY(0)';
  769. });
  770. });
  771. </script>
  772. </body>
  773. </html>