Accueil Explorer Aide
S'inscrire Connexion
0235697
/
food-picture
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

Merge branch 'master' of http://git.fmode.cn:3000/0235697/food-picture

lizi il y a 2 jours
Parent
c388a8e99a 1f7925b634
commit
f7c4b905c5
12 fichiers modifiés avec 820 ajouts et 961 suppressions
Vue unifiée Afficher les stats Diff
  1. 6 4
      food-pictures.md
  2. 2 1
      picture-web/angular.json
  3. 2 0
      picture-web/src/index.html
  4. 161 911
      picture-web/src/modules/first-home/filter-screen/filter-screen.html
  5. 388 0
      picture-web/src/modules/first-home/filter-screen/filter-screen.scss
  6. 43 20
      picture-web/src/modules/first-home/filter-screen/filter-screen.spec.ts
  7. 169 5
      picture-web/src/modules/first-home/filter-screen/filter-screen.ts
  8. 1 1
      picture-web/src/modules/picture/mobile.routes.ts
  9. 3 3
      picture-web/src/modules/picture/nav-mobile-tabs/nav-mobile-tabs.ts
  10. 6 5
      picture-web/src/modules/thired-ser/ogin-screen/ogin-screen.html
  11. 2 2
      picture-web/src/modules/thired-ser/ogin-screen/ogin-screen.ts
  12. 37 9
      picture-web/src/modules/thired-ser/upload-screen/upload-screen.html

+ 6 - 4
food-pictures.md
Voir le fichier 

@@ -1,14 +1,16 @@
 
 - src/modules
 
 - src/modules
 
   - picture
 
   - picture
 
-
 
+    - nav-moblie-tabs     #底部导航
 
     - home-tab            # 首页
 
     - home-tab            # 首页
 
-      - filter-screen       # 筛选页
 
-      - image-detail        # 图片详情界面
 
-      - image-search        #图片搜索界面
 
+      - first-home
 
+       - filter-screen       # 筛选页
 
+       - image-detail        # 图片详情界面
 
+       - image-search        #图片搜索界面
 
     
     
      - cart-tab            # 购物车界面
 
      - cart-tab            # 购物车界面
 
    
    
      - ser-tab            # 我的（个人中心）
 
      - ser-tab            # 我的（个人中心）
 
+       -thired-ser
 
        - ogin-screen        # 登录界面
 
        - ogin-screen        # 登录界面
 
        - upload-screen       # 上传界面
 
        - upload-screen       # 上传界面
 
        - card-image        # 已购图片界面
 
        - card-image        # 已购图片界面

+ 2 - 1
picture-web/angular.json
Voir le fichier 

@@ -31,7 +31,8 @@
 
             ],
 
             ],
 
             "styles": [
 
             "styles": [
 
               "src/styles.scss",
 
               "src/styles.scss",
 
-                "node_modules/swiper/swiper-bundle.min.css"
 
+                "node_modules/swiper/swiper-bundle.min.css",
 
+                 "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
 
                 
                 
             ]
 
             ]
 
           },
 
           },

+ 2 - 0
picture-web/src/index.html
Voir le fichier 

@@ -7,6 +7,8 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
   <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.css" rel="stylesheet">
 
   <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.css" rel="stylesheet">
 
+   <!-- 添加 Material Icons 字体 -->
 
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
   <app-root></app-root>
 
   <app-root></app-root>

+ 161 - 911
picture-web/src/modules/first-home/filter-screen/filter-screen.html
Voir le fichier 

@@ -1,918 +1,168 @@
 
-<!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>
 
+<!-- src/app/modules/first-home/filter-screen/filter-screen.html -->
 
+<header>
 
+  <div class="container">
 
+    <div class="header-content">
 
+      <div class="back-btn" (click)="goBack()">
 
+        <i class="fas fa-arrow-left"></i>
 
+        <span>返回</span>
 
+      </div>
 
+      
+      <div class="logo">
 
+        <i class="fas fa-utensils"></i>
 
+        <span>播菜汪</span>
 
+      </div>
 
+      
+      <!-- 空div保持布局平衡 -->
 
+      <div style="width: 100px;"></div>
 
+    </div>
 
+  </div>
 
+</header>
 
+
 
+<div class="container">
 
+  <!-- 分类筛选区 -->
 
+  <div class="filter-section">
 
+    <div class="section-title">
 
+      <i class="fas fa-filter"></i>
 
