ttk-app-core/src/apps/portal/app-layout/style.less

@ttk/recat enterprise develop framework

@import (optional) "~@/components/layout/varible.less"; // layout组件的变量，该文件可有可无
@import "~@/assets/varible.less"; // 项目的变量会覆盖组件的变量

.app-portal {
  height: 100%;
}

.app-portal-header {
  z-index       : 10;
  height        : 100%;
  line-height   : 100%;
  background    : @primary-color;
  // border-bottom : @border;
  // box-shadow : @box-shadow-base;
  width         : 100%;
  margin        : 0;
  padding       : 0;

  .left-wrap {
    height: 100%;
    text-align: center;
    background-color: @primary-color;
    display: inline-block;
    width: 200px;
    img {
      height: 100%;
    }
  }
  .right-wrap {
    height: 100%;
    text-align   : right;
    // padding-right: 20px;
    background-color: @primary-color;
    display: inline-block;
    width: calc(100% - 200px);
    vertical-align: top;
    .item {
      display: inline-block;
      cursor: pointer;
      color: #eee;
      height: 100%;
      padding: 0 20px;
      transition: all .3s;
      vertical-align: top;
      line-height: @headerHeight;
      &:hover {
        background-color: rgba(0, 80, 120, 0.6)
      }
      &.user-info-dropdown {
        img {
          height: 30px;
          margin-top: -4px;
        }
        .ant-dropdown-trigger {
          height: 100%;
          display: inline-block;
        }
        .user-name {
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 10px;
          margin-right: 6px;
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }
}
.app-portal-sidebar {
  width: 100%;
  height: 100%;
  background-color: white;
  border: 1px solid #e8e8e8;
  .ant-menu {
    background-color: white;
    color: white;
    .ant-menu-submenu-title {
      background-color: rgba(244, 244, 244);
      color: @primary-color;
      font-size: 16px;
      margin-top: 0;
      margin-bottom: 0;
      width: 100%;
    }
    .ant-menu-submenu {
      & > .ant-menu {
        background-color: #fff;
      }
      &.inner-sub-menu {
        .ant-menu-submenu-title {
          color: #333;
          background-color: white;
          font-size: 14px;
          .anticon, .edficon {
            display: none;
          }
          i:before, i:after {    
            background-color: #333 !important;
          }
        }
      }
    }
    .ant-menu-item:hover,
    .ant-menu-item-active,
    &:not(.ant-menu-inline) .ant-menu-submenu-open,
    &:not(.ant-menu-horizontal) .ant-menu-item-selected {    
      color: #fff;
      font-weight: 700;
      background: @primary-color;
    }
    &.ant-menu-inline > .ant-menu-item {
      margin-top: 0;
      margin-bottom: 0;
      height: 40px;
      line-height: 40px;
    }
    .ant-menu-item {
      color: white;
      font-size: 14px;
      color: #333;
      margin-bottom: 0;
      border-bottom: 1px solid #f9f9f9;
      width: 100%;
      height: 36px;
      line-height: 36px;
      & > a {
        color: white;
        font-size: 14px;
        color: #333;
      }
      &:hover > a {  
        color: #fff;
      }
    }
  }
}
.app-portal-tabs {
  width           : 100%;
  height          : 100%;
  position        : relative;
  padding: 0 54px 0 20px;

  .arrow {
    position   : absolute;
    width      : 20px;
    text-align : center;
    line-height: @tabBarHeight;
    height     : 100%;
    color: white;
    // padding-top: 14px;
    z-index: 1;
    cursor: pointer;
    width: 16px;
    background: #fff;
    color: rgba(0,0,0,.45);
    font-size: 12px;
    
    &.left {
      left: 0px;
    }

    &.right {
      right: 34px;
    }

    &.operation {
      right: 0;
      width: 30px
    }
  }

  .tabs {
    white-space: nowrap;
    position   : relative;
    overflow   : hidden;
    width      : 100%;
    height: 100%;
    .ant-radio-group {
      height: inherit;
    }
    .tab {
      height: inherit;
      display: inline-block;
      .ant-radio-button-wrapper {
        border: 0;
        margin: 0;
        border-bottom: 0;
        background: #fafafa;
        margin-right: 2px;
        padding: 0 16px;
        line-height: @tabBarHeight;
        height: @tabBarHeight;
        border-radius: 0;
        vertical-align: top;
        color: rgba(0,0,0,.65);
        &.ant-radio-button-wrapper-checked {
          background: #fff;
          border-color: #e8e8e8;
          color: @primary-color;
          padding-bottom: 1px;
        }
        &:hover {
          span {
            color: @primary-color;
          }
        }
        & > span {
          i {
            color: rgba(0,0,0,.45);
            transition: all .3s;
            font-size: 12px;
            margin-left: 3px;
            margin-right: -5px;
            margin-top: -2px;
            overflow: hidden;
            vertical-align: middle;
            width: 12px;
            height: 12px;
          }
        }
      }
    }
  }
}