<?php
// product_3.html 产品/案例模块·样式3：首条大图 + 其余小图混排（thumb 为空时 CSS 占位色块+首字）
// 可用变量：$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(); }
$pd3_title  = isset($title_text) ? $title_text : '';
$pd3_tstyle = isset($title_style) ? (int)$title_style : 1;
$pd3_tcolor = isset($title_color) ? $title_color : '';
$pd3_col    = isset($col_id) ? (int)$col_id : 0;
$pd3_desc   = !isset($show_desc) || $show_desc;
$pd3_first  = !empty($data_list) ? $data_list[0] : null;
$pd3_rest   = !empty($data_list) ? array_slice($data_list, 1) : array();
$pd3_ft     = $pd3_first && isset($pd3_first['title']) ? $pd3_first['title'] : '';
$pd3_fu     = $pd3_first && isset($pd3_first['url']) ? $pd3_first['url'] : '#';
$pd3_fimg   = $pd3_first && isset($pd3_first['thumb']) ? $pd3_first['thumb'] : '';
$pd3_fd     = $pd3_first && isset($pd3_first['desc']) ? $pd3_first['desc'] : '';
$pd3_fc1    = $pd3_ft !== '' ? (function_exists('mb_substr') ? mb_substr($pd3_ft, 0, 1, 'UTF-8') : substr($pd3_ft, 0, 3)) : 'P';
?>
<style>
.yk-pd3{margin-bottom:20px;}
.yk-pd3 .yk-pd3-head{display:flex;align-items:center;justify-content:space-between;}
.yk-pd3 .yk-pd3-head .yk-tt{margin:25px 0 15px;}
.yk-pd3 .yk-pd3-more{font-size:13px;color:#999;flex:none;}
.yk-pd3 .yk-pd3-more:hover{color:#6d28d9;}
.yk-pd3 .yk-pd3-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-pd3 .yk-pd3-box{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.yk-pd3 .yk-pd3-card{position:relative;display:block;border-radius:10px;overflow:hidden;background:#e9ecef;height:220px;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.yk-pd3 .yk-pd3-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.yk-pd3 .yk-pd3-card:hover img{transform:scale(1.07);}
.yk-pd3 .yk-pd3-ph{width:100%;height:100%;background:linear-gradient(150deg,#4c1d95 0%,#8b5cf6 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:42px;font-weight:700;}
.yk-pd3 .yk-pd3-mask{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.75) 100%);color:#fff;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-pd3 .yk-pd3-big{grid-column:1 / 3;grid-row:1 / 3;height:auto;min-height:460px;}
.yk-pd3 .yk-pd3-big .yk-pd3-ph{font-size:64px;}
.yk-pd3 .yk-pd3-big .yk-pd3-mask{padding:60px 26px 20px;font-size:20px;white-space:normal;}
.yk-pd3 .yk-pd3-big .yk-pd3-fdesc{font-size:13px;font-weight:400;color:rgba(255,255,255,.82);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:1199px){
  .yk-pd3 .yk-pd3-big{min-height:380px;}
  .yk-pd3 .yk-pd3-card{height:180px;}
}
@media (max-width:767px){
  .yk-pd3 .yk-pd3-box{grid-template-columns:1fr 1fr;gap:12px;}
  .yk-pd3 .yk-pd3-big{grid-column:1 / 3;grid-row:auto;min-height:220px;height:220px;}
  .yk-pd3 .yk-pd3-big .yk-pd3-mask{font-size:16px;padding:36px 16px 12px;}
  .yk-pd3 .yk-pd3-big .yk-pd3-fdesc{display:none;}
  .yk-pd3 .yk-pd3-card{height:150px;}
  .yk-pd3 .yk-pd3-big{height:220px;}
}
</style>
<div class="yk-pd3">
<div class="yk-wrap">
  <div class="yk-pd3-head">
    <?php echo block_title_html($pd3_title, $pd3_tstyle, $pd3_tcolor); ?>
    <?php if ($pd3_col > 0) { ?><a class="yk-pd3-more" href="<?php echo e(url_col($pd3_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-pd3-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-pd3-box">
    <a class="yk-pd3-card yk-pd3-big" href="<?php echo e($pd3_fu); ?>">
      <?php if ($pd3_fimg !== '') { ?><img src="<?php echo e($pd3_fimg); ?>" alt="<?php echo e($pd3_ft); ?>"><?php } else { ?><div class="yk-pd3-ph"><?php echo e($pd3_fc1); ?></div><?php } ?>
      <span class="yk-pd3-mask"><?php echo e($pd3_ft); ?>
        <?php if ($pd3_desc && $pd3_fd !== '') { ?><span class="yk-pd3-fdesc"><?php echo e($pd3_fd); ?></span><?php } ?>
      </span>
    </a>
    <?php foreach ($pd3_rest as $pd3_row) {
      $pd3_t   = isset($pd3_row['title']) ? $pd3_row['title'] : '';
      $pd3_u   = isset($pd3_row['url']) ? $pd3_row['url'] : '#';
      $pd3_img = isset($pd3_row['thumb']) ? $pd3_row['thumb'] : '';
      $pd3_c1  = $pd3_t !== '' ? (function_exists('mb_substr') ? mb_substr($pd3_t, 0, 1, 'UTF-8') : substr($pd3_t, 0, 3)) : 'P';
    ?>
    <a class="yk-pd3-card" href="<?php echo e($pd3_u); ?>">
      <?php if ($pd3_img !== '') { ?><img src="<?php echo e($pd3_img); ?>" alt="<?php echo e($pd3_t); ?>"><?php } else { ?><div class="yk-pd3-ph"><?php echo e($pd3_c1); ?></div><?php } ?>
      <span class="yk-pd3-mask"><?php echo e($pd3_t); ?></span>
    </a>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