+      <h2>美食图片筛选</h2>
 
+    </div>
 
     
     
-    <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 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" 
+               *ngFor="let option of cuisineOptions" 
+               [class.selected]="option.selected"
 
+               (click)="toggleOption(option)">
 
+            <div class="check"></div>
 
+            <span>{{option.name}}</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" 
+               *ngFor="let option of tasteOptions" 
+               [class.selected]="option.selected"
 
+               (click)="toggleOption(option)">
 
+            <div class="check"></div>
 
+            <span>{{option.name}}</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" 
+               *ngFor="let option of cookingOptions" 
+               [class.selected]="option.selected"
 
+               (click)="toggleOption(option)">
 
+            <div class="check"></div>
 
+            <span>{{option.name}}</span>
 
+          </div>
 
         </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="filter-card">
 
+        <div class="filter-header">
 
+          <i class="fas fa-temperature-high"></i>
 
+          <h3>冷暖分类</h3>
 
         </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 class="filter-options">
 
+          <div class="filter-option" 
+               *ngFor="let option of temperatureOptions" 
+               [class.selected]="option.selected"
 
+               (click)="toggleOption(option)">
 
+            <div class="check"></div>
 
+            <span>{{option.name}}</span>
 
+          </div>
 
         </div>
 
         </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="filter-card">
 
+        <div class="filter-header">
 
+          <i class="fas fa-desktop"></i>
 
+          <h3>使用场景</h3>
 
         </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 class="filter-options scene-options">
 
+          <div class="filter-option" 
+               *ngFor="let option of sceneOptions" 
+               [class.selected]="option.selected"
 
+               (click)="toggleOption(option)">
 
+            <div class="check"></div>
 
+            <span>{{option.name}}</span>
 
+          </div>
 
         </div>
 
         </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>
 
+    
+    <!-- 确定按钮 -->
 
+    <div class="confirm-btn-container">
 
+      <button class="confirm-btn" (click)="confirmFilter()">确定筛选</button>
 
+    </div>
 
+  </div>
 
+  
+  <!-- 图片展示区 -->
 
+  <div class="section-title">
 
+    <i class="fas fa-images"></i>
 
+    <h2>精选美食图片 <span style="color: var(--gray); font-weight: normal; font-size: 16px;">(共{{galleryItems.length}}张匹配图片)</span></h2>
 
+  </div>
 
+  
+  <div class="gallery">
 
+    <div class="gallery-item" *ngFor="let item of galleryItems">
 
+      <div class="gallery-image">
 
+        <img [src]="item.image" [alt]="item.title">
 
+      </div>
 
+      <div class="gallery-info">
 
+        <div class="gallery-title">
 
+          <span>{{item.title}}</span>
 
+          <span class="gallery-price">{{item.price}}</span>
 
+        </div>
 
+        <p>{{item.description}}</p>
 
+        <div class="gallery-tags">
 
+          <div class="gallery-tag" 
+               *ngFor="let tag of item.tags; let i = index" 
+               [class.primary]="i === 0 || i === item.tags.length - 1">
 
+            {{tag}}
 
+          </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" 
+           *ngFor="let rec of recommendations" 
+           (click)="applyRecommendation(rec)">
 
+        <h4><i class="fas {{rec.icon}}"></i> {{rec.title}}</h4>
 
+        <ul>
 
+          <li *ngFor="let item of rec.items">{{item}}</li>
 
+        </ul>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>

+ 388 - 0
picture-web/src/modules/first-home/filter-screen/filter-screen.scss
Voir le fichier 

@@ -0,0 +1,388 @@
 
+/* src/app/modules/first-home/filter-screen/filter-screen.scss */
 
+/* 全局变量已移动到 styles.scss，这里只保留组件特有样式 */
 
+
 
+/* 头部样式 */
 
+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;
 
+}
 
+
 
+.back-btn {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 8px;
 
+  font-size: 16px;
 
+  color: var(--primary);
 
+  cursor: pointer;
 
+  padding: 8px 15px;
 
+  border-radius: 50px;
 
+  transition: var(--transition);
 
+  
+  &:hover {
 
+    background: rgba(255, 107, 53, 0.1);
 
+  }
 
+  
+  i {
 
+    font-size: 16px;
 
+  }
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+  font-size: 24px;
 
+  font-weight: 700;
 
+  color: var(--primary);
 
+  
+  i {
 
+    font-size: 28px;
 
+  }
 
+}
 
