<?php
// product_1.html 产品/案例模块·样式1：四列网格图卡（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(); }
$pd1_title  = isset($title_text) ? $title_text : '';
$pd1_tstyle = isset($title_style) ? (int)$title_style : 1;
$pd1_tcolor = isset($title_color) ? $title_color : '';
$pd1_col    = isset($col_id) ? (int)$col_id : 0;
$pd1_desc   = !isset($show_desc) || $show_desc;
?>
<style>
.yk-pd1{margin-bottom:30px;}
.yk-pd1 .yk-pd1-head{display:flex;align-items:center;justify-content:space-between;}
.yk-pd1 .yk-pd1-head .yk-tt{margin:25px 0 15px;}
.yk-pd1 .yk-pd1-more{font-size:13px;color:#999;flex:none;}
.yk-pd1 .yk-pd1-more:hover{color:var(--yk-accent,#e63946);}
.yk-pd1 .yk-pd1-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-pd1 .yk-pd1-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.yk-pd1 .yk-pd1-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:transform .25s,box-shadow .25s;}
.yk-pd1 .yk-pd1-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.12);}
.yk-pd1 .yk-pd1-thumb{display:block;height:180px;overflow:hidden;background:#e9ecef;}
.yk-pd1 .yk-pd1-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.yk-pd1 .yk-pd1-card:hover .yk-pd1-thumb img{transform:scale(1.08);}
.yk-pd1 .yk-pd1-ph{width:100%;height:100%;background:linear-gradient(135deg,#1a5fb4 0%,#4a90d9 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:44px;font-weight:700;}
.yk-pd1 .yk-pd1-body{padding:14px 16px 16px;text-align:center;}
.yk-pd1 .yk-pd1-tt{font-size:15px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-pd1 .yk-pd1-tt:hover{color:var(--yk-accent,#e63946);}
.yk-pd1 .yk-pd1-desc{color:#888;font-size:12px;margin-top:8px;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
@media (max-width:1199px){
  .yk-pd1 .yk-pd1-grid{grid-template-columns:repeat(3,1fr);}
  .yk-pd1 .yk-pd1-thumb{height:160px;}
}
@media (max-width:767px){
  .yk-pd1 .yk-pd1-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .yk-pd1 .yk-pd1-thumb{height:130px;}
  .yk-pd1 .yk-pd1-body{padding:10px 12px 12px;}
}
</style>
<div class="yk-pd1">
<div class="yk-wrap">
  <div class="yk-pd1-head">
    <?php echo block_title_html($pd1_title, $pd1_tstyle, $pd1_tcolor); ?>
    <?php if ($pd1_col > 0) { ?><a class="yk-pd1-more" href="<?php echo e(url_col($pd1_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-pd1-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-pd1-grid">
    <?php foreach ($data_list as $pd1_row) {
      $pd1_t   = isset($pd1_row['title']) ? $pd1_row['title'] : '';
      $pd1_u   = isset($pd1_row['url']) ? $pd1_row['url'] : '#';
      $pd1_img = isset($pd1_row['thumb']) ? $pd1_row['thumb'] : '';
      $pd1_d   = isset($pd1_row['desc']) ? $pd1_row['desc'] : '';
      $pd1_c1  = $pd1_t !== '' ? (function_exists('mb_substr') ? mb_substr($pd1_t, 0, 1, 'UTF-8') : substr($pd1_t, 0, 3)) : 'P';
    ?>
    <div class="yk-pd1-card">
      <a class="yk-pd1-thumb" href="<?php echo e($pd1_u); ?>">
        <?php if ($pd1_img !== '') { ?><img src="<?php echo e($pd1_img); ?>" alt="<?php echo e($pd1_t); ?>"><?php } else { ?><div class="yk-pd1-ph"><?php echo e($pd1_c1); ?></div><?php } ?>
      </a>
      <div class="yk-pd1-body">
        <a class="yk-pd1-tt" href="<?php echo e($pd1_u); ?>"><?php echo e($pd1_t); ?></a>
        <?php if ($pd1_desc && $pd1_d !== '') { ?><div class="yk-pd1-desc"><?php echo e($pd1_d); ?></div><?php } ?>
      </div>
    </div>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
