Discuz 用户勋章调用代码

用户勋章展示功能的实现与优化
在网站开发中，用户勋章的展示是一项常见的需求。本文将详细介绍如何通过数据库查询和前端模板实现用户勋章的展示，并结合CSS样式提升用户体验。
首先，我们需要从数据库中获取用户的勋章信息。以下是一个示例代码片段，用于查询用户勋章的数据：


$medals = array();
$mls = DB::query("SELECT a.*,b.* FROM " . DB::table("common_member_medal") . " a LEFT JOIN " . DB::table("forum_medal") . " b on b.medalid=a.medalid WHERE b.`available` <> 0 AND a.`uid`='{$_G[uid]}' ORDER BY b.`displayorder` ASC LIMIT 0,20");
while ($ml = DB::fetch($mls)) {
    $medals[] = $ml;
}

这段代码的作用是从数据库中获取当前用户的勋章信息，并将其存储到数组$medals中。LIMIT参数可以根据实际需求调整，以限制返回的勋章数量。
接下来，我们可以通过前端模板来展示这些勋章。以下是HTML模板的代码：



    
    
        
        {$medal['name']}
{$medal['description']}

此模板会循环输出每个勋章的图片和描述信息。当鼠标悬停在勋章图片上时，会显示详细的勋章信息。
为了增强用户体验，我们还可以使用CSS来美化勋章的展示效果。以下是部分CSS代码：


.medal .medal-list { display: inline-block; position: relative; cursor: pointer; }
.medal .medal-list .medal-text:before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -8px; border-color: transparent transparent #3498db transparent; border-style: solid; border-width: 0 7px 8px 7px; height: 0; width: 0; }
.medal .medal-list .medal-text { opacity: 0; position: absolute; top: 25px; left: -65px; width: 180px; background-color: #3498db; color: #fff; padding: 10px 0; line-height: 14px; font-size: 12px; text-align: center; border-radius: 2px; transition: all .5s; z-index: -9999; }
.medal .medal-list img:hover + .medal-text { opacity: 1; top: 45px; z-index: 9999; }

这段CSS代码实现了当鼠标悬停在勋章图片上时，勋章的详细信息会以优雅的动画效果显示出来。
总结来说，通过上述方法，我们可以轻松实现用户勋章的展示功能，并通过CSS提升视觉效果。当然，根据具体需求，还可以进一步优化和扩展此功能。

如果您对EyouCMS感兴趣，可以点击了解更多：

EyouCms，简单易用的企业网站管理系统，点击了解更多

推荐阅读