crm/app/empcrm/view/index/header.html

<!-- 头部区域 -->

<style type="text/css">
  .clearfix::after {
    clear: both;
  }

  .clearfix::before,
  .clearfix::after {
    content: ' ';
    display: table;
  }

  .left {
    float: left;
  }

  .right {
    float: right;
  }

  .layui-layout-admin .layui-header {
    display: block;
    width: 100%;
    background-color: #36622b;
    border: none;
    height: 38px;
    color: #FFF !important;
    position: fixed;
    top: 0;
    left: 0;
  }

  .layui-layout-admin .layui-logo {
    display: block;
    height: 38px;
    width: 114px;
    line-height: 38px;
    color: #FFF;
  }

  .layui-layout-admin .loginbox {
    display: block;
    height: 38px;
    line-height: 38px;
    color: #FFF;
  }

  .layui-layout-admin .loginbox .layui-nav-item {
    white-space: nowrap;
    display: inline-block;
    height: 38px !important;
    line-height: 38px !important;
    color: #FFF;
  }

  .layui-layout-admin .layui-header a,
  .layui-layout-admin .layui-header a cite {
    color: #FFF;
  }

  .layui-layout-admin .layui-header .layui-nav .layui-nav-more {
    border-top-color: #FFF;
    display: none;
  }

  .layuicenter {
    display: block;
    margin-left: 114px;
    margin-right: 280px;
    color: #FFF !important;
    padding: 0 10px;
    height: 38px;
    line-height: 38px;
    overflow: auto;
    overflow-y: hidden;
  }

  /* 1,滚动条 */
  .layuicenter::-webkit-scrollbar {
    height: 8px;
    /* 横向滚动条 高度 */
  }

  /* 4.内层轨道，它会覆盖外层轨道的样式。 */
  .layuicenter::-webkit-scrollbar-track-piece {
    width: 8px;
  }

  /* 5,滑块 */
  .layuicenter::-webkit-scrollbar-thumb {
    background: #bec5ca;
  }

  /* 横向滑块悬浮 */
  .layuicenter::-webkit-scrollbar-thumb:horizontal:hover {
    background: #bec5ca;
  }

  .layuicenter .layui-nav-item {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    color: #FFF !important;
    height: 38px !important;
    line-height: 38px !important;
  }

  .layui-layout-admin .layui-header .everytopnav {
    float: left;
    width: 80px;
    min-width: unset;
    text-align: center;
    border-right: 1px solid #FFF;
  }

  .layui-nav .layui-nav-item a {
    display: block;
    padding: 0;
    width: 80px;
    height: 38px;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -moz-outline-style: none;
  }

  .layui-nav .layui-nav-item a:hover {
    background-color: #3ea400;
    color: #FFF;
  }

  .layui-nav .layui-nav-item div.nowclass {
    background-color: #3ea400;
    color: #FFF;
  }

  .logout {
    text-align: right;
    line-height: 38px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .logout strong {
    font-weight: normal;
    padding-right: 5px;
  }

  .logout span {
    cursor: pointer;
    padding-right: 8px;
  }
  .ddaaalink {
    box-sizing: border-box;
    padding: 0px 5px;
    cursor: pointer;
  }
  .ddaaalink > a {
    width: 100% !important;
    text-align: left;
  }
  .layui-nav-bar {
    width: 0px !important;
    display: none !important;
  }
</style>
<div class="layui-header ">
  <div class="layui-logo left" lay-href="{:url('index/welcome')}" style="background-color: transparent !important;">
    <span class="headlogo1">{if $empdata.is_manager}管理层{else/}员工{/if}</span>
  </div>
  <ul class="layui-nav layuicenter" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
    <li data-name="train" class="layui-nav-item">
      {volist name="menu" id="vo"}
      <div class="everytopnav"><a lay-href="{:url($vo.url)}">{$vo.name}</a></div>
      {/volist}
    </li>
  </ul>


  <div class="logout">
    <ul class="layui-nav layui-layout-right" style="display:flex;align-items: center;width:270px;" lay-filter="layadmin-layout-right">
		{notempty name="shop"}
		
		{else/}
		<div style="width:100px;"></div>
		
		{/notempty}
      {notempty name="switch_type"}
      <a href="javascript:;" style="margin-right: 10px;">
        <cite id="switch_type" data-type="{$switch_type}"> <img style="vertical-align:-3%;" src="__STATIC__/img/switchico.png" alt="">切换{if $switch_type == 1}PC{else/}社群{/if}端</cite>
      </a>
      {else/}
      <div style="width: 80px;"></div>
      {/notempty}
	  
      {notempty name="shop"}
      <li class="layui-nav-item" style="height:38px;width: 80px;margin-right: 10px;" lay-unselect>
        <a href="javascript:;">
          <cite id="" style="position: relative;top:-5px;"> <img style="vertical-align:-3%;" src="__STATIC__/img/switchico.png" alt=""> 切换店面</cite>
        </a>
        
          <dl class="layui-nav-child layui-nav-childorder scrollset" style="width:160px !important;overflow-y: auto;left: none;height: 300px;">
              {volist name="shop" id="vo"}
                  <dd class="ddStyle ddaaalink" onclick='switch_shop({$vo.root_id},{$vo.employee_id})'>
                      {if condition="$vo.logo"}
                          <img class="leftlinecloseimgbox pointer" src="{$vo.logo}" style="width: 20px;height:20px;float: left; margin-top: 6px;margin-right: 8px;"/>
                      {else/}
                          <img class="leftlinecloseimgbox pointer" src="__STATIC__/img/companyico.png" style="width: 20px;height:20px;float: left; margin-top: 6px;margin-right: 8px;"/>
                      {/if}
                      <a>{$vo.company_name}</a>
                  </dd>
              {/volist}
          </dl>
        
      </li>
      
    {/notempty}
    <span style="margin-left: 5px;" id="openFrame" onclick="openFrame()" title="打开右侧导航菜单">导航</span>
    <strong><a class="exitbtn" href='{:url("index/logout")}' target="_top" title="安全的退出系统，建议使用">退出</a></strong>
  </ul>
  </div>
</div>
<script>
  for (var i = 0; i < $('.everytopnav').length; i++) {
    $('.everytopnav')[i].index = i;
    $($('.everytopnav')[i]).click(function () {
      let index = this.index;
      for (var j = 0; j < $('.everytopnav').length; j++) {
        $('.everytopnav')[j].classList.remove('nowclass');
      }
      $('.everytopnav')[index].classList.add('nowclass');

      let len = $('.layadmin-tabsbody-item');
      for (let i = 0; i < len.length; i++) {
        let str = $($('.layadmin-tabsbody-item')[i]).children('iframe')[0].src;
        if (str.indexOf('?') > -1) {
          $($('.layadmin-tabsbody-item')[i]).remove();
        }
      }
      this.click();
    })
  }
  
  let divEle = document.getElementById('LAY-system-side-menu');
  divEle.addEventListener("wheel", function (e) {
    //这里使用的是 chrom浏览器测试的,有一些Api不太准确 ,请大家注意!!!!
    let left = -e.wheelDelta || e.deltaY / 2;
    divEle.scrollLeft = divEle.scrollLeft + left;
  });

  $(function () {
    $(document).bind("contextmenu", function () { return false; }); $(document).bind("selectstart", function () { return false; }); $(document).keydown(function () { return key(arguments[0]) }); $("div.headnav ul li").click(function () {
      $(this).addClass("navOverClass").siblings("li").removeClass("navOverClass");
    });
  });
  function openFrame() {
    var atxt = document.getElementById("openFrame");
    if (atxt.innerHTML == "导航") {
      atxt.innerHTML = "隐藏";
      atxt.title = "关闭右侧导航菜单";
      openleftfun();
    } else {
      atxt.innerHTML = "导航";
      atxt.title = "打开右侧导航菜单";
      closeleftfun();
    }
  }
  $("#switch_type").click(function(){
    let type = $(this).prop("dataset").type;
    let employee_id = '{$empdata.id}';
    $.ajax({
      url: '{:url("index/switch_model")}',
      type: 'post',
      data: {type:type,employee_id:employee_id},
      dataType: 'json',
      success: function(res) {
        if(res.code === 0) {
          layer.msg(res.msg, {
            anim: 0
            ,time: 1000
          }, function() {
            location.reload();
          });
        }else if(res.code == 403){
			$(".exitbtn").trigger("click");
		} else {
          layer.msg(res.msg, {
            anim: 6
            ,time: 2000
          });
        }
      }
    });
  })
  function switch_shop (root_id,employee_id) {
    $.ajax({
      url: '{:url("index/switch_shop")}',
      type: 'post',
      data: {rootid:root_id,employee_id:employee_id},
      dataType: 'json',
      success: function(res) {
        if(res.code === 0) {
          layer.msg(res.msg, {
            anim: 0
            ,time: 1000
          }, function() {
            location.reload();
          });
        }else if(res.code == 403){
			$(".exitbtn").trigger("click");
		} else {
          layer.msg(res.msg, {
            anim: 6
            ,time: 2000
          });
        }
      }
    });
  }
</script>