<?php
// page_8.html 发展历程风：左侧竖向装饰线 + 正文（时间轴氛围边框）
$pg8_name    = isset($page['name']) ? $page['name'] : '发展历程';
$pg8_content = isset($page['content']) ? $page['content'] : '';
$pg8_company = site_config('company_name', '炎酷CMS');
?>
<style>
.yk-page8{background:linear-gradient(180deg,#f7f9fc 0%,#eef2f7 100%);padding:56px 0 70px}
.yk-pg8-head{max-width:1000px;margin:0 auto 40px;padding:0 24px}
.yk-pg8-head h1{margin:0;font-size:30px;color:#1d3557;font-weight:700}
.yk-pg8-head .yk-pg8-sub{margin:10px 0 0;font-size:13px;color:#7b8ba0;letter-spacing:1px}
.yk-pg8-wrap{max-width:1000px;margin:0 auto;padding:0 24px;display:flex;gap:34px}
.yk-pg8-rail{flex:0 0 26px;position:relative}
.yk-pg8-rail:before{content:"";position:absolute;left:12px;top:6px;bottom:6px;width:3px;border-radius:2px;background:linear-gradient(180deg,#1d3557 0%,#457b9d 70%,#a8c3d8 100%)}
.yk-pg8-rail i{position:absolute;left:5px;width:17px;height:17px;border-radius:50%;background:#fff;border:4px solid #457b9d;box-sizing:border-box}
.yk-pg8-rail .yk-pg8-dot1{top:0}
.yk-pg8-rail .yk-pg8-dot2{top:46%;border-color:#6d97b5}
.yk-pg8-rail .yk-pg8-dot3{bottom:0;border-color:#a8c3d8}
.yk-pg8-main{flex:1;min-width:0;background:#fff;border:1px solid #dfe7ef;border-left:5px solid #457b9d;border-radius:6px;padding:44px 48px;font-size:15px;line-height:2;color:#3f4c5c;box-shadow:0 4px 16px rgba(29,53,87,.05)}
.yk-pg8-main img{max-width:100%;height:auto}
.yk-pg8-main h2,.yk-pg8-main h3{color:#1d3557;margin:1.2em 0 .6em}
.yk-pg8-main p{margin:0 0 1em}
.yk-pg8-main strong{color:#1d3557}
.yk-pg8-foot{max-width:1000px;margin:28px auto 0;padding:0 24px 0 84px;font-size:13px;color:#8fa0b3;letter-spacing:1px}
@media (max-width:1199px){
  .yk-pg8-main{padding:36px 34px}
  .yk-pg8-foot{padding-left:84px}
}
@media (max-width:767px){
  .yk-page8{padding:36px 0 48px}
  .yk-pg8-head{padding:0 14px}
  .yk-pg8-head h1{font-size:23px}
  .yk-pg8-wrap{padding:0 14px;gap:16px}
  .yk-pg8-rail{flex:0 0 16px}
  .yk-pg8-rail:before{left:7px}
  .yk-pg8-rail i{left:1px;width:13px;height:13px;border-width:3px}
  .yk-pg8-main{padding:24px 18px;font-size:14px;line-height:1.9}
  .yk-pg8-foot{padding:0 14px 0 44px}
}
</style>
<div class="yk-page8">
  <div class="yk-pg8-head">
    <h1><?php echo e($pg8_name); ?></h1>
    <p class="yk-pg8-sub"><?php echo e($pg8_company); ?> · 一步一个脚印，见证每一次跨越</p>
  </div>
  <div class="yk-pg8-wrap">
    <div class="yk-pg8-rail"><i class="yk-pg8-dot1"></i><i class="yk-pg8-dot2"></i><i class="yk-pg8-dot3"></i></div>
    <article class="yk-pg8-main">
      <?php echo $pg8_content; ?>
    </article>
  </div>
  <div class="yk-pg8-foot">过去铸就现在，奋斗成就未来。</div>
</div>
