yunzer/app/index/view/component/header.php

<div style="display: flex;flex-direction: column;">
    <div class="topbar-one">
        <div class="container">
            <div style="width: 70%;">
                <ul class="list-unstyled topbar-one__info">
                    <li class="topbar-one__info__item"><span class="topbar-one__info__icon fas fa-phone-alt"></span><a
                            href="tel:629-555-0129">(629) 555-0129</a></li>
                    <li class="topbar-one__info__item"><span class="topbar-one__info__icon fas fa-envelope"></span><a
                            href="mailto:info@example.com">info@example.com</a></li>
                </ul>
            </div>
            <div class="topbar-one__social" style="width: 30%;">
                <a href="https://facebook.com"><i class="fab fa-facebook-f"></i></a>
                <a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
                <a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
                <a href="https://www.youtube.com/"><i class="fab fa-linkedin"></i></a>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="main-menu">
        <div class="container">
            <div class="main-menu__logo">
                <a href="index.html"><img src="__IMAGES__/logo.png" width="186" alt="Logo"></a>
            </div>
            <div class="main-menu__nav">
                <ul class="main-menu__list">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="products.html">产品服务</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <div class="main-menu__right">
                <a href="#" class="main-menu__search"><i class="layui-icon layui-icon-search"></i></a>
                <a href="login.html" class="main-menu__login"><i class="layui-icon layui-icon-username"></i></a>
            </div>
        </div>
    </div>
    <div class="main-header">
        <!-- Banner轮播 -->
        <div class="layui-carousel" id="test10" lay-filter="test10">
            <div carousel-item="">
                <div>
                    <div class="banner-content">
                        <span class="banner-title">智能科技 引领未来</span>
                        <span class="banner-desc">打造智能化解决方案，助力企业数字化转型,打造智能化解决方案，助力企业数字化转型,打造智能化解决方案，助力企业数字化转型</span>
                        <a href="#" class="btn btn-primary" style="margin-top: 20px;width:150px">了解更多</a>
                    </div>
                    <a href="#" class="banner-slide">
                        <img src="__IMAGES__/banner/banner1.jpg" alt="Banner 1">
                    </a>
                </div>
                <div>
                    <div class="banner-content">
                        <span class="banner-title">创新技术 卓越服务</span>
                        <spanp class="banner-desc">以创新科技为核心，为客户提供优质服务</spanp>
                    </div>
                    <a href="#" class="banner-slide">
                        <img src="__IMAGES__/banner/banner2.jpg" alt="Banner 2">
                    </a>
                </div>
                <div>
                    <div class="banner-content">
                        <span class="banner-title">专业团队 值得信赖</span>
                        <spanp class="banner-desc">资深专家团队，为您提供专业的技术支持</spanp>
                    </div>
                    <a href="#" class="banner-slide">
                        <img src="__IMAGES__/banner/banner3.jpg" alt="Banner 3">
                    </a>
                </div>
                <div>
                    <div class="banner-content">
                        <span class="banner-title">全球视野 本地服务</span>
                        <span class="banner-desc">立足本地，放眼全球，打造国际化服务</span>
                    </div>
                    <a href="#" class="banner-slide">
                        <img src="__IMAGES__/banner/banner4.jpg" alt="Banner 4">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 固定导航 -->
<div class="sticky-nav" style="display: none;">
    <div class="container">
        <div class="sticky-nav__logo">
            <a href="index.html"><img src="__IMAGES__/logo.png" width="150" alt="Logo"></a>
        </div>
        <div class="sticky-nav__menu">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="products.html">产品服务</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
        <div class="sticky-nav__right">
            <a href="#" class="main-menu__search"><i class="layui-icon layui-icon-search"></i></a>
            <a href="login.html" class="main-menu__login"><i class="layui-icon layui-icon-username"></i></a>
        </div>
    </div>
</div>

<script>
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '100%'
    ,height: '86vh'
    ,interval: 4000
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //监听开关
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  // 监听滚动事件
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 150) { // 当滚动超过150px时显示固定导航
      $('.sticky-nav').fadeIn();
    } else {
      $('.sticky-nav').fadeOut();
    }
  });
});
</script>