+
 
+/* 分类筛选区 */
 
+.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);
 
+  
+  h2 {
 
+    font-size: 20px;
 
+    font-weight: 700;
 
+    color: var(--dark);
 
+  }
 
+  
+  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;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.filter-card {
 
+  flex: 1;
 
+  min-width: 200px;
 
+  background: var(--light);
 
+  border-radius: var(--radius);
 
+  padding: 20px;
 
+  transition: var(--transition);
 
+  
+  &: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;
 
+  
+  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;
 
+  }
 
+  
+  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);
 
+  
+  &:hover {
 
+    background: #fff0eb;
 
+  }
 
+  
+  &.selected {
 
+    background: rgba(255, 107, 53, 0.1);
 
+    border: 1px solid var(--primary);
 
+  }
 
+  
+  .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);
 
+  }
 
+  
+  &.selected .check {
 
+    background: var(--primary);
 
+    border-color: var(--primary);
 
+    
+    &::after {
 
+      content: "✓";
 
+      color: white;
 
+      font-size: 12px;
 
+    }
 
+  }
 
+}
 
+
 
+/* 场景筛选特殊样式 */
 
+.scene-options .filter-option {
 
+  position: relative;
 
+  overflow: hidden;
 
+  
+  &::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;
 
+  }
 
+  
+  &.selected {
 
+    &::after {
 
+      display: block;
 
+    }
 
+    
+    &::before {
 
+      content: "✓";
 
+      position: absolute;
 
+      top: 4px;
 
+      right: 4px;
 
+      color: white;
 
+      font-size: 12px;
 
+      z-index: 2;
 
+    }
 
+  }
 
+}
 
+
 
+/* 确定按钮 */
 
+.confirm-btn-container {
 
+  text-align: center;
 
+  margin-top: 20px;
 
+}
 
+
 
+.confirm-btn {
 
+  display: inline-block;
 
+  background: var(--primary);
 
+  color: black   ;
 
+  padding: 14px 40px;
 
+  border: none;
 
+  border-radius: 50px;
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  cursor: pointer;
 
+  transition: var(--transition);
 
+  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
 
+  
+  &:hover {
 
+    background: var(--primary-dark);
 
+    transform: translateY(-3px);
 
+    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
 
+  }
 
+  
+  &:active {
 
+    transform: translateY(-1px);
 
+  }
 
+}
 
+
 
+/* 图片展示区 */
 
+.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;
 
+  
+  &:hover {
 
+    transform: translateY(-10px);
 
+    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
 
+  }
 
+}
 
+
 
+.gallery-image {
 
+  height: 200px;
 
+  overflow: hidden;
 
+  
+  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;
 
+  
+  &.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;
 
+  
+  &:hover {
 
+    background: rgba(255, 107, 53, 0.05);
 
+    transform: translateY(-5px);
 
+  }
 
+  
+  h4 {
 
+    color: var(--primary);
 
+    margin-bottom: 10px;
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 8px;
 
+  }
 
+  
+  ul {
 
+    list-style: none;
 
+    padding-left: 20px;
 
+  }
 
+  
+  li {
 
+    position: relative;
 
+    margin-bottom: 8px;
 
+    font-size: 14px;
 
+    
+    &::before {
 
+      content: "•";
 
+      position: absolute;
 
+      left: -15px;
 
+      color: var(--primary);
 
+    }
 
+  }
 
+}
 
+
 
+/* 响应式设计 */
 
+@media (max-width: 768px) {
 
+  .header-content {
 
+    flex-direction: row;
 
+    gap: 15px;
 
+  }
 
+  
+  .filter-categories {
 
+    flex-direction: column;
 
+  }
 
+  
+  .gallery {
 
+    grid-template-columns: 1fr;
 
+  }
 
+}

+ 43 - 20
picture-web/src/modules/first-home/filter-screen/filter-screen.spec.ts
Voir le fichier 

@@ -1,23 +1,46 @@
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { Component } from '@angular/core';
 
+import { CommonModule } from '@angular/common';
 
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
+import { 
+  faArrowLeft, 
+  faUtensils, 
+  faFilter, 
+  faImages, 
+  faLightbulb, 
+  faFlag, 
+  faPepperHot, 
+  faFire, 
+  faTemperatureHigh, 
+  faDesktop,
 
+  IconDefinition
 
+} from '@fortawesome/free-solid-svg-icons';
 
 
 
