96 lines
2.8 KiB
HTML
96 lines
2.8 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "title"}}{{.Key}} - Search{{end}}
|
|
|
|
{{define "styles"}}
|
|
<style>
|
|
.game-card {
|
|
height: 100%;
|
|
transition: transform 0.2s;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.game-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.game-cover {
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.game-description {
|
|
display: -webkit-box;
|
|
line-clamp: 3;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.col-lg-5-item {
|
|
flex: 0 0 20%;
|
|
max-width: 20%;
|
|
}
|
|
}
|
|
</style>
|
|
{{end}}
|
|
|
|
{{define "content"}}
|
|
<!-- page -->
|
|
<div class="container py-4">
|
|
<h2 class="mb-4">Search</h2>
|
|
<small>{{.CurrentPage}}/{{.TotalPage}} pages found for "{{.Key}}"</small>
|
|
</div>
|
|
<!-- Games Grid -->
|
|
<div class="container py-4">
|
|
<div class="row g-4">
|
|
{{range .Games}}
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-5-item">
|
|
<a href="/game/{{.ID.Hex}}" class="card game-card">
|
|
{{if .Cover}}
|
|
<img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
|
|
{{else}}
|
|
<div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
|
|
<span class="text-white">暂无图片</span>
|
|
</div>
|
|
{{end}}
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{.Name}}</h5>
|
|
<p class="card-text game-description">{{.Description}}</p>
|
|
{{if .Publishers}}
|
|
<div class="publishers mb-2">
|
|
<small class="text-muted">发行商:</small>
|
|
{{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
|
|
<small class="text-muted">{{$publisher}}</small>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="container py-4">
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center">
|
|
{{if .PrevPage}}
|
|
<li class="page-item">
|
|
<a class="page-link" href="/search?key={{.Key}}&page={{.PrevPage}}">Previous</a>
|
|
</li>
|
|
{{end}}
|
|
{{if .NextPage}}
|
|
<li class="page-item">
|
|
<a class="page-link" href="/search?key={{.Key}}&page={{.NextPage}}">Next</a>
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
{{end}}
|
|
{{define "scripts"}} {{end}} |