<?php
// article_1.html 文章模块·样式1：左图右文列表
// 可用变量：$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(); }
$at1_title  = isset($title_text) ? $title_text : '';
$at1_tstyle = isset($title_style) ? (int)$title_style : 1;
$at1_tcolor = isset($title_color) ? $title_color : '';
$at1_col    = isset($col_id) ? (int)$col_id : 0;
$at1_thumb  = !isset($show_thumb) || $show_thumb;
$at1_desc   = !isset($show_desc) || $show_desc;
$at1_time   = !isset($show_time) || $show_time;
?>
<style>
.yk-at1{margin-bottom:20px;}
.yk-at1 .yk-at1-head{display:flex;align-items:center;justify-content:space-between;}
.yk-at1 .yk-at1-head .yk-tt{margin:25px 0 15px;}
.yk-at1 .yk-at1-more{font-size:13px;color:#999;flex:none;}
.yk-at1 .yk-at1-more:hover{color:var(--yk-accent,#e63946);}
.yk-at1 .yk-at1-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-at1 .yk-at1-list{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:6px 26px;}
.yk-at1 .yk-at1-item{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid #f0f0f0;}
.yk-at1 .yk-at1-item:last-child{border-bottom:none;}
.yk-at1 .yk-at1-thumb{flex:none;width:200px;height:134px;border-radius:6px;overflow:hidden;background:#e9ecef;}
.yk-at1 .yk-at1-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.yk-at1 .yk-at1-item:hover .yk-at1-thumb img{transform:scale(1.06);}
.yk-at1 .yk-at1-ph{width:100%;height:100%;background:linear-gradient(135deg,#2b3a5e 0%,#4a6fa5 60%,#7aa5d2 100%);}
.yk-at1 .yk-at1-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.yk-at1 .yk-at1-tt{font-size:17px;font-weight:700;line-height:1.5;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-at1 .yk-at1-tt:hover{color:var(--yk-accent,#e63946);}
.yk-at1 .yk-at1-desc{color:#777;font-size:13px;margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.yk-at1 .yk-at1-meta{margin-top:auto;font-size:12px;color:#999;display:flex;gap:20px;}
.yk-at1 .yk-at1-meta i{font-style:normal;}
@media (max-width:1199px){
  .yk-at1 .yk-at1-thumb{width:170px;height:114px;}
}
@media (max-width:767px){
  .yk-at1 .yk-at1-list{padding:2px 16px;}
  .yk-at1 .yk-at1-item{gap:14px;padding:14px 0;}
  .yk-at1 .yk-at1-thumb{width:110px;height:80px;}
  .yk-at1 .yk-at1-tt{font-size:15px;white-space:normal;}
  .yk-at1 .yk-at1-desc{-webkit-line-clamp:2;margin-top:6px;}
}
</style>
<div class="yk-at1">
<div class="yk-wrap">
  <div class="yk-at1-head">
    <?php echo block_title_html($at1_title, $at1_tstyle, $at1_tcolor); ?>
    <?php if ($at1_col > 0) { ?><a class="yk-at1-more" href="<?php echo e(url_col($at1_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-at1-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-at1-list">
    <?php foreach ($data_list as $at1_row) {
      $at1_t   = isset($at1_row['title']) ? $at1_row['title'] : '';
      $at1_u   = isset($at1_row['url']) ? $at1_row['url'] : '#';
      $at1_img = isset($at1_row['thumb']) ? $at1_row['thumb'] : '';
      $at1_d   = isset($at1_row['desc']) ? $at1_row['desc'] : '';
      $at1_ts  = isset($at1_row['add_time']) ? (int)$at1_row['add_time'] : 0;
      $at1_v   = isset($at1_row['views']) ? (int)$at1_row['views'] : 0;
    ?>
    <div class="yk-at1-item">
      <?php if ($at1_thumb) { ?>
      <a class="yk-at1-thumb" href="<?php echo e($at1_u); ?>">
        <?php if ($at1_img !== '') { ?><img src="<?php echo e($at1_img); ?>" alt="<?php echo e($at1_t); ?>"><?php } else { ?><div class="yk-at1-ph"></div><?php } ?>
      </a>
      <?php } ?>
      <div class="yk-at1-body">
        <a class="yk-at1-tt" href="<?php echo e($at1_u); ?>"><?php echo e($at1_t); ?></a>
        <?php if ($at1_desc && $at1_d !== '') { ?><div class="yk-at1-desc"><?php echo e($at1_d); ?></div><?php } ?>
        <div class="yk-at1-meta">
          <?php if ($at1_time) { ?><span><i>&#128197;</i> <?php echo e(fdate($at1_ts, 'Y-m-d')); ?></span><?php } ?>
          <span><i>&#128065;</i> <?php echo $at1_v; ?></span>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
