91 lines
2.3 KiB
HTML
91 lines
2.3 KiB
HTML
{{template "base" .}} {{define "title"}}GameDB{{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;
|
|
-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"}}
|
|
<!-- Search Section -->
|
|
<div class="bg-light py-4">
|
|
<div class="container">
|
|
<form action="/search" method="GET">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
name="q"
|
|
placeholder="搜索游戏..."
|
|
/>
|
|
<button class="btn btn-primary" type="submit">搜索</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Games Grid -->
|
|
<div class="container py-4">
|
|
<h2 class="mb-4">Month Top</h2>
|
|
<div class="row g-4">
|
|
{{range .MonthTop}}
|
|
<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>
|
|
{{end}} {{define "scripts"}} {{end}}
|