<?php
// about_5.html 关于我们模块·样式5：图片背景 + 文字浮层（无图时用深色渐变背景优雅降级）
// 可用变量：$title_text $title_style $title_color（block_title_html 输出标题）
//          $about 数组：name 单页名 / image 形象图URL(可空) / intro 简介纯文本 / url 查看更多链接
$ab5       = isset($about) && is_array($about) ? $about : array();
$ab5_name  = isset($ab5['name']) ? $ab5['name'] : '';
$ab5_img   = isset($ab5['image']) ? trim($ab5['image']) : '';
$ab5_intro = isset($ab5['intro']) ? $ab5['intro'] : '';
$ab5_url   = isset($ab5['url']) && $ab5['url'] !== '' ? $ab5['url'] : '#';
$ab5_tt    = isset($title_text) && $title_text !== '' ? $title_text : $ab5_name;
$ab5_ts    = isset($title_style) ? (int)$title_style : 1;
$ab5_tc    = isset($title_color) && $title_color !== '' ? $title_color : '#ffffff';
?>
<style>
.yk-ab5{margin-bottom:20px;}
.yk-ab5 .yk-ab5-bg{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(120deg,#16222a 0%,#2b3a5e 60%,#4a6fa5 100%) center/cover no-repeat;min-height:380px;display:flex;align-items:center;}
.yk-ab5 .yk-ab5-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,32,.82) 0%,rgba(10,18,32,.55) 55%,rgba(10,18,32,.25) 100%);}
.yk-ab5 .yk-ab5-body{position:relative;z-index:1;max-width:600px;padding:56px 60px;color:#fff;}
.yk-ab5 .yk-ab5-body .yk-tt{margin:0 0 18px;}
.yk-ab5 .yk-ab5-body .yk-tt span{color:#fff;}
.yk-ab5 .yk-ab5-body .yk-tt-1 span{border-left-color:#f5a623;}
.yk-ab5 .yk-ab5-body .yk-tt-2{border-bottom-color:rgba(255,255,255,.2);}
.yk-ab5 .yk-ab5-body .yk-tt-2 span{border-bottom-color:#f5a623;}
.yk-ab5 .yk-ab5-body .yk-tt-4 span{background:#f5a623;color:#1a2433!important;}
.yk-ab5 .yk-ab5-body .yk-tt-5 span::before{color:#f5a623;}
.yk-ab5 .yk-ab5-intro{color:rgba(255,255,255,.85);font-size:14px;line-height:2.1;text-align:justify;}
.yk-ab5 .yk-ab5-more{margin-top:28px;}
.yk-ab5 .yk-ab5-more a{display:inline-block;padding:10px 34px;border:1px solid rgba(255,255,255,.7);color:#fff;border-radius:3px;font-size:14px;letter-spacing:2px;transition:all .25s;}
.yk-ab5 .yk-ab5-more a:hover{background:#f5a623;border-color:#f5a623;color:#1a2433;}
@media (max-width:1199px){
  .yk-ab5 .yk-ab5-body{padding:44px 44px;}
  .yk-ab5 .yk-ab5-bg{min-height:330px;}
}
@media (max-width:767px){
  .yk-ab5 .yk-ab5-bg{min-height:0;border-radius:8px;}
  .yk-ab5 .yk-ab5-body{padding:34px 22px;}
  .yk-ab5 .yk-ab5-intro{font-size:13px;line-height:1.9;}
}
</style>
<div class="yk-ab5">
<div class="yk-wrap">
  <div class="yk-ab5-bg"<?php if ($ab5_img !== '') { ?> style="background-image:url('<?php echo e($ab5_img); ?>');background-size:contain;background-color:#16222a"<?php } ?>>
    <div class="yk-ab5-body">
      <?php echo block_title_html($ab5_tt, $ab5_ts, $ab5_tc); ?>
      <?php if ($ab5_intro !== '') { ?><div class="yk-ab5-intro"><?php echo nl2br(e($ab5_intro)); ?></div><?php } ?>
      <div class="yk-ab5-more"><a href="<?php echo e($ab5_url); ?>">查看更多 &rarr;</a></div>
    </div>
  </div>
</div>
</div>
