UPDATE_LOGO.md 7.3 KB
Logo 添加说明
更新时间
2026-01-08 17:50
更新内容
为前端页面添加了两个 logo，提升品牌识别度和视觉效果。
🎨 Logo 位置
1. 左上角 Logo
文件： logo-gsszyy.jpg（缩小版 logo + 医院名称）
位置： 页面左上角，固定定位
样式：
- 固定在左上角（position: fixed）
- 距离顶部 20px，距离左侧 20px
- 高度 40px，宽度自适应
- 白色背景，圆角 8px
- 轻微阴影效果
适用场景： 所有页面都显示
代码：
<div class="top-left-logo">
<img src="/logos/logo-gsszyy.jpg" alt="甘肃省中医院">
</div>
.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
- 紫色阴影效果（与页面主题色一致）
- 居中显示
适用场景： 仅在欢迎页面显示
代码：
<div v-if="currentStep === 'welcome'" class="welcome-section">
<div class="center-logo">
<img src="/logos/logo.jpg" alt="甘肃省中医院 Logo">
</div>
<h2>欢迎使用患者建档服务</h2>
...
</div>
.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 设计理念
固定定位
- 始终可见，不随页面滚动
- 方便用户随时看到医院标识
小巧精致
- 高度 40px，不会遮挡内容
- 白色背景与页面形成对比
阴影效果
- 轻微阴影（0 2px 12px）
- 提升层次感
- 不会过于突兀
中心 Logo 设计理念
视觉焦点
- 120px × 120px，大小适中
- 位于欢迎页面中心
- 吸引用户注意力
圆角设计
- 12px 圆角
- 现代感十足
- 与页面整体风格一致
阴影效果
- 紫色阴影（rgba(102, 126, 234, 0.3)）
- 与页面渐变背景呼应
- 增强立体感
内边距
- 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 都使用了相对单位和自适应属性：
左上角 logo
width: auto- 宽度自适应height: 40px- 固定高度
中心 logo
object-fit: contain- 保持比例- 固定尺寸，不随屏幕变化
Z-index 管理
左上角 logo 设置了 z-index: 1000，确保：
- 始终在最上层
- 不会被其他元素遮挡
- 固定定位不影响其他元素
路径说明
Logo 图片路径：/logo.jpg 和 /logo-gsszyy.jpg
由于 logo 文件已复制到 src/main/resources/static/ 目录下，可以直接通过根路径访问，无需额外的 /logos/ 前缀。
HTML 代码：
<!-- 左上角 logo -->
<img src="/logo-gsszyy.jpg" alt="甘肃省中医院">
<!-- 中心 logo -->
<img src="/logo.jpg" alt="甘肃省中医院 Logo">
✨ 视觉优化建议
当前配置
- 左上角 logo：40px 高度
- 中心 logo：120px × 120px
可调整参数
如果需要调整大小，修改以下值：
/* 左上角 logo */
.top-left-logo img {
height: 40px; /* 可调整为 30px-60px */
}
/* 中心 logo */
.center-logo img {
width: 120px; /* 可调整为 100px-150px */
height: 120px;
}
阴影强度调整
/* 左上角 logo 阴影 */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
/* 中心 logo 阴影 */
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
🎉 效果预览
启动项目查看效果
# 重启项目
./start.sh # Mac/Linux
start.bat # Windows
# 访问系统
http://localhost:8080
观察要点
左上角 logo
- ✅ 固定在左上角
- ✅ 所有页面都显示
- ✅ 白色背景，圆角设计
- ✅ 不会遮挡页面内容
中心 logo
- ✅ 仅在欢迎页面显示
- ✅ 居中对齐
- ✅ 紫色阴影效果
- ✅ 圆角设计
📝 注意事项
图片路径
- 使用
/开头（根路径） - logo 文件在
static目录下
- 使用
图片格式
- 使用 JPG 格式
- 文件大小适中（logo.jpg 1.4MB，logo-gsszyy.jpg 861KB）
性能优化
- 浏览器会自动缓存图片
- 首次加载后会从缓存读取
- 文件已在 static 目录，访问速度快
响应式
- 左上角 logo 高度固定
- 中心 logo 在移动端也保持 120px
重启项目
- ✅ 文件已复制到 static 目录
- 需要重启项目才能看到 logo
- 重启后路径生效
🚀 完成
两个 logo 已成功添加到前端页面：
- ✅ 左上角：logo-gsszyy.jpg（所有页面）
- ✅ 中心：logo.jpg（欢迎页面）
立即重启项目查看效果！ 🎨