Halaman utama Jelajahi Bantuan
Daftar Masuk
0235697
/
food-picture
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

ye mian

0235697 4 hari lalu
induk
238e472016
melakukan
5bb5960fdc
2 mengubah file dengan 1441 tambahan dan 3 penghapusan
Unified View Tampilkan Statistik Diff
  1. 918 1
      picture-web/src/modules/first-home/filter-screen/filter-screen.html
  2. 523 2
      picture-web/src/modules/picture/cart-tab/cart-tab.html

+ 918 - 1
picture-web/src/modules/first-home/filter-screen/filter-screen.html
Tampilan Berkas 

@@ -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>

+ 523 - 2
picture-web/src/modules/picture/cart-tab/cart-tab.html
Tampilan Berkas 

@@ -1,2 +1,523 @@
 
-     - cart-tab            # 购物车界面
 
-<p></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">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+        }
 
+        
+        :root {
 
+            --primary-color: #FF6B00;
 
+            --primary-light: #FFE0CC;
 
+            --primary-dark: #E05A00;
 
+            --text-dark: #333333;
 
+            --text-light: #666666;
 
+            --text-lighter: #999999;
 
+            --border-color: #EEEEEE;
 
+            --bg-color: #F8F8F8;
 
+            --white: #FFFFFF;
 
+            --success: #4CAF50;
 
+        }
 
+        
+        body {
 
+            background-color: var(--bg-color);
 
+            color: var(--text-dark);
 
+            padding-bottom: 70px;
 
+        }
 
+        
+        /* 顶部导航 */
 
+        .header {
 
+            background-color: var(--white);
 
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
+            padding: 12px 16px;
 
+            position: sticky;
 
+            top: 0;
 
+            z-index: 100;
 
+        }
 
+        
+        .header-content {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        .logo {
 
+            font-size: 20px;
 
+            font-weight: bold;
 
+            color: var(--primary-color);
 
+        }
 
+        
+        .cart-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .edit-btn {
 
+            background: none;
 
+            border: none;
 
+            color: var(--primary-color);
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+        }
 
+        
+        /* 购物车内容 */
 
+        .cart-container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            padding: 20px 16px;
 
+        }
 
+        
+        /* 全选区域 */
 
