92 lines
4.7 KiB
HTML
92 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.metaTitle}}</title>
|
|
{{template "seoCommon" .}}
|
|
<link rel="stylesheet" href="/static/css/base.css?v=2">
|
|
<link rel="stylesheet" href="/static/css/mobile-search.css?v=4">
|
|
</head>
|
|
<body class="mobile-search">
|
|
<header class="mobile-search__header">
|
|
<a class="mobile-search__back" href="/" aria-label="返回" data-search-close>
|
|
<img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-left.svg" alt="返回">
|
|
</a>
|
|
<form class="mobile-search__form" action="/search" method="get" role="search" data-path-search>
|
|
<img decoding="async" loading="lazy" class="mobile-search__search-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/search.svg" alt="搜索">
|
|
<input class="mobile-search__input" type="search" value="{{.query}}" placeholder="搜索剧名 / 演员 / 标签" aria-label="搜索剧名、演员或标签" autocomplete="off" data-mobile-search-input>
|
|
<button class="mobile-search__clear" type="button" aria-label="清除搜索词" data-mobile-search-clear{{if not .query}} hidden{{end}}>
|
|
<img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
|
|
</button>
|
|
</form>
|
|
<a class="mobile-search__cancel" href="/" data-search-close>取消</a>
|
|
</header>
|
|
|
|
<main class="mobile-search__main">
|
|
<h1 class="visually-hidden">搜索短剧</h1>
|
|
<div class="mobile-search__default" data-search-default{{if .query}} hidden{{end}}>
|
|
<section class="mobile-search__history" aria-label="搜索历史" data-search-history hidden>
|
|
<div class="mobile-search__section-head">
|
|
<h2 class="mobile-search__section-label">搜索历史</h2>
|
|
<button class="mobile-search__history-clear" type="button" aria-label="清除搜索历史" data-history-clear>
|
|
<img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
|
|
</button>
|
|
</div>
|
|
<div class="mobile-search__chips" data-history-chips></div>
|
|
</section>
|
|
|
|
{{if .trends}}
|
|
<section class="mobile-search__trending" aria-label="热门搜索">
|
|
<h2 class="mobile-search__section-label">热门搜索</h2>
|
|
<ol class="mobile-search__trend-list">
|
|
{{range .trends}}
|
|
<li class="mobile-search__trend">
|
|
<a href="{{searchResultsURL .Title}}">
|
|
<span class="mobile-search__trend-rank">{{.Rank}}</span>
|
|
<span class="mobile-search__trend-name">{{.Title}}</span>
|
|
{{if .Badge}}<span class="mobile-search__trend-badge{{if eq .Badge "新"}} mobile-search__trend-badge--new{{end}}">{{.Badge}}</span>{{end}}
|
|
<span class="mobile-search__trend-heat">{{.Heat}}</span>
|
|
</a>
|
|
</li>
|
|
{{end}}
|
|
</ol>
|
|
</section>
|
|
{{end}}
|
|
|
|
{{if .recommended}}
|
|
<section class="mobile-search__recommendations" aria-label="猜你想搜">
|
|
<h2 class="mobile-search__recommend-title">猜你想搜</h2>
|
|
<div class="mobile-search__recommend-grid">
|
|
{{range .recommended}}
|
|
{{$name := playletDisplayName .PlayName .Title}}
|
|
<article class="mobile-search__card">
|
|
<a class="mobile-search__cover" href="{{playURL .Slug .ID}}" aria-label="{{$name}}">
|
|
<img decoding="async" loading="lazy" class="lazy" src="/static/images/placeholder.png?v=2" data-src="{{.Cover}}" alt="{{$name}}">
|
|
<span class="mobile-search__cover-shade"></span>
|
|
{{if eq .UpdateStatus 1}}
|
|
<span class="mobile-search__episodes">连载中</span>
|
|
{{else if .TotalEpisode}}
|
|
<span class="mobile-search__episodes">全 {{.TotalEpisode}} 集</span>
|
|
{{else}}
|
|
<span class="mobile-search__episodes">{{updateStatusText .UpdateStatus}}</span>
|
|
{{end}}
|
|
</a>
|
|
<h3 class="mobile-search__title"><a href="{{playURL .Slug .ID}}">{{$name}}</a></h3>
|
|
<p class="mobile-search__meta">{{range $ti, $tag := cardTags .}}{{if $ti}} {{end}}{{$tag.Name}}{{end}}</p>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</div>
|
|
|
|
<section class="mobile-search__suggestions" aria-label="搜索联想" data-search-suggestions{{if not .query}} hidden{{end}}>
|
|
<div class="mobile-search__suggestion-list" data-search-suggest-list></div>
|
|
</section>
|
|
</main>
|
|
<script defer src="/static/common/imgDecypt.js?v=9"></script>
|
|
<script src="/static/js/mobile-search.js?v=5" defer></script>
|
|
</body>
|
|
</html>
|