-import { FilterScreen } from './filter-screen';
 
+@Component({
 
+  selector: 'app-filter-screen',
 
+  standalone: true,
 
+  imports: [CommonModule, FontAwesomeModule],
 
+  templateUrl: './filter-screen.html',
 
+  styleUrls: ['./filter-screen.scss']
 
+})
 
+export class FilterScreenComponent {
 
+  // 定义图标映射
 
+  icons = {
 
+    arrowLeft: faArrowLeft,
 
+    utensils: faUtensils,
 
+    filter: faFilter,
 
+    images: faImages,
 
+    lightbulb: faLightbulb,
 
+    flag: faFlag,
 
+    pepperHot: faPepperHot,
 
+    fire: faFire,
 
+    temperatureHigh: faTemperatureHigh,
 
+    desktop: faDesktop
 
+  };
 
 
 
-describe('FilterScreen', () => {
 
-  let component: FilterScreen;
 
-  let fixture: ComponentFixture<FilterScreen>;
 
+  // 安全获取图标的方法
 
+  getIcon(iconName: keyof typeof this.icons): IconDefinition {
 
+    return this.icons[iconName];
 
+  }
 
 
 
-  beforeEach(async () => {
 
-    await TestBed.configureTestingModule({
 
-      imports: [FilterScreen]
 
-    })
 
-    .compileComponents();
 
-
 
-    fixture = TestBed.createComponent(FilterScreen);
 
-    component = fixture.componentInstance;
 
-    fixture.detectChanges();
 
-  });
 
-
 
-  it('should create', () => {
 
-    expect(component).toBeTruthy();
 
-  });
 
-});
 
+  // ... 其他原有代码保持不变 ...
 
+}

+ 169 - 5
picture-web/src/modules/first-home/filter-screen/filter-screen.ts
Voir le fichier 

@@ -1,11 +1,175 @@
 
-import { Component } from '@angular/core';
 
+// src/app/modules/first-home/filter-screen/filter-screen.ts
 
+import { Component, OnInit } from '@angular/core';
 
+import { CommonModule } from '@angular/common';
 
+import { FormsModule } from '@angular/forms';
 
 
 
 @Component({
 
 @Component({
 
   selector: 'app-filter-screen',
 
   selector: 'app-filter-screen',
 
-  imports: [],
 
+  standalone: true,
 
+  imports: [CommonModule, FormsModule],
 
   templateUrl: './filter-screen.html',
 
   templateUrl: './filter-screen.html',
 
-  styleUrl: './filter-screen.scss'
 
+  styleUrls: ['./filter-screen.scss']
 
 })
 
 })
 
