63 lines
2.5 KiB
HTML
63 lines
2.5 KiB
HTML
<div class="uc-wrap">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">我的勋章</div>
|
|
<div class="layui-card-body" pad15>
|
|
<div class="medal-grid" id="medalGrid"></div>
|
|
<div class="medal-empty" id="medalEmpty" style="display:none;color:#999;padding:30px 0;text-align:center;">
|
|
<i class="layui-icon layui-icon-trophy" style="font-size:40px;display:block;margin-bottom:8px;color:#ccc;"></i>
|
|
暂无勋章，去「任务中心」完成任务即可获得
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['http', 'layer', 'jquery'], function () {
|
|
var http = layui.http, layer = layui.layer, $ = layui.jquery;
|
|
|
|
function render(list) {
|
|
var box = $('#medalGrid'), html = '';
|
|
if (!list || !list.length) {
|
|
$('#medalEmpty').show();
|
|
return;
|
|
}
|
|
$('#medalEmpty').hide();
|
|
list.forEach(function (m) {
|
|
var img = m.image
|
|
? '<img src="' + m.image + '" alt="' + m.title + '" />'
|
|
: '<i class="layui-icon layui-icon-trophy"></i>';
|
|
html += ''
|
|
+ '<div class="medal-item">'
|
|
+ '<div class="medal-icon">' + img + '</div>'
|
|
+ '<div class="medal-title">' + m.title + '</div>'
|
|
+ '<div class="medal-desc">' + (m.description || '') + '</div>'
|
|
+ '<div class="medal-time">' + (m.create_time_text || '') + ' 获得</div>'
|
|
+ '</div>';
|
|
});
|
|
box.html(html);
|
|
}
|
|
|
|
http.get('list').then(function (res) {
|
|
if (res.code === 0) {
|
|
render(res.data || []);
|
|
} else {
|
|
layer.msg(res.message || '加载失败', { icon: 2 });
|
|
}
|
|
}).catch(function () {
|
|
layer.msg('加载失败', { icon: 2 });
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.medal-grid { display:flex; flex-wrap:wrap; gap:16px; }
|
|
.medal-item { width:160px; padding:18px 12px; border:1px solid #f0f0f0; border-radius:10px; text-align:center; background:#fff; transition:.2s; }
|
|
.medal-item:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); transform:translateY(-2px); }
|
|
.medal-icon { width:64px; height:64px; line-height:64px; margin:0 auto 10px; border-radius:50%; background:linear-gradient(135deg,#fff7e6,#ffe7ba); overflow:hidden; }
|
|
.medal-icon img { width:64px; height:64px; object-fit:cover; }
|
|
.medal-icon .layui-icon { font-size:32px; color:#fa8c16; }
|
|
.medal-title { font-size:15px; font-weight:600; color:#333; }
|
|
.medal-desc { font-size:12px; color:#999; margin:6px 0; line-height:1.5; min-height:34px; }
|
|
.medal-time { font-size:11px; color:#bbb; }
|
|
</style>
|