<?php
// article_3.html 文章模块·样式3：首条大图 + 其余文字列表
// 可用变量：$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(); }
$at3_title  = isset($title_text) ? $title_text : '';
$at3_tstyle = isset($title_style) ? (int)$title_style : 1;
$at3_tcolor = isset($title_color) ? $title_color : '';
$at3_col    = isset($col_id) ? (int)$col_id : 0;
$at3_thumb  = !isset($show_thumb) || $show_thumb;
$at3_desc   = !isset($show_desc) || $show_desc;
$at3_time   = !isset($show_time) || $show_time;
$at3_first  = !empty($data_list) ? $data_list[0] : null;
$at3_rest   = !empty($data_list) ? array_slice($data_list, 1) : array();
$at3_ft     = $at3_first && isset($at3_first['title']) ? $at3_first['title'] : '';
$at3_fu     = $at3_first && isset($at3_first['url']) ? $at3_first['url'] : '#';
$at3_fimg   = $at3_first && isset($at3_first['thumb']) ? $at3_first['thumb'] : '';
$at3_fd     = $at3_first && isset($at3_first['desc']) ? $at3_first['desc'] : '';
$at3_fts    = $at3_first && isset($at3_first['add_time']) ? (int)$at3_first['add_time'] : 0;
$at3_fv     = $at3_first && isset($at3_first['views']) ? (int)$at3_first['views'] : 0;
?>
<style>
.yk-at3{margin-bottom:20px;}
.yk-at3 .yk-at3-head{display:flex;align-items:center;justify-content:space-between;}
.yk-at3 .yk-at3-head .yk-tt{margin:25px 0 15px;}
.yk-at3 .yk-at3-more{font-size:13px;color:#999;flex:none;}
.yk-at3 .yk-at3-more:hover{color:var(--yk-accent,#e63946);}
.yk-at3 .yk-at3-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-at3 .yk-at3-box{display:flex;gap:24px;align-items:stretch;}
.yk-at3 .yk-at3-first{flex:none;width:46%;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:box-shadow .25s;}
.yk-at3 .yk-at3-first:hover{box-shadow:0 8px 22px rgba(0,0,0,.12);}
.yk-at3 .yk-at3-fimg{display:block;height:250px;overflow:hidden;background:#e9ecef;}
.yk-at3 .yk-at3-fimg img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.yk-at3 .yk-at3-first:hover .yk-at3-fimg img{transform:scale(1.06);}
.yk-at3 .yk-at3-fph{width:100%;height:100%;background:linear-gradient(135deg,#3a2b5e 0%,#6d4a9e 55%,#a86fc7 100%);}
.yk-at3 .yk-at3-fbody{padding:16px 20px 18px;}
.yk-at3 .yk-at3-ftt{font-size:17px;font-weight:700;line-height:1.5;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-at3 .yk-at3-ftt:hover{color:var(--yk-accent,#e63946);}
.yk-at3 .yk-at3-fdesc{color:#777;font-size:13px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.yk-at3 .yk-at3-fmeta{margin-top:10px;font-size:12px;color:#999;display:flex;gap:18px;}
.yk-at3 .yk-at3-rest{flex:1;min-width:0;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:8px 24px;}
.yk-at3 .yk-at3-row{display:block;padding:14px 0;border-bottom:1px solid #f2f2f2;}
.yk-at3 .yk-at3-row:last-child{border-bottom:none;}
.yk-at3 .yk-at3-rtt{display:flex;align-items:baseline;gap:14px;font-size:15px;overflow:hidden;}
.yk-at3 .yk-at3-rtt b{font-weight:400;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-at3 .yk-at3-row:hover .yk-at3-rtt b{color:var(--yk-accent,#e63946);}
.yk-at3 .yk-at3-rtt span{flex:none;color:#999;font-size:12px;font-variant-numeric:tabular-nums;}
@media (max-width:1199px){
  .yk-at3 .yk-at3-fimg{height:210px;}
  .yk-at3 .yk-at3-box{gap:18px;}
}
@media (max-width:767px){
  .yk-at3 .yk-at3-box{flex-direction:column;}
  .yk-at3 .yk-at3-first{width:100%;}
  .yk-at3 .yk-at3-fimg{height:180px;}
  .yk-at3 .yk-at3-rest{padding:4px 16px;}
  .yk-at3 .yk-at3-rtt{font-size:14px;}
}
</style>
<div class="yk-at3">
<div class="yk-wrap">
  <div class="yk-at3-head">
    <?php echo block_title_html($at3_title, $at3_tstyle, $at3_tcolor); ?>
    <?php if ($at3_col > 0) { ?><a class="yk-at3-more" href="<?php echo e(url_col($at3_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-at3-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-at3-box">
    <div class="yk-at3-first">
      <?php if ($at3_thumb) { ?>
      <a class="yk-at3-fimg" href="<?php echo e($at3_fu); ?>">
        <?php if ($at3_fimg !== '') { ?><img src="<?php echo e($at3_fimg); ?>" alt="<?php echo e($at3_ft); ?>"><?php } else { ?><div class="yk-at3-fph"></div><?php } ?>
      </a>
      <?php } ?>
      <div class="yk-at3-fbody">
        <a class="yk-at3-ftt" href="<?php echo e($at3_fu); ?>"><?php echo e($at3_ft); ?></a>
        <?php if ($at3_desc && $at3_fd !== '') { ?><div class="yk-at3-fdesc"><?php echo e($at3_fd); ?></div><?php } ?>
        <div class="yk-at3-fmeta">
          <?php if ($at3_time) { ?><span><?php echo e(fdate($at3_fts, 'Y-m-d')); ?></span><?php } ?>
          <span>阅读 <?php echo $at3_fv; ?></span>
        </div>
      </div>
    </div>
    <?php if (!empty($at3_rest)) { ?>
    <div class="yk-at3-rest">
      <?php foreach ($at3_rest as $at3_row) {
        $at3_t  = isset($at3_row['title']) ? $at3_row['title'] : '';
        $at3_u  = isset($at3_row['url']) ? $at3_row['url'] : '#';
        $at3_ts = isset($at3_row['add_time']) ? (int)$at3_row['add_time'] : 0;
      ?>
      <a class="yk-at3-row" href="<?php echo e($at3_u); ?>">
        <span class="yk-at3-rtt"><b><?php echo e($at3_t); ?></b><?php if ($at3_time) { ?><span><?php echo e(fdate($at3_ts, 'm-d')); ?></span><?php } ?></span>
      </a>
      <?php } ?>
    </div>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