-export class FilterScreen {
 
+export class FilterScreenComponent implements OnInit {
 
+  // 筛选选项数据
 
+  cuisineOptions = [
 
+    { name: '川菜', selected: true },
 
+    { name: '粤菜', selected: false },
 
+    { name: '鲁菜', selected: false },
 
+    { name: '苏菜', selected: false },
 
+    { name: '西餐', selected: false },
 
+    { name: '日料', selected: false }
 
+  ];
 
 
 
-}
 
+  tasteOptions = [
 
+    { name: '麻辣', selected: true },
 
+    { name: '酸甜', selected: false },
 
+    { name: '鲜香', selected: false },
 
+    { name: '咸香', selected: false },
 
+    { name: '清淡', selected: false }
 
+  ];
 
+
 
+  cookingOptions = [
 
+    { name: '爆炒', selected: true },
 
+    { name: '蒸', selected: false },
 
+    { name: '烤', selected: false },
 
+    { name: '炸', selected: false },
 
+    { name: '炖', selected: false }
 
+  ];
 
+
 
+  temperatureOptions = [
 
+    { name: '热菜', selected: true },
 
+    { name: '凉菜', selected: false },
 
+    { name: '冷热皆可', selected: false }
 
+  ];
 
+
 
+  sceneOptions = [
 
+    { name: '美团外卖 (1:1比例)', selected: true },
 
+    { name: '餐厅大屏 (4K分辨率)', selected: true },
 
+    { name: '菜单设计', selected: false },
 
+    { name: '社交媒体', selected: false },
 
+    { name: '海报印刷', selected: false }
 
+  ];
 
+
 
+  // 图片数据
 
+  galleryItems = [
 
+    {
 
+      title: '麻辣水煮鱼',
 
+      price: '¥28',
 
+      description: '川味经典，麻辣鲜香，汤汁浓郁',
 
+      tags: ['川菜', '麻辣', '热菜', '美团'],
 
+      image: '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'
 
+    },
 
+    {
 
+      title: '精致牛排',
 
+      price: '¥68',
 
+      description: '精选牛肉，五分熟，搭配特调酱汁',
 
+      tags: ['西餐', '鲜香', '热菜', '大屏'],
 
+      image: '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'
 
+    },
 
+    {
 
+      title: '日式刺身拼盘',
 
+      price: '¥98',
 
+      description: '新鲜三文鱼、金枪鱼、甜虾刺身',
 
+      tags: ['日料', '清淡', '凉菜', '大屏'],
 
+      image: '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'
 
+    },
 
+    {
 
+      title: '干锅牛蛙',
 
+      price: '¥48',
 
+      description: '鲜嫩牛蛙，香辣可口，配菜丰富',
 
+      tags: ['川菜', '麻辣', '热菜', '美团'],
 
+      image: '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'
 
+    },
 
+    {
 
+      title: '意式披萨',
 
+      price: '¥38',
 
+      description: '手工薄底，多种配料，芝士浓郁',
 
+      tags: ['西餐', '咸香', '热菜', '美团'],
 
+      image: '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'
 
+    },
 
+    {
 
+      title: '清蒸大闸蟹',
 
+      price: '¥88',
 
+      description: '阳澄湖大闸蟹，蟹黄饱满，原汁原味',
 
+      tags: ['苏菜', '鲜香', '热菜', '大屏'],
 
+      image: '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'
 
+    }
 
+  ];
 
+
 
+  // 推荐组合数据
 
+  recommendations = [
 
+    {
 
+      title: '川菜精选组合',
 
+      icon: 'fa-utensils',
 
+      items: [
 
+        '菜系：川菜',
 
+        '口味：麻辣/中辣',
 
+        '做法：爆炒/干锅',
 
+        '场景：美团+大屏',
 
+        '匹配图片：24张'
 
+      ]
 
+    },
 
+    {
 
+      title: '高端宴席组合',
 
+      icon: 'fa-hotel',
 
+      items: [
 
+        '菜系：粤菜/苏菜',
 
+        '口味：鲜香/清淡',
 
+        '做法：蒸/炖',
 
+        '场景：大屏+菜单',
 
+        '匹配图片：18张'
 
+      ]
 
+    },
 
+    {
 
+      title: '外卖爆款组合',
 
+      icon: 'fa-motorcycle',
 
+      items: [
 
+        '菜系：川菜/西餐',
 
+        '口味：麻辣/酸甜',
 
+        '做法：炒/炸',
 
+        '场景：美团专用',
 
+        '匹配图片：32张'
 
+      ]
 
+    },
 
+    {
 
+      title: '夏季凉菜组合',
 
+      icon: 'fa-snowflake',
 
+      items: [
 
+        '菜系：所有',
 
+        '口味：清淡/酸甜',
 
+        '做法：凉拌/刺身',
 
+        '场景：美团+社交媒体',
 
+        '匹配图片：21张'
 
+      ]
 
+    }
 
+  ];
 
+
 
+  constructor() { }
 
+
 
+  ngOnInit(): void {
 
+  }
 
+
 
+  // 切换选项选择状态
 
+  toggleOption(option: any): void {
 
+    option.selected = !option.selected;
 
+  }
 
+
 
+  // 返回按钮功能
 
+  goBack(): void {
 
+    alert('返回上一级页面');
 
+    // 实际应用中：this.router.navigate(['/previous']);
 
+  }
 
+
 
+  // 确定筛选按钮
 
+  confirmFilter(): void {
 
+    alert('筛选条件已确定！');
 
+    // 实际应用中：发送筛选条件到服务端
 
+  }
 
+
 
+  // 应用推荐组合
 
+  applyRecommendation(recommendation: any): void {
 
+    alert(`已应用推荐组合：${recommendation.title}`);
 
+    // 实际应用中：根据推荐组合设置筛选条件
 
+  }
 
+}

+ 1 - 1
picture-web/src/modules/picture/mobile.routes.ts
Voir le fichier 

