更新登錄頁(yè)面Logo指南

概述

本文檔詳細說(shuō)明如何更新項目登錄頁(yè)面的Logo，包括文件替換、代碼修改和相關(guān)配置。

當前Logo配置

文件位置

src/assets/yaqilogobs.png

引用位置

<!-- src/pages/login/components/Header.vue -->
<template>
  <header class="login-header">
    <logo-full-icon class="logo" />
  </header>
</template>

<script setup lang="ts">
import LogoFullIcon from '@/assets/yaqilogobs.png?component';
</script>

更新Logo的方法

方法一：直接替換文件（推薦）

1. 準備新的Logo文件

   • 文件格式：PNG、SVG、JPG等
   • 建議尺寸：寬度200-400px，高度適中
   • 文件名：保持 yaqilogobs.png 或改為您想要的名稱(chēng)

2. 替換文件

   # 將您的新Logo文件復制到 src/assets/ 目錄
   # 如果保持相同文件名，直接覆蓋即可
   cp your-new-logo.png src/assets/yaqilogobs.png
   

3. 如果更改了文件名，需要修改引用

   <!-- src/pages/login/components/Header.vue -->
   <script setup lang="ts">
   // 修改為新的文件名
   import LogoFullIcon from '@/assets/your-new-logo.png?component';
   </script>
   

方法二：使用img標簽（簡(jiǎn)單方式）

如果您不想使用組件方式，可以直接使用img標簽：

<!-- src/pages/login/components/Header.vue -->
<template>
  <header class="login-header">
    <!-- 替換為img標簽 -->
    <img src="@/assets/your-logo.png" alt="Logo" class="logo" />
  </header>
</template>

<script setup lang="ts">
// 移除import語(yǔ)句
// import LogoFullIcon from '@/assets/yaqilogobs.png?component';
</script>

方法三：使用SVG Logo（推薦用于矢量圖）

如果您的Logo是SVG格式：

<!-- src/pages/login/components/Header.vue -->
<template>
  <header class="login-header">
    <img src="@/assets/your-logo.svg" alt="Logo" class="logo" />
    <!-- 或者直接內聯(lián)SVG -->
    <!-- <svg class="logo">...</svg> -->
  </header>
</template>

詳細步驟說(shuō)明

1. 準備Logo文件

推薦規格：

• 格式: PNG（透明背景）或SVG（矢量圖）
• 尺寸:
  • 寬度：200-400px
  • 高度：50-100px
  • 比例：保持Logo原始比例
• 文件大小: 建議小于500KB

文件命名建議：

• logo.png - 簡(jiǎn)單明了
• company-logo.png - 包含公司名
• brand-logo.svg - SVG矢量格式

2. 放置Logo文件

將新的Logo文件放到項目的assets目錄：

# 項目結構
src/
├── assets/
│   ├── your-new-logo.png  # 您的新Logo
│   ├── yaqilogobs.png     # 原有Logo（可刪除）
│   └── ...
└── ...

3. 修改Header組件

根據您選擇的方法修改 src/pages/login/components/Header.vue：

選項A：保持組件方式

<template>
  <header class="login-header">
    <logo-full-icon class="logo" />
  </header>
</template>

<script setup lang="ts">
import LogoFullIcon from '@/assets/your-new-logo.png?component';
</script>

<style lang="less" scoped>
.login-header {
  padding: 0 var(--td-comp-paddingLR-xl);
  height: 80px;
  display: flex;
  align-items: center;
  
  .logo {
    height: 40px; // 調整Logo高度
    width: auto;  // 保持比例
  }
}
</style>

選項B：使用img標簽

<template>
  <header class="login-header">
    <img src="@/assets/your-new-logo.png" alt="公司Logo" class="logo" />
  </header>
</template>

<script setup lang="ts">
// 不需要import
</script>

<style lang="less" scoped>
.login-header {
  padding: 0 var(--td-comp-paddingLR-xl);
  height: 80px;
  display: flex;
  align-items: center;
  
  .logo {
    height: 40px;
    width: auto;
    object-fit: contain; // 保持Logo比例
  }
}
</style>

4. 調整Logo樣式

根據您的Logo特點(diǎn)調整CSS樣式：

.logo {
  // 基礎樣式
  height: 40px;           // Logo高度
  width: auto;            // 自動(dòng)寬度保持比例
  max-width: 200px;       // 最大寬度限制
  
  // 如果Logo太小
  // height: 60px;
  
  // 如果Logo太大
  // max-height: 40px;
  // max-width: 150px;
  
  // 居中對齊
  object-fit: contain;    // 保持比例
  
  // 如果需要圓角
  // border-radius: 4px;
  
  // 如果需要陰影
  // box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

其他Logo位置

除了登錄頁(yè)面，您可能還需要更新其他位置的Logo：

1. 側邊欄Logo

src/layouts/components/Sidebar.vue

2. 頂部導航Logo

src/layouts/components/Header.vue

3. 網(wǎng)站圖標 (favicon)

public/favicon.ico

4. 移動(dòng)端Logo

可能需要準備不同尺寸的Logo適配移動(dòng)端。

完整示例

假設您要使用名為 company-logo.png 的新Logo：

1. 文件操作

# 將新Logo復制到assets目錄
cp /path/to/your/company-logo.png src/assets/company-logo.png

# 刪除舊Logo（可選）
rm src/assets/yaqilogobs.png

2. 修改Header.vue

<template>
  <header class="login-header">
    <img src="@/assets/company-logo.png" alt="公司Logo" class="logo" />
  </header>
</template>

<script setup lang="ts">
// 移除舊的import
</script>

<style lang="less" scoped>
.login-header {
  padding: 0 var(--td-comp-paddingLR-xl);
  height: 80px;
  display: flex;
  align-items: center;
  background: transparent;
  
  .logo {
    height: 45px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    
    // 如果Logo在深色背景上不清晰，可以添加濾鏡
    // filter: brightness(0) invert(1); // 將Logo變?yōu)榘咨?  }
}
</style>

測試和驗證

1. 開(kāi)發(fā)環(huán)境測試

npm run dev

訪(fǎng)問(wèn) http://localhost:3000/login 查看Logo是否正確顯示。

2. 檢查事項

• [ ] Logo是否正確顯示
• [ ] Logo尺寸是否合適
• [ ] Logo在不同屏幕尺寸下是否正常
• [ ] Logo在明暗主題下是否清晰可見(jiàn)
• [ ] 文件路徑是否正確

3. 常見(jiàn)問(wèn)題排查

Logo不顯示：

• 檢查文件路徑是否正確
• 檢查文件名是否匹配
• 檢查文件是否存在于assets目錄

Logo太大或太?。?/strong>