food-picture/picture-web/src/modules/thired-ser/ogin-screen/ogin-screen.html

<!-- 返回按钮 -->
    <a  class="back-button" id="backButton" routerLink="/mobile/mine">
        <i class="fas fa-arrow-left"></i>
    </a>
    <!-- href="#" -->
<!-- 装饰元素 -->
<div class="decorations">
  <i class="decoration fas fa-utensils" style="top: 10%; left: 5%;"></i>
  <i class="decoration fas fa-hamburger" style="top: 25%; right: 7%;"></i>
  <i class="decoration fas fa-pizza-slice" style="top: 40%; left: 15%;"></i>
  <i class="decoration fas fa-ice-cream" style="bottom: 20%; right: 10%;"></i>
  <i class="decoration fas fa-drumstick-bite" style="bottom: 30%; left: 8%;"></i>
  <i class="decoration fas fa-fish" style="bottom: 10%; right: 20%;"></i>
</div>

<!-- 美食背景轮播 -->
<div class="food-slideshow">
  <div *ngFor="let slide of slides; let i = index" 
       class="food-slide" 
       [ngClass]="{'active': i === currentSlideIndex}"
       [style.background-image]="'url(' + slide + ')'">
  </div>
</div>

<!-- 应用容器 -->
<div class="app-container">
  <!-- 品牌头部 -->
  <div class="brand-header">
    <div class="logo">
      <i class="fas fa-camera-retro"></i>
      美食图库
    </div>
    <div class="slogan">专业美食图片展示平台</div>
    <p class="subtitle">为您的餐厅屏幕提供高品质美食图片解决方案</p>
  </div>
  
  <!-- 登录卡片 -->
  <div class="login-card">
    <div class="login-header">
      <h2>餐厅登录</h2>
      <p>访问您的专业美食图库</p>
    </div>
    
    <!-- 标签切换 -->
    <div class="tabs">
      <div class="tab" [class.active]="activeTab === 'login'" (click)="switchTab('login')">登录</div>
      <div class="tab" [class.active]="activeTab === 'register'" (click)="switchTab('register')">注册</div>
    </div>
    
    <!-- 表单内容 -->
    <div class="form-content">
      <!-- 登录表单 -->
      <form class="form" [class.active]="activeTab === 'login'" (submit)="onSubmitLogin($event)">
        <div class="input-group">
          <i class="fas fa-envelope"></i>
          <input type="email" placeholder="餐厅邮箱" required [(ngModel)]="loginForm.email" name="loginEmail">
        </div>
        <div class="input-group">
          <i class="fas fa-lock"></i>
          <input type="password" placeholder="密码" required [(ngModel)]="loginForm.password" name="loginPassword">
        </div>
        <div class="options">
          <div class="remember">
            <input type="checkbox" id="remember" [(ngModel)]="loginForm.remember" name="remember">
            <label for="remember">记住我</label>
          </div>
          <a href="#" class="forgot-password">忘记密码?</a>
        </div>
        <button type="submit" class="btn">登录账户</button>
      </form>
      
      <!-- 注册表单 -->
      <form class="form" [class.active]="activeTab === 'register'" (submit)="onSubmitRegister($event)">
        <div class="input-group">
          <i class="fas fa-store"></i>
          <input type="text" placeholder="餐厅名称" required [(ngModel)]="registerForm.restaurantName" name="restaurantName">
        </div>
        <div class="input-group">
          <i class="fas fa-user"></i>
          <input type="text" placeholder="联系人姓名" required [(ngModel)]="registerForm.contactName" name="contactName">
        </div>
        <div class="input-group">
          <i class="fas fa-envelope"></i>
          <input type="email" placeholder="联系邮箱" required [(ngModel)]="registerForm.email" name="registerEmail">
        </div>
        <div class="input-group">
          <i class="fas fa-lock"></i>
          <input type="password" placeholder="设置密码" required [(ngModel)]="registerForm.password" name="registerPassword">
        </div>
        <button type="submit" class="btn">注册专业账户</button>
      </form>
    </div>
    
    <div class="social-login">
      <p>或使用其他方式登录</p>
      <div class="social-icons">
        <a href="#"><i class="fab fa-weixin"></i></a>
        <a href="#"><i class="fab fa-qq"></i></a>
        <a href="#"><i class="fab fa-apple"></i></a>
      </div>
    </div>
  </div>
  
  <!-- 平台优势 -->
  <div class="benefits">
    <div class="benefit">
      <i class="fas fa-download"></i>
      <div class="benefit-text">
        <h3>高清下载</h3>
        <p>4K超清图片，完美适配餐厅屏幕</p>
      </div>
    </div>
    <div class="benefit">
      <i class="fas fa-sync-alt"></i>
      <div class="benefit-text">
        <h3>每周更新</h3>
        <p>持续新增最新美食图片</p>
      </div>
    </div>
    <div class="benefit">
      <i class="fas fa-tags"></i>
      <div class="benefit-text">
        <h3>分类齐全</h3>
        <p>中西餐、甜点、饮品等类别</p>
      </div>
    </div>
    <div class="benefit">
      <i class="fas fa-mobile-alt"></i>
      <div class="benefit-text">
        <h3>多屏适配</h3>
        <p>支持各种尺寸的餐厅屏幕</p>
      </div>
    </div>
  </div>
</div>

<!-- 成功消息 -->
<div *ngIf="showSuccessMessage" class="success-message">
  <i class="fas fa-check-circle"></i>
  {{ getSuccessMessage() }}
</div>