登录界面

picture-web/src/index.html

@@ -13,3 +13,4 @@
 </body>
 </html>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

picture-web/src/modules/picture/mobile.routes.ts

@@ -27,7 +27,7 @@ export const MOBILE_ROUTES: Routes = [
   },
   {
     path: 'ogin-screen',
-    loadComponent: () => import('../thired-ser/ogin-screen/ogin-screen').then(m => m.OginScreen)
+    loadComponent: () => import('../thired-ser/ogin-screen/ogin-screen').then(m => m.OginScreenComponent)
   },
    {
     path: 'upload-screen',
@@ -39,7 +39,7 @@ export const MOBILE_ROUTES: Routes = [
   },
   {
     path: 'image-search',
-    loadComponent: () => import('../first-home/image-search/image-search').then(m => m.ImageSearch)
+    loadComponent: () => import('../first-home/image-search/image-search').then(m => m.ImageSearchComponent)
   },
   {
     path: 'image-detail',

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

@@ -1 +1,136 @@
-<p>登录界面</p>
+<!-- 装饰元素 -->
+<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>

picture-web/src/modules/thired-ser/ogin-screen/ogin-screen.scss

@@ -0,0 +1,422 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  background: linear-gradient(135deg, #ff7e5f, #feb47b);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  padding: 20px;
+}
+
+/* 装饰元素 */
+.decorations {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.decoration {
+  position: absolute;
+  font-size: 3rem;
+  opacity: 0.1;
+  color: white;
+}
+
+/* 美食背景轮播 */
+.food-slideshow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  opacity: 0.15;
+}
+
+.food-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  opacity: 0;
+  transition: opacity 1.2s ease-in-out;
+}
+
+.food-slide.active {
+  opacity: 1;
+}
+
+/* 主容器 */
+.app-container {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  background: rgba(255, 255, 255, 0.88);
+  border-radius: 25px;
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+  padding: 40px 30px;
+}
+
+/* 品牌头部 */
+.brand-header {
+  text-align: center;
+  margin-bottom: 35px;
+}
+
+.logo {
+  display: inline-flex;
+  align-items: center;
+  background: linear-gradient(to right, #ff7e5f, #feb47b);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-bottom: 15px;
+}
+
+.logo i {
+  margin-right: 12px;
+  font-size: 2.8rem;
+}
+
+.slogan {
+  color: #ff7e5f;
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 5px;
+}
+
+.subtitle {
+  color: #666;
+  font-size: 0.95rem;
+  max-width: 320px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+/* 登录卡片 */
+.login-card {
+  background: white;
+  border-radius: 20px;
+  padding: 30px 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  margin-bottom: 30px;
+}
+
+.login-header {
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.login-header h2 {
+  font-size: 1.8rem;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.login-header p {
+  color: #777;
+  font-size: 1rem;
+}
+
+/* 标签切换 */
+.tabs {
+  display: flex;
+  background: #f8f8f8;
+  border-radius: 50px;
+  padding: 6px;
+  margin-bottom: 25px;
+}
+
+.tab {
+  flex: 1;
+  padding: 12px;
+  text-align: center;
+  cursor: pointer;
+  font-weight: 600;
+  color: #888;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  font-size: 1.05rem;
+}
+
+.tab.active {
+  background: linear-gradient(to right, #ff7e5f, #feb47b);
+  color: white;
+  box-shadow: 0 4px 10px rgba(255, 126, 95, 0.3);
+}
+
+/* 表单内容 */
+.form-content {
+  position: relative;
+  height: 240px;
+  overflow: hidden;
+}
+
+.form {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.4s ease;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(20px);
+}
+
+.form.active {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+/* 输入组样式 */
+.input-group {
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.input-group i {
+  position: absolute;
+  left: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #ff7e5f;
+  font-size: 1.2rem;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 16px 16px 16px 52px;
+  border: 1px solid #e0e0e0;
+  border-radius: 50px;
+  font-size: 1rem;
+  background: #fafafa;
+  color: #333;
+  transition: all 0.3s ease;
+}
+
+.input-group input:focus {
+  outline: none;
+  border-color: #ff7e5f;
+  box-shadow: 0 0 0 3px rgba(255, 126, 95, 0.2);
+}
+
+.input-group input::placeholder {
+  color: #aaa;
+}
+
+.options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.remember {
+  display: flex;
+  align-items: center;
+}
+
+.remember input {
+  margin-right: 8px;
+  accent-color: #ff7e5f;
+}
+
+.remember label {
+  color: #666;
+  font-size: 0.95rem;
+}
+
+.forgot-password {
+  color: #ff7e5f;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+}
+
+.forgot-password:hover {
+  text-decoration: underline;
+}
+
+.btn {
+  width: 100%;
+  padding: 16px;
+  background: linear-gradient(to right, #ff7e5f, #feb47b);
+  border: none;
+  border-radius: 50px;
+  color: white;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4);
+}
+
+.btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(255, 126, 95, 0.5);
+}
+
+.social-login {
+  margin-top: 25px;
+  text-align: center;
+}
+
+.social-login p {
+  color: #777;
+  margin-bottom: 15px;
+  position: relative;
+  font-size: 0.95rem;
+}
+
+.social-login p::before,
+.social-login p::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 30%;
+  height: 1px;
+  background: #e0e0e0;
+}
+
+.social-login p::before {
+  left: 0;
+}
+
+.social-login p::after {
+  right: 0;
+}
+
+.social-icons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+.social-icons a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #f5f5f5;
+  color: #555;
+  font-size: 1.3rem;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.social-icons a:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* 优势展示 */
+.benefits {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  margin-top: 30px;
+}
+
+.benefit {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 126, 95, 0.08);
+  padding: 15px;
+  border-radius: 15px;
+  border: 1px solid rgba(255, 126, 95, 0.15);
+}
+
+.benefit i {
+  font-size: 1.8rem;
+  color: #ff7e5f;
+  margin-right: 12px;
+  min-width: 40px;
+  text-align: center;
+}
+
+.benefit-text h3 {
+  font-size: 1rem;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.benefit-text p {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+/* 成功消息 */
+.success-message {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 15px 30px;
+  border-radius: 50px;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease-out;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  
+  i {
+    color: #4CAF50;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translate(-50%, -20px); }
+  to { opacity: 1; transform: translate(-50%, 0); }
+}
+
+/* 响应式调整 */
+@media (max-width: 480px) {
+  body {
+    padding: 15px;
+  }
+  
+  .app-container {
+    padding: 30px 20px;
+  }
+  
+  .logo {
+    font-size: 2.2rem;
+  }
+  
+  .slogan {
+    font-size: 1.1rem;
+  }
+  
+  .login-card {
+    padding: 25px 20px;
+  }
+  
+  .benefits {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
+}

picture-web/src/modules/thired-ser/ogin-screen/ogin-screen.ts

@@ -1,11 +1,90 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-ogin-screen',
-  imports: [],
   templateUrl: './ogin-screen.html',
-  styleUrl: './ogin-screen.scss'
+  styleUrls: ['./ogin-screen.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule]
 })
-export class OginScreen {
+export class OginScreenComponent implements OnInit, OnDestroy {
+  activeTab: 'login' | 'register' = 'login';
+  currentSlideIndex = 0;
+  showSuccessMessage = false;
+  messageType: 'login' | 'register' | null = null;
+  
+  // 表单模型
+  loginForm = {
+    email: '',
+    password: '',
+    remember: true
+  };
+  
+  registerForm = {
+    restaurantName: '',
+    contactName: '',
+    email: '',
+    password: ''
+  };
+  
+  // 轮播图图片
+  slides = [
+    'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
+  ];
+  
+  private slideInterval: any;
 
-}
+  ngOnInit(): void {
+    this.startSlideShow();
+  }
+
+  ngOnDestroy(): void {
+    if (this.slideInterval) {
+      clearInterval(this.slideInterval);
+    }
+  }
+
+  startSlideShow(): void {
+    this.slideInterval = setInterval(() => {
+      this.currentSlideIndex = (this.currentSlideIndex + 1) % this.slides.length;
+    }, 4000);
+  }
+
+  switchTab(tab: 'login' | 'register'): void {
+    this.activeTab = tab;
+  }
+
+  onSubmitLogin(event: Event): void {
+    event.preventDefault();
+    this.showSuccess('login');
+  }
+
+  onSubmitRegister(event: Event): void {
+    event.preventDefault();
+    this.showSuccess('register');
+  }
+
+  showSuccess(type: 'login' | 'register'): void {
+    this.messageType = type;
+    this.showSuccessMessage = true;
+    
+    setTimeout(() => {
+      this.showSuccessMessage = false;
+      // 在实际应用中，这里会进行导航
+      // this.router.navigate(['/dashboard']);
+    }, 2000);
+  }
+
+  getSuccessMessage(): string {
+    if (this.messageType === 'login') {
+      return '登录成功！正在进入美食图库...';
+    } else {
+      return '注册成功！正在进入美食图库...';
+    }
+  }
+}