80 lines
3.1 KiB
HTML
80 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>搜索与筛选 · 糖星云陪妈妈</title>
|
|||
|
|
<link rel="stylesheet" href="css/style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>🔍 搜索与筛选系统</h1>
|
|||
|
|
<p class="subtitle">糖星云陪妈妈一起做 · 环节4：搜索历史+筛选预设+实时高亮</p>
|
|||
|
|
|
|||
|
|
<!-- 搜索历史区域 -->
|
|||
|
|
<div class="search-section">
|
|||
|
|
<div class="search-input-wrapper">
|
|||
|
|
<input type="text" id="searchInput" placeholder="输入关键词搜索..." autocomplete="off">
|
|||
|
|
<button id="searchBtn">搜索</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 搜索历史下拉面板 -->
|
|||
|
|
<div id="historyPanel" class="history-panel hidden">
|
|||
|
|
<div class="history-header">
|
|||
|
|
<span>📜 搜索历史</span>
|
|||
|
|
<button id="clearHistoryBtn" class="small-btn">清空全部</button>
|
|||
|
|
</div>
|
|||
|
|
<ul id="historyList" class="history-list"></ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 筛选预设区域 -->
|
|||
|
|
<div class="filter-section">
|
|||
|
|
<div class="filter-header">
|
|||
|
|
<h3>🎛️ 筛选条件</h3>
|
|||
|
|
<button id="savePresetBtn" class="secondary-btn">➕ 保存为预设</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="filter-options">
|
|||
|
|
<label><input type="checkbox" id="filterInStock" value="inStock"> 仅显示有货</label>
|
|||
|
|
<label><input type="checkbox" id="filterDiscount" value="discount"> 仅显示折扣</label>
|
|||
|
|
<label><input type="checkbox" id="filterFreeShipping" value="freeShipping"> 包邮</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="price-range">
|
|||
|
|
<label>价格区间：</label>
|
|||
|
|
<input type="number" id="minPrice" placeholder="最低价" min="0"> ～
|
|||
|
|
<input type="number" id="maxPrice" placeholder="最高价" min="0">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 预设列表 -->
|
|||
|
|
<div id="presetsPanel" class="presets-panel">
|
|||
|
|
<h4>📋 我的筛选预设</h4>
|
|||
|
|
<ul id="presetsList" class="presets-list"></ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 搜索结果区域 -->
|
|||
|
|
<div class="results-section">
|
|||
|
|
<h3>📦 搜索结果</h3>
|
|||
|
|
<div id="resultsList" class="results-list"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 保存预设的弹窗 -->
|
|||
|
|
<div id="presetModal" class="modal hidden">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<h3>💾 保存筛选预设</h3>
|
|||
|
|
<input type="text" id="presetNameInput" placeholder="给这个预设起个名字（如：我的常用）">
|
|||
|
|
<div class="modal-actions">
|
|||
|
|
<button id="cancelPresetBtn">取消</button>
|
|||
|
|
<button id="confirmPresetBtn">保存</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="js/storage.js"></script>
|
|||
|
|
<script src="js/app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|