@@ -46,7 +46,7 @@ export const MOBILE_ROUTES: Routes = [
 
     loadComponent: () => import('../first-home/image-detail/image-detail').then(m => m.ImageDetailComponent)}
 
     loadComponent: () => import('../first-home/image-detail/image-detail').then(m => m.ImageDetailComponent)}
 
       ,{
 
       ,{
 
     path: 'filter-screen',
 
     path: 'filter-screen',
 
-    loadComponent: () => import('../first-home/filter-screen/filter-screen').then(m => m.FilterScreen)
 
+    loadComponent: () => import('../first-home/filter-screen/filter-screen').then(m => m.FilterScreenComponent)
 
   },
 
   },
 
 ];
 
 ];

+ 3 - 3
picture-web/src/modules/picture/nav-mobile-tabs/nav-mobile-tabs.ts
Voir le fichier 

@@ -16,8 +16,8 @@ import { MatIconModule } from '@angular/material/icon';
 
 })
 
 })
 
 export class NavMobileTabs {
 
 export class NavMobileTabs {
 
   navLinks = [
 
   navLinks = [
 
-    { path: 'home', label: '首页', icon: '' },
 
-    { path: 'cart', label: '购物车', icon: '' },
 
-    { path: 'mine', label: '我的', icon: '' }
 
+    { path: 'home', label: '首页', icon: 'home' },
 
+    { path: 'cart', label: '购物车', icon: 'shopping_cart' },
 
+    { path: 'mine', label: '我的', icon: 'person' }
 
   ];
 
   ];
 
 }
 
 }

+ 6 - 5
picture-web/src/modules/thired-ser/ogin-screen/ogin-screen.html
Voir le fichier 

@@ -1,7 +1,8 @@
 
 <!-- 返回按钮 -->
 
 <!-- 返回按钮 -->
 
-    <a href="#" class="back-button" id="backButton">
 
+    <a  class="back-button" id="backButton" routerLink="/mobile/mine">
 
         <i class="fas fa-arrow-left"></i>
 
         <i class="fas fa-arrow-left"></i>
 
     </a>
 
     </a>
 
+    <!-- href="#" -->
 
 <!-- 装饰元素 -->
 
 <!-- 装饰元素 -->
 
 <div class="decorations">
 
 <div class="decorations">
 
   <i class="decoration fas fa-utensils" style="top: 10%; left: 5%;"></i>
 
   <i class="decoration fas fa-utensils" style="top: 10%; left: 5%;"></i>
 
@@ -27,7 +28,7 @@
 
   <div class="brand-header">
 
   <div class="brand-header">
 
     <div class="logo">
 
     <div class="logo">
 
       <i class="fas fa-camera-retro"></i>
 
       <i class="fas fa-camera-retro"></i>
 
-      美食图库
 
+      播菜汪
 
     </div>
 
     </div>
 
     <div class="slogan">专业美食图片展示平台</div>
 
     <div class="slogan">专业美食图片展示平台</div>
 
     <p class="subtitle">为您的餐厅屏幕提供高品质美食图片解决方案</p>
 
     <p class="subtitle">为您的餐厅屏幕提供高品质美食图片解决方案</p>
 
@@ -93,9 +94,9 @@
 
     <div class="social-login">
 
     <div class="social-login">
 
       <p>或使用其他方式登录</p>
 
       <p>或使用其他方式登录</p>
 
       <div class="social-icons">
 
       <div class="social-icons">
 
-        <a href="#"><i class="fab fa-weixin"></i></a>
 
-        <a href="#"><i class="fab fa-qq"></i></a>
 
-        <a href="#"><i class="fab fa-apple"></i></a>
 
+        <a ><i class="fab fa-weixin"></i></a>
 
+        <a ><i class="fab fa-qq"></i></a>
 
+        <a ><i class="fab fa-apple"></i></a>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>

+ 2 - 2
picture-web/src/modules/thired-ser/ogin-screen/ogin-screen.ts
Voir le fichier 

@@ -1,13 +1,13 @@
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
 import { CommonModule } from '@angular/common';
 
 import { FormsModule } from '@angular/forms';
 
 import { FormsModule } from '@angular/forms';
 
-
 
