|
|
@@ -1 +1,918 @@
|
|
|
-<p>filter-screen works!</p>
|
|
|
+<!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">
|
|
|
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap">
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --primary: #FF6B35;
|
|
|
+ --primary-dark: #e05a2b;
|
|
|
+ --secondary: #4A90E2;
|
|
|
+ --accent: #FFD166;
|
|
|
+ --light: #F8F7F2;
|
|
|
+ --dark: #333333;
|
|
|
+ --success: #06D6A0;
|
|
|
+ --gray: #8A8A8A;
|
|
|
+ --gray-light: #E0E0E0;
|
|
|
+ --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ --radius: 12px;
|
|
|
+ --transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: 'Noto Sans SC', sans-serif;
|
|
|
+ background: linear-gradient(135deg, #fff9f5 0%, #f5f9ff 100%);
|
|
|
+ color: var(--dark);
|
|
|
+ line-height: 1.6;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部样式 */
|
|
|
+ header {
|
|
|
+ background: white;
|
|
|
+ padding: 15px 0;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo i {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 500px;
|
|
|
+ margin: 0 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 20px 12px 50px;
|
|
|
+ border: 2px solid var(--gray-light);
|
|
|
+ border-radius: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar input:focus {
|
|
|
+ border-color: var(--primary);
|
|
|
+ outline: none;
|
|
|
+ box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar i {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: var(--gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ background: var(--light);
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--dark);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn:hover {
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .badge {
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: -5px;
|
|
|
+ background: var(--success);
|
|
|
+ color: white;
|
|
|
+ font-size: 10px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分类筛选区 */
|
|
|
+ .filter-section {
|
|
|
+ background: white;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ margin: 20px 0;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ border-bottom: 1px solid var(--gray-light);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title h2 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title i {
|
|
|
+ margin-right: 10px;
|
|
|
+ color: var(--primary);
|
|
|
+ background: rgba(255, 107, 53, 0.1);
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-categories {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 200px;
|
|
|
+ background: var(--light);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ padding: 20px;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-header i {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-header h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-options {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 12px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-option:hover {
|
|
|
+ background: #fff0eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-option.selected {
|
|
|
+ background: rgba(255, 107, 53, 0.1);
|
|
|
+ border: 1px solid var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-option .check {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border: 2px solid var(--gray-light);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-option.selected .check {
|
|
|
+ background: var(--primary);
|
|
|
+ border-color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-option.selected .check::after {
|
|
|
+ content: "✓";
|
|
|
+ color: white;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 场景筛选特殊样式 */
|
|
|
+ .scene-options .filter-option {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-options .filter-option::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background: var(--primary);
|
|
|
+ clip-path: polygon(100% 0, 0 0, 100% 100%);
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-options .filter-option.selected::after {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-options .filter-option.selected::before {
|
|
|
+ content: "✓";
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ right: 4px;
|
|
|
+ color: white;
|
|
|
+ font-size: 12px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 当前筛选标签 */
|
|
|
+ .active-filters {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-tag {
|
|
|
+ background: rgba(255, 107, 53, 0.1);
|
|
|
+ color: var(--primary);
|
|
|
+ padding: 6px 15px;
|
|
|
+ border-radius: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-tag i {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-tag i:hover {
|
|
|
+ color: var(--primary-dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片展示区 */
|
|
|
+ .gallery {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
|
+ gap: 25px;
|
|
|
+ margin: 30px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-item {
|
|
|
+ background: white;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ transition: var(--transition);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-item:hover {
|
|
|
+ transform: translateY(-10px);
|
|
|
+ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-image {
|
|
|
+ height: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-image img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-item:hover .gallery-image img {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-info {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-title {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-price {
|
|
|
+ color: var(--primary);
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-tag {
|
|
|
+ background: var(--light);
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery-tag.primary {
|
|
|
+ background: rgba(74, 144, 226, 0.1);
|
|
|
+ color: var(--secondary);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 智能推荐 */
|
|
|
+ .recommendation-section {
|
|
|
+ background: white;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ padding: 20px;
|
|
|
+ margin: 30px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommendation-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommendation-card {
|
|
|
+ background: var(--light);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ padding: 20px;
|
|
|
+ transition: var(--transition);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommendation-card:hover {
|
|
|
+ background: rgba(255, 107, 53, 0.05);
|
|
|
+ transform: translateY(-5px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommendation-card h4 {
|
|
|
+ color: var(--primary);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommendation-card ul {
|
|
|
+ list-style: none;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommendation-card li {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recommendation-card li::before {
|
|
|
+ content: "•";
|
|
|
+ position: absolute;
|
|
|
+ left: -15px;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式设计 */
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .header-content {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar {
|
|
|
+ margin: 10px 0;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-categories {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gallery {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <header>
|
|
|
+ <div class="container">
|
|
|
+ <div class="header-content">
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-utensils"></i>
|
|
|
+ <span>美食图库Pro</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="search-bar">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ <input type="text" placeholder="搜索美食图片、分类或关键词...">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="user-actions">
|
|
|
+ <div class="action-btn">
|
|
|
+ <i class="fas fa-bell"></i>
|
|
|
+ <span class="badge">3</span>
|
|
|
+ </div>
|
|
|
+ <div class="action-btn">
|
|
|
+ <i class="fas fa-shopping-cart"></i>
|
|
|
+ </div>
|
|
|
+ <div class="action-btn">
|
|
|
+ <i class="fas fa-user"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <!-- 当前筛选标签 -->
|
|
|
+ <div class="active-filters">
|
|
|
+ <div class="filter-tag">
|
|
|
+ 川菜 <i class="fas fa-times"></i>
|
|
|
+ </div>
|
|
|
+ <div class="filter-tag">
|
|
|
+ 麻辣 <i class="fas fa-times"></i>
|
|
|
+ </div>
|
|
|
+ <div class="filter-tag">
|
|
|
+ 爆炒 <i class="fas fa-times"></i>
|
|
|
+ </div>
|
|
|
+ <div class="filter-tag">
|
|
|
+ 热菜 <i class="fas fa-times"></i>
|
|
|
+ </div>
|
|
|
+ <div class="filter-tag">
|
|
|
+ 美团外卖 <i class="fas fa-times"></i>
|
|
|
+ </div>
|
|
|
+ <div class="filter-tag">
|
|
|
+ 餐厅大屏 <i class="fas fa-times"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分类筛选区 -->
|
|
|
+ <div class="filter-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="fas fa-filter"></i>
|
|
|
+ <h2>美食图片筛选</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="filter-categories">
|
|
|
+ <!-- 菜系分类 -->
|
|
|
+ <div class="filter-card">
|
|
|
+ <div class="filter-header">
|
|
|
+ <i class="fas fa-flag"></i>
|
|
|
+ <h3>菜系分类</h3>
|
|
|
+ </div>
|
|
|
+ <div class="filter-options">
|
|
|
+ <div class="filter-option selected">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>川菜</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>粤菜</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>鲁菜</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>苏菜</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>西餐</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>日料</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 口味分类 -->
|
|
|
+ <div class="filter-card">
|
|
|
+ <div class="filter-header">
|
|
|
+ <i class="fas fa-pepper-hot"></i>
|
|
|
+ <h3>口味分类</h3>
|
|
|
+ </div>
|
|
|
+ <div class="filter-options">
|
|
|
+ <div class="filter-option selected">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>麻辣</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>酸甜</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>鲜香</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>咸香</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>清淡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 做法分类 -->
|
|
|
+ <div class="filter-card">
|
|
|
+ <div class="filter-header">
|
|
|
+ <i class="fas fa-fire"></i>
|
|
|
+ <h3>做法分类</h3>
|
|
|
+ </div>
|
|
|
+ <div class="filter-options">
|
|
|
+ <div class="filter-option selected">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>爆炒</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>蒸</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>烤</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>炸</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>炖</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 冷暖分类 -->
|
|
|
+ <div class="filter-card">
|
|
|
+ <div class="filter-header">
|
|
|
+ <i class="fas fa-temperature-high"></i>
|
|
|
+ <h3>冷暖分类</h3>
|
|
|
+ </div>
|
|
|
+ <div class="filter-options">
|
|
|
+ <div class="filter-option selected">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>热菜</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>凉菜</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>冷热皆可</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 使用场景 -->
|
|
|
+ <div class="filter-card">
|
|
|
+ <div class="filter-header">
|
|
|
+ <i class="fas fa-desktop"></i>
|
|
|
+ <h3>使用场景</h3>
|
|
|
+ </div>
|
|
|
+ <div class="filter-options scene-options">
|
|
|
+ <div class="filter-option selected">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>美团外卖 (1:1比例)</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option selected">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>餐厅大屏 (4K分辨率)</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>菜单设计</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>社交媒体</span>
|
|
|
+ </div>
|
|
|
+ <div class="filter-option">
|
|
|
+ <div class="check"></div>
|
|
|
+ <span>海报印刷</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片展示区 -->
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="fas fa-images"></i>
|
|
|
+ <h2>精选美食图片 <span style="color: var(--gray); font-weight: normal; font-size: 16px;">(共86张匹配图片)</span></h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="gallery">
|
|
|
+ <!-- 图片1 -->
|
|
|
+ <div class="gallery-item">
|
|
|
+ <div class="gallery-image">
|
|
|
+ <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="麻辣水煮鱼">
|
|
|
+ </div>
|
|
|
+ <div class="gallery-info">
|
|
|
+ <div class="gallery-title">
|
|
|
+ <span>麻辣水煮鱼</span>
|
|
|
+ <span class="gallery-price">¥28</span>
|
|
|
+ </div>
|
|
|
+ <p>川味经典，麻辣鲜香，汤汁浓郁</p>
|
|
|
+ <div class="gallery-tags">
|
|
|
+ <div class="gallery-tag primary">川菜</div>
|
|
|
+ <div class="gallery-tag">麻辣</div>
|
|
|
+ <div class="gallery-tag">热菜</div>
|
|
|
+ <div class="gallery-tag primary">美团</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片2 -->
|
|
|
+ <div class="gallery-item">
|
|
|
+ <div class="gallery-image">
|
|
|
+ <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="精致牛排">
|
|
|
+ </div>
|
|
|
+ <div class="gallery-info">
|
|
|
+ <div class="gallery-title">
|
|
|
+ <span>精致牛排</span>
|
|
|
+ <span class="gallery-price">¥68</span>
|
|
|
+ </div>
|
|
|
+ <p>精选牛肉，五分熟，搭配特调酱汁</p>
|
|
|
+ <div class="gallery-tags">
|
|
|
+ <div class="gallery-tag primary">西餐</div>
|
|
|
+ <div class="gallery-tag">鲜香</div>
|
|
|
+ <div class="gallery-tag">热菜</div>
|
|
|
+ <div class="gallery-tag primary">大屏</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片3 -->
|
|
|
+ <div class="gallery-item">
|
|
|
+ <div class="gallery-image">
|
|
|
+ <img src="https://images.unsplash.com/photo-1617196034796-73dfa7b1fd56?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="日式刺身">
|
|
|
+ </div>
|
|
|
+ <div class="gallery-info">
|
|
|
+ <div class="gallery-title">
|
|
|
+ <span>日式刺身拼盘</span>
|
|
|
+ <span class="gallery-price">¥98</span>
|
|
|
+ </div>
|
|
|
+ <p>新鲜三文鱼、金枪鱼、甜虾刺身</p>
|
|
|
+ <div class="gallery-tags">
|
|
|
+ <div class="gallery-tag primary">日料</div>
|
|
|
+ <div class="gallery-tag">清淡</div>
|
|
|
+ <div class="gallery-tag">凉菜</div>
|
|
|
+ <div class="gallery-tag primary">大屏</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片4 -->
|
|
|
+ <div class="gallery-item">
|
|
|
+ <div class="gallery-image">
|
|
|
+ <img src="https://images.unsplash.com/photo-1603893662172-99ed0cea2a08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="干锅牛蛙">
|
|
|
+ </div>
|
|
|
+ <div class="gallery-info">
|
|
|
+ <div class="gallery-title">
|
|
|
+ <span>干锅牛蛙</span>
|
|
|
+ <span class="gallery-price">¥48</span>
|
|
|
+ </div>
|
|
|
+ <p>鲜嫩牛蛙，香辣可口，配菜丰富</p>
|
|
|
+ <div class="gallery-tags">
|
|
|
+ <div class="gallery-tag primary">川菜</div>
|
|
|
+ <div class="gallery-tag">麻辣</div>
|
|
|
+ <div class="gallery-tag">热菜</div>
|
|
|
+ <div class="gallery-tag primary">美团</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片5 -->
|
|
|
+ <div class="gallery-item">
|
|
|
+ <div class="gallery-image">
|
|
|
+ <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="意式披萨">
|
|
|
+ </div>
|
|
|
+ <div class="gallery-info">
|
|
|
+ <div class="gallery-title">
|
|
|
+ <span>意式披萨</span>
|
|
|
+ <span class="gallery-price">¥38</span>
|
|
|
+ </div>
|
|
|
+ <p>手工薄底，多种配料，芝士浓郁</p>
|
|
|
+ <div class="gallery-tags">
|
|
|
+ <div class="gallery-tag primary">西餐</div>
|
|
|
+ <div class="gallery-tag">咸香</div>
|
|
|
+ <div class="gallery-tag">热菜</div>
|
|
|
+ <div class="gallery-tag primary">美团</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片6 -->
|
|
|
+ <div class="gallery-item">
|
|
|
+ <div class="gallery-image">
|
|
|
+ <img src="https://images.unsplash.com/photo-1606491956689-2ea866880c84?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="清蒸大闸蟹">
|
|
|
+ </div>
|
|
|
+ <div class="gallery-info">
|
|
|
+ <div class="gallery-title">
|
|
|
+ <span>清蒸大闸蟹</span>
|
|
|
+ <span class="gallery-price">¥88</span>
|
|
|
+ </div>
|
|
|
+ <p>阳澄湖大闸蟹，蟹黄饱满，原汁原味</p>
|
|
|
+ <div class="gallery-tags">
|
|
|
+ <div class="gallery-tag primary">苏菜</div>
|
|
|
+ <div class="gallery-tag">鲜香</div>
|
|
|
+ <div class="gallery-tag">热菜</div>
|
|
|
+ <div class="gallery-tag primary">大屏</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 智能推荐 -->
|
|
|
+ <div class="recommendation-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="fas fa-lightbulb"></i>
|
|
|
+ <h2>智能推荐组合</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recommendation-grid">
|
|
|
+ <div class="recommendation-card">
|
|
|
+ <h4><i class="fas fa-utensils"></i> 川菜精选组合</h4>
|
|
|
+ <ul>
|
|
|
+ <li>菜系：川菜</li>
|
|
|
+ <li>口味：麻辣/中辣</li>
|
|
|
+ <li>做法：爆炒/干锅</li>
|
|
|
+ <li>场景：美团+大屏</li>
|
|
|
+ <li>匹配图片：24张</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recommendation-card">
|
|
|
+ <h4><i class="fas fa-hotel"></i> 高端宴席组合</h4>
|
|
|
+ <ul>
|
|
|
+ <li>菜系：粤菜/苏菜</li>
|
|
|
+ <li>口味：鲜香/清淡</li>
|
|
|
+ <li>做法：蒸/炖</li>
|
|
|
+ <li>场景：大屏+菜单</li>
|
|
|
+ <li>匹配图片：18张</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recommendation-card">
|
|
|
+ <h4><i class="fas fa-motorcycle"></i> 外卖爆款组合</h4>
|
|
|
+ <ul>
|
|
|
+ <li>菜系：川菜/西餐</li>
|
|
|
+ <li>口味：麻辣/酸甜</li>
|
|
|
+ <li>做法：炒/炸</li>
|
|
|
+ <li>场景：美团专用</li>
|
|
|
+ <li>匹配图片：32张</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recommendation-card">
|
|
|
+ <h4><i class="fas fa-snowflake"></i> 夏季凉菜组合</h4>
|
|
|
+ <ul>
|
|
|
+ <li>菜系：所有</li>
|
|
|
+ <li>口味：清淡/酸甜</li>
|
|
|
+ <li>做法：凉拌/刺身</li>
|
|
|
+ <li>场景：美团+社交媒体</li>
|
|
|
+ <li>匹配图片：21张</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 筛选选项交互
|
|
|
+ document.querySelectorAll('.filter-option').forEach(option => {
|
|
|
+ option.addEventListener('click', function() {
|
|
|
+ this.classList.toggle('selected');
|
|
|
+
|
|
|
+ // 更新当前筛选标签显示
|
|
|
+ updateActiveFilters();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 移除筛选标签
|
|
|
+ document.querySelectorAll('.filter-tag i').forEach(icon => {
|
|
|
+ icon.addEventListener('click', function() {
|
|
|
+ this.parentElement.remove();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新当前筛选标签
|
|
|
+ function updateActiveFilters() {
|
|
|
+ // 在实际应用中，这里会从筛选选项中获取已选内容
|
|
|
+ // 这里仅作为演示
|
|
|
+ console.log("筛选条件已更新");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图片悬停效果增强
|
|
|
+ document.querySelectorAll('.gallery-item').forEach(item => {
|
|
|
+ item.addEventListener('mouseenter', function() {
|
|
|
+ this.style.transform = 'translateY(-10px)';
|
|
|
+ });
|
|
|
+
|
|
|
+ item.addEventListener('mouseleave', function() {
|
|
|
+ this.style.transform = 'translateY(0)';
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 推荐卡片点击效果
|
|
|
+ document.querySelectorAll('.recommendation-card').forEach(card => {
|
|
|
+ card.addEventListener('click', function() {
|
|
|
+ alert('已应用推荐组合筛选条件！');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
