🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读👛帮助💰️钱包💖关注切换到宽版
  • 首页Portal
  • 社区BBS
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › discuz个人空间展示积分等级制徽标
    返回列表 发布新帖
    查看: 359|回复: 1

    [代码技巧] discuz个人空间展示积分等级制徽标

    [复制链接]
    飞流管家
    神评新秀
    UID: 10000 ChuanQi
    社区贡献
    30 72 3044
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 30 颗
       贡献 : 8651 点
       金币 : 9 枚
    Icon在线时间 : 269 小时
    Icon注册时间 : 2025-5-6
    Icon最后登录 : 2026-6-8

    荣誉勋章

    神评新秀

    送礼物：0 个 收礼物：0 个
    UID:10000 ChuanQi vip 发表于 2025-9-7 00:38:33 来自手机端 | 查看全部 |阅读模式 北京

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    作者:飞流管家原创，未经许可，严禁转载！
    discuz总积分是判断一个用户整体活跃贡献和价值的重要标准，因此为提升这个积分的重要性和价值感，我对其进行了美化展示。
    代码如下
    1. <!--{if $space[credits] >= 100 && $space[credits] < 200}-->
    2.             <span class="number-container">
    3.                 <img src="$_G['style']['tpldir']/pic/maimai/1.png" alt="Background Image">
    4.                 <span class="number-text">{$space[credits]}</span>
    5.             </span>
    6.             <!--{elseif $space[credits] >= 200 && $space[credits] < 300}-->
    7.             <span class="number-container">
    8.                 <img src="$_G['style']['tpldir']/pic/maimai/2.png" alt="Background Image">
    9.                 <span class="number-text">{$space[credits]}</span>
    10.             </span>
    11.             <!--{elseif $space[credits] >= 300 && $space[credits] < 400}-->
    12.             <span class="number-container">
    13.                 <img src="$_G['style']['tpldir']/pic/maimai/3.png" alt="Background Image">
    14.                 <span class="number-text">{$space[credits]}</span>
    15.             </span>
    16.             <!--{elseif $space[credits] >= 400 && $space[credits] < 500}-->
    17.             <span class="number-container">
    18.                 <img src="$_G['style']['tpldir']/pic/maimai/4.png" alt="Background Image">
    19.                 <span class="number-text">{$space[credits]}</span>
    20.             </span>
    21.             <!--{elseif $space[credits] >= 500 && $space[credits] < 600}-->
    22.             <span class="number-container">
    23.                 <img src="$_G['style']['tpldir']/pic/maimai/5.png" alt="Background Image">
    24.                 <span class="number-text">{$space[credits]}</span>
    25.             </span>
    26.             <!--{elseif $space[credits] >= 600 && $space[credits] < 700}-->
    27.             <span class="number-container">
    28.                 <img src="$_G['style']['tpldir']/pic/maimai/6.png" alt="Background Image">
    29.                 <span class="number-text">{$space[credits]}</span>
    30.             </span>
    31.             <!--{elseif $space[credits] >= 700 && $space[credits] < 800}-->
    32.             <span class="number-container">
    33.                 <img src="$_G['style']['tpldir']/pic/maimai/7.png" alt="Background Image">
    34.                 <span class="number-text">{$space[credits]}</span>
    35.             </span>
    36.             <!--{elseif $space[credits] >= 800 && $space[credits] < 900}-->
    37.             <span class="number-container">
    38.                 <img src="$_G['style']['tpldir']/pic/maimai/8.png" alt="Background Image">
    39.                 <span class="number-text">{$space[credits]}</span>
    40.             </span>
    41.             <!--{elseif $space[credits] >= 900 && $space[credits] < 1000}-->
    42.             <span class="number-container">
    43.                 <img src="$_G['style']['tpldir']/pic/maimai/9.png" alt="Background Image">
    44.                 <span class="number-text">{$space[credits]}</span>
    45.             </span>
    46.             <!--{elseif $space[credits] >= 1000}-->
    47.             <span class="number-container">
    48.                 <img src="$_G['style']['tpldir']/pic/maimai/10.png" alt="Background Image">
    49.                 <span class="number-text">{$space[credits]}</span>
    50.             </span>
    51.             <!--{/if}-->
    复制代码

    这个代码通过积分条件判断，设定了不同积分阶段的徽标展示。
    下面我们为其加上样式，实现最终效果。
    1. .number-container {
    2. display: inline-block;;/* 将span设置为行内块级元素 */
    3.   position: relative;
    4.   width: auto; /* 设置你希望的容器宽度 */
    5.   height: auto; /* 高度自动适应 */
    6.   vertical-align: middle;
    7. }

    9. .number-container img {
    10.   width: auto; /* 图片宽度占满容器 */
    11.   height: 16px !important;/* 高度自动，保持图片比例 */
    12.   display: block; /* 去掉图片默认的外边距 */
    13.   margin-right: 0 !important;
    14. }

    16. .number-container .number-text {
    17.   position: absolute;
    18.   top: 55%; /* 垂直居中 */
    19.   left: 50%; /* 水平居中 */
    20.   transform: translate(-50%, -50%);
    21.   color: #ffffff; /* 设置数字的颜色，根据图片背景调整 */
    22.   font-size: 8px; /* 根据图片大小和数字长度调整字体大小 */
    23.   font-weight: bold; /* 可以让数字显示更醒目 */
    24.   z-index: 10; /* 确保数字在图片上方 */
    25. }
    复制代码

    大功告成，另外我们可以举一反三，设置其他积分的条件判断来设置更多风格的徽标等级展示哦
    飞流客服官方账号，最懂社区规则，最爱活跃气氛。
    回复 送礼

    使用道具 举报

    凯旋呐
    无名の勋章
    儿童节
    端午节
    国庆节
    社区贡献
    59 286 6229
    等级头衔
    Icon组别 : 老兵
    Icon等级 :

    积分成就
       钻石 : 1 颗
       贡献 : 3655 点
       金币 : 0 枚
    Icon在线时间 : 1105 小时
    Icon注册时间 : 2024-12-15
    Icon最后登录 : 2026-6-11

    荣誉勋章

    无名の勋章儿童节端午节国庆节

    送礼物：0 个 收礼物：0 个
    UID:1031 vip 发表于 2025-9-7 07:31:59 来自手机端 | 查看全部 湖南长沙
    难怪刚刚在天上没看见你呢，原来是下凡了！
    资源创造价值，诚信连接交易。
    回复 支持 反对 送礼

    使用道具 举报

    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    飞流：这论坛到底有没有资本给我投资一下啊！
    		07-20 22:07
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-7-20 23:49 , Processed in 0.058435 second(s), 63 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表