<?php
// about_2.html 关于我们模块·样式2：右图左文，带装饰色块（无图时文字通栏）
// 可用变量：$title_text $title_style $title_color（block_title_html 输出标题）
//          $about 数组：name 单页名 / image 形象图URL(可空) / intro 简介纯文本 / url 查看更多链接
$ab2       = isset($about) && is_array($about) ? $about : array();
$ab2_name  = isset($ab2['name']) ? $ab2['name'] : '';
$ab2_img   = isset($ab2['image']) ? trim($ab2['image']) : '';
$ab2_intro = isset($ab2['intro']) ? $ab2['intro'] : '';
$ab2_url   = isset($ab2['url']) && $ab2['url'] !== '' ? $ab2['url'] : '#';
$ab2_tt    = isset($title_text) && $title_text !== '' ? $title_text : $ab2_name;
$ab2_ts    = isset($title_style) ? (int)$title_style : 1;
$ab2_tc    = isset($title_color) ? $title_color : '';
?>
<style>
.yk-ab2{margin-bottom:20px;}
.yk-ab2 .yk-ab2-box{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden;display:flex;align-items:center;}
.yk-ab2 .yk-ab2-body{flex:1;min-width:0;padding:48px 30px 48px 52px;position:relative;}
.yk-ab2 .yk-ab2-body::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:76px;border-radius:4px;background:linear-gradient(180deg,#1a5fb4,#5f9de0);}
.yk-ab2 .yk-ab2-body .yk-tt{margin:0 0 18px;}
.yk-ab2 .yk-ab2-intro{color:#666;font-size:14px;line-height:2;text-align:justify;}
.yk-ab2 .yk-ab2-more{margin-top:26px;}
.yk-ab2 .yk-ab2-more a{display:inline-block;padding:9px 32px;background:#1a5fb4;color:#fff;border-radius:4px;font-size:14px;transition:all .25s;box-shadow:0 4px 12px rgba(26,95,180,.25);}
.yk-ab2 .yk-ab2-more a:hover{background:#14497f;}
.yk-ab2 .yk-ab2-img{flex:none;width:42%;position:relative;padding:26px 26px 26px 0;}
.yk-ab2 .yk-ab2-img::after{content:"";position:absolute;right:0;top:0;width:66%;height:100%;background:linear-gradient(160deg,#eaf1fb,#dbe7f7);border-radius:8px 0 0 8px;z-index:0;}
.yk-ab2 .yk-ab2-img img{position:relative;z-index:1;width:100%;height:340px;object-fit:contain;background:#f4f7fb;border-radius:8px;box-shadow:0 10px 30px rgba(26,95,180,.18);}
@media (max-width:1199px){
  .yk-ab2 .yk-ab2-body{padding:38px 24px 38px 42px;}
  .yk-ab2 .yk-ab2-img img{height:290px;}
}
@media (max-width:767px){
  .yk-ab2 .yk-ab2-box{flex-direction:column-reverse;}
  .yk-ab2 .yk-ab2-img{width:100%;padding:0 18px;}
  .yk-ab2 .yk-ab2-img::after{border-radius:8px;top:14px;height:calc(100% - 14px);width:calc(100% - 18px);}
  .yk-ab2 .yk-ab2-img img{height:210px;}
  .yk-ab2 .yk-ab2-body{padding:26px 24px 30px 34px;}
  .yk-ab2 .yk-ab2-body::before{left:14px;height:56px;}
}
</style>
<div class="yk-ab2">
<div class="yk-wrap">
  <div class="yk-ab2-box">
    <div class="yk-ab2-body">
      <?php echo block_title_html($ab2_tt, $ab2_ts, $ab2_tc); ?>
      <?php if ($ab2_intro !== '') { ?><div class="yk-ab2-intro"><?php echo nl2br(e($ab2_intro)); ?></div><?php } ?>
      <div class="yk-ab2-more"><a href="<?php echo e($ab2_url); ?>">查看更多 &rarr;</a></div>
    </div>
    <?php if ($ab2_img !== '') { ?>
    <div class="yk-ab2-img"><img src="<?php echo e($ab2_img); ?>" alt="<?php echo e($ab2_name); ?>"></div>
    <?php } ?>
  </div>
</div>
</div>
