halo-theme-hao/templates/modules/widgets/about-widgets/game.html

65 lines
3.0 KiB
HTML
Raw Normal View History

2024-04-12 06:35:37 +00:00
<!-- 爱好 -->
<div class="author-content" >
<div class="author-content-item game-lol"
th:style="'background: url('+ @{${theme.config.about.game.game_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game.game_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game.game_title}"></span>
<div class="content-bottom">
<div class="icon-group">
<div class="loading-bar" role="presentation" aria-hidden="true"></div>
</div>
<div class="tips" th:text="${theme.config.about.game.game_uid}"></div>
</div>
</div>
</div>
<div th:if="${#strings.equals(theme.config.about.game2.game2_type, 'img')}" class="author-content-item game-wolf"
th:style="'background: url('+ @{${theme.config.about.game2.game2_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game2.game2_title}"></span>
<div class="content-bottom">
<div class="tips" th:text="${theme.config.about.game2.game2_uid}"></div>
</div>
</div>
</div>
<div th:if="${#strings.equals(theme.config.about.game2.game2_type, 'comic')}" class="author-content-item comic-content">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}"></div>
<div class="author-content-item-title" th:text="${theme.config.about.game2.game2_title}"></div>
<div class="comic-box" >
<a th:each="comic : ${theme.config.about.game2.comic_list}"
class="comic-item"
th:href="${comic.url}"
rel="external nofollow noreferrer" target="_blank" th:title="${comic.title}" draggable="false">
<div class="comic-item-cover"><img
th:with="img = @{${comic.bg}}"
th:src="${isLazyload ? loadingImg : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:alt="${comic.title}"
draggable="false" >
</div>
</a>
</div>
</div>
</div>
<style>
.loading-bar::after {
content: "";
position: absolute;
top: 500px;
left: 0;
filter: drop-shadow(0 -500px 0 #ece5d8);
width: 500px;
height: 62.5px;
background: url([[${theme.config.about.game.loading_bar}]]) no-repeat left 100%;
background-size: 500px 62.5px;
background-position-x: 0;
}
</style>
</div>