<?php
// list_8 带左侧序号排行的列表
if (!isset($col) || !is_array($col)) { $col = array(); }
if (!isset($list) || !is_array($list)) { $list = array(); }
$lt8_name  = isset($col['name']) ? $col['name'] : '';
$lt8_intro = isset($col['intro']) ? $col['intro'] : '';
$lt8_cover = isset($col['cover']) ? $col['cover'] : '';
?>
<style>
.yk-list8{padding:20px 15px 40px;}
.yk-list8 .yk-l8-banner{position:relative;border-radius:8px;overflow:hidden;background:#3b2b12 center/cover no-repeat;margin-bottom:26px;padding:56px 30px;color:#fff;text-align:center;}
.yk-list8 .yk-l8-banner::before{content:"";position:absolute;inset:0;background:rgba(45,30,8,.55);}
.yk-list8 .yk-l8-banner-in{position:relative;z-index:1;}
.yk-list8 .yk-l8-crumb{font-size:13px;color:#999;margin-bottom:12px;}
.yk-list8 .yk-l8-banner .yk-l8-crumb{color:rgba(255,255,255,.8);}
.yk-list8 .yk-l8-crumb a{color:inherit;}
.yk-list8 .yk-l8-crumb a:hover{color:var(--yk-accent,#e63946);}
.yk-list8 .yk-l8-title{font-size:28px;font-weight:700;margin-bottom:10px;}
.yk-list8 .yk-l8-intro{font-size:14px;color:#777;max-width:760px;}
.yk-list8 .yk-l8-banner .yk-l8-intro{color:rgba(255,255,255,.85);margin:0 auto;}
.yk-list8 .yk-l8-head{background:#fff;border-radius:8px;padding:25px 30px;margin-bottom:26px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.yk-list8 .yk-l8-item{display:flex;gap:22px;align-items:center;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:18px 26px;margin-bottom:14px;transition:transform .2s,box-shadow .2s;}
.yk-list8 .yk-l8-item:hover{transform:translateX(6px);box-shadow:0 4px 14px rgba(0,0,0,.1);}
.yk-list8 .yk-l8-no{flex:none;width:56px;font-size:38px;font-weight:800;font-style:italic;color:#d8dce2;line-height:1;text-align:center;font-family:Georgia,serif;}
.yk-list8 .yk-l8-r1 .yk-l8-no{color:var(--yk-accent,#e63946);}
.yk-list8 .yk-l8-r2 .yk-l8-no{color:#f08c2e;}
.yk-list8 .yk-l8-r3 .yk-l8-no{color:#e8b33c;}
.yk-list8 .yk-l8-body{flex:1;min-width:0;}
.yk-list8 .yk-l8-tt{font-size:16px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-list8 .yk-l8-tt:hover{color:var(--yk-accent,#e63946);}
.yk-list8 .yk-l8-top{display:inline-block;background:var(--yk-accent,#e63946);color:#fff;font-size:12px;padding:1px 8px;border-radius:3px;margin-right:8px;vertical-align:2px;}
.yk-list8 .yk-l8-desc{color:#777;font-size:13px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-list8 .yk-l8-meta{flex:none;text-align:right;font-size:12px;color:#999;line-height:1.9;}
.yk-list8 .yk-l8-empty{background:#fff;border-radius:8px;text-align:center;color:#999;padding:70px 0;font-size:14px;}
@media (max-width:1199px){
  .yk-list8 .yk-l8-no{width:46px;font-size:32px;}
  .yk-list8 .yk-l8-title{font-size:24px;}
}
@media (max-width:767px){
  .yk-list8 .yk-l8-item{gap:12px;padding:14px 16px;}
  .yk-list8 .yk-l8-no{width:34px;font-size:26px;}
  .yk-list8 .yk-l8-meta{display:none;}
  .yk-list8 .yk-l8-tt{font-size:15px;white-space:normal;}
  .yk-list8 .yk-l8-banner{padding:38px 18px;}
  .yk-list8 .yk-l8-title{font-size:20px;}
}
</style>
<div class="yk-wrap yk-list8">
  <?php if ($lt8_cover !== '') { ?>
  <div class="yk-l8-banner" style="background-image:url('<?php echo e($lt8_cover); ?>')">
    <div class="yk-l8-banner-in">
      <div class="yk-l8-crumb"><a href="<?php echo e(url_home()); ?>">首页</a> &gt; <span><?php echo e($lt8_name); ?></span></div>
      <div class="yk-l8-title"><?php echo e($lt8_name); ?></div>
      <?php if ($lt8_intro !== '') { ?><div class="yk-l8-intro"><?php echo e($lt8_intro); ?></div><?php } ?>
    </div>
  </div>
  <?php } else { ?>
  <div class="yk-l8-head">
    <div class="yk-l8-crumb"><a href="<?php echo e(url_home()); ?>">首页</a> &gt; <span><?php echo e($lt8_name); ?></span></div>
    <div class="yk-l8-title"><?php echo e($lt8_name); ?></div>
    <?php if ($lt8_intro !== '') { ?><div class="yk-l8-intro"><?php echo e($lt8_intro); ?></div><?php } ?>
  </div>
  <?php } ?>
  <?php if (!empty($list)) { ?>
    <?php $lt8_i = 0; foreach ($list as $lt8_it) {
      $lt8_i++;
      $lt8_t  = isset($lt8_it['title']) ? $lt8_it['title'] : '';
      $lt8_u  = isset($lt8_it['url']) ? $lt8_it['url'] : '#';
      $lt8_d  = isset($lt8_it['desc']) ? $lt8_it['desc'] : '';
      $lt8_tm = isset($lt8_it['add_time']) ? fdate($lt8_it['add_time'], 'Y-m-d') : '';
      $lt8_v  = isset($lt8_it['views']) ? (int)$lt8_it['views'] : 0;
      $lt8_rc = $lt8_i <= 3 ? ' yk-l8-r'.$lt8_i : '';
    ?>
    <div class="yk-l8-item<?php echo $lt8_rc; ?>">
      <div class="yk-l8-no"><?php echo $lt8_i; ?></div>
      <div class="yk-l8-body">
        <a class="yk-l8-tt" href="<?php echo e($lt8_u); ?>"><?php if (!empty($lt8_it['is_top'])) { ?><span class="yk-l8-top">置顶</span><?php } echo e($lt8_t); ?></a>
        <?php if ($lt8_d !== '') { ?><div class="yk-l8-desc"><?php echo e($lt8_d); ?></div><?php } ?>
      </div>
      <div class="yk-l8-meta"><span><?php echo e($lt8_tm); ?></span><br><span>阅读 <?php echo $lt8_v; ?></span></div>
    </div>
    <?php } ?>
  <?php } else { ?>
    <div class="yk-l8-empty">暂无内容</div>
  <?php } ?>
  <?php echo isset($pager) ? $pager : ''; ?>
</div>
