food-menu/menu-web/src/modules/food/mobile/page-home/page-home.html

<!-- page-home.component.html -->
<div class="container">
  <!-- Header -->
  <header>
    <div class="header-container">
      <div class="logo">
        <i class="fas fa-cat"></i>
        <span>点菜喵</span>
      </div>
      <div class="user-actions">
        <button class="icon-btn">
          <i class="fas fa-bell"></i>
        </button>
        <button class="icon-btn">
          <i class="fas fa-user"></i>
        </button>
      </div>
    </div>

    <div class="search-bar">
      <i class="fas fa-search"></i>
      <input type="text" placeholder="搜索菜品、商家、分类...">
    </div>
  </header>

  <!-- 更新后的 Swiper 部分 -->
<swiper-container #swiperContainer class="swiper-container" [init]="false">
  <swiper-slide class="swiper-slide slide-1">
    <h2>新店开业全场8折</h2>
    <p>仅限今日，限时优惠</p>
  </swiper-slide>
  <swiper-slide class="swiper-slide slide-2">
    <h2>点菜喵会员专享福利</h2>
    <p>积分兑换免单券</p>
  </swiper-slide>
  <swiper-slide class="swiper-slide slide-3">
    <h2>周末限定套餐</h2>
    <p>双人套餐仅需¥168</p>
  </swiper-slide>
</swiper-container>

  <!-- Category Navigation -->
  <div class="category-nav">
    <div class="category-item" (click)="handleCategoryClick($event)">
      <div class="category-icon">
        <i class="fas fa-fire"></i>
      </div>
      <div class="category-text">热销</div>
    </div>
    <div class="category-item" (click)="handleCategoryClick($event)">
      <div class="category-icon">
        <i class="fas fa-percent"></i>
      </div>
      <div class="category-text">折扣</div>
    </div>
    <div class="category-item" (click)="handleCategoryClick($event)">
      <div class="category-icon">
        <i class="fas fa-box"></i>
      </div>
      <div class="category-text">套餐</div>
    </div>
    <div class="category-item" (click)="handleCategoryClick($event)">
      <div class="category-icon">
        <i class="fas fa-tag"></i>
      </div>
      <div class="category-text">优惠</div>
    </div>
    <div class="category-item" (click)="handleCategoryClick($event)">
      <div class="category-icon">
        <i class="fas fa-utensils"></i>
      </div>
      <div class="category-text">小吃</div>
    </div>
  </div>

  <!-- IP Entry -->
  <div class="ip-entry">
    <div class="ip-circle" (click)="handleIPClick()">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" width="40px" height="40px">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
      </svg>
    </div>
    <div class="ip-text">点菜喵</div>
  </div>

  <!-- Shop Info Card -->
  <div class="shop-card">
    <div class="shop-header">
      <div class="shop-logo">喵</div>
      <div class="shop-info">
        <div class="shop-name">
          <h2>点菜喵主题餐厅</h2>
          <div class="rating">
            <i class="fas fa-star"></i>
            <span>4.9</span>
          </div>
        </div>
        <div class="shop-tags">
          <span class="shop-tag">网红打卡</span>
          <span class="shop-tag">人气爆款</span>
          <span class="shop-tag">宠物友好</span>
        </div>
      </div>
    </div>
    
    <div class="shop-stats">
      <div class="stat-item">
        <div class="stat-value">¥3.5</div>
        <div class="stat-label">配送费</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">30min</div>
        <div class="stat-label">配送时间</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">营业中</div>
        <div class="stat-label">09:00-22:00</div>
      </div>
    </div>
  </div>

  <!-- Story Section -->
  <div class="story-section">
    <div class="story-header">
      <h2>菜品故事</h2>
      <a href="#" class="more">更多故事</a>
    </div>
    
    <div class="story-content">
      <div class="story-image">
        酸菜鱼<br>传统工艺
      </div>
      <div class="story-details">
        <div class="story-title">
          <i class="fas fa-utensils"></i> 酸菜鱼的传奇故事
        </div>
        <div class="story-text">
          酸菜鱼源于重庆江津，已有百年历史。传说清朝末年，一位渔夫将刚捕获的鱼与自家腌制的酸菜同煮，意外发现其美味。这道菜融合了川菜的麻辣与酸菜的酸爽，鱼肉鲜嫩，汤汁醇厚...
        </div>
        <div class="story-meta">
          <span>阅读 2,856</span>
          <span>点赞 1,203</span>
        </div>
      </div>
    </div>
    
    <div class="story-actions">
      <div class="story-btn read-btn" (click)="handleReadStory()">阅读完整故事</div>
      <div class="story-btn share-btn" (click)="handleShareStory()">分享故事</div>
    </div>
  </div>

  <!-- Menu Section -->
  <div class="section">
    <div class="section-title">
      <h2>热销菜品</h2>
      <a href="#" class="more">查看全部</a>
    </div>

    <div class="menu-list">
      <div class="menu-item" *ngFor="let item of menuItems">
        <div class="menu-img">
          <div class="menu-badge">{{item.badge}}</div>
        </div>
        <div class="menu-info">
          <div class="menu-name">
            <h3>{{item.name}}</h3>
            <div class="menu-price">
              ¥{{item.price}}
              <span *ngIf="item.discountPrice" style="text-decoration:line-through;color:#999;font-size:12px;margin-left:5px">
                ¥{{item.discountPrice}}
              </span>
            </div>
          </div>
          <div class="menu-desc">{{item.description}}</div>
          <div class="menu-stats">
            <span>月售 {{item.sales}}份</span>
            <span>好评率 {{item.rating}}</span>
          </div>
          <div class="menu-actions">
            <button class="add-btn" (click)="handleAddToCart($event, item.id)">
              <i class="fas fa-plus"></i> 加入
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
  <div class="nav-item" [class.active]="activeTab === 'home'" (click)="setActiveTab('home')">
    <i class="fas fa-home"></i>
    <div>首页</div>
  </div>
  <div class="nav-item" [class.active]="activeTab === 'discover'" (click)="setActiveTab('discover')">
    <i class="fas fa-search"></i>
    <div>发现</div>
  </div>
  <div class="nav-item" [class.active]="activeTab === 'story'" (click)="setActiveTab('story')">
    <i class="fas fa-book-open"></i>
    <div>故事</div>
  </div>
  <div class="nav-item" [class.active]="activeTab === 'cart'" (click)="setActiveTab('cart')">
    <i class="fas fa-shopping-cart"></i>
    <div>购物车</div>
  </div>
  <div class="nav-item" [class.active]="activeTab === 'profile'" (click)="setActiveTab('profile')">
    <i class="fas fa-user"></i>
    <div>我的</div>
  </div>
</div>