+        .select-all {
 
+            display: flex;
 
+            align-items: center;
 
+            background-color: var(--white);
 
+            padding: 12px 16px;
 
+            border-radius: 8px;
 
+            margin-bottom: 10px;
 
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .select-all input {
 
+            margin-right: 10px;
 
+            width: 18px;
 
+            height: 18px;
 
+            accent-color: var(--primary-color);
 
+        }
 
+        
+        /* 商品列表 */
 
+        .cart-items {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 12px;
 
+        }
 
+        
+        .cart-item {
 
+            background-color: var(--white);
 
+            border-radius: 8px;
 
+            padding: 16px;
 
+            display: flex;
 
+            align-items: center;
 
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 
+            transition: transform 0.2s ease;
 
+        }
 
+        
+        .cart-item:hover {
 
+            transform: translateY(-2px);
 
+        }
 
+        
+        .item-select {
 
+            margin-right: 12px;
 
+        }
 
+        
+        .item-select input {
 
+            width: 18px;
 
+            height: 18px;
 
+            accent-color: var(--primary-color);
 
+        }
 
+        
+        .item-image {
 
+            width: 80px;
 
+            height: 80px;
 
+            border-radius: 6px;
 
+            overflow: hidden;
 
+            margin-right: 16px;
 
+            background: linear-gradient(135deg, #FFE0CC, #FFB080);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        .item-image i {
 
+            font-size: 32px;
 
+        }
 
+        
+        .item-details {
 
+            flex: 1;
 
+        }
 
+        
+        .item-name {
 
+            font-weight: 600;
 
+            margin-bottom: 5px;
 
+            display: -webkit-box;
 
+            -webkit-line-clamp: 2;
 
+            -webkit-box-orient: vertical;
 
+            overflow: hidden;
 
+        }
 
+        
+        .item-spec {
 
+            color: var(--text-light);
 
+            font-size: 13px;
 
+            margin-bottom: 8px;
 
+        }
 
+        
+        .item-price {
 
+            color: var(--primary-color);
 
+            font-weight: bold;
 
+            font-size: 16px;
 
+        }
 
+        
+        .item-controls {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+            margin-top: 10px;
 
+        }
 
+        
+        .quantity-control {
 
+            display: flex;
 
+            align-items: center;
 
+            border: 1px solid var(--border-color);
 
+            border-radius: 20px;
 
+            overflow: hidden;
 
+        }
 
+        
+        .quantity-btn {
 
+            width: 30px;
 
+            height: 30px;
 
+            background-color: var(--bg-color);
 
+            border: none;
 
+            font-size: 16px;
 
+            cursor: pointer;
 
+            color: var(--text-light);
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .quantity-btn:active {
 
+            background-color: var(--border-color);
 
+        }
 
+        
+        .quantity-value {
 
+            width: 40px;
 
+            text-align: center;
 
+            font-size: 14px;
 
+        }
 
+        
+        .delete-btn {
 
+            background: none;
 
+            border: none;
 
+            color: var(--text-lighter);
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            transition: color 0.2s;
 
+        }
 
+        
+        .delete-btn:hover {
 
+            color: var(--primary-color);
 
+        }
 
+        
+        /* 底部结算栏 */
 
+        .checkout-bar {
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            background-color: var(--white);
 
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+            padding: 12px 16px;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .total-price {
 
+            flex: 1;
 
+        }
 
+        
+        .total-text {
 
+            font-size: 14px;
 
+            color: var(--text-light);
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .price {
 
+            color: var(--primary-color);
 
+            font-weight: bold;
 
+            font-size: 18px;
 
+        }
 
+        
+        .checkout-btn {
 
+            background-color: var(--primary-color);
 
+            color: white;
 
+            border: none;
 
+            border-radius: 25px;
 
+            padding: 12px 28px;
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            transition: background-color 0.2s;
 
+            box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
 
+        }
 
+        
+        .checkout-btn:hover {
 
+            background-color: var(--primary-dark);
 
+        }
 
+        
+        .checkout-btn:disabled {
 
+            background-color: #cccccc;
 
+            cursor: not-allowed;
 
+            box-shadow: none;
 
+        }
 
+        
+        /* 空购物车状态 */
 
+        .empty-cart {
 
+            text-align: center;
 
+            padding: 60px 20px;
 
+        }
 
+        
+        .empty-cart i {
 
+            font-size: 80px;
 
+            color: #e0e0e0;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .empty-cart h3 {
 
+            color: var(--text-light);
 
+            margin-bottom: 10px;
 
+        }
 
+        
+        .empty-cart p {
 
+            color: var(--text-lighter);
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .continue-btn {
 
+            background-color: var(--primary-color);
 
+            color: white;
 
+            border: none;
 
+            border-radius: 25px;
 
+            padding: 10px 24px;
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            transition: background-color 0.2s;
 
+        }
 
+        
+        .continue-btn:hover {
 
+            background-color: var(--primary-dark);
 
+        }
 
+        
+        /* 动画 */
 
+        @keyframes fadeIn {
 
+            from { opacity: 0; transform: translateY(10px); }
 
+            to { opacity: 1; transform: translateY(0); }
 
+        }
 
+        
+        .cart-item {
 
+            animation: fadeIn 0.4s ease forwards;
 
+        }
 
+        
+        .cart-item:nth-child(1) { animation-delay: 0.1s; }
 
+        .cart-item:nth-child(2) { animation-delay: 0.2s; }
 
+        .cart-item:nth-child(3) { animation-delay: 0.3s; }
 
+        
+        /* 响应式设计 */
 
+        @media (max-width: 480px) {
 
+            .item-image {
 
+                width: 70px;
 
+                height: 70px;
 
+            }
 
+            
+            .checkout-btn {
 
+                padding: 10px 20px;
 
+                font-size: 15px;
 
+            }
 
+            
+            .price {
 
+                font-size: 16px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 顶部导航 -->
 
+    <header class="header">
 
+        <div class="header-content">
 
+            <div class="logo">ShopCart</div>
 
+            <h1 class="cart-title">购物车</h1>
 
+            <button class="edit-btn">编辑</button>
 
+        </div>
 
+    </header>
 
+    
+    <!-- 购物车内容 -->
 
+    <div class="cart-container">
 
+        <!-- 全选区域 -->
 
+        <div class="select-all">
 
+            <input type="checkbox" id="selectAll">
 
+            <label for="selectAll">全选 (3)</label>
 
+        </div>
 
+        
+        <!-- 商品列表 -->
 
+        <div class="cart-items">
 
+            <!-- 商品1 -->
 
+            <div class="cart-item">
 
+                <div class="item-select">
 
+                    <input type="checkbox" checked>
 
+                </div>
 
+                <div class="item-image">
 
+                    <i class="fas fa-tshirt"></i>
 
+                </div>
 
+                <div class="item-details">
 
+                    <div class="item-name">纯棉简约短袖T恤 2023夏季新款</div>
 
+                    <div class="item-spec">白色 / L</div>
 
+                    <div class="item-price">¥129.00</div>
 
+                    <div class="item-controls">
 
+                        <div class="quantity-control">
 
+                            <button class="quantity-btn minus">-</button>
 
+                            <span class="quantity-value">1</span>
 
+                            <button class="quantity-btn plus">+</button>
 
+                        </div>
 
+                        <button class="delete-btn">
 
+                            <i class="fas fa-trash-alt"></i>
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 商品2 -->
 
+            <div class="cart-item">
 
+                <div class="item-select">
 
+                    <input type="checkbox" checked>
 
+                </div>
 
+                <div class="item-image">
 
+                    <i class="fas fa-shoe-prints"></i>
 
+                </div>
 
+                <div class="item-details">
 
+                    <div class="item-name">轻便透气运动跑步鞋 男女同款</div>
 
+                    <div class="item-spec">黑色 / 42</div>
 
+                    <div class="item-price">¥259.00</div>
 
+                    <div class="item-controls">
 
+                        <div class="quantity-control">
 
+                            <button class="quantity-btn minus">-</button>
 
+                            <span class="quantity-value">1</span>
 
+                            <button class="quantity-btn plus">+</button>
 
+                        </div>
 
+                        <button class="delete-btn">
 
+                            <i class="fas fa-trash-alt"></i>
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 商品3 -->
 
+            <div class="cart-item">
 
+                <div class="item-select">
 
+                    <input type="checkbox" checked>
 
+                </div>
 
+                <div class="item-image">
 
+                    <i class="fas fa-laptop"></i>
 
+                </div>
 
+                <div class="item-details">
 
+                    <div class="item-name">轻薄便携笔记本电脑 13英寸</div>
 
+                    <div class="item-spec">i5/16GB/512GB</div>
 
+                    <div class="item-price">¥5899.00</div>
 
+                    <div class="item-controls">
 
+                        <div class="quantity-control">
 
+                            <button class="quantity-btn minus">-</button>
 
+                            <span class="quantity-value">1</span>
 
+                            <button class="quantity-btn plus">+</button>
 
+                        </div>
 
+                        <button class="delete-btn">
 
+                            <i class="fas fa-trash-alt"></i>
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 底部结算栏 -->
 
+    <div class="checkout-bar">
 
+        <div class="total-info">
 
+            <div class="total-text">总计:</div>
 
+            <div class="price">¥6287.00</div>
 
+        </div>
 
+        <button class="checkout-btn">结算(3)</button>
 
+    </div>
 
+
 
+    <script>
 
+        // 数量加减功能
 
+        document.querySelectorAll('.quantity-control').forEach(control => {
 
+            const minusBtn = control.querySelector('.minus');
 
+            const plusBtn = control.querySelector('.plus');
 
+            const valueDisplay = control.querySelector('.quantity-value');
 
+            
+            minusBtn.addEventListener('click', () => {
 
+                let value = parseInt(valueDisplay.textContent);
 
+                if (value > 1) {
 
+                    value--;
 
+                    valueDisplay.textContent = value;
 
+                    updateTotal();
 
+                }
 
+            });
 
+            
+            plusBtn.addEventListener('click', () => {
 
+                let value = parseInt(valueDisplay.textContent);
 
+                value++;
 
+                valueDisplay.textContent = value;
 
+                updateTotal();
 
+            });
 
+        });
 
+        
+        // 删除商品功能
 
+        document.querySelectorAll('.delete-btn').forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const item = this.closest('.cart-item');
 
+                item.style.animation = 'fadeOut 0.3s forwards';
 
+                setTimeout(() => {
 
+                    item.remove();
 
+                    updateTotal();
 
+                }, 300);
 
+            });
 
+        });
 
+        
+        // 全选功能
 
+        document.getElementById('selectAll').addEventListener('change', function() {
 
+            const checkboxes = document.querySelectorAll('.item-select input');
 
+            checkboxes.forEach(checkbox => {
 
+                checkbox.checked = this.checked;
 
+            });
 
+        });
 
+        
+        // 更新总价函数
 
+        function updateTotal() {
 
+            let total = 0;
 
+            let itemCount = 0;
 
+            
+            document.querySelectorAll('.cart-item').forEach(item => {
 
+                const checkbox = item.querySelector('.item-select input');
 
+                if (checkbox.checked) {
 
+                    const price = parseFloat(item.querySelector('.item-price').textContent.replace('¥', ''));
 
+                    const quantity = parseInt(item.querySelector('.quantity-value').textContent);
 
+                    total += price * quantity;
 
+                    itemCount++;
 
+                }
 
+            });
 
+            
+            document.querySelector('.price').textContent = `¥${total.toFixed(2)}`;
 
+            document.querySelector('.checkout-btn').textContent = `结算(${itemCount})`;
 
+            document.querySelector('#selectAll + label').textContent = `全选 (${itemCount})`;
 
+        }
 
+        
+        // 初始化
 
+        document.addEventListener('DOMContentLoaded', () => {
 
+            // 为每个商品的复选框添加事件监听
 
+            document.querySelectorAll('.item-select input').forEach(checkbox => {
 
+                checkbox.addEventListener('change', updateTotal);
 
+            });
 
+            
+            // 更新初始总价
 
+            updateTotal();
 
+        });
 
+    </script>
 
+</body>
 
+</html>