<?php
// banner_5 左右分屏：左侧渐变文案区，右侧图片轮播
if (!isset($banner) || !is_array($banner)) { $banner = array('images'=>array(), 'notice'=>''); }
$b5_images = isset($banner['images']) && is_array($banner['images']) ? $banner['images'] : array();
$b5_notice = isset($banner['notice']) ? $banner['notice'] : '';
?>
<style>
.yk-banner5{width:100%;background:#101726;}
.yk-banner5 .yk-b5-in{max-width:1200px;margin:0 auto;display:flex;align-items:stretch;min-height:340px;}
.yk-banner5 .yk-b5-text{flex:0 0 42%;background:linear-gradient(135deg,#13224a 0%,#1d3f8f 55%,#2767c9 100%);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:44px 40px;}
.yk-banner5 .yk-b5-name{font-size:32px;font-weight:700;letter-spacing:3px;margin-bottom:14px;}
.yk-banner5 .yk-b5-slogan{font-size:15px;letter-spacing:3px;opacity:.85;margin-bottom:22px;}
.yk-banner5 .yk-b5-rule{width:48px;height:3px;background:#ffce54;border-radius:2px;margin-bottom:22px;}
.yk-banner5 .yk-b5-notice{font-size:13px;line-height:1.9;background:rgba(255,255,255,.1);border-left:3px solid #ffce54;padding:10px 14px;border-radius:0 4px 4px 0;}
.yk-banner5 .yk-b5-notice b{color:#ffce54;margin-right:6px;}
.yk-banner5 .yk-b5-slider{flex:1;position:relative;overflow:hidden;min-height:340px;}
.yk-banner5 .yk-b5-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:block;}
.yk-banner5 .yk-b5-slide.on{opacity:1;z-index:1;}
.yk-banner5 .yk-b5-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.yk-banner5 .yk-b5-ph{width:100%;height:100%;background:linear-gradient(120deg,#0e3b5e 0%,#1668a8 60%,#37b3d6 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 20px;}
.yk-banner5 .yk-b5-ph-name{font-size:26px;font-weight:700;letter-spacing:2px;margin-bottom:10px;}
.yk-banner5 .yk-b5-ph-slogan{font-size:13px;opacity:.85;letter-spacing:3px;}
@media (max-width:1199px){
  .yk-banner5 .yk-b5-in{min-height:280px;}
  .yk-banner5 .yk-b5-text{padding:32px 28px;}
  .yk-banner5 .yk-b5-name{font-size:25px;}
  .yk-banner5 .yk-b5-slider{min-height:280px;}
}
@media (max-width:767px){
  .yk-banner5 .yk-b5-in{flex-direction:column;min-height:0;}
  .yk-banner5 .yk-b5-text{flex:none;padding:24px 18px;}
  .yk-banner5 .yk-b5-name{font-size:20px;letter-spacing:1px;}
  .yk-banner5 .yk-b5-slogan{font-size:12px;letter-spacing:2px;margin-bottom:14px;}
  .yk-banner5 .yk-b5-rule{margin-bottom:14px;}
  .yk-banner5 .yk-b5-notice{font-size:12px;}
  .yk-banner5 .yk-b5-slider{min-height:200px;height:200px;flex:none;}
  .yk-banner5 .yk-b5-ph-name{font-size:18px;}
}
</style>
<div class="yk-banner5">
  <div class="yk-b5-in">
    <div class="yk-b5-text">
      <div class="yk-b5-name"><?php echo e(site_config('company_name','炎酷CMS')); ?></div>
      <div class="yk-b5-slogan"><?php echo e(site_config('slogan','专注品质 · 用心服务')); ?></div>
      <div class="yk-b5-rule"></div>
      <?php if ($b5_notice !== '') { ?>
      <div class="yk-b5-notice"><b>公告</b><?php echo e($b5_notice); ?></div>
      <?php } ?>
    </div>
    <div class="yk-b5-slider yk-slider">
      <?php $b5_i = 0; foreach ($b5_images as $b5_im) { $b5_img = isset($b5_im['img']) ? $b5_im['img'] : ''; $b5_url = isset($b5_im['url']) ? $b5_im['url'] : ''; ?>
        <?php if ($b5_img !== '') { ?>
        <a class="yk-b5-slide yk-slide<?php echo $b5_i === 0 ? ' on' : ''; ?>"<?php echo $b5_url !== '' ? ' href="'.e($b5_url).'"' : ''; ?>>
          <img src="<?php echo e($b5_img); ?>" alt="<?php echo e(site_config('company_name','')); ?>">
        </a>
        <?php $b5_i++; } ?>
      <?php } ?>
      <?php if ($b5_i === 0) { ?>
      <div class="yk-b5-slide yk-slide on"><div class="yk-b5-ph">
        <div class="yk-b5-ph-name"><?php echo e(site_config('company_name','炎酷CMS')); ?></div>
        <div class="yk-b5-ph-slogan"><?php echo e(site_config('slogan','专注品质 · 用心服务')); ?></div>
      </div></div>
      <?php } ?>
    </div>
  </div>
</div>
