@primary-color: rgba(20,146,255,1); // 全局主色
@primary-color-bg: rgba(20,146,255,.15);
@primary-color-light: rgba(20,146,255,.7);
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: #000; // 标题色
@text-color: #333; // 主文本色
@text-color-secondary: #666; // 次文本色
@disabled-color: #999; // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影


@head-bg-color: #fff;
@head-font-color: #fff;
@head-font-hover-color:#fff;
@nav-bg-color:#f0f2f5;
@head-bg-left: @primary-color;
@head-bg-right: @primary-color;
@head-bg-top: @primary-color;
@head-bg-bottom: @primary-color;
@head-left-width: auto;
@head-right-width: 300px;



@aside-bg-color:#fff;
@aside-font-hover-color:#fff;
@aside-font-size:16px;

@button-delete-color:#e94d4d;
@button-edit-color:#e94d4d;
@button-disable-color:#e94d4d;

@button-red-color:#E94D4D;
@button-yellow-color:#E67926;
@button-blue-color:#606C88;
@button-green-color:#1EB272;


// indexVersion3新增变量
@head-height: 64px;
@head-title-font-size: 32px;
@head-newbg-color:linear-gradient( 90deg, #021239 0%, #002F73 50%, #1469E7 100%);
@head-color-text: #E8F9FF;
@head-text-font-size:18px;
@head-icon-color:#869dc3;
@head-menu-active-bg:#0048D9;
@head-system-change-font-size:14px;


@aside-text-color:#666;
@aside-icon-color:#333;
@aside-width:272px;
@aside-itemed-bg-color:rgba(0,72,217,0.05);
@aside-border-color:#ececec;
@nav-tool-txt-color:#80CCFF;
@aside-fold-shadow-color:#ccc;
@useFontSize:16px;

body.IndexVersion2{
  /* css/pages/index/01_layout-home.css */
  /*主色*/
  /*header部分*/
  header.layout-home {
    z-index: 5;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  }

  header.layout-home, .layout-home > nav .layui-nav {
    background-color: @head-bg-color;
    color: @head-font-color;
  }

  .layout-home > nav .layui-nav {
    background-color: @head-bg-color;
  }

  section.layout-home-main > div.layui-tab > .layui-tab-title > li > i {
    top: @font-size-base;
  }

  header.layout-home div[data-bind="nav"] {
    background: @nav-bg-color;
    color: @head-font-color;
    border-right: 1px solid hsla(0, 0%, 100%, .15);
  }

  header.layout-home div[data-bind="nav"].layout-home-nav-all-hover{
    background-color: @primary-color;
    color: @head-font-hover-color;
  }
  header.layout-home > .layout-home-logo:before {
    color: @primary-color;
  }

  header.layout-home > .layout-home-nav-all:hover {
    background-color: @nav-bg-color;
    color: @primary-color;
  }

  .layout-home > nav .layui-nav .layui-nav-item:hover {
    background-color: rgba(256,256,256,.3)!important;
    color: @head-font-hover-color;
  }

  header.layout-home > .layout-home-nav-aside:hover {
    background-color: @nav-bg-color;
    color: @primary-color;
  }

  header.layout-home > .layout-home-nav-hover {
    background-color: @nav-bg-color;
    color: @primary-color;
  }

  .layout-home nav a.fullScreen {
    color: @head-font-color;
    background-color: transparent;
  }

  .layout-home nav a.fullScreen:hover {
    color: @head-font-hover-color;
    background: rgba(256,256,256,.15);
  }

  .layout-home > nav .layui-nav .layui-nav-item > a {
    color: @head-font-color;

  }

  .layout-home > nav .layui-nav .layui-nav-item:hover > a {
    background-color: transparent!important;
    color: @head-font-hover-color;

  }

  section.layout-home > aside.layout-home-aside {
    background-color: @nav-bg-color;
  }

  header.layout-home .layui-nav .layui-nav-more {
    border-top-color: @head-font-color;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }

  .layui-nav, .layui-nav-tree .layui-nav-title a, .layui-nav-tree .layui-nav-title a:hover, .layui-nav-itemed > a.layui-this {
    color: @aside-font-hover-color !important;
  }

  .layui-nav, .layui-nav-tree .layui-nav-title a, .layui-nav-tree .layui-nav-title a:hover, .layui-nav-itemed > a {
    color: @text-color !important;
  }

  .layout-home > nav .layui-nav li.layui-nav-item.userInfo a > span.layui-nav-more.layui-nav-mored {
    border-bottom-color: #fff;
    border-top: none;
    top: 60%;
  }
  .layui-nav-item > a .layui-nav-more{
    border-top-color: #bbb;
  }
  .layui-nav-itemed > a .layui-nav-more {
    border-bottom-color: #bbb;
    border-top-color: transparent;
  }


  section.layout-home-main {
    background-color: @aside-bg-color;
  }

  section.layout-home > aside.layout-home-aside .layui-nav-tree .layui-nav-item {
    background-color: @nav-bg-color;
  }

  section.layout-home > aside.layout-home-aside .layui-nav-tree .layui-nav-item dl {
    background-color: @aside-bg-color !important;
    padding-left: 0;
  }

  section.layout-home .layui-nav-bar,
  section.layout-home .layui-nav .layui-this:after,
  section.layout-home .layui-nav-tree .layui-nav-itemed:after {
    background-color: @primary-color;
  }

  section.layout-home > aside.layout-home-aside > .layout-home-system {
    background-color: #fafafa;
    color: @text-color;
    /*border-bottom: 1px solid @nav-bg-color;*/
    box-sizing: border-box;
    font-weight: bold;
    font-size: @font-size-base;
  }

  section.layout-home > aside.layout-home-aside > .layui-nav-tree .layui-nav-item a:hover {
    background-color: @primary-color;
    color: @nav-bg-color !important;
  }

  section.layout-home > aside.layout-home-aside a {
    color: @text-color;
  }

  section.layout-home > aside.layout-home-aside > .layui-nav-tree .layui-this {
    background-color: @primary-color;
    color: @nav-bg-color
  }

  section.layout-home > aside.layout-home-aside > .layui-nav-tree .layui-nav-bar {
    background-color: @primary-color;
    color: @nav-bg-color
  }

  header.layout-home > .layout-home-nav-all-hover {
    background-color: @primary-color;
    color: @nav-bg-color
  }

  .layout-home-navigate .pop-nav-system-hover {
    color: @primary-color;
  }

  .layout-home-navigate a:hover {
    color: @primary-color;
  }

  section.layout-home-main p.nav, section.layout-home-main > div.layui-tab > .layui-tab-title {
    background-color: #fff;
    color: @primary-color;
    border-bottom: 1px solid @nav-bg-color;
    box-sizing: border-box;
    line-height: 45px;
    height: 46px;
  }

  section.layout-home-main > div.layui-tab > .layui-tab-title > li {
    background-color: #fff;
    color: @text-color;
    height: 45px;
    line-height: 45px;
  }

  section.layout-home-main > div.layui-tab > .layui-tab-title > .layui-this {
    background-color: @primary-color;
    color: #fff;
  }

  section.layout-home .layui-tab-title li .layui-tab-close {
    color: @text-color;
  }

  section.layout-home .layui-tab-title li .layui-tab-close:hover {
    background-color: #FF5722;
    color: #fff;
  }

  section.layout-home .layui-tab-title li.layui-this .layui-tab-close {
    color: #fff;
  }

  section.layout-home .layui-tab-title li.layui-this .layui-tab-close:hover {
    background-color: #FF5722;
    color: #fff;
  }

  section.layout-home-main a.tabClose.open {
    color: #fff;
    background-color: @primary-color;
  }

  .layui-nav-child dd.layui-this {
    background-color: @primary-color !important;
  }

  .layui-nav-child dd a {
    text-align: center !important;
  }

  .layui-nav-tree .layui-this,
  .layui-nav-tree .layui-this > a,
  .layui-nav-tree .layui-this > a:hover,
  .layui-nav-tree .layui-nav-child dd.layui-this,
  .layui-nav-tree .layui-nav-child dd.layui-this a {
    background-color: @primary-color!important;
    color:@aside-font-hover-color!important;
  }

  section.layout-home-main a.tabClose {
    color: #606c88;
    background-color: #fff;
  }

  section.layout-home-main p.nav a {
    color: #606c88;
    background-color: #fff;
    line-height: 46px;
  }

  section.layout-home-main a.tabClose:hover,
  section.layout-home-main p.nav a:hover,
  section.layout-home-main p.nav a:hover {
    color: #fff;
    background-color: @primary-color;
  }


  /*导航栏部分*/
  .layout-home-navigate label {
    border-left-color: @primary-color;
  }

  /*button*/
  button {
    background-color: @primary-color;
    border-color: @primary-color;
    color:#fff;
  }

  button.plain {
    border-color: @primary-color;
    color: @primary-color;
    background-color: #fff;
  }
  button.edit{
    border-color:#6D8ACC;
    background-color: #6D8ACC;
  }
  /*保存*/
  button.save{
    border-color:#1EB272;
    background-color:#1EB272;
  }
  /*删除*/
  button.delete{
    border-color:#E94D4D;
    background-color:#E94D4D;
  }
  /*填充样式*/
  button.yellow-full,button.yellow-full:active{
    border-color:#E67926;
    background-color:#E67926;
  }

  /*不填充样式*/
  button.yellow,button.yellow:active{
    border-color: #E67926;
    background-color: #fff;
    color: #E67926;
  }
  button.green,button.green:active{
    border-color: #1EB272;
    background-color: #fff;
    color: #1EB272;
  }
  button.red,button.red:active{
    border-color: #E94D4D;
    background-color: #fff;
    color: #E94D4D;
  }
  button.blue,button.blue:active{
    border-color: @head-font-color;
    background-color: #fff;
    color: @head-font-color;
  }
  button.edit-empty,button.edit-empty:active{
    border-color: #6d8acc;
    background-color: #fff;
    color: #6d8acc;
  }

  /*table*/
  .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: @primary-color;
  }

  .layui-table-page .layui-laypage button {
    background-color: @primary-color !important;
    border-color: @primary-color;
  }

  .layout-grid-table .layui-table tr.layui-table-hover {
    background-color: @primary-color-bg;
  }

  .layout-nest-table .layui-table tr:hover {
    background-color: @primary-color-bg;
  }

  .layui-table-cell .layout-spread {
    color: @primary-color;
  }

  .layui-laypage a:hover {
    color: @primary-color;
  }

  .layui-laypage input:focus, .layui-laypage select:focus {
    border-color: @primary-color !important;
  }

  .layui-form-checked[lay-skin="primary"] i {
    border-color: @primary-color;
    background-color: @primary-color;
  }

  .layui-form-checkbox[lay-skin="primary"]:hover i {
    border-color: @primary-color;
  }

  /*splitBar*/
  .layout-split > .right:hover, .layout-split > .left:hover, .layout-split > .top:hover, .layout-split > .bottom:hover {
    background-color: @primary-color;
  }

  .layout-split-line {
    background-color: @primary-color;
  }

  /*tab*/
  .layout-tab > .layui-tab-title .layui-this {
    color: @primary-color;
  }

  .layout-tab span.layout-tab-bar.layout-hover > i.font_family,
  .layout-tab span.layout-tab-bar > dl > dd:active,
  .layout-tab span.layout-tab-bar > dl > dd.layout-click {
    color: @primary-color;
  }

  .layout-tab > .layui-tab-title .layui-this:after, .layout-tab > .layui-tab-more li.layui-this:after {
    border-bottom-color: @primary-color;
  }

  .layout-tab.tab-style-2 > ul.layui-tab-title li.layui-this {
    border-top-color: @primary-color;
  }

  .layout-tab.tab-style-3 > ul.layui-tab-title li.layui-this {
    background-color: @primary-color;
  }

  .layout-tab.tab-style-4 > ul.layui-tab-title li.layui-this:after {
    border-bottom-color: @primary-color;
  }

  .layout-tab > ul.layui-tab-title li > i.bpm-refresh:hover {
    color: @primary-color;
  }

  /*form*/
  .layout-form ul > li.item-line > label {
    color: @primary-color;
  }

  .layui-form-select dl dd.layui-this {
    background-color: @primary-color;
  }
  .layui-form-select.multi .select-label>span{
    border: 1px solid @primary-color;
    background-color: @primary-color;
  }

  /*bpm*/
  .bpm-toolbar .drop > a {
    color: @primary-color;
    border-color: @primary-color;
  }

  .bpm-toolbar .drop > dl {
    border-color: @primary-color;
  }

  .bpm-toolbar .drop > dl > dd {
    color: @primary-color;
  }

  .bpm-toolbar .drop > dl > dd > button {
    color: @primary-color;
    border-color: @primary-color;
  }

  .bpm-toolbar .drop > dl > dd:hover, .layout-toolbar .drop > dl > dd:active {
    background-color: @primary-color;
  }

  /*公用提示*/
  .layout-page-error {
    border-left-color: @primary-color!important;
    border-right-color: @primary-color!important;
  }

  /*page*/
  .layout-page div.layout-line > label {
    color: @primary-color;
  }

  /*collapse*/
  .layout-collapse .layui-colla-item.layout-this > .layui-colla-title {
    color: @primary-color;
  }

  /*更多条件查询*/

  .layui-form-onswitch {
    border-color: @primary-color;
    background-color: @primary-color;
  }

  .layout-panel-query .multi .select-label > span {
    background-color: @primary-color;
    border: 1px solid @primary-color;
  }

  .layout-float-query .multi .select-label > span {
    background-color: @primary-color;
    border: 1px solid @primary-color;
  }
  .layout-panel-query > ul > li.layout-showMore>button{
    color: @primary-color;
    background-color:@primary-color-bg;
  }
  /*form*/
  .layui-form-radioed > i, .layui-form-radio > i:hover {
    color: @primary-color;
  }
  /*日期选择器*/
  .layui-laydate .layui-this{
    background-color: @primary-color !important;
  }
  .laydate-day-mark::after {
    background-color: @primary-color-light;
  }
  .layui-laydate-header i:hover, .layui-laydate-header span:hover{
    color: @primary-color-light;
  }
  .layui-laydate-footer span:hover{
    color: @primary-color-light;
  }
  /*layout-title*/
  .layout-title{
    color: @primary-color;
    border-left-color: @primary-color;
  }
  /*辅色*/

  /*业务受理页面*/
  ul.layout-list>li.layout-hover-this{
    background:@primary-color;
  }
  ul.layout-list>li.layout-this{
    background:@primary-color!important;
  }
  ul.layout-list>li.layout-this>p{
    background:@primary-color!important;
  }
  ul.layout-list>li.layout-hover-this>p{
    background:@primary-color;
  }
  ul.layout-list>li>i.font_family{
    color:@primary-color;
  }
  ul.layout-list>li.layout-this>i.font_family{
    background:@primary-color!important;
  }
  ul.layout-list>li.layout-hover-this>i.font_family{
    background:@primary-color;
  }
  .layui-layer-btn .layui-layer-btn0 {
    border-color: @primary-color;
    background-color: @primary-color;
  }



  #IndexPage{
    div[data-bind="nav"] {
      height:60px;
      line-height: 60px;
      background: @primary-color;
      color: @head-font-color;
      border-right: 1px solid hsla(0, 0%, 100%, 0.15);
      line-height: 60px!important;

    }
    div[data-bind="nav"]:hover{
      background-color: @primary-color-light;
    }
    .layout-home-logo{

      .layout-home-system{
        color: @head-font-color;
        background: @head-bg-left;
        background-repeat: no-repeat;
        width:@head-left-width;
        div.systemList{
          p{
            color:@primary-color;
          }
          ul{
            li{
              color:@text-color;
            }
            li:hover,li.layout-this{
              background-color: @primary-color;
              color:@head-font-hover-color;
            }
          }
        }
      }
      .layout-home-system .isHover{
        span.name{
          color:@head-font-hover-color;
        }
        i{
          color:@head-font-hover-color;
        }


      }
      .foldList{
        background: @head-bg-bottom;
        background-repeat: no-repeat;
        background-size: 100% 38px;
        background-position: 0 21.5px;
        span:hover{
          color:@primary-color;
        }
        .fold-content{

          ul{
            li{

            }
            li.layout-this,li:hover{
              color:@head-font-hover-color;
            }
          }
        }
      }
      .foldList:before{
        background: @head-bg-top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }


    }
    nav {
      background: @head-bg-right;
      background-repeat:  no-repeat;
      width:@head-right-width;
      .layui-nav {
        background-color: transparent;
      }
    }
    section.layout-home>aside.layout-home-aside{
      background-color: @nav-bg-color;
      label{
        background: @nav-bg-color;
        color:@primary-color;
      }
      .layui-nav-tree .layui-nav-item {
        background-color: @nav-bg-color;
      }
      .layui-nav-tree .layui-nav-item.layui-this a{
        color:@aside-font-hover-color;
      }

    }
    section.layout-home-main>div.layui-tab>.layui-tab-title>li,
    section.layout-home .layui-tab-title li .layui-tab-close{
      background-color: #fff;
      color:#333;
    }
    section.layout-home-main>div.layui-tab>.layui-tab-title>.layui-this,
    section.layout-home .layui-tab-title li.layui-this .layui-tab-close{
      color:@primary-color;
    }
  }

}
//滑动模板样式
body.IndexVersion3{
  @primary-color: #0048D9;
  .layout-layer-confirm .layui-layer-title{
    display: none;
  }
  .layout-layer-confirm .layui-layer-content{
    min-height: 80px !important;
  }
  .layout-layer-confirm .layui-layer-btn{
    border-radius: 4px;
    background-color: @aside-bg-color;
  }
  #IndexPage{
    header.layout-home{
      height:@head-height;
      background:@head-newbg-color;
      position: relative;
      z-index: 9999;
      .layout-home-logo{
        //overflow: hidden;
        align-items: center;
        .split-line{
          width: 1px;
          height: 24px;
          margin: 0 12px 0 32px;
          background-color:@head-icon-color;
        }
        .foldList{
          overflow: hidden;
          //width: ;
          flex: 1;
          position: relative;
          display: flex;
          .pre,.next{
            height: 40px;
            line-height: 40px;
            white-space: nowrap;
            cursor: pointer;
            i{
              font-size: 16px;
              color:@head-icon-color;
            }
          }

          .fold-content{
            margin-left: 0;
            //overflow: auto;
            &::-webkit-scrollbar{
              width: 0;
              height: 0;
            }
            .swiper-wrapper{
              overflow: visible;
              .swiper-slide{
                width: auto;
                //height: 40px;
                //line-height: 40px;
                //padding:  0 16px;
                //white-space: nowrap;
                //display: flex;
                //align-items: center;
                //font-size: @head-text-font-size;
                //color: #E8F9FF;
                //margin-left: 32px;
                //cursor: pointer;

              }
            }

          }
        }
        .layout-home-system{
          cursor: pointer;
          position: relative;
          display: inline-block;
          display: inline-block;
          min-width: 335px;
          text-align: left;
          flex-shrink: 0;
          div.systemList{
            position: absolute;
            top: 42px;
            right: 0;
            z-index: 99999;
            border-radius: 4px 4px 4px 4px;
            box-shadow: 0px 7px 15px 0px rgba(3,11,69,0.1), 0px 28px 28px 0px rgba(3,11,69,0.09), 0px 62px 37px 0px rgba(3,11,69,0.05), 0px 111px 44px 0px rgba(3,11,69,0.01), 0px 173px 49px 0px rgba(3,11,69,0);
            background-color: #fff;
            min-width: 148px;
            p{
              color:@primary-color;
            }
            ul{
              padding: 2px;
              max-height: 600px;
              overflow: auto;
              li{
                color:@text-color;
                height: 40px;
                line-height: 40px;
                font-weight: 500;
                font-size: @head-text-font-size;
                color: #FFFFFF;
                text-align: left;
                padding: 0 16px;
                color:@text-color-secondary ;
                margin: 2px;
              }
              li:hover,li.layout-this{
                background-color: @head-menu-active-bg;
                color:@head-font-hover-color;
                border-radius: 4px;
              }
            }
          }
        }
        .name{
          font-size: @head-title-font-size;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          /* 设置背景为线性渐变，从上到下 */
          background: linear-gradient(to bottom, #ffffff 10%, #80ccff 100%);
          /* 将文字颜色设置为透明，以便背景可以透过文字显示 */
          color: transparent;
          /* 使用背景渐变填充文字 */
          background-clip: text;
          /* 为了兼容性，添加渐变背景的渐进渲染 */
          -webkit-background-clip: text;
          /* 使用no-repeat来确保背景不会被平铺 */
          background-repeat: no-repeat;
          -webkit-background-size: 100% 100%;
          /* 为了兼容性，添加no-repeat的渐进渲染 */
          -webkit-background-clip: text;
        }
        .system-change-icon{
          margin:0 10px;
          color: @head-icon-color;
          font-weight: 900;
          text-shadow: 0px 0px 10px #1A55E7;
          font-size: @head-system-change-font-size;
          position: relative;
          top: -4px;
          cursor: pointer;
        }

        .fold-content{
          height: 100%;
          margin-left: 0;
          ul{
            display: flex;
            align-items: center;
            height: 100%;
            overflow: hidden;
            li{
              width: auto;
              height: 40px;
              line-height: 40px;
              padding:  0 16px;
              white-space: nowrap;
              display: flex;
              align-items: center;
              font-size: @head-text-font-size;
              color: #E8F9FF;
              margin-left: 32px;
              margin-right: 20px;
              cursor: pointer;
              &:nth-of-type(1){
                margin-left: 10px;
              }
              &.layout-this{
                //background: linear-gradient( to bottom, #122962 60%, #4AA8E7 100%);
                background:url("./IndexVersion2/imgs/nav_bg.png")  no-repeat;
                background-size: 100% 100%;
                border-radius: 3px 3px 3px 3px;
                //border: 1px solid #89D8FC;
                color: #fff;
              }
            }
          }

        }
      }
      nav{
        // width: 216px;
        // flex-basis: 216px;
        min-width: auto !important;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 10px;
        box-sizing: border-box;
        .layui-nav{
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          background-color: transparent;
          .layui-nav-item{
            color: @head-color-text;
            &.message-box{
              margin-right: -10px;
              margin-left: 10px;
              a{
                .icon{
                  position: relative;
                  left: 0;
                  top: 0;
                  font-size:16px ;
                  margin: 0;

                }
                .layout-message-count{
                  right: -5px;
                  left: auto;
                }

              }
            }
            a{
              color: @head-color-text;
              i.font_family{
                font-size: 16px;
                left: -22px;
              }
            }
            &.userInfo {
              padding-left: 0;
              width: auto !important;
              max-width: 144px !important;
              text-align: left;
              span.userName{
                font-size: @useFontSize !important;
                max-width: 94px !important;
                width: auto !important;
                box-sizing: border-box;
                //text-shadow: 0px 0px 4px #80CCFF;
                background: linear-gradient(90deg, #fff 0%, #80CCFF 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .layui-nav-child dd.layui-this{
                background-color: #fff !important;
              }

            }
            .layui-nav-child{
              width: auto !important;
              min-width: 104px;
              top: 48px !important;
              top:@head-height ;
              border-radius: 4px;
              &.layui-anim-upbit{
                padding: 4px;
                border-radius: 4px;
              }
              dd{
                height: 32px;
                line-height: 32px;
                a:hover{
                  border-radius: 4px;
                  color: #fff !important;
                  background-color:@head-menu-active-bg !important;
                }
              }
              a{
                color: @text-color-secondary;
                font-size:@useFontSize;
                text-align: center !important;
                &:hover{
                  background-color: @head-menu-active-bg;
                  color:#fff ;
                }
              }
            }
          }
        }
        .layui-nav .layui-nav-item:hover{
          background-color: transparent;
          a{
            background-color: transparent;
          }
        }
        .layui-nav-bar{
          display: none !important;
          opacity: 0 !important;
        }
        .nav-tool{
          cursor: pointer;
          // padding: 0 10px;
          margin-left: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          &:first-child{
            margin-left: 9px;
          }
          img:nth-of-type(1){
            margin-right: 8px;
          }
          img:nth-of-type(2){
            margin-left: 8px;
          }
          a{
            display: inline-block;
            margin: 0;
            margin-right: 5px;
            padding: 0;
            font-size: 12px;
            &.icon-home{
              font-size: 16px;
            }
            &.icon-full{
              font-size: 14px;
            }
          }
          cite{
            font-size: @useFontSize !important;
            //text-shadow: 0px 0px 4px @nav-tool-txt-color;
            background: linear-gradient(90deg, @head-bg-color 0%,@nav-tool-txt-color 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-size: 14px;
            font-style: normal;
          }
        }
      }
      .layui-nav{
        .layui-nav-more{
          border-top-color: @head-color-text;
          right: 2px;
        }
      }
    }
    section.layout-home{
      #sideOpenLable{
        cursor: pointer;
        position: absolute;
        top: 70px;
        left: -20px;
        width: 40px;
        height: 40px;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        background: @aside-bg-color;
        box-shadow: 0 0 10px 1px #ccc;
        z-index: 9999999;
        &:hover{
          transform: translateX(25px);
          transition-duration: 0.5s;
          transition-timing-function: ease;
        }
      }
      height: calc(100% - @head-height);
      aside.layout-home-aside{
        background-color: @aside-bg-color !important;
        border-right: 1px solid @aside-border-color;
        width: @aside-width;
        .control-icon{
          height: 36px;
          line-height: 36px;
          text-align: center;
          color: @text-color-secondary;
          border-bottom: 1px solid #e6eaf3;
          &::before{
            cursor: pointer;
          }
        }
        .layui-nav-tree  {
          .layui-nav-bar{
            background-color: transparent;
          }
          .layui-nav-item {
            background-color: @aside-bg-color;
            &.layui-nav-itemed{
              a:hover{
                background-color: @aside-itemed-bg-color !important;
              }
            }
            a:hover{
              background-color: transparent !important;
              color: @primary-color !important;
              i{
                color: @primary-color;
              }
              cite{
                color: @primary-color;
              }
            }
            a {
              cite{
                font-size: @aside-font-size;
              }
            }
          }
          .layui-this{
            background-color: @aside-itemed-bg-color !important;
            border-right: 3px solid @primary-color;
            a{
              background-color: transparent !important;
              color: @primary-color;
            }
            //a:hover{
            //  i{
            //    color: @aside-font-hover-color;
            //  }
            //  cite{
            //    color: @aside-font-hover-color;
            //  }
            //}
            i{
              color: @primary-color;
            }
            cite{
              color: @primary-color;
            }
          }
        }
      }
    }
    section.layout-home-main{
      p.nav{
        top: @head-height;
        a{
          border-right: 1px solid @aside-border-color;
          margin: 0;
        }
      }
      a.tabClose{
        top: @head-height;
        border: 1px solid @aside-border-color;
      }
    }
    section.layout-home-main>div.layui-tab.no-show-tab{
      p.nav{
        top: @head-height;
        display: none;
      }
      a.tabClose{
        display: none;
      }
    }
    section.layout-home-main>div.layui-tab.no-show-tab>.layui-tab-title{
      display: none;
    }

    //message的样式
    .layout-home-new-message{
      width: 100%;
      height: 100%;
      position: relative;
      .layui-tab{
        margin: 0;
        height: 100%;
        box-sizing: border-box;
      }
      .layui-tab-content{
       height: 100%;
        box-sizing: border-box;
      }

      .layui-tab > .layui-tab-title .layui-this {
        color: var(--primary-color, rgba(48, 166, 255, 1));
      }
      .layui-tab > .layui-tab-title .layui-this:after, .layui-tab > .layui-tab-more li.layui-this:after{
        border-bottom-color: var(--primary-color, rgba(48, 166, 255, 1));
      }
      .message-container-wrap{
        height: 100%;
        box-sizing: border-box;
      }
      .message-item{
        height: 80px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        cursor: pointer;
        padding: 0 10px;
        overflow: hidden;
        img{
          height: 42px;
          width: auto;
        }
        .message-item-content{
          padding: 0 10px;
          box-sizing: border-box;
          flex: 1;
          overflow: hidden;
          .message-item-title{
            width: 100%;
            margin-bottom: 3px;
            //font-weight: 700;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #333;
          }
          .message-item-time{
            color: #ada4a4;
            font-size: 12px;
          }
        }
        .layui-icon{
         font-size: 18px;
          margin-left: 10px;
          cursor: pointer;
          :hover{
            color: red;
          }
        }
      }

    }
    .layout-home-new-message .layout-message-header{
      height: 46px;
      background: #FAFAFA;
      line-height: 46px;
      padding: 0 20px;
    }
    .layout-home-new-message .layout-message-footer{
      height: 50px;
      background: #F5F7FA;
      line-height: 50px;
      text-align: center;
    }
    .layout-home-new-message .layout-message-body{
      width: 100%;
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .layout-home-new-message .layout-message-body .message-empty{
      text-align: center;
      color: #333333;
      padding-top: 100px;
    }
    .layout-home-new-message .layout-message-body .message-empty .layout-icon-data_empty{
      color: #ccc;
      font-size: 84px;
    }
    .layout-home-new-message .more-message{
      color: #6D8ACC;
      right: 20px;
      position: absolute;
      cursor: pointer;
    }


  }
}
//藏文模板样式
body.IndexVersion4{
  @primary-color: #0048D9;
  .layout-layer-confirm .layui-layer-title{
    display: none;
  }
  .layout-layer-confirm .layui-layer-content{
    min-height: 80px !important;
  }
  .layout-layer-confirm .layui-layer-btn{
    border-radius: 4px;
    background-color: @aside-bg-color;
  }
  #IndexPage{
    header.layout-home{
      height:@head-height;
      background:@head-newbg-color;
      position: relative;
      z-index: 9999;
      .layout-home-logo{
        //overflow: hidden;
        align-items: center;
        .split-line{
          width: 1px;
          height: 24px;
          margin: 0 12px 0 32px;
          background-color:@head-icon-color;
        }
        .foldList{
          overflow: hidden;
          //width: ;
          flex: 1;
          position: relative;
          display: flex;
          .pre,.next{
            height: 52px;
            line-height: 52px;
            white-space: nowrap;
            cursor: pointer;
            i{
              font-size: 16px;
              color:@head-icon-color;
            }
          }

          .fold-content{
            margin-left: 0;
            //overflow: auto;
            &::-webkit-scrollbar{
              width: 0;
              height: 0;
            }
            .swiper-wrapper{
              overflow: visible;
              .swiper-slide{
                width: auto;
                //height: 40px;
                //line-height: 40px;
                //padding:  0 16px;
                //white-space: nowrap;
                //display: flex;
                //align-items: center;
                //font-size: @head-text-font-size;
                //color: #E8F9FF;
                //margin-left: 32px;
                //cursor: pointer;

              }
            }

          }
        }
        .layout-home-system{
          cursor: pointer;
          position: relative;
          display: inline-block;
          display: inline-block;
          min-width: 335px;
          text-align: left;
          flex-shrink: 0;
          div.systemList{
            position: absolute;
            top: 42px;
            right: 0;
            z-index: 99999;
            border-radius: 4px 4px 4px 4px;
            box-shadow: 0px 7px 15px 0px rgba(3,11,69,0.1), 0px 28px 28px 0px rgba(3,11,69,0.09), 0px 62px 37px 0px rgba(3,11,69,0.05), 0px 111px 44px 0px rgba(3,11,69,0.01), 0px 173px 49px 0px rgba(3,11,69,0);
            background-color: #fff;
            min-width: 148px;
            p{
              color:@primary-color;
            }
            ul{
              padding: 2px;
              max-height: 600px;
              overflow: auto;
              li{
                height: 52px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                line-height: 16px;
                font-weight: 500;
                font-size: @head-text-font-size;
                text-align: left;
                padding: 0 16px;
                color:@text-color-secondary ;
                margin: 2px;
              }
              li:hover,li.layout-this{
                background-color: @head-menu-active-bg;
                color:@head-font-hover-color;
                border-radius: 4px;
              }
            }
          }
        }
        .name{
          font-size: @head-title-font-size;
          display: inline-block;
          line-height: 14px;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          /* 设置背景为线性渐变，从上到下 */
          background: linear-gradient(to bottom, #ffffff 10%, #80ccff 100%);
          /* 将文字颜色设置为透明，以便背景可以透过文字显示 */
          color: transparent;
          /* 使用背景渐变填充文字 */
          background-clip: text;
          /* 为了兼容性，添加渐变背景的渐进渲染 */
          -webkit-background-clip: text;
          /* 使用no-repeat来确保背景不会被平铺 */
          background-repeat: no-repeat;
          -webkit-background-size: 100% 100%;
          /* 为了兼容性，添加no-repeat的渐进渲染 */
          -webkit-background-clip: text;
          .sys-name{
            line-height: 24px;
            font-weight: 400;
            /* 设置背景为线性渐变，从上到下 */
            background: linear-gradient(to bottom, #ffffff 10%, #80ccff 100%);
            /* 将文字颜色设置为透明，以便背景可以透过文字显示 */
            color: transparent;
            /* 使用背景渐变填充文字 */
            background-clip: text;
            /* 为了兼容性，添加渐变背景的渐进渲染 */
            -webkit-background-clip: text;
            /* 使用no-repeat来确保背景不会被平铺 */
            background-repeat: no-repeat;
            -webkit-background-size: 100% 100%;
            /* 为了兼容性，添加no-repeat的渐进渲染 */
            -webkit-background-clip: text;
          }
          .fold-subtex{
            color: #B3D6F9;
            letter-spacing: 3px;
            font-size: 20px;
            font-family: Avenir, Helvetica, Arial, sans-serif;
          }
        }
        .system-change-icon{
          margin:0 10px;
          color: @head-icon-color;
          font-weight: 900;
          text-shadow: 0px 0px 10px #1A55E7;
          font-size: @head-system-change-font-size;
          position: relative;
          top: -14px;
          cursor: pointer;
        }

        .fold-content{
          height: 100%;
          margin-left: 0;
          ul{
            display: flex;
            align-items: center;
            height: 100%;
            overflow: hidden;
            li{
              width: auto;
              height: 52px;
              line-height: 14px;
              padding:  0 16px;
              white-space: nowrap;
              display: flex;
              align-items: center;
              font-size: @head-text-font-size;
              color: #E8F9FF;
              margin-left: 32px;
              margin-right: 20px;
              cursor: pointer;
              &:nth-of-type(1){
                margin-left: 10px;
              }
              &.layout-this{
                //background: linear-gradient( to bottom, #122962 60%, #4AA8E7 100%);
                background:url("./IndexVersion2/imgs/nav_bg.png")  no-repeat;
                background-size: 100% 100%;
                border-radius: 3px 3px 3px 3px;
                //border: 1px solid #89D8FC;
                color: #fff;
              }
              .fold-subtex{
                font-size: 16px;
              }
            }
          }

        }
      }
      nav{
        // width: 216px;
        // flex-basis: 216px;
        min-width: auto !important;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 10px;
        box-sizing: border-box;
        .layui-nav{
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          background-color: transparent;
          .layui-nav-item{
            color: @head-color-text;
            &.message-box{
              margin-right: -10px;
              margin-left: 10px;
              a{
                .icon{
                  position: relative;
                  left: 0;
                  top: 0;
                  font-size:16px ;
                  margin: 0;

                }
                .layout-message-count{
                  right: -5px;
                  left: auto;
                }

              }
            }
            a{
              color: @head-color-text;
              i.font_family{
                font-size: 16px;
                left: -22px;
              }
            }
            &.userInfo {
              padding-left: 0;
              width: auto !important;
              max-width: 144px !important;
              text-align: left;
              span.userName{
                font-size: @useFontSize !important;
                max-width: 94px !important;
                width: auto !important;
                box-sizing: border-box;
                //text-shadow: 0px 0px 4px #80CCFF;
                background: linear-gradient(90deg, #fff 0%, #80CCFF 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .layui-nav-child dd.layui-this{
                background-color: #fff !important;
              }

            }
            .layui-nav-child{
              width: auto !important;
              min-width: 104px;
              top: 48px !important;
              top:@head-height ;
              border-radius: 4px;
              &.layui-anim-upbit{
                padding: 4px;
                border-radius: 4px;
              }
              dd{
                height: 32px;
                line-height: 32px;
                a:hover{
                  border-radius: 4px;
                  color: #fff !important;
                  background-color:@head-menu-active-bg !important;
                }
              }
              a{
                color: @text-color-secondary;
                font-size:@useFontSize;
                text-align: center !important;
                &:hover{
                  background-color: @head-menu-active-bg;
                  color:#fff ;
                }
              }
            }
          }
        }
        .layui-nav .layui-nav-item:hover{
          background-color: transparent;
          a{
            background-color: transparent;
          }
        }
        .layui-nav-bar{
          display: none !important;
          opacity: 0 !important;
        }
        .nav-tool{
          cursor: pointer;
          // padding: 0 10px;
          margin-left: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          &:first-child{
            margin-left: 9px;
          }
          img:nth-of-type(1){
            margin-right: 8px;
          }
          img:nth-of-type(2){
            margin-left: 8px;
          }
          a{
            display: inline-block;
            margin: 0;
            margin-right: 5px;
            padding: 0;
            font-size: 12px;
            &.icon-home{
              font-size: 16px;
            }
            &.icon-full{
              font-size: 14px;
            }
          }
          cite{
            font-size: @useFontSize !important;
            //text-shadow: 0px 0px 4px @nav-tool-txt-color;
            background: linear-gradient(90deg, @head-bg-color 0%,@nav-tool-txt-color 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-size: 14px;
            font-style: normal;
          }
        }
      }
      .layui-nav{
        .layui-nav-more{
          border-top-color: @head-color-text;
          right: 2px;
        }
      }
    }
    section.layout-home{
      #sideOpenLable{
        cursor: pointer;
        position: absolute;
        top: 70px;
        left: -20px;
        width: 40px;
        height: 40px;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        background: @aside-bg-color;
        box-shadow: 0 0 10px 1px #ccc;
        z-index: 9999999;
        &:hover{
          transform: translateX(25px);
          transition-duration: 0.5s;
          transition-timing-function: ease;
        }
      }
      height: calc(100% - @head-height);
      aside.layout-home-aside{
        background-color: @aside-bg-color !important;
        border-right: 1px solid @aside-border-color;
        width: @aside-width;
        .control-icon{
          height: 36px;
          line-height: 36px;
          text-align: center;
          color: @text-color-secondary;
          border-bottom: 1px solid #e6eaf3;
          &::before{
            cursor: pointer;
          }
        }
        .layui-nav-tree  {
          .layui-nav-bar{
            background-color: transparent;
          }
          .layui-nav-item {
            background-color: @aside-bg-color;

             a{
               height: 50px;
               line-height: 16px;
               display: flex;
               align-items: center;
               color: @aside-text-color;
               cite{
                 font-size: @aside-font-size;
                 .fold-subtex{
                   font-size: 18px;
                 }
               }
               i{
                 position: relative;
                 left: -8px;
                 top: -8px;
                 color: @aside-icon-color;
               }

               &:hover{
                 background-color: transparent !important;
                 color: @primary-color !important;
                 i{
                   color: @primary-color;

                 }
                 cite{
                   color: @primary-color;
                 }
               }
             }


            &.layui-nav-itemed{
              a:hover{
                background-color: @aside-itemed-bg-color !important;
              }
            }
          }
          .layui-this{
            background-color: @aside-itemed-bg-color !important;
            border-right: 3px solid @primary-color;
            a{
              background-color: transparent !important;
              color: @primary-color;
            }
            //
            i{
              color: @primary-color;
            }
            cite{
              color: @primary-color;
            }
          }
          &:hover{
           color: @primary-color;;
          }
        }
      }
    }
    section.layout-home-main{
      p.nav{
        top: @head-height;
        a{
          border-right: 1px solid @aside-border-color;
          margin: 0;
        }
      }
      a.tabClose{
        top: @head-height;
        border: 1px solid @aside-border-color;
      }
    }
    section.layout-home-main>div.layui-tab.no-show-tab{
      p.nav{
        top: @head-height;
        display: none;
      }
      a.tabClose{
        display: none;
      }
    }
    section.layout-home-main>div.layui-tab.no-show-tab>.layui-tab-title{
      display: none;
    }
    //message的样式
    .layout-home-new-message {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .layout-home-new-message .layout-message-header{
      height: 46px;
      background: #FAFAFA;
      line-height: 46px;
      padding: 0 20px;
    }
    .layout-home-new-message .layout-message-footer{
      height: 80px;
      background: #F5F7FA;
      line-height: 80px;
      text-align: center;
    }
    .layout-home-new-message .layout-message-body{
      width: 100%;
      height: calc(100% - 126px);
      overflow-y: auto;
    }
    .layout-home-new-message .layout-message-body .message-empty{
      position: relative;
      top:50%;
      transform: translateY(-50%);
      text-align: center;
      color: #333333;
    }
    .layout-home-new-message .layout-message-body .message-empty .layout-icon-data_empty{
      color: #ccc;
      font-size: 84px;
    }
    .layout-home-new-message .more-message{
      color: #6D8ACC;
      right: 20px;
      position: absolute;
      cursor: pointer;
    }
    .layout-home-new-message .layout-message-tab-title{
      background: #FAFAFA;
      padding: 0 20px;
    }
    .layout-home-new-message .layout-message-tab-title li > span{
      color: #999999;
    }
    .layout-bubble-notice .layout-notice-container {
      margin-bottom: 10px;
      padding: 16px;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      background: #FFFFFF;;
      line-height: 1;
      position: relative;
      overflow: hidden;
      font-size: 12px;
    }
    .layout-home-new-message .layout-message-container{
      margin-bottom: 10px;
      padding: 10px 20px;
      border-radius: 4px;
      background: #FFFFFF;;
      line-height: 1;
      position: relative;
      overflow: hidden;
      font-size: 12px;
      border-bottom: 1px solid #EEEEEE;
    }
    .layout-bubble-notice .layout-notice-container .layout-notice-custom-content,
    .layout-home-new-message .layout-message-container .layout-notice-custom-content{
      position: relative;
    }
    .layout-bubble-notice .layout-notice-container .layout-notice-title,
    .layout-home-new-message .layout-message-container .layout-notice-title{
      background: #EBF5FF;
      color: #30A6FF;
      height: 24px;
      line-height: 24px;
      padding: 0 14px;
      display: inline-block;
      border-radius: 12px;
      margin-bottom: 12px;
    }
    .layout-notice-title.task-msg{
      background: #E8F7F1;
      color: #1EB272;
    }
    .layout-notice-title.system-msg{
      background: #F6F2FF;
      color: #A696CE;
    }
    .layout-bubble-notice .layout-notice-container .layout-notice-desc,
    .layout-home-new-message .layout-message-container .layout-notice-desc{
      color: #999999;
      line-height: 16px;
      margin-bottom: 12px;
    }
    .layout-bubble-notice .layout-notice-container .layout-notice-person,
    .layout-home-new-message .layout-message-container .layout-notice-person{
      margin-bottom: 8px;
    }
    .layout-bubble-notice .layout-notice-container .layout-notice-person span,
    .layout-home-new-message .layout-message-container .layout-notice-person span{
      color: #6D8ACC;
    }
    .layout-bubble-notice .layout-notice-container .layout-notice-date,
    .layout-home-new-message .layout-message-container .layout-notice-date{
      font-weight: 400;
      line-height: 20px;
      color: #999999;
    }
    .layout-bubble-notice .layout-container-close {
      position: absolute;
      right: 16px;
      top: 16px;
      color: #999;
      font-size: 14px;
    }
    .layout-home-new-message .layout-container-close {
      position: absolute;
      right: 20px;
      top: 10px;
      color: #999;
      font-size: 14px;
    }
    .layout-home-new-message .layout-message-footer button.clear-msg{
      color: #6D8ACC;
      height: 36px;
      background: #FFFFFF;
      border: 1px solid #6D8ACC;
      opacity: 1;
      border-radius: 2px;
    }

  }
}