<?php
// product_2.html 产品/案例模块·样式2：图片 + 底部标题遮罩图卡（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(); }
$pd2_title  = isset($title_text) ? $title_text : '';
$pd2_tstyle = isset($title_style) ? (int)$title_style : 1;
$pd2_tcolor = isset($title_color) ? $title_color : '';
$pd2_col    = isset($col_id) ? (int)$col_id : 0;
$pd2_desc   = !isset($show_desc) || $show_desc;
?>
<style>
.yk-pd2{margin-bottom:20px;}
.yk-pd2 .yk-pd2-head{display:flex;align-items:center;justify-content:space-between;}
.yk-pd2 .yk-pd2-head .yk-tt{margin:25px 0 15px;}
.yk-pd2 .yk-pd2-more{font-size:13px;color:#999;flex:none;}
.yk-pd2 .yk-pd2-more:hover{color:var(--yk-accent,#e63946);}
.yk-pd2 .yk-pd2-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-pd2 .yk-pd2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.yk-pd2 .yk-pd2-card{position:relative;display:block;height:260px;border-radius:8px;overflow:hidden;background:#e9ecef;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.yk-pd2 .yk-pd2-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.yk-pd2 .yk-pd2-card:hover img{transform:scale(1.08);}
.yk-pd2 .yk-pd2-ph{width:100%;height:100%;background:linear-gradient(150deg,#134e5e 0%,#71b280 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:48px;font-weight:700;}
.yk-pd2 .yk-pd2-mask{position:absolute;left:0;right:0;bottom:0;padding:38px 16px 14px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 100%);color:#fff;}
.yk-pd2 .yk-pd2-tt{font-size:15px;font-weight:700;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-pd2 .yk-pd2-desc{font-size:12px;color:rgba(255,255,255,.8);margin-top:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.yk-pd2 .yk-pd2-card:hover .yk-pd2-desc{max-height:40px;opacity:1;}
@media (max-width:1199px){
  .yk-pd2 .yk-pd2-grid{grid-template-columns:repeat(3,1fr);}
  .yk-pd2 .yk-pd2-card{height:230px;}
}
@media (max-width:767px){
  .yk-pd2 .yk-pd2-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .yk-pd2 .yk-pd2-card{height:180px;}
  .yk-pd2 .yk-pd2-desc{display:none;}
}
</style>
<div class="yk-pd2">
<div class="yk-wrap">
  <div class="yk-pd2-head">
    <?php echo block_title_html($pd2_title, $pd2_tstyle, $pd2_tcolor); ?>
    <?php if ($pd2_col > 0) { ?><a class="yk-pd2-more" href="<?php echo e(url_col($pd2_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-pd2-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-pd2-grid">
    <?php foreach ($data_list as $pd2_row) {
      $pd2_t   = isset($pd2_row['title']) ? $pd2_row['title'] : '';
      $pd2_u   = isset($pd2_row['url']) ? $pd2_row['url'] : '#';
      $pd2_img = isset($pd2_row['thumb']) ? $pd2_row['thumb'] : '';
      $pd2_d   = isset($pd2_row['desc']) ? $pd2_row['desc'] : '';
      $pd2_c1  = $pd2_t !== '' ? (function_exists('mb_substr') ? mb_substr($pd2_t, 0, 1, 'UTF-8') : substr($pd2_t, 0, 3)) : 'P';
    ?>
    <a class="yk-pd2-card" href="<?php echo e($pd2_u); ?>">
      <?php if ($pd2_img !== '') { ?><img src="<?php echo e($pd2_img); ?>" alt="<?php echo e($pd2_t); ?>"><?php } else { ?><div class="yk-pd2-ph"><?php echo e($pd2_c1); ?></div><?php } ?>
      <span class="yk-pd2-mask">
        <span class="yk-pd2-tt"><?php echo e($pd2_t); ?></span>
        <?php if ($pd2_desc && $pd2_d !== '') { ?><span class="yk-pd2-desc"><?php echo e($pd2_d); ?></span><?php } ?>
      </span>
    </a>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
