Files
web_huangguo2_h5/app/template/pages/play.html
T
谢宇宁andClaude Opus 5.5 0fbdba5ccf Initial commit
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 11:47:47 +07:00

537 lines
30 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>{{.metaTitle}}</title>
{{template "seoCommon" .}}
{{/* 夸克 / QQ(X5):页内播放适配。不要写 x5-fullscreen,否则 QQ 会接管成系统播放器 */}}
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="x5-orientation" content="portrait">
<meta name="x5-page-mode" content="app">
<meta name="browsermode" content="application">
<meta name="imagemode" content="force">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="/static/js/common/compat.js?v=4"></script>
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/recharge-modal.css?v=2">
<link rel="stylesheet" href="/static/common/DPlayer.min.css">
<link rel="stylesheet" href="/static/css/play.css?v=25">
<script defer src="/static/common/hls.min.js"></script>
<script defer src="/static/common/DPlayer.min.js?v=2"></script>
</head>
<body class="page-play">
{{$p := .playlet}}
{{$c := .chapter}}
{{$name := playletDisplayName $p.PlayName $p.Title}}
{{$ep := .episode}}
{{$activeID := .chapterID}}
{{if le $activeID 0}}
{{range $p.PlayletChapterInfo}}
{{if and (le $activeID 0) (eq .CurrentEpisode 1)}}{{$activeID = .ID}}{{end}}
{{end}}
{{if le $activeID 0}}{{with index $p.PlayletChapterInfo 0}}{{$activeID = .ID}}{{end}}{{end}}
{{end}}
{{template "header" .}}
<header class="page-subheader only-h5" aria-label="播放页顶栏">
<a class="page-subheader__btn" href="javascript:history.back()" aria-label="返回">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-left.svg" alt="返回">
</a>
<div class="page-subheader__title">{{$name}}</div>
<button class="page-subheader__btn" type="button" aria-label="分享" data-share-page>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/share.svg" alt="分享">
</button>
</header>
<div class="page play-page">
<main class="main play-main">
<nav class="breadcrumb play-breadcrumb only-pc" aria-label="面包屑">
<a class="breadcrumb__item" href="/">首页</a>
<img decoding="async" loading="lazy" class="breadcrumb__sep" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
<a class="breadcrumb__item" href="/list">短剧</a>
<img decoding="async" loading="lazy" class="breadcrumb__sep" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
<a class="breadcrumb__item" href="{{playURL $p.Slug $p.ID}}">{{$name}}</a>
{{if gt $ep 0}}
<img decoding="async" loading="lazy" class="breadcrumb__sep" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
<span class="breadcrumb__item is-current">第 {{$ep}} 集</span>
{{end}}
</nav>
<section class="play-stage" aria-label="播放器">
{{$startPreview := and (not .canWatch) .hasPreview}}
<div
class="play-player{{if not .canWatch}} play-player--locked{{end}}{{if $startPreview}} play-player--preview{{end}}"
data-play-player
data-play-mode="{{if $startPreview}}preview{{else}}main{{end}}"
data-playlet-id="{{$p.ID}}"
data-chapter-id="{{.chapterID}}"
data-can-watch="{{if .canWatch}}1{{else}}0{{end}}"
data-main-url="{{.mainURL}}"
data-preview-url="{{.previewURL}}"
data-track-drama
data-media-id="{{.trackerDrama.MediaID}}"
data-drama-id="{{.trackerDrama.DramaID}}"
data-drama-title="{{.trackerDrama.DramaTitle}}"
data-episode="{{.trackerDrama.Episode}}"
data-total-episode="{{.trackerDrama.TotalEpisode}}"
data-video-id="{{.trackerDrama.VideoID}}"
data-drama-type-id="{{.trackerDrama.DramaTypeID}}"
data-drama-type-name="{{.trackerDrama.DramaTypeName}}"
data-recommend-trace-id="{{.trackerDrama.RecommendTraceID}}"
data-drama-tag-key="{{.trackerDrama.DramaTagKey}}"
data-drama-tag-name="{{.trackerDrama.DramaTagName}}"
data-drama-duration="{{.trackerDrama.DramaDuration}}"
{{if $c}}data-pay-type="{{$c.PayType}}" data-need-unlock="{{if $c.NeedUnlock}}1{{else}}0{{end}}" data-need-vip="{{if $c.NeedVip}}1{{else}}0{{end}}"{{end}}
>
{{if or .mainURL .hasPreview}}
<div
class="dplayer-video"
data-url="{{if $startPreview}}{{.previewURL}}{{else}}{{.mainURL}}{{end}}"
data-main-url="{{.mainURL}}"
data-preview-url="{{.previewURL}}"
></div>
{{end}}
<img decoding="async" loading="lazy"
class="play-player__cover lazy"
src="/static/images/placeholder.png?v=2"
data-src="{{coverURL $p.HorizontalCover $p.Banner $p.Cover}}"
data-play-poster
alt="{{$name}}"
>
<div class="play-player__scrim" aria-hidden="true"></div>
<div class="play-player__dim" aria-hidden="true"></div>
<button
class="play-player__center"
type="button"
aria-label="播放"
data-play-poster-play
{{if and (not .canWatch) (not $startPreview)}}data-play-coin-open{{end}}
>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play.svg" alt="播放">
</button>
{{if not .canWatch}}
{{$coinShort := lt .balance .unlockCost}}
<div class="play-player__unlock{{if $coinShort}} play-player__unlock--short{{end}}" data-play-unlock-overlay>
<div class="play-player__unlock-icon" aria-hidden="true">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/lock.svg" alt="解锁">
</div>
<p class="play-player__unlock-ep">{{if gt $ep 0}}第 {{$ep}} 集{{end}}{{if and (gt $ep 0) $p.TotalEpisode}} {{end}}{{if $p.TotalEpisode}}共 {{$p.TotalEpisode}} 集{{end}}</p>
{{if $coinShort}}
<p class="play-player__unlock-title">金币不足</p>
<p class="play-player__unlock-desc">本集需 {{.unlockCost}} 金币,当前余额 {{.balance}} 金币</p>
<div class="play-player__unlock-actions">
<button class="btn btn--primary play-player__unlock-btn" type="button" data-recharge-open>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/lock.svg" alt="解锁">
去充值
</button>
{{$appAddr := .appConfig.AppAddr}}
<a class="play-player__unlock-app" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/download.svg" alt="下载">
下载 App 免费看
</a>
</div>
{{else}}
<p class="play-player__unlock-title">使用金币解锁本集</p>
<p class="play-player__unlock-desc">
{{if gt .unlockCost 0}}本集需 {{.unlockCost}} 金币,{{end}}解锁后可永久观看。
{{if gt .unlockCost 0}}当前余额 {{.balance}} 金币。{{end}}
</p>
<div class="play-player__unlock-actions">
<button
class="btn btn--primary play-player__unlock-btn"
type="button"
data-play-unlock
data-playlet-id="{{$p.ID}}"
data-chapter-id="{{.chapterID}}"
data-unlock-cost="{{.unlockCost}}"
>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/lock.svg" alt="解锁">
{{if gt .unlockCost 0}}支付 {{.unlockCost}} 金币解锁{{else}}立即解锁{{end}}
</button>
{{$appAddr := .appConfig.AppAddr}}
<a class="play-player__unlock-app" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/download.svg" alt="下载">
下载 App 免费看
</a>
</div>
{{end}}
</div>
{{end}}
<div class="play-player__badge" data-play-badge>
{{if $startPreview}}
<span class="only-pc" data-play-badge-pc>预告片 免费</span>
<span class="only-h5" data-play-badge-h5>预告片</span>
{{else}}
<span class="only-pc" data-play-badge-pc>正片{{if gt $ep 0}} 第 {{$ep}} 集{{end}}{{if $p.TotalEpisode}} 共 {{$p.TotalEpisode}} 集{{end}}</span>
<span class="only-h5" data-play-badge-h5>{{if gt $ep 0}}第 {{$ep}} 集{{end}}{{if $p.TotalEpisode}} 共 {{$p.TotalEpisode}} 集{{end}}</span>
{{end}}
</div>
{{if not .canWatch}}
<div class="play-player__bar" data-play-locked-bar>
<div class="play-player__progress" aria-hidden="true">
<span class="play-player__progress-fill" style="width:0%"></span>
<span class="play-player__progress-thumb" style="left:0%"></span>
</div>
<div class="play-player__controls">
<div class="play-player__left">
<button class="play-player__icon" type="button" aria-label="播放" data-play-coin-open>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play.svg" alt="播放">
</button>
{{if .nextChapterID}}
<a class="play-player__icon" href="{{chapterPlayURL $p.Slug $p.ID .nextChapterID}}" aria-label="下一集" data-drama-switch data-target-episode="{{add $ep 1}}" data-target-video-id="{{.nextChapterID}}">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
</a>
{{else}}
<button class="play-player__icon" type="button" aria-label="下一集" disabled>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
</button>
{{end}}
<span class="play-player__time">00:00{{if $c}} / {{formatMediaTime $c.MediaTime}}{{end}}</span>
</div>
<div class="play-player__right">
<button class="play-player__text" type="button">1.0x</button>
<button class="play-player__text" type="button">1080P</button>
<button class="play-player__icon" type="button" aria-label="音量">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/bell.svg" alt="更新提醒">
</button>
<button class="play-player__icon" type="button" aria-label="全屏">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/plus.svg" alt="添加">
</button>
</div>
</div>
</div>
{{end}}
</div>
<div class="play-tabs" aria-label="内容类型" data-play-tabs>
<button type="button" class="play-tabs__item{{if not $startPreview}} is-active{{end}}" data-play-tab="main">正片</button>
{{if .hasPreview}}
<button type="button" class="play-tabs__item{{if $startPreview}} is-active{{end}}" data-play-tab="preview">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/film.svg" alt="影视详情">
预告片
</button>
<p class="play-tabs__hint only-pc">预告片免费播放,无需登录与解锁</p>
{{end}}
</div>
</section>
<section class="play-info" aria-label="剧集信息">
<div class="play-meta">
<div class="play-meta__title-row">
<h1 class="play-meta__title">{{$name}}</h1>
{{if $p.IsFeatured}}<span class="badge badge--hot">爆剧</span>{{else if eq $p.Anchor "原创"}}<span class="badge badge--original">原创</span>{{end}}
</div>
<div class="play-meta__chips">
{{if $p.TotalEpisode}}<span class="play-chip">全 {{$p.TotalEpisode}} 集</span>{{end}}
<span class="play-chip">{{updateStatusText $p.UpdateStatus}}</span>
{{with playletYearText $p.OnlineAt}}{{if ne . "年份未知"}}<span class="play-chip">{{.}}</span>{{end}}{{end}}
<span class="play-chip">1080P</span>
</div>
<p class="play-meta__stats only-pc">
{{with usableAnchor $p.Anchor}}{{if and (ne . "原创") (ne . "已注销")}}<span class="play-meta__stat">主演 {{.}}</span>{{end}}{{end}}
{{$themes := namedThemeTags $p.ThemeIDs $p.ThemeNames $p.ThemeSlugs}}
{{if $themes}}
<span class="play-meta__stat">
题材
{{range $ti, $tag := $themes}}{{if $ti}} {{end}}{{if $tag.URL}}<a class="play-meta__tag" href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}<span class="play-meta__tag">{{$tag.Name}}</span>{{end}}{{end}}
</span>
{{end}}
<span class="play-meta__stat">热度 {{formatLikeCount $p.HeatValue}}</span>
<span class="play-meta__stat">收藏 <span data-playlet-collect-stat>{{formatLikeCount $p.CountCollect}}</span></span>
</p>
<p class="play-meta__stats only-h5">
{{with usableAnchor $p.Anchor}}{{if and (ne . "原创") (ne . "已注销")}}<span class="play-meta__stat">主演 {{.}}</span>{{end}}{{end}}
{{$themesH5 := namedThemeTags $p.ThemeIDs $p.ThemeNames $p.ThemeSlugs}}
{{if $themesH5}}
<span class="play-meta__stat">
{{range $ti, $tag := $themesH5}}{{if $ti}} {{end}}{{if $tag.URL}}<a class="play-meta__tag" href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}<span class="play-meta__tag">{{$tag.Name}}</span>{{end}}{{end}}
</span>
{{end}}
<span class="play-meta__stat">热度 {{formatLikeCount $p.HeatValue}}</span>
<span class="play-meta__stat">收藏 <span data-playlet-collect-stat>{{formatLikeCount $p.CountCollect}}</span></span>
</p>
</div>
<div class="play-actions">
<a
class="btn btn--primary play-actions__btn play-actions__btn--play"
href="{{if .chapterID}}{{chapterPlayURL $p.Slug $p.ID .chapterID}}{{else}}{{playURL $p.Slug $p.ID}}{{end}}"
data-play-main-cta
{{if or .canWatch $startPreview}}data-play-poster-play{{else}}data-play-coin-open{{end}}
>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play_hollow.svg" alt="播放">
<span data-play-cta-label>{{if .canWatch}}立即播放{{else if $startPreview}}播放预告片{{else}}解锁播放{{end}}</span>
</a>
<button
class="btn btn--ghost play-actions__btn play-actions__btn--icon{{if eq $p.IsLike 1}} is-active{{end}}"
type="button"
aria-label="{{if eq $p.IsLike 1}}取消点赞{{else}}点赞{{end}}"
data-playlet-like
data-playlet-id="{{$p.ID}}"
data-liked="{{if eq $p.IsLike 1}}1{{else}}2{{end}}"
data-like-raw="{{$p.CountLike}}"
{{if le $p.ID 0}}disabled{{end}}
>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/heart.svg" alt="点赞">
<span class="only-pc" data-playlet-like-label>{{if eq $p.IsLike 1}}已点赞{{else}}点赞{{end}}</span>
</button>
<button
class="btn btn--ghost play-actions__btn play-actions__btn--icon{{if eq $p.IsCollect 1}} is-active{{end}}"
type="button"
aria-label="{{if eq $p.IsCollect 1}}取消收藏{{else}}收藏{{end}}"
data-playlet-collect
data-playlet-id="{{$p.ID}}"
data-collected="{{if eq $p.IsCollect 1}}1{{else}}2{{end}}"
data-collect-raw="{{$p.CountCollect}}"
{{if le $p.ID 0}}disabled{{end}}
>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/bookmark.svg" alt="收藏">
<span class="only-pc" data-playlet-collect-label>{{if eq $p.IsCollect 1}}已收藏{{else}}收藏{{end}}</span>
</button>
<button class="btn btn--ghost play-actions__btn play-actions__btn--icon" type="button" aria-label="分享" data-share-page>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/share.svg" alt="分享">
<span class="only-pc" data-share-page-label>分享</span>
</button>
<a class="btn btn--ghost play-actions__btn play-actions__btn--icon" href="/feedback" aria-label="反馈">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/message-circle.svg" alt="评论">
<span class="only-pc">反馈</span>
</a>
</div>
<div class="play-synopsis" data-play-synopsis>
<div class="play-synopsis__head">
<h2 class="play-synopsis__title">简介</h2>
<button class="play-synopsis__more" type="button" data-play-synopsis-more hidden>
<span data-play-synopsis-more-label>展开</span>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
</button>
</div>
<p class="play-synopsis__text" data-play-synopsis-text>{{if $p.Desc}}{{$p.Desc}}{{else if $p.Description}}{{$p.Description}}{{else}}暂无简介{{end}}</p>
</div>
</section>
<section class="play-episodes" aria-label="选集">
<div class="play-episodes__head">
<div class="play-episodes__head-left">
<h2 class="play-episodes__title">选集</h2>
<span class="play-episodes__count">
{{if $p.TotalEpisode}}共 {{$p.TotalEpisode}} 集{{else}}共 {{len $p.PlayletChapterInfo}} 集{{end}}
{{if eq $p.UpdateStatus 2}} 已完结{{else}} {{updateStatusText $p.UpdateStatus}}{{end}}
</span>
<nav class="play-episodes__sort only-pc" aria-label="选集排序" data-play-episodes-sort>
<button class="play-episodes__sort-item is-active" type="button" data-play-episodes-sort-item="asc" aria-pressed="true">正序</button>
<button class="play-episodes__sort-item" type="button" data-play-episodes-sort-item="desc" aria-pressed="false">倒序</button>
</nav>
</div>
<button class="play-episodes__order only-h5" type="button" data-play-episodes-order aria-pressed="false">
<span data-play-episodes-order-label>倒序</span>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="">
</button>
</div>
<div class="play-episodes__grid" data-play-episodes-grid>
{{range $i, $ch := $p.PlayletChapterInfo}}
<a
class="play-ep{{if or (eq $ch.ID $activeID) (and (le $activeID 0) (eq $i 0))}} is-active{{end}}{{if $ch.NeedCoinGate}} play-ep--coin{{end}}"
href="{{chapterPlayURL $p.Slug $p.ID $ch.ID}}"
data-drama-switch
data-target-episode="{{if $ch.CurrentEpisode}}{{$ch.CurrentEpisode}}{{else}}{{add $i 1}}{{end}}"
data-target-video-id="{{$ch.ID}}"
>{{if $ch.CurrentEpisode}}{{$ch.CurrentEpisode}}{{else}}{{add $i 1}}{{end}}</a>
{{else}}
<span class="play-ep is-active">1</span>
{{end}}
</div>
<div class="play-episodes__legend">
<span class="play-legend">
<i class="play-legend__swatch play-legend__swatch--free" aria-hidden="true"></i>
<span class="only-pc">免费集 无需登录直接播放</span>
<span class="only-h5">免费集直接播放</span>
</span>
<span class="play-legend">
<img decoding="async" loading="lazy" class="play-legend__swatch play-legend__swatch--coin" src="/static/images/placeholder.png?v=2" data-src="/static/images/coin.png" alt="金币" aria-hidden="true">
{{if gt .unlockCost 0}}
<span class="only-pc">{{.unlockCost}} 金币 / 集 解锁后永久观看</span>
<span class="only-h5">{{.unlockCost}} 金币 / 集 永久观看</span>
{{else}}
<span class="only-pc">金币解锁后永久观看</span>
<span class="only-h5">金币解锁 永久观看</span>
{{end}}
</span>
</div>
</section>
{{template "playLinks" .}}
<div class="play-promo">
{{if .advitise}}{{template "ads" (adSlice .advitise.DetailBannerList 0 2)}}{{end}}
</div>
{{if .related}}
<section class="play-related only-h5" aria-label="看过本剧的人也在看">
<div class="play-related__head">
<h2 class="play-related__title">看过本剧的人也在看</h2>
<a class="play-related__more" href="/popular-recommend">
更多
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
</a>
</div>
<div class="play-related__grid">
{{range $i, $item := .related}}
{{if lt $i 3}}
<article class="card card--play-sm">
<a class="card__cover lazy" href="{{playURL $item.Slug $item.ID}}" style="{{cssCoverPlaceholder}}" data-src="{{$item.Cover}}">
{{if $item.TotalEpisode}}<span class="card__ep">全 {{$item.TotalEpisode}} 集</span>{{else}}<span class="card__ep">{{updateStatusText $item.UpdateStatus}}</span>{{end}}
</a>
<h3 class="card__title"><a href="{{playURL $item.Slug $item.ID}}">{{playletDisplayName $item.PlayName $item.Title}}</a></h3>
<p class="card__meta">{{range $ti, $tag := cardTags $item}}{{if $ti}} {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}</p>
</article>
{{end}}
{{end}}
</div>
</section>
{{end}}
<section class="play-dual" aria-label="评论与热榜">
{{template "playComments" .}}
<aside class="play-hot" aria-label="热门短剧">
<div class="play-hot__head">
<h2 class="play-hot__title">热门短剧</h2>
<a class="play-hot__more" href="{{if .hotMoreURL}}{{.hotMoreURL}}{{else}}/list/all/0/2{{end}}" {{externalLinkAttrs .hotMoreURL}}>
完整榜单
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
</a>
</div>
<ol class="play-hot__list">
{{range $i, $item := .hotList}}
<li{{if ge $i 5}} class="only-pc"{{end}}>
<div class="play-hot__item">
<a class="play-hot__no{{if lt $i 3}} is-top{{end}}" href="{{playURL $item.Slug $item.ID}}">{{rankNo (add $i 1)}}</a>
<a class="play-hot__cover-link" href="{{playURL $item.Slug $item.ID}}">
<img decoding="async" loading="lazy" class="play-hot__cover lazy" src="/static/images/placeholder.png?v=2" data-src="{{$item.Cover}}" alt="{{playletDisplayName $item.PlayName $item.Title}}封面">
</a>
<span class="play-hot__info">
<a class="play-hot__name" href="{{playURL $item.Slug $item.ID}}">{{playletDisplayName $item.PlayName $item.Title}}</a>
<span class="play-hot__meta">
{{$tags := cardTags $item}}
{{range $ti, $tag := $tags}}{{if $ti}} {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}
{{if and $tags $item.TotalEpisode}} {{end}}{{if $item.TotalEpisode}}全 {{$item.TotalEpisode}} 集{{end}}
</span>
</span>
<a class="play-hot__heat" href="{{playURL $item.Slug $item.ID}}">{{formatLikeCount $item.HeatValue}}</a>
</div>
</li>
{{else}}
<li><p class="play-comment__text" style="padding:12px 0;color:var(--muted, #888)">暂无热榜数据</p></li>
{{end}}
</ol>
</aside>
</section>
{{if .guessLike}}
<section class="play-like" aria-label="猜你喜欢">
<div class="play-like__head">
<div class="play-like__titles">
<h2 class="play-like__title">猜你喜欢</h2>
<span class="play-like__desc only-pc">根据本剧题材推荐</span>
</div>
<button
type="button"
class="play-like__refresh"
data-guess-refresh
data-playlet-id="{{.playlet.ID}}"
data-page="{{.guessPage}}"
data-page-size="{{if .guessPageSize}}{{.guessPageSize}}{{else}}6{{end}}"
data-total="{{.guessTotal}}"
>
换一批
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
</button>
</div>
<div class="play-like__grid" id="play-like" data-guess-grid>
{{range .guessLike}}
<article class="card card--play">
<a class="card__cover lazy" href="{{playURL .Slug .ID}}" style="{{cssCoverPlaceholder}}" data-src="{{.Cover}}">
{{if .TotalEpisode}}<span class="card__ep">全 {{.TotalEpisode}} 集</span>{{else}}<span class="card__ep">{{updateStatusText .UpdateStatus}}</span>{{end}}
</a>
<h3 class="card__title"><a href="{{playURL .Slug .ID}}">{{playletDisplayName .PlayName .Title}}</a></h3>
<p class="card__meta">{{range $ti, $tag := cardTags .}}{{if $ti}} {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}</p>
</article>
{{end}}
</div>
</section>
{{end}}
<div class="play-promo play-promo--bottom">
{{if .advitise}}{{template "ads" (adSlice .advitise.DetailBannerList 2 2)}}{{end}}
</div>
</main>
</div>
{{template "footer" .}}
<div
class="play-coin play-coin--short"
data-play-coin
role="dialog"
aria-modal="true"
aria-labelledby="play-coin-title"
>
<div class="play-coin__mask" data-play-coin-close aria-hidden="true"></div>
<div class="play-coin__panel">
<div class="play-coin__handle" aria-hidden="true"></div>
<div class="play-coin__head">
<div class="play-coin__copy">
<h2 class="play-coin__title" id="play-coin-title">金币不足</h2>
<p class="play-coin__desc only-pc">本集需 {{.unlockCost}} 金币,当前余额 {{.balance}} 金币,充值后即可播放。</p>
<p class="play-coin__desc only-h5">本集需 {{.unlockCost}} 金币,当前余额 {{.balance}} 金币</p>
</div>
<button class="play-coin__close" type="button" data-play-coin-close aria-label="关闭">
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
</button>
</div>
<div class="play-coin__sheet">
<div class="play-coin__row">
<span class="play-coin__label">当前余额</span>
<span class="play-coin__value{{if lt .balance .unlockCost}} is-low{{end}}">{{.balance}} 金币</span>
</div>
<div class="play-coin__divider" aria-hidden="true"></div>
<div class="play-coin__row">
<span class="play-coin__label">本次消耗</span>
<span class="play-coin__cost">{{.unlockCost}} 金币</span>
</div>
</div>
<p class="play-coin__note">后续付费剧集仍需逐集确认</p>
<button class="btn btn--primary play-coin__pay" type="button" data-recharge-open>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/gift.svg" alt="礼物">
去充值 首充加赠 10%
</button>
<div class="play-coin__foot">
{{$appAddr := .appConfig.AppAddr}}
<a class="play-coin__app" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}>
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/download.svg" alt="下载">
下载 App 免费看
</a>
<button class="play-coin__skip" type="button" data-play-coin-close>暂不观看</button>
</div>
</div>
</div>
{{template "rechargeModal" .}}
<script defer src="/static/js/pages/play.js?v=41"></script>
<script defer src="/static/js/recharge-modal.js?v=5"></script>
</body>
</html>