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:
parent
810abaa0b1
commit
691b174287
|
|
@ -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;
|
||||
}
|
||||
|
||||
/* 标签悬浮 - 图片底部 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue