<?php
// product_4.html 产品/案例模块·样式4：圆角卡片带阴影三列（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(); }
$pd4_title  = isset($title_text) ? $title_text : '';
$pd4_tstyle = isset($title_style) ? (int)$title_style : 3;
$pd4_tcolor = isset($title_color) ? $title_color : '';
$pd4_col    = isset($col_id) ? (int)$col_id : 0;
$pd4_desc   = !isset($show_desc) || $show_desc;
?>
<style>
.yk-pd4{margin-bottom:20px;}
.yk-pd4 .yk-pd4-head{display:flex;align-items:center;justify-content:space-between;}
.yk-pd4 .yk-pd4-head .yk-tt{margin:25px 0 15px;}
.yk-pd4 .yk-pd4-more{font-size:13px;color:#999;flex:none;}
.yk-pd4 .yk-pd4-more:hover{color:#0f766e;}
.yk-pd4 .yk-pd4-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-pd4 .yk-pd4-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.yk-pd4 .yk-pd4-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 22px rgba(15,60,60,.10);transition:transform .3s,box-shadow .3s;}
.yk-pd4 .yk-pd4-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(15,60,60,.18);}
.yk-pd4 .yk-pd4-thumb{display:block;height:210px;overflow:hidden;background:#e9ecef;}
.yk-pd4 .yk-pd4-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.yk-pd4 .yk-pd4-card:hover .yk-pd4-thumb img{transform:scale(1.07);}
.yk-pd4 .yk-pd4-ph{width:100%;height:100%;background:linear-gradient(150deg,#0f766e 0%,#2dd4bf 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);font-size:48px;font-weight:700;}
.yk-pd4 .yk-pd4-body{padding:18px 22px 22px;text-align:center;}
.yk-pd4 .yk-pd4-tt{font-size:16px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-pd4 .yk-pd4-tt:hover{color:#0f766e;}
.yk-pd4 .yk-pd4-desc{color:#888;font-size:13px;margin-top:8px;height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.yk-pd4 .yk-pd4-link{display:inline-block;margin-top:14px;font-size:12px;color:#0f766e;border:1px solid #0f766e;border-radius:20px;padding:4px 18px;transition:all .25s;}
.yk-pd4 .yk-pd4-link:hover{background:#0f766e;color:#fff;}
@media (max-width:1199px){
  .yk-pd4 .yk-pd4-grid{gap:18px;}
  .yk-pd4 .yk-pd4-thumb{height:180px;}
}
@media (max-width:767px){
  .yk-pd4 .yk-pd4-grid{grid-template-columns:1fr;gap:14px;}
  .yk-pd4 .yk-pd4-thumb{height:170px;}
}
</style>
<div class="yk-pd4">
<div class="yk-wrap">
  <div class="yk-pd4-head">
    <?php echo block_title_html($pd4_title, $pd4_tstyle, $pd4_tcolor); ?>
    <?php if ($pd4_col > 0) { ?><a class="yk-pd4-more" href="<?php echo e(url_col($pd4_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-pd4-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-pd4-grid">
    <?php foreach ($data_list as $pd4_row) {
      $pd4_t   = isset($pd4_row['title']) ? $pd4_row['title'] : '';
      $pd4_u   = isset($pd4_row['url']) ? $pd4_row['url'] : '#';
      $pd4_img = isset($pd4_row['thumb']) ? $pd4_row['thumb'] : '';
      $pd4_d   = isset($pd4_row['desc']) ? $pd4_row['desc'] : '';
      $pd4_c1  = $pd4_t !== '' ? (function_exists('mb_substr') ? mb_substr($pd4_t, 0, 1, 'UTF-8') : substr($pd4_t, 0, 3)) : 'P';
    ?>
    <div class="yk-pd4-card">
      <a class="yk-pd4-thumb" href="<?php echo e($pd4_u); ?>">
        <?php if ($pd4_img !== '') { ?><img src="<?php echo e($pd4_img); ?>" alt="<?php echo e($pd4_t); ?>"><?php } else { ?><div class="yk-pd4-ph"><?php echo e($pd4_c1); ?></div><?php } ?>
      </a>
      <div class="yk-pd4-body">
        <a class="yk-pd4-tt" href="<?php echo e($pd4_u); ?>"><?php echo e($pd4_t); ?></a>
        <?php if ($pd4_desc && $pd4_d !== '') { ?><div class="yk-pd4-desc"><?php echo e($pd4_d); ?></div><?php } ?>
        <a class="yk-pd4-link" href="<?php echo e($pd4_u); ?>">查看详情</a>
      </div>
    </div>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
