discuz个人空间展示积分等级制徽标
discuz总积分是判断一个用户整体活跃贡献和价值的重要标准，因此为提升这个积分的重要性和价值感，我对其进行了美化展示。代码如下
<!--{if $space >= 100 && $space < 200}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/1.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 200 && $space < 300}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/2.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 300 && $space < 400}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/3.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 400 && $space < 500}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/4.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 500 && $space < 600}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/5.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 600 && $space < 700}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/6.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 700 && $space < 800}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/7.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 800 && $space < 900}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/8.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 900 && $space < 1000}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/9.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{elseif $space >= 1000}-->
<span class="number-container">
<img src="$_G['style']['tpldir']/pic/maimai/10.png" alt="Background Image">
<span class="number-text">{$space}</span>
</span>
<!--{/if}-->
这个代码通过积分条件判断，设定了不同积分阶段的徽标展示。
下面我们为其加上样式，实现最终效果。
.number-container {
display: inline-block;;/* 将span设置为行内块级元素 */
position: relative;
width: auto; /* 设置你希望的容器宽度 */
height: auto; /* 高度自动适应 */
vertical-align: middle;
}
.number-container img {
width: auto; /* 图片宽度占满容器 */
height: 16px !important;/* 高度自动，保持图片比例 */
display: block; /* 去掉图片默认的外边距 */
margin-right: 0 !important;
}
.number-container .number-text {
position: absolute;
top: 55%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%);
color: #ffffff; /* 设置数字的颜色，根据图片背景调整 */
font-size: 8px; /* 根据图片大小和数字长度调整字体大小 */
font-weight: bold; /* 可以让数字显示更醒目 */
z-index: 10; /* 确保数字在图片上方 */
}
大功告成，另外我们可以举一反三，设置其他积分的条件判断来设置更多风格的徽标等级展示哦 难怪刚刚在天上没看见你呢，原来是下凡了！
页:
[1]