快捷订餐系统

发布于：2025-07-14 ⋅ 阅读:(11) ⋅ 点赞:(0)

基础架构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快捷订餐系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background-color: #ff6b6b;
            color: white;
            padding: 15px 0;
            text-align: center;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .restaurant-info {
            display: flex;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .restaurant-image {
            width: 150px;
            height: 150px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 20px;
        }
        
        .restaurant-details {
            flex: 1;
        }
        
        .menu-categories {
            display: flex;
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        
        .category-btn {
            padding: 10px 20px;
            margin-right: 10px;
            background-color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-weight: bold;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .category-btn.active {
            background-color: #ff6b6b;
            color: white;
        }
        
        .menu-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }
        
        .menu-item {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .menu-item:hover {
            transform: translateY(-5px);
        }
        
        .item-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .item-details {
            padding: 15px;
        }
        
        .item-name {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 18px;
        }
        
        .item-desc {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .item-price {
            font-weight: bold;
            color: #ff6b6b;
            font-size: 18px;
        }
        
        .add-to-cart {
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            cursor: pointer;
            font-weight: bold;
        }
        
        .cart-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            width: 350px;
            max-height: 500px;
            overflow: hidden;
            display: none;
        }
        
        .cart-header {
            background-color: #ff6b6b;
            color: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .cart-items {
            max-height: 300px;
            overflow-y: auto;
            padding: 15px;
        }
        
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .cart-item-info {
            flex: 1;
        }
        
        .cart-item-name {
            font-weight: bold;
        }
        
        .cart-item-price {
            color: #ff6b6b;
        }
        
        .cart-item-quantity {
            display: flex;
            align-items: center;
        }
        
        .quantity-btn {
            width: 25px;
            height: 25px;
            border: 1px solid #ddd;
            background-color: #f5f5f5;
            cursor: pointer;
            font-weight: bold;
        }
        
        .quantity-input {
            width: 40px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 0 5px;
        }
        
        .cart-footer {
            padding: 15px;
            border-top: 1px solid #eee;
        }
        
        .cart-total {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 15px;
        }
        
        .checkout-btn {
            width: 100%;
            padding: 12px;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .cart-icon {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #ff6b6b;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #333;
            color: white;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
        }
        
        @media (max-width: 768px) {
            .menu-items {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            }
            
            .cart-container {
                width: 90%;
                left: 5%;
                right: 5%;
                bottom: 80px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>快捷订餐系统</h1>
        </header>
        
        <div class="restaurant-info">
            <img src="https://via.placeholder.com/150" alt="餐厅图片" class="restaurant-image">
            <div class="restaurant-details">
                <h2>美味餐厅</h2>
                <p>⭐ 4.8 (500+评价) | 🚗 30分钟送达 | 💰 人均 ¥35</p>
                <p>营业时间: 10:00 - 22:00</p>
                <p>地址: 北京市朝阳区美食街88号</p>
            </div>
        </div>
        
        <div class="menu-categories">
            <button class="category-btn active">全部</button>
            <button class="category-btn">推荐</button>
            <button class="category-btn">套餐</button>
            <button class="category-btn">主食</button>
            <button class="category-btn">小吃</button>
            <button class="category-btn">饮料</button>
            <button class="category-btn">甜品</button>
        </div>
        
        <div class="menu-items">
            <div class="menu-item">
                <img src="https://via.placeholder.com/280x180" alt="菜品图片" class="item-image">
                <div class="item-details">
                    <div class="item-name">招牌牛肉面</div>
                    <div class="item-desc">精选上等牛肉，慢火熬制汤底，面条劲道有弹性</div>
                    <div class="item-footer">
                        <div class="item-price">¥28</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://via.placeholder.com/280x180" alt="菜品图片" class="item-image">
                <div class="item-details">
                    <div class="item-name">香辣鸡腿堡套餐</div>
                    <div class="item-desc">香辣鸡腿堡+中薯条+中可乐</div>
                    <div class="item-footer">
                        <div class="item-price">¥35</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://via.placeholder.com/280x180" alt="菜品图片" class="item-image">
                <div class="item-details">
                    <div class="item-name">鲜虾云吞面</div>
                    <div class="item-desc">新鲜虾仁云吞，配以特制汤底和细面</div>
                    <div class="item-footer">
                        <div class="item-price">¥32</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://via.placeholder.com/280x180" alt="菜品图片" class="item-image">
                <div class="item-details">
                    <div class="item-name">麻辣香锅</div>
                    <div class="item-desc">自选食材，麻辣鲜香，配米饭</div>
                    <div class="item-footer">
                        <div class="item-price">¥45</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://via.placeholder.com/280x180" alt="菜品图片" class="item-image">
                <div class="item-details">
                    <div class="item-name">鲜榨西瓜汁</div>
                    <div class="item-desc">新鲜西瓜现榨，无添加，500ml</div>
                    <div class="item-footer">
                        <div class="item-price">¥15</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://via.placeholder.com/280x180" alt="菜品图片" class="item-image">
                <div class="item-details">
                    <div class="item-name">提拉米苏</div>
                    <div class="item-desc">意大利经典甜品，咖啡与奶酪的完美结合</div>
                    <div class="item-footer">
                        <div class="item-price">¥25</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="cart-icon">
        🛒
        <div class="cart-count">0</div>
    </div>
    
    <div class="cart-container" id="cartContainer">
        <div class="cart-header">
            <h3>购物车</h3>
            <span id="closeCart">×</span>
        </div>
        <div class="cart-items" id="cartItems">
            <!-- 购物车商品将在这里动态添加 -->
            <div class="empty-cart">购物车是空的</div>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>总计:</span>
                <span id="cartTotal">¥0</span>
            </div>
            <button class="checkout-btn">去结算</button>
        </div>
    </div>
    
    <script>
        // 简单的交互功能
        document.addEventListener('DOMContentLoaded', function() {
            const cartIcon = document.querySelector('.cart-icon');
            const cartContainer = document.getElementById('cartContainer');
            const closeCart = document.getElementById('closeCart');
            const addToCartButtons = document.querySelectorAll('.add-to-cart');
            const cartItemsContainer = document.getElementById('cartItems');
            const cartTotalElement = document.getElementById('cartTotal');
            const cartCountElement = document.querySelector('.cart-count');
            const categoryButtons = document.querySelectorAll('.category-btn');
            
            let cartItems = [];
            let total = 0;
            
            // 切换购物车显示/隐藏
            cartIcon.addEventListener('click', function() {
                cartContainer.style.display = cartContainer.style.display === 'block' ? 'none' : 'block';
            });
            
            closeCart.addEventListener('click', function() {
                cartContainer.style.display = 'none';
            });
            
            // 分类按钮点击事件
            categoryButtons.forEach(button => {
                button.addEventListener('click', function() {
                    categoryButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加筛选菜单项的逻辑
                });
            });
            
            // 添加到购物车
            addToCartButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const menuItem = this.closest('.menu-item');
                    const itemName = menuItem.querySelector('.item-name').textContent;
                    const itemPrice = parseFloat(menuItem.querySelector('.item-price').textContent.replace('¥', ''));
                    
                    // 检查是否已在购物车中
                    const existingItem = cartItems.find(item => item.name === itemName);
                    
                    if (existingItem) {
                        existingItem.quantity += 1;
                    } else {
                        cartItems.push({
                            name: itemName,
                            price: itemPrice,
                            quantity: 1
                        });
                    }
                    
                    updateCart();
                    cartContainer.style.display = 'block';
                });
            });
            
            // 更新购物车
            function updateCart() {
                // 清空购物车显示
                cartItemsContainer.innerHTML = '';
                
                // 计算总价
                total = 0;
                
                if (cartItems.length === 0) {
                    cartItemsContainer.innerHTML = '<div class="empty-cart">购物车是空的</div>';
                    cartCountElement.textContent = '0';
                    cartTotalElement.textContent = '¥0';
                    return;
                }
                
                // 更新购物车商品和总价
                cartItems.forEach(item => {
                    total += item.price * item.quantity;
                    
                    const cartItemElement = document.createElement('div');
                    cartItemElement.className = 'cart-item';
                    cartItemElement.innerHTML = `
                        <div class="cart-item-info">
                            <div class="cart-item-name">${item.name}</div>
                            <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
                        </div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn minus" data-name="${item.name}">-</button>
                            <input type="text" class="quantity-input" value="${item.quantity}" readonly>
                            <button class="quantity-btn plus" data-name="${item.name}">+</button>
                        </div>
                    `;
                    
                    cartItemsContainer.appendChild(cartItemElement);
                });
                
                // 更新总价和数量
                cartTotalElement.textContent = `¥${total.toFixed(2)}`;
                cartCountElement.textContent = cartItems.reduce((sum, item) => sum + item.quantity, 0);
                
                // 添加数量按钮事件
                document.querySelectorAll('.quantity-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const itemName = this.getAttribute('data-name');
                        const item = cartItems.find(item => item.name === itemName);
                        
                        if (this.classList.contains('minus')) {
                            item.quantity -= 1;
                            if (item.quantity <= 0) {
                                cartItems = cartItems.filter(i => i.name !== itemName);
                            }
                        } else if (this.classList.contains('plus')) {
                            item.quantity += 1;
                        }
                        
                        updateCart();
                    });
                });
            }
        });
    </script>
