<?php
// float_2.html 客服浮动条·样式2：右侧圆角胶囊竖排（图标+文字）
// 可用变量：$kefu 数组：phone 电话号码（tel: 外链）/ wechat 微信二维码图URL（可空，空则不显示微信项）
$kf2       = isset($kefu) && is_array($kefu) ? $kefu : array();
$kf2_phone = isset($kf2['phone']) ? trim($kf2['phone']) : '';
$kf2_wx    = isset($kf2['wechat']) ? trim($kf2['wechat']) : '';
if ($kf2_phone === '' && $kf2_wx === '') { return; }
?>
<style>
.yk-kf2{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;}
.yk-kf2 .yk-kf2-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:12px 4px 10px;background:linear-gradient(160deg,#0f766e,#14b8a6);color:#fff;border-radius:34px;box-shadow:0 6px 16px rgba(15,118,110,.35);cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.yk-kf2 .yk-kf2-item:hover{transform:translateX(-4px);box-shadow:0 10px 22px rgba(15,118,110,.45);}
.yk-kf2 .yk-kf2-ico{font-size:20px;line-height:1;}
.yk-kf2 .yk-kf2-txt{font-size:11px;letter-spacing:1px;}
.yk-kf2 .yk-kf2-pop{position:absolute;right:74px;top:50%;transform:translateY(-50%);background:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.2);padding:14px 18px;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;transition:all .25s;}
.yk-kf2 .yk-kf2-item:hover .yk-kf2-pop{opacity:1;visibility:visible;right:78px;}
.yk-kf2 .yk-kf2-pop::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:none;border-left-color:#fff;}
.yk-kf2 .yk-kf2-tel{font-size:17px;font-weight:700;color:#0f766e;text-decoration:none;}
.yk-kf2 .yk-kf2-pop small{display:block;font-size:11px;color:#999;margin-top:3px;}
.yk-kf2 .yk-kf2-qr img{width:166px;height:166px;aspect-ratio:1/1;display:block;border-radius:6px;object-fit:contain;background:#fff;}
.yk-kf2 .yk-kf2-qr small{margin-top:8px;}
@media (max-width:767px){
  .yk-kf2{right:8px;gap:8px;}
  .yk-kf2 .yk-kf2-item{width:52px;padding:9px 4px 8px;}
  .yk-kf2 .yk-kf2-ico{font-size:17px;}
  .yk-kf2 .yk-kf2-txt{font-size:10px;}
  .yk-kf2 .yk-kf2-qr img{width:130px;height:130px;aspect-ratio:1/1;object-fit:contain;background:#fff;}
}
</style>
<div class="yk-kf2">
  <?php if ($kf2_phone !== '') { ?>
  <a class="yk-kf2-item" href="tel:<?php echo e($kf2_phone); ?>">
    <span class="yk-kf2-ico">&#9742;</span>
    <span class="yk-kf2-txt">电话</span>
    <span class="yk-kf2-pop"><span class="yk-kf2-tel"><?php echo e($kf2_phone); ?></span><small>点击拨打咨询热线</small></span>
  </a>
  <?php } ?>
  <?php if ($kf2_wx !== '') { ?>
  <div class="yk-kf2-item">
    <span class="yk-kf2-ico">&#9993;</span>
    <span class="yk-kf2-txt">微信</span>
    <span class="yk-kf2-pop yk-kf2-qr"><img src="<?php echo e($kf2_wx); ?>" alt="微信二维码"><small>扫码添加微信客服</small></span>
  </div>
  <?php } ?>
</div>
