Commit 3238f139 authored by fisherdaddy's avatar fisherdaddy

feature: add website logo

parent f819fc58
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<meta name="description" content="AI工具箱 - 您的智能助手集合" /> <meta name="description" content="AI工具箱 - 您的智能助手集合" />
<title>AI工具箱 | 智能助手集合</title> <title>AI工具箱 | 智能助手集合</title>
<link rel="stylesheet" href="/src/styles/main.css" /> <link rel="stylesheet" href="/src/styles/main.css" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
......
...@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; ...@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
import LanguageSelector from './LanguageSelector'; import LanguageSelector from './LanguageSelector';
import { useTranslation } from '../js/i18n'; import { useTranslation } from '../js/i18n';
import '../styles/Header.css'; // 确保创建并导入这个CSS文件 import '../styles/Header.css'; // 确保创建并导入这个CSS文件
// 导入 logo 图片
import logo from '../assets/logo.png'; // 请确保路径正确
function Header() { function Header() {
const { t } = useTranslation(); const { t } = useTranslation();
...@@ -10,9 +12,12 @@ function Header() { ...@@ -10,9 +12,12 @@ function Header() {
return ( return (
<header> <header>
<nav> <nav>
<Link to="/" className="logo no-underline"> <div className="logo-title-container">
{t('title')} <img src={logo} alt="Logo" className="logo" />
</Link> <Link to="/" className="title no-underline">
{t('title')}
</Link>
</div>
<LanguageSelector /> <LanguageSelector />
</nav> </nav>
</header> </header>
......
...@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; ...@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
const i18n = { const i18n = {
zh: { zh: {
title: 'AI工具箱', title: 'AI 工具箱',
slogan: '您的智能助手集合,一站式解决各种AI需求。', slogan: '您的智能助手集合,一站式解决各种AI需求。',
searchPlaceholder: '搜索工具...', searchPlaceholder: '搜索工具...',
tools: { tools: {
......
...@@ -14,6 +14,7 @@ function Home() { ...@@ -14,6 +14,7 @@ function Home() {
return ( return (
<div> <div>
<section className="hero"> <section className="hero">
{/* 添加 logo */}
<h1>{t('title')}</h1> <h1>{t('title')}</h1>
<p className="slogan">{t('slogan')}</p> <p className="slogan">{t('slogan')}</p>
</section> </section>
......
...@@ -6,3 +6,26 @@ ...@@ -6,3 +6,26 @@
.no-underline:hover { .no-underline:hover {
text-decoration: none; /* 确保悬停时也不会出现下划线 */ text-decoration: none; /* 确保悬停时也不会出现下划线 */
} }
.logo {
width: 40px; /* 调整为适合你的 logo 大小 */
height: auto;
margin-right: 10px;
}
.title {
font-size: 1.5rem; /* 调整为适合你的设计 */
white-space: nowrap;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo-title-container {
display: flex;
align-items: center;
}
\ No newline at end of file
...@@ -52,12 +52,6 @@ nav { ...@@ -52,12 +52,6 @@ nav {
width: 100%; width: 100%;
} }
.logo {
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-color);
}
main { main {
max-width: 1200px; max-width: 1200px;
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment