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 {
|
.credit-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
background: rgba(255, 107, 53, 0.95);
|
background: rgba(255, 107, 53, 0.95);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
-webkit-backdrop-filter: blur(10px);
|
-webkit-backdrop-filter: blur(10px);
|
||||||
border-radius: 12px;
|
border-radius: 10px;
|
||||||
padding: 4px 8px;
|
padding: 3px 6px;
|
||||||
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
|
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 {
|
.credit-text {
|
||||||
|
|
@ -138,6 +143,10 @@
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
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