{loop:$arrlistall['list'] $t} 
{if:isset($t['news'])} 
<div class="pt-3">
    <div class="flex justify-between">
        <span class="text-xl font-semibold"><a href="{$t.url}">{$t.name}</a></span>
          <div class="flex w-fit items-center cursor-pointer hover-yellow"><a class="flex items-center" href="{$t.url}"><span class="mr-1 text-xs text-[var(--text-secondary)]">更多</span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right text-sm text-[var(--color-primary)]" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"></path></svg></a></div>
    </div>
    <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-5 gap-y-2 py-2 animate-on-scroll">
        {loop:$t['news'] $v} 
        <div class="flex flex-col items-center transform hover:-translate-y-1 transition-all duration-300 animate-on-scroll">
    <div class="video-card relative w-full aspect-[530/726] group mx-4 my-2 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500">
        {if:!empty($v['remarks'])}<div class="badge-quality">{$v.remarks}</div>{/if}
        <a class="absolute inset-0 flex rounded-lg group-hover:z-10" href="{$v.url}">
            <img decoding="async" alt="{$v.name}" loading="lazy" class="rounded-lg w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="{$v.pic}">
            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex flex-col justify-between opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <div class="flex justify-end p-2">
                    <div class="bg-black/60 rounded-md p-1 max-w-full backdrop-blur-sm">
                        <p class="text-xs truncate text-white">{$v.remarks}</p>
                    </div>
                </div>
                <div class="bg-gradient-to-t from-black/95 via-black/80 to-transparent w-full px-2 py-3">
                    <div class="flex flex-col overflow-hidden">
                        <h3 class="antialiased text-sm font-bold text-white mb-1">{$v.name}</h3>
                        <div class="vod-tags flex flex-row flex-wrap gap-1 py-1">
                            <span class="antialiased rounded-md bg-white/10 text-[10px] text-[var(--text-secondary)] px-2 py-0.5">{$v.year}</span>
                            <span class="antialiased rounded-md bg-white/10 text-[10px] text-[var(--text-secondary)] px-2 py-0.5">{$v.area}</span>
                        </div>
                        <div class="flex overflow-hidden mt-1">
                            <span class="antialiased text-[10px] text-[var(--text-tertiary)] line-clamp-2">{$v.blurb}</span>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="video-card-play"></div>
                </div>
            </div>
        </a>
    </div>
    <span class="text-center text-sm mx-1 mt-2 text-[var(--text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-300" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;">{$v.name}</span>
</div>
        {/loop}
    </div>
</div>
{/if}
 {/loop}