<?php
// article_5.html 文章模块·样式5：横向滚动卡片（桌面端整排，移动端可滑动）
// 可用变量：$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(); }
$at5_title  = isset($title_text) ? $title_text : '';
$at5_tstyle = isset($title_style) ? (int)$title_style : 1;
$at5_tcolor = isset($title_color) ? $title_color : '';
$at5_col    = isset($col_id) ? (int)$col_id : 0;
$at5_thumb  = !isset($show_thumb) || $show_thumb;
$at5_desc   = !isset($show_desc) || $show_desc;
$at5_time   = !isset($show_time) || $show_time;
?>
<style>
.yk-at5{margin-bottom:20px;}
.yk-at5 .yk-at5-head{display:flex;align-items:center;justify-content:space-between;}
.yk-at5 .yk-at5-head .yk-tt{margin:25px 0 15px;}
.yk-at5 .yk-at5-more{font-size:13px;color:#999;flex:none;}
.yk-at5 .yk-at5-more:hover{color:#ea580c;}
.yk-at5 .yk-at5-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-at5 .yk-at5-track{display:flex;gap:20px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.yk-at5 .yk-at5-card{flex:0 0 calc(25% - 15px);min-width:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07);scroll-snap-align:start;transition:transform .25s,box-shadow .25s;}
.yk-at5 .yk-at5-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.14);}
.yk-at5 .yk-at5-thumb{display:block;height:150px;overflow:hidden;background:#e9ecef;position:relative;}
.yk-at5 .yk-at5-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.yk-at5 .yk-at5-card:hover .yk-at5-thumb img{transform:scale(1.07);}
.yk-at5 .yk-at5-ph{width:100%;height:100%;background:linear-gradient(150deg,#c2410c 0%,#f97316 60%,#fdba74 100%);}
.yk-at5 .yk-at5-body{padding:14px 16px 16px;}
.yk-at5 .yk-at5-tt{font-size:15px;font-weight:700;line-height:1.5;display:block;height:44px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.yk-at5 .yk-at5-tt:hover{color:#ea580c;}
.yk-at5 .yk-at5-desc{color:#777;font-size:12px;margin-top:8px;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.yk-at5 .yk-at5-meta{margin-top:10px;font-size:12px;color:#999;display:flex;justify-content:space-between;}
@media (max-width:1199px){
  .yk-at5 .yk-at5-card{flex-basis:calc(33.3333% - 14px);}
  .yk-at5 .yk-at5-thumb{height:135px;}
}
@media (max-width:767px){
  .yk-at5 .yk-at5-track{gap:12px;padding-bottom:10px;}
  .yk-at5 .yk-at5-card{flex-basis:72%;}
  .yk-at5 .yk-at5-thumb{height:150px;}
  .yk-at5 .yk-at5-tt{height:auto;}
}
</style>
<div class="yk-at5">
<div class="yk-wrap">
  <div class="yk-at5-head">
    <?php echo block_title_html($at5_title, $at5_tstyle, $at5_tcolor); ?>
    <?php if ($at5_col > 0) { ?><a class="yk-at5-more" href="<?php echo e(url_col($at5_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-at5-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-at5-track">
    <?php foreach ($data_list as $at5_row) {
      $at5_t   = isset($at5_row['title']) ? $at5_row['title'] : '';
      $at5_u   = isset($at5_row['url']) ? $at5_row['url'] : '#';
      $at5_img = isset($at5_row['thumb']) ? $at5_row['thumb'] : '';
      $at5_d   = isset($at5_row['desc']) ? $at5_row['desc'] : '';
      $at5_ts  = isset($at5_row['add_time']) ? (int)$at5_row['add_time'] : 0;
      $at5_v   = isset($at5_row['views']) ? (int)$at5_row['views'] : 0;
    ?>
    <div class="yk-at5-card">
      <?php if ($at5_thumb) { ?>
      <a class="yk-at5-thumb" href="<?php echo e($at5_u); ?>">
        <?php if ($at5_img !== '') { ?><img src="<?php echo e($at5_img); ?>" alt="<?php echo e($at5_t); ?>"><?php } else { ?><div class="yk-at5-ph"></div><?php } ?>
      </a>
      <?php } ?>
      <div class="yk-at5-body">
        <a class="yk-at5-tt" href="<?php echo e($at5_u); ?>"><?php echo e($at5_t); ?></a>
        <?php if ($at5_desc && $at5_d !== '') { ?><div class="yk-at5-desc"><?php echo e($at5_d); ?></div><?php } ?>
        <div class="yk-at5-meta">
          <?php if ($at5_time) { ?><span><?php echo e(fdate($at5_ts, 'm-d')); ?></span><?php } ?>
          <span>阅读 <?php echo $at5_v; ?></span>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
