pcgamedb/server/templates/game.html

{{template "base" .}} {{define "title"}}{{.Name}} - 游戏详情{{end}} {{define
"styles"}}
<style>
  .game-cover {
    max-height: 400px;
    object-fit: cover;
  }

  .screenshot-gallery {
    height: 600px;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .info-label {
    font-weight: bold;
    color: #666;
  }

  .download-card {
    transition: transform 0.2s;
  }

  .download-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    font-size: 0.875rem;
  }
</style>
{{end}} {{define "content"}}
<!-- Game Details -->
<div class="container py-4">
  <!-- Basic Info -->
  <div class="row mb-4">
    <div class="col-md-4">
      {{if .Cover}}
      <img
        src="{{.Cover}}"
        class="img-fluid rounded game-cover"
        alt="{{.Name}}"
      />
      {{else}}
      <div
        class="game-cover bg-secondary d-flex align-items-center justify-content-center rounded"
      >
        <span class="text-white">暂无封面</span>
      </div>
      {{end}}
    </div>
    <div class="col-md-8">
      <h1 class="mb-3">{{.Name}}</h1>

      {{if .Aliases}}
      <div>
        <span class="info-label">别名：</span>
        {{range .Aliases}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>
      {{end}}

      <div>
        <span class="info-label">开发商：</span>
        {{range .Developers}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>

      <div>
        <span class="info-label">发行商：</span>
        {{range .Publishers}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>

      {{if .Languages}}
      <div>
        <span class="info-label">支持语言：</span>
        {{range .Languages}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>
      {{end}} {{if .Description}}
      <div>
        <p>{{.Description}}</p>
      </div>
      {{end}} {{if .SteamID}}
      <div>
        <a
          href="https://store.steampowered.com/app/{{.SteamID}}"
          target="_blank"
          class="btn btn-primary"
        >
          在 Steam 上查看
        </a>
      </div>
      {{end}}
    </div>
  </div>

  <!-- Screenshots -->
  {{if .Screenshots}}
  <div class="mb-4">
    <h3 class="mb-3">游戏截图</h3>
    <div class="swiper screenshot-gallery">
      <div class="swiper-wrapper">
        {{range .Screenshots}}
        <div class="swiper-slide">
          <img src="{{.}}" alt="游戏截图" />
        </div>
        {{end}}
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>
  {{end}}

  <!-- Download Links -->
  {{if .Games}}
  <div class="mb-4">
    <h3 class="mb-3">下载链接</h3>
    <div class="row g-4">
      {{range .Games}}
      <div class="col-md-6">
        <div class="card download-card">
          <div class="card-body">
            <h5 class="card-title">{{.Name}}</h5>
            {{if .Size}}
            <p class="card-text">
              <small class="text-muted">文件大小：{{.Size}}</small>
            </p>
            {{end}} {{if .Author}}
            <p class="card-text">
              <small class="text-muted">来源：{{.Author}}</small>
            </p>
            {{end}} {{if .Password}}
            <p class="card-text">解压密码：<code>{{.Password}}</code></p>
            {{end}}
            <div class="d-flex justify-content-between align-items-center">
              <a href="{{.Download}}" class="btn btn-success" target="_blank"
                >下载</a
              >
              <a href="{{.Url}}" class="btn btn-outline-primary" target="_blank"
                >详情页</a
              >
            </div>
          </div>
          <div class="card-footer text-muted">
            更新时间：{{.UpdatedAt.Format "2006-01-02 15:04:05"}}
          </div>
        </div>
      </div>
      {{end}}
    </div>
  </div>
  {{end}}
</div>
{{end}} {{define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper(".screenshot-gallery", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
</script>
{{end}}