# Logo 添加说明

## 更新时间
2026-01-08 17:50

## 更新内容

为前端页面添加了两个 logo，提升品牌识别度和视觉效果。

---

## 🎨 Logo 位置

### 1. 左上角 Logo
**文件：** `logo-gsszyy.jpg`（缩小版 logo + 医院名称）

**位置：** 页面左上角，固定定位

**样式：**
- 固定在左上角（position: fixed）
- 距离顶部 20px，距离左侧 20px
- 高度 40px，宽度自适应
- 白色背景，圆角 8px
- 轻微阴影效果

**适用场景：** 所有页面都显示

**代码：**
```html
<div class="top-left-logo">
    <img src="/logos/logo-gsszyy.jpg" alt="甘肃省中医院">
</div>
```

```css
.top-left-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.top-left-logo img {
    height: 40px;
    width: auto;
}
```

---

### 2. 中心 Logo
**文件：** `logo.jpg`（正方形 logo）

**位置：** 欢迎页面中心

**样式：**
- 尺寸：120px × 120px
- 圆角 12px
- 白色背景，内边距 10px
- 紫色阴影效果（与页面主题色一致）
- 居中显示

**适用场景：** 仅在欢迎页面显示

**代码：**
```html
<div v-if="currentStep === 'welcome'" class="welcome-section">
    <div class="center-logo">
        <img src="/logos/logo.jpg" alt="甘肃省中医院 Logo">
    </div>
    <h2>欢迎使用患者建档服务</h2>
    ...
</div>
```

```css
.center-logo {
    text-align: center;
    margin-bottom: 30px;
}

.center-logo img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    background: white;
    padding: 10px;
}
```

---

## 📐 设计说明

### 左上角 Logo 设计理念

1. **固定定位**
   - 始终可见，不随页面滚动
   - 方便用户随时看到医院标识

2. **小巧精致**
   - 高度 40px，不会遮挡内容
   - 白色背景与页面形成对比

3. **阴影效果**
   - 轻微阴影（0 2px 12px）
   - 提升层次感
   - 不会过于突兀

### 中心 Logo 设计理念

1. **视觉焦点**
   - 120px × 120px，大小适中
   - 位于欢迎页面中心
   - 吸引用户注意力

2. **圆角设计**
   - 12px 圆角
   - 现代感十足
   - 与页面整体风格一致

3. **阴影效果**
   - 紫色阴影（rgba(102, 126, 234, 0.3)）
   - 与页面渐变背景呼应
   - 增强立体感

4. **内边距**
   - 10px 白色内边距
   - 让 logo 呼吸感更好
   - 避免贴边

---

## 🎯 视觉效果

### 欢迎页面布局

```
┌────────────────────────────────────────┐
│ [左上角 logo-gsszyy]                   │
│                                        │
│                                        │
│              ┌─────────┐               │
│              │  logo   │  ← 中心 logo  │
│              │  (120px)│               │
│              └─────────┘               │
│                                        │
│        欢迎使用患者建档服务             │
│                                        │
│        [开始建档] 按钮                 │
│                                        │
└────────────────────────────────────────┘
```

### 其他页面布局

```
┌────────────────────────────────────────┐
│ [左上角 logo-gsszyy]                   │
│                                        │
│    甘肃省中医院                         │
│    患者建档系统                         │
│                                        │
│    [页面内容...]                       │
│                                        │
└────────────────────────────────────────┘
```

---

## 📁 文件结构

```
src/main/resources/
├── logos/                              ← 原始 logo 目录
│   ├── logo.jpg
│   └── logo-gsszyy.jpg
└── static/
    ├── logo.jpg                        ← 复制到此目录（中心显示）
    ├── logo-gsszyy.jpg                 ← 复制到此目录（左上角）
    └── index.html                      ← 前端页面
```

**注意：** logo 文件已复制到 `static` 目录，方便直接访问。

---

## 🔧 技术细节

### 响应式设计

两个 logo 都使用了相对单位和自适应属性：

1. **左上角 logo**
   - `width: auto` - 宽度自适应
   - `height: 40px` - 固定高度

2. **中心 logo**
   - `object-fit: contain` - 保持比例
   - 固定尺寸，不随屏幕变化

### Z-index 管理

左上角 logo 设置了 `z-index: 1000`，确保：
- 始终在最上层
- 不会被其他元素遮挡
- 固定定位不影响其他元素

### 路径说明

Logo 图片路径：`/logo.jpg` 和 `/logo-gsszyy.jpg`

由于 logo 文件已复制到 `src/main/resources/static/` 目录下，可以直接通过根路径访问，无需额外的 `/logos/` 前缀。

**HTML 代码：**
```html
<!-- 左上角 logo -->
<img src="/logo-gsszyy.jpg" alt="甘肃省中医院">

<!-- 中心 logo -->
<img src="/logo.jpg" alt="甘肃省中医院 Logo">
```

---

## ✨ 视觉优化建议

### 当前配置
- 左上角 logo：40px 高度
- 中心 logo：120px × 120px

### 可调整参数

如果需要调整大小，修改以下值：

```css
/* 左上角 logo */
.top-left-logo img {
    height: 40px;  /* 可调整为 30px-60px */
}

/* 中心 logo */
.center-logo img {
    width: 120px;   /* 可调整为 100px-150px */
    height: 120px;
}
```

### 阴影强度调整

```css
/* 左上角 logo 阴影 */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

/* 中心 logo 阴影 */
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
```

---

## 🎉 效果预览

### 启动项目查看效果

```bash
# 重启项目
./start.sh  # Mac/Linux
start.bat   # Windows

# 访问系统
http://localhost:8080
```

### 观察要点

1. **左上角 logo**
   - ✅ 固定在左上角
   - ✅ 所有页面都显示
   - ✅ 白色背景，圆角设计
   - ✅ 不会遮挡页面内容

2. **中心 logo**
   - ✅ 仅在欢迎页面显示
   - ✅ 居中对齐
   - ✅ 紫色阴影效果
   - ✅ 圆角设计

---

## 📝 注意事项

1. **图片路径**
   - 使用 `/` 开头（根路径）
   - logo 文件在 `static` 目录下

2. **图片格式**
   - 使用 JPG 格式
   - 文件大小适中（logo.jpg 1.4MB，logo-gsszyy.jpg 861KB）

3. **性能优化**
   - 浏览器会自动缓存图片
   - 首次加载后会从缓存读取
   - 文件已在 static 目录，访问速度快

4. **响应式**
   - 左上角 logo 高度固定
   - 中心 logo 在移动端也保持 120px

5. **重启项目**
   - ✅ 文件已复制到 static 目录
   - 需要重启项目才能看到 logo
   - 重启后路径生效

---

## 🚀 完成

两个 logo 已成功添加到前端页面：
- ✅ 左上角：logo-gsszyy.jpg（所有页面）
- ✅ 中心：logo.jpg（欢迎页面）

**立即重启项目查看效果！** 🎨