Logo 组件导出 - PlaszymeDB Logo Component

📖 组件说明

这是 PlaszymeDB 的完整 Logo 组件实现，包含：

✅ Logo 图标（SVG/图片支持）
✅ Logo 文字品牌名
✅ 响应式设计
✅ 深色模式自适应
✅ 平滑过渡动画
✅ 多种尺寸变体

📝 HTML 代码

<!-- 标准 Logo 组件 -->
<div class="logo-section">
    <img src="images/logo_svg.svg" alt="PlaszymeDB Logo" class="logo-icon">
    <div class="logo-text">PlaszymeDB</div>
</div>

<!-- 如果不使用图片，可以使用纯 CSS 圆形背景 -->
<div class="logo-section">
    <div class="logo-icon">
        <!-- 可以在这里放图标或文字 -->
        P
    </div>
    <div class="logo-text">PlaszymeDB</div>
</div>

🎨 CSS 代码

核心样式：

/* Logo 容器 */
.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;  /* Logo 图标和文字之间的间距 */
}

/* Logo 图标（50x50px 圆形） */
.logo-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #005eb8, #0078d4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    overflow: hidden;
}

/* 如果使用图片 */
.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Logo 文字 */
.logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-primary);
    transition: color 0.3s ease;
}

/* 深色模式 */
body.dark-mode .logo-text {
    color: #fff;
}

🖼️ Logo SVG 文件

Logo 图片位置：images/logo_svg.svg

这是一个包含 Base64 编码图片的 SVG 文件。您需要将此文件复制到新网站的相应目录。

SVG 文件内容：

<svg id="图层_1" data-name="图层 1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 401 401">
  <image width="401" height="401" 
         xlink:href="data:image/png;base64,iVBORw0KG...">
  </image>
</svg>

注：完整的 Base64 数据已省略。请从源文件 images/logo_svg.svg 复制完整内容。

🎭 Logo 尺寸变体

PlaszymeDB 提供了不同尺寸的 Logo 变体：

标准尺寸 (50x50px)

PlaszymeDB

大尺寸 (120x120px)

大尺寸 Logo CSS：

.about-logo-icon {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #005eb8, #0078d4, #9b59b6);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 48px;
    box-shadow: 0 4px 16px rgba(0,94,184,0.3);
    overflow: hidden;
}

.about-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

🚀 集成步骤

步骤 1：复制 Logo 文件

将 images/logo_svg.svg 文件复制到您的新网站项目中。

步骤 2：复制 CSS 代码

将上面的 CSS 代码复制到您的样式表中。

步骤 3：添加 HTML 结构

在需要显示 Logo 的地方添加 HTML 代码。

步骤 4：调整路径

根据您的项目结构，调整图片路径 src="images/logo_svg.svg"

步骤 5：自定义颜色（可选）

修改 CSS 变量来自定义 Logo 颜色：

--brand-primary - 主品牌色（浅色模式）
--brand-secondary - 副品牌色
渐变色：linear-gradient(135deg, #005eb8, #0078d4)

🌓 深色模式支持

Logo 组件完全支持深色模式。点击右上角的月亮图标可以切换主题查看效果。

深色模式下，Logo 文字会自动变为白色以确保可读性。

📋 需要的文件

images/logo_svg.svg - Logo SVG 图片文件（必需）
Logo_Component_Export.html - 本文档（参考用）

注意：如果 logo_svg.svg 文件不存在，Logo 将显示为纯色圆形背景。

❓ 常见问题

Q: Logo 图片不显示怎么办？

A: 检查以下几点：

确认 images/logo_svg.svg 文件存在
检查图片路径是否正确
确保服务器正确配置了 SVG MIME 类型

Q: 如何修改 Logo 尺寸？

A: 修改 .logo-icon 的 width 和 height 属性即可。

Q: 可以使用 PNG/JPG 格式的 Logo 吗？

A: 可以！只需将 src 指向您的图片文件即可，例如：

<img src="images/logo.png" alt="Logo" class="logo-icon">

🎨 PlaszymeDB Logo 组件导出