web_huangguo_web/app/templates/page/application.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{template "seoCommon" .}}
    <title>
      {{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .title}}{{.title}} - 黄果短剧{{else}}福利应用 - 黄果短剧{{end}}
    </title>
    <meta
      name="description"
      content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else}}黄果短剧福利应用中心，精选实用应用与福利入口，发现更多优质内容与服务 - 黄果短剧{{end}}"
    />
    <meta name="keywords" content="{{if .seoInfo.Keywords}}{{joinStrings .seoInfo.Keywords ","}}{{else}}福利应用,应用推荐,黄果短剧,实用工具{{end}}" />
    <meta property="og:type" content="website" />
    <meta
      property="og:title"
      content="{{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .title}}{{.title}} - 黄果短剧{{else}}福利应用 - 黄果短剧{{end}}"
    />
    <meta
      property="og:description"
      content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else}}黄果短剧福利应用中心，精选实用应用与福利入口。{{end}}"
    />
    {{if .jsonLD}}
    <script type="application/ld+json">
      {{.jsonLD}}
    </script>
    {{end}}
    <link rel="stylesheet" href="/static/css/application.css?v=9" />
  </head>
  <body class="site-shell application-page-body has-h5-tabbar">
    {{template "header" .}}
    <main class="application-page">
      <nav class="application-breadcrumb" aria-label="面包屑">
        <a href="/">首页</a>
        <span aria-hidden="true">/</span>
        <span aria-current="page">福利应用</span>
      </nav>
      <h1 class="application-page-title">福利应用</h1>
      {{if .categories}}
      <nav class="app-category-tabs" aria-label="应用分类">
        {{range $i, $cat := .categories}}
        <button
          type="button"
          class="app-category-tab{{if eq $i 0}} app-category-tab--active{{end}}"
          data-target="{{$cat.SectionID}}"
          aria-selected="{{if eq $i 0}}true{{else}}false{{end}}"
        >
          {{$cat.Title}}
        </button>
        {{end}}
      </nav>

      {{range $i, $cat := .categories}}
      <section
        class="app-list-section"
        id="{{$cat.SectionID}}"
        data-total="{{$cat.Total}}"
      >
        <div class="app-list-section__head">
          <h2 class="app-list-section__title">{{$cat.Title}}</h2>
          {{if $cat.Intro}}
          <p
            class="app-list-section__subtitle{{if $cat.IsFirst}} app-list-section__subtitle--bold{{end}}"
          >
            {{$cat.Intro}}
          </p>
          {{end}}
        </div>
        <div class="app-card-grid app-card-grid--collapsible">
          {{range $cat.Apps}}
          <a
            class="app-card"
            href="{{.URL}}"
            target="_blank"
            rel="sponsored nofollow noopener noreferrer"
            aria-label="{{.Name}}"
          >
            <div class="app-card__icon-wrap">
              {{if .Logo}}
              <img
                src="/static/images/placeholder.png?v=2"
                class="app-card__icon lazy"
                data-src="{{.Logo}}"
                alt="{{.Name}}"
                title="{{.Name}}"
              />
              {{else}}
              <img
                class="app-card__icon"
                src="/static/images/placeholder.png?v=2"
                alt="{{.Name}}"
                title="{{.Name}}"
              />
              {{end}}
            </div>
            <div class="app-card__title">{{.Name}}</div>
            {{if .Intro}}
            <div class="app-card__desc">{{.Intro}}</div>
            {{end}}
          </a>
          {{else}}
          <div class="section-empty">该分类暂无应用</div>
          {{end}}
        </div>
        <button
          type="button"
          class="app-list-section__more"
          data-total="{{$cat.Total}}"
          hidden
        >
          <span class="app-list-section__more-label">显示全部</span>
          <img
            class="app-list-section__more-icon"
            src="/static/images/tringle_down.svg"
            alt="显示全部应用"
            aria-hidden="true"
          />
        </button>
      </section>
      {{end}} {{else}}
      <div class="application-empty">
        <div class="section-empty">暂无福利应用</div>
      </div>
      {{end}}
    </main>
    {{template "footer" .}}
    <script defer src="/static/js/pages/application.js?v=3"></script>

  </body>
</html>