123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <!-- 返回按钮 -->
- <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>
|