<?php
// list_2 两列卡片网格（上图下文）
if (!isset($col) || !is_array($col)) { $col = array(); }
if (!isset($list) || !is_array($list)) { $list = array(); }
$lt2_name  = isset($col['name']) ? $col['name'] : '';
$lt2_intro = isset($col['intro']) ? $col['intro'] : '';
$lt2_cover = isset($col['cover']) ? $col['cover'] : '';
?>
<style>
.yk-list2{padding:20px 15px 40px;}
.yk-list2 .yk-l2-banner{position:relative;border-radius:10px;overflow:hidden;background:#26364f center/cover no-repeat;margin-bottom:28px;padding:64px 30px;color:#fff;text-align:center;}
.yk-list2 .yk-l2-banner::before{content:"";position:absolute;inset:0;background:rgba(20,30,50,.55);}
.yk-list2 .yk-l2-banner-in{position:relative;z-index:1;}
.yk-list2 .yk-l2-crumb{font-size:13px;color:#999;margin-bottom:12px;}
.yk-list2 .yk-l2-banner .yk-l2-crumb{color:rgba(255,255,255,.8);}
.yk-list2 .yk-l2-crumb a{color:inherit;}
.yk-list2 .yk-l2-crumb a:hover{color:var(--yk-accent,#e63946);}
.yk-list2 .yk-l2-title{font-size:28px;font-weight:700;margin-bottom:10px;}
.yk-list2 .yk-l2-intro{font-size:14px;color:#777;max-width:720px;}
.yk-list2 .yk-l2-banner .yk-l2-intro{color:rgba(255,255,255,.85);margin:0 auto;}
.yk-list2 .yk-l2-head{background:var(--yk-side-bg,#fff);border-radius:10px;padding:25px 30px;margin-bottom:28px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.yk-list2 .yk-l2-head .yk-l2-title{color:var(--yk-side-color,#333);}
.yk-list2 .yk-l2-grid{display:flex;flex-wrap:wrap;margin:0 -12px;}
.yk-list2 .yk-l2-cell{width:50%;padding:0 12px;margin-bottom:24px;}
.yk-list2 .yk-l2-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);height:100%;transition:transform .25s,box-shadow .25s;}
.yk-list2 .yk-l2-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(0,0,0,.12);}
.yk-list2 .yk-l2-thumb{display:block;height:250px;overflow:hidden;background:#e9ecef;position:relative;}
.yk-list2 .yk-l2-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.yk-list2 .yk-l2-card:hover .yk-l2-thumb img{transform:scale(1.07);}
.yk-list2 .yk-l2-ph{width:100%;height:100%;background:linear-gradient(150deg,#3a2b5e 0%,#6d4a9e 55%,#a86fc7 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);font-size:13px;letter-spacing:3px;}
.yk-list2 .yk-l2-top{position:absolute;top:12px;left:12px;background:var(--yk-accent,#e63946);color:#fff;font-size:12px;padding:2px 10px;border-radius:3px;z-index:2;}
.yk-list2 .yk-l2-body{padding:18px 20px 20px;}
.yk-list2 .yk-l2-tt{font-size:17px;font-weight:700;line-height:1.5;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-list2 .yk-l2-tt:hover{color:var(--yk-accent,#e63946);}
.yk-list2 .yk-l2-desc{color:#777;font-size:13px;margin:10px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.yk-list2 .yk-l2-meta{font-size:12px;color:#999;display:flex;justify-content:space-between;border-top:1px dashed #eee;padding-top:12px;}
.yk-list2 .yk-l2-empty{width:100%;background:#fff;border-radius:10px;text-align:center;color:#999;padding:70px 0;font-size:14px;}
@media (max-width:1199px){
  .yk-list2 .yk-l2-thumb{height:200px;}
  .yk-list2 .yk-l2-title{font-size:24px;}
}
@media (max-width:767px){
  .yk-list2 .yk-l2-cell{width:100%;}
  .yk-list2 .yk-l2-thumb{height:180px;}
  .yk-list2 .yk-l2-banner{padding:40px 20px;}
  .yk-list2 .yk-l2-title{font-size:20px;}
}
</style>
<div class="yk-wrap yk-list2">
  <?php if ($lt2_cover !== '') { ?>
  <div class="yk-l2-banner" style="background-image:url('<?php echo e($lt2_cover); ?>')">
    <div class="yk-l2-banner-in">
      <div class="yk-l2-crumb"><a href="<?php echo e(url_home()); ?>">首页</a> &gt; <span><?php echo e($lt2_name); ?></span></div>
      <div class="yk-l2-title"><?php echo e($lt2_name); ?></div>
      <?php if ($lt2_intro !== '') { ?><div class="yk-l2-intro"><?php echo e($lt2_intro); ?></div><?php } ?>
    </div>
  </div>
  <?php } else { ?>
  <div class="yk-l2-head">
    <div class="yk-l2-crumb"><a href="<?php echo e(url_home()); ?>">首页</a> &gt; <span><?php echo e($lt2_name); ?></span></div>
    <div class="yk-l2-title"><?php echo e($lt2_name); ?></div>
    <?php if ($lt2_intro !== '') { ?><div class="yk-l2-intro"><?php echo e($lt2_intro); ?></div><?php } ?>
  </div>
  <?php } ?>
  <div class="yk-llayout">
  <?php echo list_side_html(isset($side) ? $side : array()); ?>
  <div class="yk-lmain">
  <div class="yk-l2-grid">
    <?php if (!empty($list)) { ?>
      <?php foreach ($list as $lt2_it) {
        $lt2_t   = isset($lt2_it['title']) ? $lt2_it['title'] : '';
        $lt2_u   = isset($lt2_it['url']) ? $lt2_it['url'] : '#';
        $lt2_img = isset($lt2_it['thumb']) ? $lt2_it['thumb'] : '';
        $lt2_d   = isset($lt2_it['desc']) ? $lt2_it['desc'] : '';
        $lt2_tm  = isset($lt2_it['add_time']) ? fdate($lt2_it['add_time'], 'Y-m-d') : '';
        $lt2_v   = isset($lt2_it['views']) ? (int)$lt2_it['views'] : 0;
      ?>
      <div class="yk-l2-cell">
        <div class="yk-l2-card">
          <a class="yk-l2-thumb" href="<?php echo e($lt2_u); ?>">
            <?php if (!empty($lt2_it['is_top'])) { ?><span class="yk-l2-top">置顶</span><?php } ?>
            <?php if ($lt2_img !== '') { ?><img src="<?php echo e($lt2_img); ?>" alt="<?php echo e($lt2_t); ?>"><?php } else { ?><div class="yk-l2-ph">炎酷CMS</div><?php } ?>
          </a>
          <div class="yk-l2-body">
            <a class="yk-l2-tt" href="<?php echo e($lt2_u); ?>"><?php echo e($lt2_t); ?></a>
            <?php if ($lt2_d !== '') { ?><div class="yk-l2-desc"><?php echo e($lt2_d); ?></div><?php } ?>
            <div class="yk-l2-meta"><span><?php echo e($lt2_tm); ?></span><span>阅读 <?php echo $lt2_v; ?></span></div>
          </div>
        </div>
      </div>
      <?php } ?>
    <?php } else { ?>
      <div class="yk-l2-empty">暂无内容</div>
    <?php } ?>
  </div>
  <?php echo isset($pager) ? $pager : ''; ?>
  </div>
  </div>
</div>
