fix: 修复积分徽章上方空白问题

� 问题修复:
- 减少积分徽章上边距:top: 20px → 12px
- 优化内边距:padding: 4px 8px → 3px 6px
- 调整圆角大小:border-radius: 12px → 10px

� 布局优化:
- 添加flexbox布局:display: flex, align-items: center, justify-content: center
- 设置最小高度:min-height: 18px,确保徽章有合适高度
- 重置行高:line-height: 1,消除默认行高空白

� 文字样式:
- 重置文字外边距和内边距:margin: 0, padding: 0
- 设置行高为1,消除文字上下空白
- 使用block显示确保文字正确渲染

 修复效果:
- 积分徽章紧贴图片右上角,无多余空白
- 文字在徽章中完美居中显示
- 整体视觉更加紧凑和专业
This commit is contained in:
杨明明 2025-09-03 19:15:50 +08:00
parent 810abaa0b1
commit 691b174287
1 changed files with 12 additions and 3 deletions

View File

@ -122,15 +122,20 @@
/* 积分悬浮徽章 - 图片右上角 */
.credit-badge {
position: absolute;
top: 20px;
top: 12px;
right: 12px;
z-index: 4;
background: rgba(255, 107, 53, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
padding: 4px 8px;
border-radius: 10px;
padding: 3px 6px;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
display: flex;
align-items: center;
justify-content: center;
min-height: 18px;
line-height: 1;
}
.credit-text {
@ -138,6 +143,10 @@
font-size: 11px;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin: 0;
padding: 0;
line-height: 1;
display: block;
}
/* 标签悬浮 - 图片底部 */