</body>
</html>

 完善后

<!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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            padding: 20px 0;
            text-align: center;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: -10px;
            right: -10px;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        header::after {
            content: "";
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        header h1 {
            font-size: 2.2rem;
            margin-bottom: 5px;
            position: relative;
            z-index: 1;
        }
        
        header p {
            font-size: 1rem;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        
        .restaurant-info {
            display: flex;
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }
        
        .restaurant-info:hover {
            transform: translateY(-3px);
        }
        
        .restaurant-image {
            width: 160px;
            height: 160px;
            border-radius: 10px;
            object-fit: cover;
            margin-right: 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .restaurant-details {
            flex: 1;
        }
        
        .restaurant-details h2 {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 8px;
        }
        
        .restaurant-details p {
            font-size: 0.95rem;
            color: #555;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
        }
        
        .restaurant-details p svg {
            margin-right: 8px;
            width: 18px;
            height: 18px;
        }
        
        .menu-categories {
            display: flex;
            margin-bottom: 25px;
            overflow-x: auto;
            padding-bottom: 10px;
            scrollbar-width: none;
        }
        
        .menu-categories::-webkit-scrollbar {
            display: none;
        }
        
        .category-btn {
            padding: 10px 22px;
            margin-right: 12px;
            background-color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 500;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            font-size: 0.95rem;
            color: #555;
        }
        
        .category-btn:hover {
            background-color: #f8f9fa;
        }
        
        .category-btn.active {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
        }
        
        .menu-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }
        
        .menu-item {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .item-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .menu-item:hover .item-image {
            transform: scale(1.03);
        }
        
        .item-details {
            padding: 18px;
        }
        
        .item-name {
            font-weight: 700;
            margin-bottom: 8px;
            font-size: 1.1rem;
            color: #333;
        }
        
        .item-desc {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .item-price {
            font-weight: 700;
            color: #ff6b6b;
            font-size: 1.2rem;
        }
        
        .add-to-cart {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 18px;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        }
        
        .add-to-cart:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
        }
        
        .cart-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            width: 380px;
            max-height: 550px;
            overflow: hidden;
            display: none;
            z-index: 1000;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .cart-container.show {
            display: block;
            transform: translateY(0);
            opacity: 1;
        }
        
        .cart-header {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            padding: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .cart-header h3 {
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        #closeCart {
            font-size: 1.8rem;
            cursor: pointer;
            transition: transform 0.2s;
            line-height: 1;
        }
        
        #closeCart:hover {
            transform: rotate(90deg);
        }
        
        .cart-items {
            max-height: 350px;
            overflow-y: auto;
            padding: 18px;
        }
        
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .cart-item:last-child {
            border-bottom: none;
        }
        
        .cart-item-info {
            flex: 1;
            margin-right: 15px;
        }
        
        .cart-item-name {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 4px;
        }
        
        .cart-item-price {
            color: #ff6b6b;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .cart-item-quantity {
            display: flex;
            align-items: center;
        }
        
        .quantity-btn {
            width: 28px;
            height: 28px;
            border: 1px solid #e0e0e0;
            background-color: #f8f9fa;
            cursor: pointer;
            font-weight: 600;
            font-size: 1rem;
            color: #555;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .quantity-btn:hover {
            background-color: #e9ecef;
        }
        
        .quantity-input {
            width: 40px;
            height: 28px;
            text-align: center;
            border: 1px solid #e0e0e0;
            margin: 0 6px;
            border-radius: 4px;
            font-size: 0.9rem;
        }
        
        .cart-footer {
            padding: 18px;
            border-top: 1px solid #f0f0f0;
            background-color: #fafafa;
        }
        
        .cart-total {
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 18px;
            color: #333;
        }
        
        .checkout-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        }
        
        .checkout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
        }
        
        .cart-icon {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
            z-index: 999;
            transition: all 0.3s ease;
        }
        
        .cart-icon:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.5);
        }
        
        .cart-icon svg {
            width: 28px;
            height: 28px;
        }
        
        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #333;
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .empty-cart {
            text-align: center;
            padding: 30px 0;
            color: #888;
            font-size: 0.95rem;
        }
        
        .hot-label {
            position: absolute;
            top: 15px;
            left: 15px;
            background-color: #ff6b6b;
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
            z-index: 1;
        }
        
        .discount-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #4CAF50;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
            z-index: 1;
        }
        
        @media (max-width: 768px) {
            .menu-items {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 20px;
            }
            
            .restaurant-info {
                flex-direction: column;
            }
            
            .restaurant-image {
                width: 100%;
                height: 200px;
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .cart-container {
                width: 90%;
                left: 5%;
                right: 5%;
                bottom: 90px;
            }
            
            .cart-icon {
                width: 60px;
                height: 60px;
                bottom: 20px;
                right: 20px;
            }
        }
        
        @media (max-width: 480px) {
            header h1 {
                font-size: 1.8rem;
            }
            
            .menu-items {
                grid-template-columns: 1fr;
            }
            
            .category-btn {
                padding: 8px 16px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>快捷订餐系统</h1>
            <p>美味即刻送达 · 享受便捷生活</p>
        </header>
        
        <div class="restaurant-info">
            <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="餐厅图片" class="restaurant-image">
            <div class="restaurant-details">
                <h2>美味时光餐厅</h2>
                <p>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                    </svg>
                    4.8 (500+评价) | 
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2c-4.42 0-8 .5-8 4v9.5c0 .95.38 1.81 1 2.44V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-2.06c.62-.63 1-1.49 1-2.44V6c0-3.5-3.58-4-8-4zm0 2c3.87 0 6 .9 6 2H6c0-1.1 2.13-2 6-2zm6 4v3H6V8h12zm-6 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 5v-2h12v2H6z"/>
                    </svg>
                    30分钟送达 | 
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/>
                    </svg>
                    人均 ¥35
                </p>
                <p>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                        <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                    </svg>
                    营业时间: 10:00 - 22:00
                </p>
                <p>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                    地址: 北京市朝阳区美食街88号
                </p>
            </div>
        </div>
        
        <div class="menu-categories">
            <button class="category-btn active">全部</button>
            <button class="category-btn">推荐</button>
            <button class="category-btn">套餐</button>
            <button class="category-btn">主食</button>
            <button class="category-btn">小吃</button>
            <button class="category-btn">饮料</button>
            <button class="category-btn">甜品</button>
        </div>
        
        <div class="menu-items">
            <div class="menu-item">
                <div class="hot-label">招牌</div>
                <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="招牌牛肉面" class="item-image">
                <div class="item-details">
                    <div class="item-name">招牌牛肉面</div>
                    <div class="item-desc">精选上等牛肉，慢火熬制汤底，面条劲道有弹性</div>
                    <div class="item-footer">
                        <div class="item-price">¥28</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <div class="hot-label">热销</div>
                <div class="discount-badge">套餐省¥5</div>
                <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="香辣鸡腿堡套餐" class="item-image">
                <div class="item-details">
                    <div class="item-name">香辣鸡腿堡套餐</div>
                    <div class="item-desc">香辣鸡腿堡+中薯条+中可乐</div>
                    <div class="item-footer">
                        <div class="item-price">¥35</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="鲜虾云吞面" class="item-image">
                <div class="item-details">
                    <div class="item-name">鲜虾云吞面</div>
                    <div class="item-desc">新鲜虾仁云吞，配以特制汤底和细面</div>
                    <div class="item-footer">
                        <div class="item-price">¥32</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <div class="hot-label">新品</div>
                <img src="https://images.unsplash.com/photo-1585032226651-759b368d7246?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="麻辣香锅" class="item-image">
                <div class="item-details">
                    <div class="item-name">麻辣香锅</div>
                    <div class="item-desc">自选食材，麻辣鲜香，配米饭</div>
                    <div class="item-footer">
                        <div class="item-price">¥45</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="鲜榨西瓜汁" class="item-image">
                <div class="item-details">
                    <div class="item-name">鲜榨西瓜汁</div>
                    <div class="item-desc">新鲜西瓜现榨，无添加，500ml</div>
                    <div class="item-footer">
                        <div class="item-price">¥15</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <div class="discount-badge">特价</div>
                <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="提拉米苏" class="item-image">
                <div class="item-details">
                    <div class="item-name">提拉米苏</div>
                    <div class="item-desc">意大利经典甜品，咖啡与奶酪的完美结合</div>
                    <div class="item-footer">
                        <div class="item-price">¥25</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="蔬菜沙拉" class="item-image">
                <div class="item-details">
                    <div class="item-name">蔬菜沙拉</div>
                    <div class="item-desc">新鲜时令蔬菜搭配特调沙拉酱</div>
                    <div class="item-footer">
                        <div class="item-price">¥22</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="menu-item">
                <div class="hot-label">必点</div>
                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="披萨" class="item-image">
                <div class="item-details">
                    <div class="item-name">意式披萨</div>
                    <div class="item-desc">薄脆饼底，丰富配料，拉丝马苏里拉奶酪</div>
                    <div class="item-footer">
                        <div class="item-price">¥58</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="cart-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
            <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
        <div class="cart-count">0</div>
    </div>
    
    <div class="cart-container" id="cartContainer">
        <div class="cart-header">
            <h3>购物车</h3>
            <span id="closeCart">×</span>
        </div>
        <div class="cart-items" id="cartItems">
            <div class="empty-cart">购物车是空的</div>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>总计:</span>
                <span id="cartTotal">¥0</span>
            </div>
            <button class="checkout-btn">去结算</button>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const cartIcon = document.querySelector('.cart-icon');
            const cartContainer = document.getElementById('cartContainer');
            const closeCart = document.getElementById('closeCart');
            const addToCartButtons = document.querySelectorAll('.add-to-cart');
            const cartItemsContainer = document.getElementById('cartItems');
            const cartTotalElement = document.getElementById('cartTotal');
            const cartCountElement = document.querySelector('.cart-count');
            const categoryButtons = document.querySelectorAll('.category-btn');
            
            let cartItems = [];
            let total = 0;
            
            // 切换购物车显示/隐藏
            cartIcon.addEventListener('click', function() {
                cartContainer.classList.toggle('show');
            });
            
            closeCart.addEventListener('click', function() {
                cartContainer.classList.remove('show');
            });
            
            // 分类按钮点击事件
            categoryButtons.forEach(button => {
                button.addEventListener('click', function() {
                    categoryButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加筛选菜单项的逻辑
                });
            });
            
            // 添加到购物车
            addToCartButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const menuItem = this.closest('.menu-item');
                    const itemName = menuItem.querySelector('.item-name').textContent;
                    const itemPrice = parseFloat(menuItem.querySelector('.item-price').textContent.replace('¥', ''));
                    
                    // 检查是否已在购物车中
                    const existingItem = cartItems.find(item => item.name === itemName);
                    
                    if (existingItem) {
                        existingItem.quantity += 1;
                    } else {
                        cartItems.push({
                            name: itemName,
                            price: itemPrice,
                            quantity: 1
                        });
                    }
                    
                    updateCart();
                    cartContainer.classList.add('show');
                    
                    // 添加动画效果
                    button.textContent = '✓ 已添加';
                    setTimeout(() => {
                        button.textContent = '加入购物车';
                    }, 1000);
                });
            });
            
            // 更新购物车
            function updateCart() {
                // 清空购物车显示
                cartItemsContainer.innerHTML = '';
                
                // 计算总价
                total = 0;
                
                if (cartItems.length === 0) {
                    cartItemsContainer.innerHTML = '<div class="empty-cart">购物车是空的</div>';
                    cartCountElement.textContent = '0';
                    cartTotalElement.textContent = '¥0';
                    return;
                }
                
                // 更新购物车商品和总价
                cartItems.forEach(item => {
                    total += item.price * item.quantity;
                    
                    const cartItemElement = document.createElement('div');
                    cartItemElement.className = 'cart-item';
                    cartItemElement.innerHTML = `
                        <div class="cart-item-info">
                            <div class="cart-item-name">${item.name}</div>
                            <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
                        </div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn minus" data-name="${item.name}">-</button>
                            <input type="text" class="quantity-input" value="${item.quantity}" readonly>
                            <button class="quantity-btn plus" data-name="${item.name}">+</button>
                        </div>
                    `;
                    
                    cartItemsContainer.appendChild(cartItemElement);
                });
                
                // 更新总价和数量
                cartTotalElement.textContent = `¥${total.toFixed(2)}`;
                cartCountElement.textContent = cartItems.reduce((sum, item) => sum + item.quantity, 0);
                
                // 添加数量按钮事件
                document.querySelectorAll('.quantity-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const itemName = this.getAttribute('data-name');
                        const item = cartItems.find(item => item.name === itemName);
                        
                        if (this.classList.contains('minus')) {
                            item.quantity -= 1;
                            if (item.quantity <= 0) {
                                cartItems = cartItems.filter(i => i.name !== itemName);
                            }
                        } else if (this.classList.contains('plus')) {
                            item.quantity += 1;
                        }
                        
                        updateCart();
                    });
                });
            }
            
            // 点击购物车外部关闭购物车
            document.addEventListener('click', function(event) {
                if (!cartContainer.contains(event.target) && event.target !== cartIcon && !cartIcon.contains(event.target)) {
                    cartContainer.classList.remove('show');
                }
            });
        });
    </script>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布