<?php
// list_12 图文交错列表（奇左偶右）
if (!isset($col) || !is_array($col)) { $col = array(); }
if (!isset($list) || !is_array($list)) { $list = array(); }
$lt12_name  = isset($col['name']) ? $col['name'] : '';
$lt12_intro = isset($col['intro']) ? $col['intro'] : '';
$lt12_cover = isset($col['cover']) ? $col['cover'] : '';
?>
<style>
.yk-list12{padding:20px 15px 40px;}
.yk-list12 .yk-l12-banner{position:relative;border-radius:8px;overflow:hidden;background:#17324a center/cover no-repeat;margin-bottom:30px;padding:60px 30px;color:#fff;text-align:center;}
.yk-list12 .yk-l12-banner::before{content:"";position:absolute;inset:0;background:rgba(10,30,48,.55);}
.yk-list12 .yk-l12-banner-in{position:relative;z-index:1;}
.yk-list12 .yk-l12-crumb{font-size:13px;color:#999;margin-bottom:12px;}
.yk-list12 .yk-l12-banner .yk-l12-crumb{color:rgba(255,255,255,.8);}
.yk-list12 .yk-l12-crumb a{color:inherit;}
.yk-list12 .yk-l12-crumb a:hover{color:var(--yk-accent,#e63946);}
.yk-list12 .yk-l12-title{font-size:28px;font-weight:700;margin-bottom:10px;}
.yk-list12 .yk-l12-intro{font-size:14px;color:#777;max-width:760px;}
.yk-list12 .yk-l12-banner .yk-l12-intro{color:rgba(255,255,255,.85);margin:0 auto;}
.yk-list12 .yk-l12-head{background:#fff;border-radius:8px;padding:25px 30px;margin-bottom:30px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.yk-list12 .yk-l12-item{display:flex;gap:36px;align-items:center;margin-bottom:44px;}
.yk-list12 .yk-l12-rev{flex-direction:row-reverse;}
.yk-list12 .yk-l12-thumb{flex:none;width:46%;height:280px;border-radius:12px;overflow:hidden;background:#e9ecef;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.1);}
.yk-list12 .yk-l12-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.yk-list12 .yk-l12-item:hover .yk-l12-thumb img{transform:scale(1.05);}
.yk-list12 .yk-l12-ph{width:100%;height:100%;background:linear-gradient(135deg,#8a2b3d 0%,#c94f5e 55%,#e88f79 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);font-size:13px;letter-spacing:3px;}
.yk-list12 .yk-l12-rev .yk-l12-ph{background:linear-gradient(135deg,#2b5a8a 0%,#4f86c6 55%,#79c4e8 100%);}
.yk-list12 .yk-l12-top{position:absolute;top:14px;left:14px;background:var(--yk-accent,#e63946);color:#fff;font-size:12px;padding:2px 10px;border-radius:3px;z-index:2;}
.yk-list12 .yk-l12-body{flex:1;min-width:0;}
.yk-list12 .yk-l12-tt{font-size:21px;font-weight:700;line-height:1.5;display:block;}
.yk-list12 .yk-l12-tt:hover{color:var(--yk-accent,#e63946);}
.yk-list12 .yk-l12-meta{font-size:12px;color:#999;margin:12px 0;display:flex;gap:18px;}
.yk-list12 .yk-l12-desc{color:#666;font-size:14px;line-height:1.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.yk-list12 .yk-l12-more{display:inline-block;margin-top:18px;font-size:13px;color:#fff;background:#17324a;border-radius:4px;padding:7px 22px;transition:background .2s;}
.yk-list12 .yk-l12-more:hover{background:var(--yk-accent,#e63946);color:#fff;}
.yk-list12 .yk-l12-empty{background:#fff;border-radius:8px;text-align:center;color:#999;padding:70px 0;font-size:14px;}
@media (max-width:1199px){
  .yk-list12 .yk-l12-thumb{height:220px;}
  .yk-list12 .yk-l12-title{font-size:24px;}
  .yk-list12 .yk-l12-item{gap:26px;margin-bottom:36px;}
}
@media (max-width:767px){
  .yk-list12 .yk-l12-item,.yk-list12 .yk-l12-rev{flex-direction:column;gap:16px;margin-bottom:30px;}
  .yk-list12 .yk-l12-thumb{width:100%;height:180px;}
  .yk-list12 .yk-l12-tt{font-size:17px;}
  .yk-list12 .yk-l12-banner{padding:38px 18px;}
  .yk-list12 .yk-l12-title{font-size:20px;}
}
</style>
<div class="yk-wrap yk-list12">
  <?php if ($lt12_cover !== '') { ?>
  <div class="yk-l12-banner" style="background-image:url('<?php echo e($lt12_cover); ?>')">
    <div class="yk-l12-banner-in">
      <div class="yk-l12-crumb"><a href="<?php echo e(url_home()); ?>">首页</a> &gt; <span><?php echo e($lt12_name); ?></span></div>
      <div class="yk-l12-title"><?php echo e($lt12_name); ?></div>
      <?php if ($lt12_intro !== '') { ?><div class="yk-l12-intro"><?php echo e($lt12_intro); ?></div><?php } ?>
    </div>
  </div>
  <?php } else { ?>
  <div class="yk-l12-head">
    <div class="yk-l12-crumb"><a href="<?php echo e(url_home()); ?>">首页</a> &gt; <span><?php echo e($lt12_name); ?></span></div>
    <div class="yk-l12-title"><?php echo e($lt12_name); ?></div>
    <?php if ($lt12_intro !== '') { ?><div class="yk-l12-intro"><?php echo e($lt12_intro); ?></div><?php } ?>
  </div>
  <?php } ?>
  <?php if (!empty($list)) { ?>
    <?php $lt12_i = 0; foreach ($list as $lt12_it) {
      $lt12_i++;
      $lt12_t   = isset($lt12_it['title']) ? $lt12_it['title'] : '';
      $lt12_u   = isset($lt12_it['url']) ? $lt12_it['url'] : '#';
      $lt12_img = isset($lt12_it['thumb']) ? $lt12_it['thumb'] : '';
      $lt12_d   = isset($lt12_it['desc']) ? $lt12_it['desc'] : '';
      $lt12_tm  = isset($lt12_it['add_time']) ? fdate($lt12_it['add_time'], 'Y-m-d') : '';
      $lt12_v   = isset($lt12_it['views']) ? (int)$lt12_it['views'] : 0;
      $lt12_rev = $lt12_i % 2 === 0 ? ' yk-l12-rev' : '';
    ?>
    <div class="yk-l12-item<?php echo $lt12_rev; ?>">
      <a class="yk-l12-thumb" href="<?php echo e($lt12_u); ?>">
        <?php if (!empty($lt12_it['is_top'])) { ?><span class="yk-l12-top">置顶</span><?php } ?>
        <?php if ($lt12_img !== '') { ?><img src="<?php echo e($lt12_img); ?>" alt="<?php echo e($lt12_t); ?>"><?php } else { ?><div class="yk-l12-ph">炎酷CMS</div><?php } ?>
      </a>
      <div class="yk-l12-body">
        <a class="yk-l12-tt" href="<?php echo e($lt12_u); ?>"><?php echo e($lt12_t); ?></a>
        <div class="yk-l12-meta"><span><?php echo e($lt12_tm); ?></span><span>阅读 <?php echo $lt12_v; ?></span></div>
        <?php if ($lt12_d !== '') { ?><div class="yk-l12-desc"><?php echo e($lt12_d); ?></div><?php } ?>
        <a class="yk-l12-more" href="<?php echo e($lt12_u); ?>">查看详情</a>
      </div>
    </div>
    <?php } ?>
  <?php } else { ?>
    <div class="yk-l12-empty">暂无内容</div>
  <?php } ?>
  <?php echo isset($pager) ? $pager : ''; ?>
</div>