+import { RouterModule } from '@angular/router';
 
 @Component({
 
 @Component({
 
   selector: 'app-ogin-screen',
 
   selector: 'app-ogin-screen',
 
   templateUrl: './ogin-screen.html',
 
   templateUrl: './ogin-screen.html',
 
   styleUrls: ['./ogin-screen.scss'],
 
   styleUrls: ['./ogin-screen.scss'],
 
   standalone: true,
 
   standalone: true,
 
-  imports: [CommonModule, FormsModule]
 
+  imports: [CommonModule, FormsModule,RouterModule]
 
 })
 
 })
 
 export class OginScreenComponent implements OnInit, OnDestroy {
 
 export class OginScreenComponent implements OnInit, OnDestroy {
 
   activeTab: 'login' | 'register' = 'login';
 
   activeTab: 'login' | 'register' = 'login';

+ 37 - 9
picture-web/src/modules/thired-ser/upload-screen/upload-screen.html
Voir le fichier 

@@ -26,7 +26,7 @@
 
         body {
 
         body {
 
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 
             color: var(--text-color);
 
             color: var(--text-color);
 
-            background-color: #f5f5f5;
 
+            background-color: white;
 
             line-height: 1.5;
 
             line-height: 1.5;
 
         }
 
         }
 
         
         
@@ -67,7 +67,7 @@
 
         }
 
         }
 
         
         
         .upload-area {
 
         .upload-area {
 
-            border: 2px dashed #d9d9d9;
 
+            border: 2px dashed orange;
 
             border-radius: var(--border-radius);
 
             border-radius: var(--border-radius);
 
             padding: 32px 16px;
 
             padding: 32px 16px;
 
             text-align: center;
 
             text-align: center;
 
@@ -87,7 +87,7 @@
 
         
         
         .upload-area.active {
 
         .upload-area.active {
 
             border-color: var(--primary-color);
 
             border-color: var(--primary-color);
 
-            background-color: #fff7e6;
 
+            background-color: orange;
 
         }
 
         }
 
         
         
         .upload-icon {
 
         .upload-icon {
 
@@ -102,7 +102,7 @@
 
         }
 
         }
 
         
         
         .upload-hint {
 
         .upload-hint {
 
-            color: #999;
 
+            color: black;
 
             font-size: 14px;
 
             font-size: 14px;
 
         }
 
         }
 
         
         
@@ -119,7 +119,7 @@
 
         
         
         .preview-title .badge {
 
         .preview-title .badge {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
-            color: white;
 
+            color: black;
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             padding: 2px 8px;
 
             padding: 2px 8px;
 
             font-size: 12px;
 
             font-size: 12px;
 
@@ -184,17 +184,17 @@
 
         
         
         .primary-btn {
 
         .primary-btn {
 
             background-color: var(--primary-color);
 
             background-color: var(--primary-color);
 
-            color: white;
 
+            color: black;
 
         }
 
         }
 
         
         
         .primary-btn:hover {
 
         .primary-btn:hover {
 
-            background-color: #ff9c33;
 
+            background-color: white;
 
         }
 
         }
 
         
         
         .default-btn {
 
         .default-btn {
 
             background-color: white;
 
             background-color: white;
 
             color: var(--text-color);
 
             color: var(--text-color);
 
-            border: 1px solid #d9d9d9;
 
+            border: 1px solid black;
 
         }
 
         }
 
         
         
         .default-btn:hover {
 
         .default-btn:hover {
 
@@ -229,7 +229,7 @@
 
         
         
         .loading-bar {
 
         .loading-bar {
 
             height: 4px;
 
             height: 4px;
 
-            background-color: #e8e8e8;
 
+            background-color: black;
 
             border-radius: 2px;
 
             border-radius: 2px;
 
             margin-top: 16px;
 
             margin-top: 16px;
 
             overflow: hidden;
 
             overflow: hidden;
 
@@ -351,9 +351,37 @@
 
                 flex-direction: column;
 
                 flex-direction: column;
 
             }
 
             }
 
         }
 
         }
 
+    /* 新增返回按钮样式 - 添加到现有style标签末尾 */
 
+    .back-button {
 
+        position: fixed;
 
+        top: 16px;
 
+        left: 16px;
 
+        z-index: 1000;
 
+        width: 40px;
 
+        height: 40px;
 
+        background-color: white;
 
+        border-radius: 50%;
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 
+        cursor: pointer;
 
+    }
 
+    
+    .back-button svg {
 
+        width: 20px;
 
+        height: 20px;
 
+        color: var(--primary-color);
 
+    }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
+     <div class="back-button" id="backButton" routerLink="/mobile/mine">
 
+        <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
 
+            <path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a26.9 26.9 0 0 0 0 40.7L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
 
+        </svg>
 
+    </div>
 
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="header">
 
         <div class="header">
 
             <h1>智能图片上传助手</h1>
 
             <h1>智能图片上传助手</h1>