搜索界面，登录界面

picture-web/src/modules/first-home/image-search/image-search.html

@@ -0,0 +1,117 @@
+<!-- image-search.html -->
+<div class="container">
+  <!-- 顶部搜索栏 -->
+  <header class="search-header">
+    <div class="header-top">
+      <div class="back-btn" routerLink="/mobile/home">
+        <fa-icon [icon]="faArrowLeft"></fa-icon>
+      </div>
+      <div class="app-name">播菜汪</div>
+      <div style="width: 36px;"></div> <!-- 占位保持对称 -->
+    </div>
+    <div class="search-bar">
+      <fa-icon [icon]="faSearch"></fa-icon>
+      <input 
+        type="text" 
+        [(ngModel)]="searchInput" 
+        placeholder="搜索美食图片素材..." 
+        (keyup.enter)="onSearch()"
+      >
+    </div>
+  </header>
+  
+  <!-- 主内容区 -->
+  <main class="main-content">
+    <!-- 历史搜索 -->
+    <div class="section history-section" *ngIf="searchHistory.length > 0">
+      <div class="section-title">
+        <div><fa-icon [icon]="faHistory"></fa-icon> 历史搜索</div>
+        <button class="clear-btn" (click)="clearHistory()">清空</button>
+      </div>
+      <div class="history-list">
+        <div 
+          class="history-item" 
+          *ngFor="let item of searchHistory; let i = index"
+          (click)="performSearch(item)"
+        >
+          <span>{{ item }}</span>
+          <span class="delete-btn" (click)="deleteHistoryItem(i); $event.stopPropagation()">
+            <fa-icon [icon]="faTimes"></fa-icon>
+          </span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 搜索发现 -->
+    <div class="section">
+      <div class="section-title">
+        <div><fa-icon [icon]="faCompass"></fa-icon> 搜索发现</div>
+      </div>
+      <div class="discovery-grid">
+        <div 
+          class="grid-item" 
+          *ngFor="let item of discoveryItems"
+          (click)="onDiscoveryClick(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+    
+    <!-- 大家都在搜 -->
+    <div class="section">
+      <div class="section-title">
+        <div><fa-icon [icon]="faFire"></fa-icon> 大家都在搜</div>
+      </div>
+      <div class="hot-list">
+        <div 
+          class="hot-item" 
+          *ngFor="let item of popularSearches; let i = index"
+          (click)="onPopularSearchClick(item)"
+        >
+          <div class="hot-index" [class.top3]="i < 3">{{ i + 1 }}</div>
+          <div class="hot-keyword">
+            {{ item.keyword }}
+            <span class="hot-tag" *ngIf="item.tag">{{ item.tag }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 美食热搜 -->
+    <div class="section">
+      <div class="section-title">
+        <div><fa-icon [icon]="faUtensils"></fa-icon> 美食热搜</div>
+      </div>
+      <div class="hot-list">
+        <div 
+          class="hot-item" 
+          *ngFor="let item of foodTrends; let i = index"
+          (click)="onFoodTrendClick(item)"
+        >
+          <div class="hot-index" [class.top3]="i < 3">{{ i + 1 }}</div>
+          <div class="hot-keyword">
+            {{ item.keyword }}
+            <span class="hot-tag" *ngIf="item.tag">{{ item.tag }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 分类标签 -->
+    <div class="section">
+      <div class="section-title">
+        <div><fa-icon [icon]="faTags"></fa-icon> 热门分类</div>
+      </div>
+      <div class="category-tags">
+        <div 
+          class="tag" 
+          *ngFor="let category of categories"
+          (click)="onCategoryClick(category)"
+        >
+          {{ category }}
+        </div>
+      </div>
+    </div>
+  </main>
+</div>

picture-web/src/modules/first-home/image-search/image-search.scss

@@ -0,0 +1,323 @@
+// image-search.scss
+:host {
+  display: block;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #fff9f0, #fff0f5);
+  color: #333;
+  line-height: 1.6;
+  padding-bottom: 20px;
+}
+
+.container {
+  max-width: 100%;
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+/* 顶部搜索栏 */
+.search-header {
+  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
+  padding: 15px 15px 20px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 15px rgba(0,0,0,0.15);
+  border-radius: 0 0 20px 20px;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.back-btn {
+  background: rgba(255,255,255,0.3);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    background: rgba(255,255,255,0.5);
+    transform: scale(1.05);
+  }
+}
+
+.app-name {
+  color: white;
+  font-size: 22px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.search-bar {
+  display: flex;
+  background: white;
+  border-radius: 30px;
+  padding: 10px 20px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+  align-items: center;
+
+  fa-icon {
+    color: #ff6b6b;
+    margin-right: 12px;
+    font-size: 18px;
+  }
+
+  input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    padding: 5px 0;
+    background: transparent;
+
+    &::placeholder {
+      color: #bbb;
+    }
+  }
+}
+
+/* 主内容区 */
+.main-content {
+  padding: 20px 15px;
+  background: white;
+  border-radius: 25px;
+  margin-top: 15px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 50px;
+    height: 6px;
+    background: #ddd;
+    border-radius: 3px;
+  }
+}
+
+.section-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 25px 0 18px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #fff0f0;
+
+  fa-icon {
+    color: #ff6b6b;
+    margin-right: 10px;
+  }
+}
+
+.clear-btn {
+  background: none;
+  border: none;
+  color: #999;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  padding: 5px 10px;
+  border-radius: 15px;
+
+  &:hover {
+    background: #fff0f0;
+    color: #ff6b6b;
+  }
+}
+
+/* 历史搜索 */
+.history-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+.history-item {
+  background: #f9f9f9;
+  border-radius: 25px;
+  padding: 10px 20px;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  border: 1px solid #eee;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+
+  &:hover {
+    background: #fff5f5;
+    border-color: #ffcccc;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255,107,107,0.15);
+  }
+
+  .delete-btn {
+    margin-left: 10px;
+    color: #bbb;
+    font-size: 14px;
+    transition: all 0.3s;
+
+    &:hover {
+      color: #ff6b6b;
+    }
+  }
+}
+
+/* 搜索发现 */
+.discovery-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+  margin-bottom: 25px;
+}
+
+.grid-item {
+  background: linear-gradient(135deg, #f8f9ff, #fff8f8);
+  border-radius: 15px;
+  padding: 15px 8px;
+  text-align: center;
+  font-size: 14px;
+  border: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 3px 8px rgba(0,0,0,0.03);
+
+  &:hover {
+    background: linear-gradient(135deg, #f0f3ff, #ffecec);
+    border-color: #ffcccc;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(255,107,107,0.15);
+  }
+}
+
+/* 热搜列表 */
+.hot-list {
+  background: linear-gradient(135deg, #f9f9f9, #fcf5f5);
+  border-radius: 20px;
+  overflow: hidden;
+  margin-bottom: 25px;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.03);
+}
+
+.hot-item {
+  display: flex;
+  padding: 15px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: all 0.3s;
+  align-items: center;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: #fff5f5;
+  }
+}
+
+.hot-index {
+  width: 26px;
+  height: 26px;
+  background: #f0f0f0;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+  font-size: 14px;
+  color: #666;
+  font-weight: bold;
+
+  &.top3 {
+    background: linear-gradient(135deg, #ffd6d6, #ff8e8e);
+    color: white;
+  }
+}
+
+.hot-keyword {
+  flex: 1;
+  font-size: 16px;
+}
+
+.hot-tag {
+  background: #fff0f0;
+  color: #ff6b6b;
+  border-radius: 15px;
+  padding: 4px 10px;
+  font-size: 12px;
+  margin-left: 10px;
+}
+
+/* 分类标签 */
+.category-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 25px;
+}
+
+.tag {
+  background: linear-gradient(135deg, #f0f7ff, #e6f7ff);
+  color: #4a90e2;
+  border-radius: 20px;
+  padding: 8px 20px;
+  font-size: 15px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid #e0f0ff;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
+
+  &:hover {
+    background: linear-gradient(135deg, #4a90e2, #6ba8e6);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 12px rgba(74,144,226,0.2);
+  }
+}
+
+/* 响应式调整 */
+@media (max-width: 480px) {
+  .discovery-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 360px) {
+  .discovery-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .history-item {
+    padding: 8px 15px;
+    font-size: 14px;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.section {
+  animation: fadeIn 0.5s ease-out;
+}

picture-web/src/modules/first-home/image-search/image-search.ts

@@ -0,0 +1,130 @@
+// image-search.ts
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { RouterModule } from '@angular/router';
+import { 
+  faArrowLeft, 
+  faSearch, 
+  faHistory, 
+  faCompass, 
+  faFire, 
+  faUtensils, 
+  faTags, 
+  faTimes 
+} from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-image-search',
+  standalone: true,
+  imports: [CommonModule, FormsModule, FontAwesomeModule,RouterModule],
+  templateUrl: './image-search.html',
+  styleUrls: ['./image-search.scss']
+})
+export class ImageSearchComponent implements OnInit {
+  // FontAwesome 图标
+  faArrowLeft = faArrowLeft;
+  faSearch = faSearch;
+  faHistory = faHistory;
+  faCompass = faCompass;
+  faFire = faFire;
+  faUtensils = faUtensils;
+  faTags = faTags;
+  faTimes = faTimes;
+
+  searchInput = '';
+  searchHistory: string[] = [];
+
+  // 搜索发现项
+  discoveryItems = [
+    '美食摄影', '中餐高清', '食材特写', '饮品素材',
+    '节日美食', '菜单设计', '火锅图片', '菜品展示'
+  ];
+
+  // 大家都在搜
+  popularSearches = [
+    { keyword: '高级料理图片素材', tag: '热' },
+    { keyword: '夏日饮品视觉素材', tag: '新' },
+    { keyword: '美食摄影技巧', tag: '' },
+    { keyword: '中餐厅投影素材', tag: '' },
+    { keyword: '食物特写高清', tag: '' }
+  ];
+
+  // 美食热搜
+  foodTrends = [
+    { keyword: '火锅美食素材包', tag: '爆' },
+    { keyword: '甜品视觉图集', tag: '' },
+    { keyword: '海鲜大餐高清', tag: '' },
+    { keyword: '中式点心素材', tag: '' },
+    { keyword: '西餐摆盘艺术', tag: '' }
+  ];
+
+  // 热门分类
+  categories = ['中餐', '西餐', '日料', '甜点', '饮品', '烧烤', '海鲜', '素食'];
+
+  ngOnInit() {
+    this.loadSearchHistory();
+  }
+
+  loadSearchHistory() {
+    const history = localStorage.getItem('foodSearchHistory');
+    this.searchHistory = history ? JSON.parse(history) : [];
+  }
+
+
+  clearHistory() {
+    if (this.searchHistory.length === 0) return;
+    
+    if (confirm('确定要清空所有搜索历史吗？')) {
+      this.searchHistory = [];
+      localStorage.removeItem('foodSearchHistory');
+    }
+  }
+
+  deleteHistoryItem(index: number) {
+    this.searchHistory.splice(index, 1);
+    localStorage.setItem('foodSearchHistory', JSON.stringify(this.searchHistory));
+  }
+
+  performSearch(query: string) {
+    if (!query.trim()) return;
+    
+    // 添加到历史记录
+    if (!this.searchHistory.includes(query)) {
+      this.searchHistory.unshift(query);
+      // 最多保留10条记录
+      if (this.searchHistory.length > 10) {
+        this.searchHistory.pop();
+      }
+      localStorage.setItem('foodSearchHistory', JSON.stringify(this.searchHistory));
+    }
+    
+    // 执行搜索（模拟）
+    alert(`正在搜索: ${query}\n将显示相关美食图片素材`);
+  }
+
+  onSearch() {
+    this.performSearch(this.searchInput.trim());
+  }
+
+  onDiscoveryClick(item: string) {
+    this.searchInput = item;
+    this.performSearch(item);
+  }
+
+  onPopularSearchClick(item: { keyword: string }) {
+    this.searchInput = item.keyword;
+    this.performSearch(item.keyword);
+  }
+
+  onFoodTrendClick(item: { keyword: string }) {
+    this.searchInput = item.keyword;
+    this.performSearch(item.keyword);
+  }
+
+  onCategoryClick(category: string) {
+    this.searchInput = `${category}图片素材`;
+    this.performSearch(`${category}图片素材`);
+  }
+}

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

@@ -0,0 +1,140 @@
+<!-- 返回按钮 -->
+    <a href="#" class="back-button" id="backButton">
+        <i class="fas fa-arrow-left"></i>
+    </a>
+<!-- 装饰元素 -->
+<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,446 @@
+/* 返回按钮 */
+.back-button {
+position: absolute;
+top: 25px;
+left: 25px;
+z-index: 100;
+background: rgba(255, 255, 255, 0.9);
+width: 50px;
+height: 50px;
+border-radius: 50%;
+display: flex;
+justify-content: center;
+align-items: center;
+box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+transition: all 0.3s ease;
+color: #ff7e5f;
+font-size: 1.3rem;
+text-decoration: none;
+}        
+.back-button:hover {
+transform: translateX(-3px);
+background: white;
+box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+* {
+  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

@@ -0,0 +1,90 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-ogin-screen',
+  templateUrl: './ogin-screen.html',
+  styleUrls: ['./ogin-screen.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule]
+})
+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 '注册成功！正在进入美食图库...';
+    }
+  }
+}