gpttemp

code/app/home/view/videoGpt1/module/play/play_05.html

@@ -0,0 +1,97 @@
+<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='{site:vpurl
+                        v_id="$arrVideo.v_id"
+                        v_py="$arrVideo.v_name_en"
+                        play_type="$strPlayGroupName"
+                        play_index="$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>