<?php
// product_5.html 产品/案例模块·样式5：列表式（左图右简介，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(); }
$pd5_title  = isset($title_text) ? $title_text : '';
$pd5_tstyle = isset($title_style) ? (int)$title_style : 1;
$pd5_tcolor = isset($title_color) ? $title_color : '';
$pd5_col    = isset($col_id) ? (int)$col_id : 0;
$pd5_desc   = !isset($show_desc) || $show_desc;
$pd5_time   = !isset($show_time) || $show_time;
?>
<style>
.yk-pd5{margin-bottom:30px;}
.yk-pd5 .yk-pd5-head{display:flex;align-items:center;justify-content:space-between;}
.yk-pd5 .yk-pd5-head .yk-tt{margin:25px 0 15px;}
.yk-pd5 .yk-pd5-more{font-size:13px;color:#999;flex:none;}
.yk-pd5 .yk-pd5-more:hover{color:#c2410c;}
.yk-pd5 .yk-pd5-empty{background:#fff;border-radius:6px;padding:40px 0;text-align:center;color:#999;font-size:14px;}
.yk-pd5 .yk-pd5-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.yk-pd5 .yk-pd5-item{display:flex;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:box-shadow .25s;}
.yk-pd5 .yk-pd5-item:hover{box-shadow:0 8px 22px rgba(0,0,0,.12);}
.yk-pd5 .yk-pd5-thumb{flex:none;width:200px;overflow:hidden;background:#e9ecef;}
.yk-pd5 .yk-pd5-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.yk-pd5 .yk-pd5-item:hover .yk-pd5-thumb img{transform:scale(1.07);}
.yk-pd5 .yk-pd5-ph{width:100%;height:100%;min-height:150px;background:linear-gradient(150deg,#c2410c 0%,#fb923c 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);font-size:42px;font-weight:700;}
.yk-pd5 .yk-pd5-body{flex:1;min-width:0;padding:18px 22px;display:flex;flex-direction:column;}
.yk-pd5 .yk-pd5-tt{font-size:16px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yk-pd5 .yk-pd5-tt:hover{color:#c2410c;}
.yk-pd5 .yk-pd5-desc{color:#777;font-size:13px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.yk-pd5 .yk-pd5-meta{margin-top:auto;padding-top:12px;font-size:12px;color:#999;display:flex;justify-content:space-between;align-items:center;}
.yk-pd5 .yk-pd5-go{color:#c2410c;font-size:12px;}
.yk-pd5 .yk-pd5-go:hover{text-decoration:underline;}
@media (max-width:1199px){
  .yk-pd5 .yk-pd5-list{grid-template-columns:1fr;}
  .yk-pd5 .yk-pd5-thumb{width:220px;}
}
@media (max-width:767px){
  .yk-pd5 .yk-pd5-list{gap:12px;}
  .yk-pd5 .yk-pd5-thumb{width:120px;}
  .yk-pd5 .yk-pd5-ph{min-height:110px;font-size:30px;}
  .yk-pd5 .yk-pd5-body{padding:12px 14px;}
  .yk-pd5 .yk-pd5-tt{font-size:15px;}
  .yk-pd5 .yk-pd5-desc{-webkit-line-clamp:2;}
}
</style>
<div class="yk-pd5">
<div class="yk-wrap">
  <div class="yk-pd5-head">
    <?php echo block_title_html($pd5_title, $pd5_tstyle, $pd5_tcolor); ?>
    <?php if ($pd5_col > 0) { ?><a class="yk-pd5-more" href="<?php echo e(url_col($pd5_col)); ?>">更多 &gt;</a><?php } ?>
  </div>
  <?php if (empty($data_list)) { ?>
  <div class="yk-pd5-empty">暂无内容</div>
  <?php } else { ?>
  <div class="yk-pd5-list">
    <?php foreach ($data_list as $pd5_row) {
      $pd5_t   = isset($pd5_row['title']) ? $pd5_row['title'] : '';
      $pd5_u   = isset($pd5_row['url']) ? $pd5_row['url'] : '#';
      $pd5_img = isset($pd5_row['thumb']) ? $pd5_row['thumb'] : '';
      $pd5_d   = isset($pd5_row['desc']) ? $pd5_row['desc'] : '';
      $pd5_ts  = isset($pd5_row['add_time']) ? (int)$pd5_row['add_time'] : 0;
      $pd5_c1  = $pd5_t !== '' ? (function_exists('mb_substr') ? mb_substr($pd5_t, 0, 1, 'UTF-8') : substr($pd5_t, 0, 3)) : 'P';
    ?>
    <div class="yk-pd5-item">
      <a class="yk-pd5-thumb" href="<?php echo e($pd5_u); ?>">
        <?php if ($pd5_img !== '') { ?><img src="<?php echo e($pd5_img); ?>" alt="<?php echo e($pd5_t); ?>"><?php } else { ?><div class="yk-pd5-ph"><?php echo e($pd5_c1); ?></div><?php } ?>
      </a>
      <div class="yk-pd5-body">
        <a class="yk-pd5-tt" href="<?php echo e($pd5_u); ?>"><?php echo e($pd5_t); ?></a>
        <?php if ($pd5_desc && $pd5_d !== '') { ?><div class="yk-pd5-desc"><?php echo e($pd5_d); ?></div><?php } ?>
        <div class="yk-pd5-meta">
          <?php if ($pd5_time) { ?><span><?php echo e(fdate($pd5_ts, 'Y-m-d')); ?></span><?php } else { ?><span></span><?php } ?>
          <a class="yk-pd5-go" href="<?php echo e($pd5_u); ?>">查看详情 &gt;</a>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
  <?php } ?>
</div>
</div>
