99 lines
3.6 KiB
HTML
99 lines
3.6 KiB
HTML
{php}
|
||
$strPlayModuleSlug = trim((string)($arrVideo['v_name_en'] ?? request()->route('strPinyin') ?? ''));
|
||
if ($strPlayModuleSlug === '') {
|
||
$strPlayModuleSlug = (string)($arrVideo['v_id'] ?? '');
|
||
}
|
||
{/php}
|
||
<article class="{$TpStyle.dom_prefix}-p5-wrap">
|
||
|
||
{// 封面 + 播放器组合卡片 }
|
||
<section class="{$TpStyle.dom_prefix}-p5-hero">
|
||
<div class="{$TpStyle.dom_prefix}-p5-left">
|
||
<img loading="lazy"
|
||
src="{site:cfg code='PUBLIC_COVER_DOMAIN' encode='false'/}{$arrVideo.v_pic}"
|
||
alt="{$arrVideo.v_name}"
|
||
class="{$TpStyle.dom_prefix}-p5-pic">
|
||
</div>
|
||
<div class="{$TpStyle.dom_prefix}-p5-right">
|
||
<h1>{$arrVideo.v_name}</h1>
|
||
<p class="{$TpStyle.dom_prefix}-p5-meta">
|
||
{$arrVideo.v_year} · {$arrVideo.v_category} · {$arrVideo.v_area}
|
||
</p>
|
||
<div id="dplayer" class="{$TpStyle.dom_prefix}-p5-dp"></div>
|
||
</div>
|
||
</section>
|
||
|
||
{// 线路：横向滚动 }
|
||
<nav class="{$TpStyle.dom_prefix}-p5-lines">
|
||
<?php $lineIndex=0; ?>
|
||
{foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
|
||
<?php $lineIndex++; ?>
|
||
<span class="{$TpStyle.dom_prefix}-p5-line
|
||
{eq name='$lineIndex' value='1'}active{/eq}"
|
||
onclick="p5Line('{$strPlayGroupName}', this)">
|
||
{$strPlayGroupName}
|
||
</span>
|
||
{/foreach}
|
||
</nav>
|
||
|
||
{// 集数：紧凑按钮 }
|
||
<section class="{$TpStyle.dom_prefix}-p5-eps">
|
||
<?php $lineIndex=0; ?>
|
||
{foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
|
||
<?php $lineIndex++; ?>
|
||
<div class="{$TpStyle.dom_prefix}-p5-epbox {eq name='$lineIndex' value='1'}active{/eq}"
|
||
id="p5-ep-{$strPlayGroupName}">
|
||
<?php $epIndex=0; ?>
|
||
{volist name='$arrPlayUrlType' id='arrPlayUrl'}
|
||
<?php $epIndex++; ?>
|
||
<a href="{:app('app\\services\\VideoService')->getVideoPlayUrl((int)$arrVideo['v_id'], $strPlayModuleSlug, (string)$strPlayGroupName, (int)$epIndex)}"
|
||
class="{$TpStyle.dom_prefix}-p5-epbtn {if $epIndex == $Request.route.intPlayIndex}active{/if}"
|
||
m3u8="{$arrPlayUrl.url}">
|
||
{$arrPlayUrl.name}
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
{/foreach}
|
||
</section>
|
||
|
||
{// 简介 }
|
||
<section class="{$TpStyle.dom_prefix}-p5-desc">
|
||
<h2>内容简介</h2>
|
||
<p>{$arrVideo.v_description|raw}</p>
|
||
</section>
|
||
|
||
{// “瀑布式”推荐（grid 不等高） }
|
||
<section class="{$TpStyle.dom_prefix}-p5-rel">
|
||
<h3>更多精彩</h3>
|
||
|
||
<div class="{$TpStyle.dom_prefix}-p5-relgrid">
|
||
{video:list count="10"
|
||
v_category_en="$arrVideo.v_category_en"
|
||
sort_type="news"
|
||
d_key="rk" d_val="Video" cache_life="3600"}
|
||
|
||
<a href="/detail/{$Video.v_id}.html" class="{$TpStyle.dom_prefix}-p5-relcard">
|
||
<img loading="lazy"
|
||
src="{site:cfg code='PUBLIC_COVER_DOMAIN' encode='false'/}{$Video.v_pic}">
|
||
<p>{$Video.v_name}</p>
|
||
</a>
|
||
|
||
{/video:list}
|
||
</div>
|
||
</section>
|
||
|
||
</article>
|
||
|
||
<script>
|
||
function p5Line(name, el){
|
||
document.querySelectorAll('.{$TpStyle.dom_prefix}-p5-epbox')
|
||
.forEach(function(box){ box.classList.remove('active'); });
|
||
var t = document.getElementById('p5-ep-'+name);
|
||
if(t) t.classList.add('active');
|
||
|
||
document.querySelectorAll('.{$TpStyle.dom_prefix}-p5-line')
|
||
.forEach(function(b){ b.classList.remove('active'); });
|
||
el.classList.add('active');
|
||
}
|
||
</script>
|