<?php
// article_4.html 文章模块·样式4：两列图文卡片
// 可用变量：$title_text $title_style $title_color（block_title_html 输出标题）
//          $data_list 文章数组(id/title/thumb/desc/add_time/views/url)
//          $show_thumb $show_desc $show_time 开关；$col_id >0 时输出"更多"链接
if (!isset($data_list) || !is_array($data_list)) { $data_list = array(); }
$at4_title  = isset($title_text) ? $title_text : '';
$at4_tstyle = isset($title_style) ? (int)$title_style : 1;
$at4_tcolor = isset($title_color) ? $title_color : '';
$at4_col    = isset($col_id) ? (int)$col_id : 0;
$at4_thumb  = !isset($show_thumb) || $show_thumb;
$at4_desc   = !isset($show_desc) || $show_desc;
$at4_time   = !isset($show_time) || $show_time;
?>
<style>
.yk-at4{margin-bottom:30px;}
.yk-at4 .yk-at4-head{display:flex;align-items:center;justify-content:space-between;}
.yk-at4 .yk-at4-head .yk-tt{margin:25px 0 15px;}
.yk-at4 .yk-at4-more{font-size:13px;color:#999;flex:none;}
.yk-at4 .yk-at4-more:hover{color:#0f766e;}
.yk-at4 .yk-at4-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-at4 .yk-at4-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.yk-at4 .yk-at4-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(15,60,60,.06);display:flex;transition:transform .25s,box-shadow .25s;}
.yk-at4 .yk-at4-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(15,60,60,.13);}
.yk-at4 .yk-at4-thumb{flex:none;width:38%;overflow:hidden;background:#e9ecef;}
.yk-at4 .yk-at4-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.yk-at4 .yk-at4-card:hover .yk-at4-thumb img{transform:scale(1.07);}
.yk-at4 .yk-at4-ph{width:100%;height:100%;min-height:150px;background:linear-gradient(150deg,#0f766e 0%,#14b8a6 100%);}
.yk-at4 .yk-at4-body{flex:1;min-width:0;padding:18px 20px;display:flex;flex-direction:column;}
.yk-at4 .yk-at4-tt{font-size:16px;font-weight:700;line-height:1.5;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-at4 .yk-at4-tt:hover{color:#0f766e;}
.yk-at4 .yk-at4-desc{color:#777;font-size:13px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.yk-at4 .yk-at4-meta{margin-top:auto;padding-top:12px;font-size:12px;color:#999;display:flex;justify-content:space-between;border-top:1px dashed #eee;}
@media (max-width:1199px){
  .yk-at4 .yk-at4-grid{gap:16px;}
  .yk-at4 .yk-at4-thumb{width:34%;}
}
@media (max-width:767px){
  .yk-at4 .yk-at4-grid{grid-template-columns:1fr;gap:14px;}
  .yk-at4 .yk-at4-thumb{width:36%;}
  .yk-at4 .yk-at4-body{padding:14px 16px;}
  .yk-at4 .yk-at4-tt{font-size:15px;}
}
</style>
<div class="yk-at4">
<div class="yk-wrap">
  <div class="yk-at4-head">
    <?php echo block_title_html($at4_title, $at4_tstyle, $at4_tcolor); ?>
    <?php if ($at4_col > 0) { ?><a class="yk-at4-more" href="<?php echo e(url_col($at4_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-at4-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-at4-grid">
    <?php foreach ($data_list as $at4_row) {
      $at4_t   = isset($at4_row['title']) ? $at4_row['title'] : '';
      $at4_u   = isset($at4_row['url']) ? $at4_row['url'] : '#';
      $at4_img = isset($at4_row['thumb']) ? $at4_row['thumb'] : '';
      $at4_d   = isset($at4_row['desc']) ? $at4_row['desc'] : '';
      $at4_ts  = isset($at4_row['add_time']) ? (int)$at4_row['add_time'] : 0;
      $at4_v   = isset($at4_row['views']) ? (int)$at4_row['views'] : 0;
    ?>
    <div class="yk-at4-card">
      <?php if ($at4_thumb) { ?>
      <a class="yk-at4-thumb" href="<?php echo e($at4_u); ?>">
        <?php if ($at4_img !== '') { ?><img src="<?php echo e($at4_img); ?>" alt="<?php echo e($at4_t); ?>"><?php } else { ?><div class="yk-at4-ph"></div><?php } ?>
      </a>
      <?php } ?>
      <div class="yk-at4-body">
        <a class="yk-at4-tt" href="<?php echo e($at4_u); ?>"><?php echo e($at4_t); ?></a>
        <?php if ($at4_desc && $at4_d !== '') { ?><div class="yk-at4-desc"><?php echo e($at4_d); ?></div><?php } ?>
        <div class="yk-at4-meta">
          <?php if ($at4_time) { ?><span><?php echo e(fdate($at4_ts, 'Y-m-d')); ?></span><?php } ?>
          <span>阅读 <?php echo $at4_v; ?></span>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
