ogin-screen.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <!-- 返回按钮 -->
  2. <a class="back-button" id="backButton" routerLink="/mobile/mine">
  3. <i class="fas fa-arrow-left"></i>
  4. </a>
  5. <!-- href="#" -->
  6. <!-- 装饰元素 -->
  7. <div class="decorations">
  8. <i class="decoration fas fa-utensils" style="top: 10%; left: 5%;"></i>
  9. <i class="decoration fas fa-hamburger" style="top: 25%; right: 7%;"></i>
  10. <i class="decoration fas fa-pizza-slice" style="top: 40%; left: 15%;"></i>
  11. <i class="decoration fas fa-ice-cream" style="bottom: 20%; right: 10%;"></i>
  12. <i class="decoration fas fa-drumstick-bite" style="bottom: 30%; left: 8%;"></i>
  13. <i class="decoration fas fa-fish" style="bottom: 10%; right: 20%;"></i>
  14. </div>
  15. <!-- 美食背景轮播 -->
  16. <div class="food-slideshow">
  17. <div *ngFor="let slide of slides; let i = index"
  18. class="food-slide"
  19. [ngClass]="{'active': i === currentSlideIndex}"
  20. [style.background-image]="'url(' + slide + ')'">
  21. </div>
  22. </div>
  23. <!-- 应用容器 -->
  24. <div class="app-container">
  25. <!-- 品牌头部 -->
  26. <div class="brand-header">
  27. <div class="logo">
  28. <i class="fas fa-camera-retro"></i>
  29. 美食图库
  30. </div>
  31. <div class="slogan">专业美食图片展示平台</div>
  32. <p class="subtitle">为您的餐厅屏幕提供高品质美食图片解决方案</p>
  33. </div>
  34. <!-- 登录卡片 -->
  35. <div class="login-card">
  36. <div class="login-header">
  37. <h2>餐厅登录</h2>
  38. <p>访问您的专业美食图库</p>
  39. </div>
  40. <!-- 标签切换 -->
  41. <div class="tabs">
  42. <div class="tab" [class.active]="activeTab === 'login'" (click)="switchTab('login')">登录</div>
  43. <div class="tab" [class.active]="activeTab === 'register'" (click)="switchTab('register')">注册</div>
  44. </div>
  45. <!-- 表单内容 -->
  46. <div class="form-content">
  47. <!-- 登录表单 -->
  48. <form class="form" [class.active]="activeTab === 'login'" (submit)="onSubmitLogin($event)">
  49. <div class="input-group">
  50. <i class="fas fa-envelope"></i>
  51. <input type="email" placeholder="餐厅邮箱" required [(ngModel)]="loginForm.email" name="loginEmail">
  52. </div>
  53. <div class="input-group">
  54. <i class="fas fa-lock"></i>
  55. <input type="password" placeholder="密码" required [(ngModel)]="loginForm.password" name="loginPassword">
  56. </div>
  57. <div class="options">
  58. <div class="remember">
  59. <input type="checkbox" id="remember" [(ngModel)]="loginForm.remember" name="remember">
  60. <label for="remember">记住我</label>
  61. </div>
  62. <a href="#" class="forgot-password">忘记密码?</a>
  63. </div>
  64. <button type="submit" class="btn">登录账户</button>
  65. </form>
  66. <!-- 注册表单 -->
  67. <form class="form" [class.active]="activeTab === 'register'" (submit)="onSubmitRegister($event)">
  68. <div class="input-group">
  69. <i class="fas fa-store"></i>
  70. <input type="text" placeholder="餐厅名称" required [(ngModel)]="registerForm.restaurantName" name="restaurantName">
  71. </div>
  72. <div class="input-group">
  73. <i class="fas fa-user"></i>
  74. <input type="text" placeholder="联系人姓名" required [(ngModel)]="registerForm.contactName" name="contactName">
  75. </div>
  76. <div class="input-group">
  77. <i class="fas fa-envelope"></i>
  78. <input type="email" placeholder="联系邮箱" required [(ngModel)]="registerForm.email" name="registerEmail">
  79. </div>
  80. <div class="input-group">
  81. <i class="fas fa-lock"></i>
  82. <input type="password" placeholder="设置密码" required [(ngModel)]="registerForm.password" name="registerPassword">
  83. </div>
  84. <button type="submit" class="btn">注册专业账户</button>
  85. </form>
  86. </div>
  87. <div class="social-login">
  88. <p>或使用其他方式登录</p>
  89. <div class="social-icons">
  90. <a href="#"><i class="fab fa-weixin"></i></a>
  91. <a href="#"><i class="fab fa-qq"></i></a>
  92. <a href="#"><i class="fab fa-apple"></i></a>
  93. </div>
  94. </div>
  95. </div>
  96. <!-- 平台优势 -->
  97. <div class="benefits">
  98. <div class="benefit">
  99. <i class="fas fa-download"></i>
  100. <div class="benefit-text">
  101. <h3>高清下载</h3>
  102. <p>4K超清图片,完美适配餐厅屏幕</p>
  103. </div>
  104. </div>
  105. <div class="benefit">
  106. <i class="fas fa-sync-alt"></i>
  107. <div class="benefit-text">
  108. <h3>每周更新</h3>
  109. <p>持续新增最新美食图片</p>
  110. </div>
  111. </div>
  112. <div class="benefit">
  113. <i class="fas fa-tags"></i>
  114. <div class="benefit-text">
  115. <h3>分类齐全</h3>
  116. <p>中西餐、甜点、饮品等类别</p>
  117. </div>
  118. </div>
  119. <div class="benefit">
  120. <i class="fas fa-mobile-alt"></i>
  121. <div class="benefit-text">
  122. <h3>多屏适配</h3>
  123. <p>支持各种尺寸的餐厅屏幕</p>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <!-- 成功消息 -->
  129. <div *ngIf="showSuccessMessage" class="success-message">
  130. <i class="fas fa-check-circle"></i>
  131. {{ getSuccessMessage() }}
  132. </div>