搜索和登录

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

@@ -1,117 +0,0 @@
-<!-- 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

@@ -1,323 +0,0 @@
-// 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

@@ -1,130 +0,0 @@
-// 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

@@ -1,140 +0,0 @@
-<!-- 返回按钮 -->
-    <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

@@ -1,446 +0,0 @@
-/* 返回按钮 */
-.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

@@ -1,90 +0,0 @@
-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 '注册成功！正在进入美食图库...';
-    }
-  }
-}