yonui-ys/lib/theme/portal.less

yonui ys

// 领域项目 portal 页面的基本样式

// 头部菜单
.header {
  padding: 0;
  background: #fff;
  box-shadow: 0 5px 5px rgba(51, 51, 51, .1);
  height: 60px;
  line-height: 59px;
  z-index: 1;

  // logo
  .logo {
    height: 60px;
    background: -webkit-linear-gradient(right, #fc6b4a, #e6012f);
    text-align: center;
    line-height: 60px;
    width: 144px;
    float: left;
    font-size: 22px;
    color: #fff;
    overflow: hidden;

    div {
      background-image: url(images/logo_white.png);
      background-size: 100% 100%;
      width: 144px;
      height: 60px;
    }

    .icon {
      width: 110px;
      height: 110px;
      margin-top: -25px;
    }
  }

  // 中间页签
  .ant-tabs.ant-tabs-card>.ant-tabs-bar {
    .ant-tabs-tab {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      background: #fff;
      border: none;
      &:hover {
        color: #ee2223;
      }

      .anticon-close {
        right: auto;
        margin-left: 8px;
        margin-top: 20px;
        top: -1px;
        -webkit-transform: scale(0.83);
        transform: scale(0.83);
        font-size: 14px;
      }
    }

    .ant-tabs-tab-active {
      border-radius: 0;
      transform: translateZ(0);
      color: #333;
      border-bottom: 1px solid #fff;
      border-left: none;
      border-right: none;
      padding: 0 20px;

      div {
        position: relative;
      }

      div:after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: #ee2223;
        -webkit-transform: scale3d(1);
        transform: scale3d(1);
        // -webkit-transition: -webkit-transform 0.1s;
        display: block
      }

    }

    .ant-tabs-nav-container {
      height: 49px;
      background: #fff;
    }

    .ant-tabs-extra-content {
      width: 40px;
      height: 49px;
      line-height: 50px;
      color: #ee2223;
      padding-left: 10px;
      background-color: #fff;
      right: 5px;
      margin-right: 10px;
    }

    .ant-tabs-tab-next-icon,
    .ant-tabs-tab-prev-icon {
      top: 54%;
    }

    .ant-tabs-tab-next.ant-tabs-tab-arrow-show,
    .ant-tabs-tab-prev.ant-tabs-tab-arrow-show {
      width: 30px;
      height: 50px;
      background-color: #fff;
    }

    .ant-tabs-tab-prev.ant-tabs-tab-arrow-show {
      width: 40px;
    }
  }

  // 右侧
  .top-right {
    font-size: 14px;
    padding-right: 20px;
    position: absolute;
    right: 0;
    top: 0px;

    .anticon-index-loading {
      font-size: 18px;
      vertical-align: middle;
      margin-bottom: 3px;
      margin-right: 15px;
      float: left;
      margin-top: 20px;
    }

    .anticon-index-loading:before {
      content: "\e688";
    }

    .ant-select {
      width: auto !important;
      margin-right: 10px;
    }

    .ant-select-selection {
      border: none;
    }

    .ant-input-number:focus,
    .ant-input-number:hover,
    .ant-input:focus,
    .ant-input:hover,
    .ant-select-selection:focus,
    .ant-select-selection:hover {
      border: none !important;
    }

    span {
      cursor: pointer;

      &.orgOrStore {
        float: left;
        height: 20px;
        line-height: 20px;
        margin-top: 20px;
        margin-right: 10px;

        .anticon {
          width: 12px;
        }

        b {
          font-weight: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 152px;
          display: block;
          float: left;
        }

        .anticon-rowBottom:before {
          content: "\e762";
          transform: scale(.55) rotate(0deg);
        }

        .anticon {
          margin-left: 0px;
          margin-top: 8px;
        }
      }

      &.title-name {
        .anticon {
          width: 12px;
          height: 12px;
          margin-left: 0px;
          position: relative;
        }

        .anticon-rowBottom:before {
          content: "\e762";
          transform: scale(.55) rotate(0deg);
          position: absolute;
          bottom: -5px;
        }
      }

      &.ant-badge {
        margin-left: 15px;

        .icon {
          width: 22px;
          height: 22px;
          vertical-align: middle;
        }

        .ant-badge-count {
          height: 16px;
          line-height: 16px;
          min-width: 16px;
          padding: 0 4px;
          top: -6px;
          left: 20px;
        }
      }
    }
    .topMenu_accs_svgicon{
      margin-right: 12px;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
    span.potal-qiehuan-span{
      margin-left: 12px;
    }
    span.TopMenu-qiehuanchuping {
      margin-left: 15px;

      svg {
        width: 22px;
        height: 22px;
        position: relative;
        top: 5px;
      }
    }

    .anticon {
      width: 20px;
      text-align: left;
      color: #999;
      cursor: pointer;
      font-size: 12px;
      margin-left: 5px;
      -webkit-transition: -webkit-transform 0.2s ease;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      -ms-transform-origin: 30% 40%;
      transform-origin: 30% 40%;

      &:hover {
        color: #333;
      }
    }

    em {
      background: url(images/icon-person.png) no-repeat;
      background-size: 100%;
      width: 32px;
      height: 32px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;

      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: top;
      }
    }

    .ant-popover-open .anticon::before {
      color: #333;
    }

    /*更新日志图标*/
    .TopMenu-gengxinrizhi {
      margin-left: 15px;

      svg {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
    }
  }
}

// 触屏切换、更新日志添加到浮层
.title-more {
  .title-setting.top-right-title {
    padding: 0px!important;

    p a {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 32px;
      .anticon-gengxinrizhi {
        margin-top: 0px;
        margin-right: 5px;
        padding-bottom: 2px;
        line-height: 32px;
      }

      .anticon-gengxinrizhi::before {
        font-size: 18px;
      }
    }
  }

  .TopMenu-qiehuanchuping {
    height: 36px;
    p a {
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        width: 18px;
        height: 18px;
        margin-right: 5px;
        float: left;
        margin-top: 7px;
      }
    }
  }
}

// 个人信息
.infor-phone {
  font-size: 12px;
  color: #505766;
  margin-left: 8px;
}

.infor-phone:hover {
  color: #EE2223;
}

.infor-input-extension {
  width: 400px;
  overflow: hidden;
}

.extension-num {
  width: 8%;
  float: left;
}

// 个人信息-模态框
.ant-modal {
  .ant-modal-body {
    .list-top-toolbar {
      padding: 15px 20px 0px 20px; // async zhangkunk 模态框里添加list-top-toolbar 样式细节调整
    }

    .ant-form-item-control-wrapper {
      .ant-btn-primary[disabled] {
        background: #F4F4F4;
        height: 28px;
        color: #A5A5A5;
      }

      .ant-btn-sm {
        float: left;
        height: 28px;
        margin-top: 2px;
      }
    }
  }
}

// 修改密码页面调整
.password-modify {
  .ant-form-item-label {
    padding-left: 60px;
    width: 146px !important;
    margin-right: 15px;
    text-align: right;
  }

  .btn-group-bottom .ant-btn {
    height: 32px;
  }

  .ant-form-item {
    margin-bottom: 20px;
  }

  .yon-row {
    .ant-col-offset-3 {
      margin-left: 161px;
    }
  }

  .register-password {
    width: 400px;
  }

  .ant-form-item-control input {
    width: 400px !important;
  }

  .has-error .ant-form-explain {
    margin-top: 5px;
    margin-bottom: -10px;
  }

  .change_psd_error {
    color: #f04134;
    margin-left: 163px;
    margin-top: -15px;
  }
}

.ant-input-affix-wrapper .ant-input-prefix,
.ant-input-affix-wrapper .ant-input-suffix,
.u-form-control-affix-wrapper .u-form-control-prefix,
.u-form-control-affix-wrapper .u-form-control-suffix {
  color: #A7ABB2;
  cursor: pointer;
  line-height: 28px;
}

.u-menu {
  &.u-menu-root {
    .u-menu-submenu-placement-rightTop {
      z-index: 1000;
      display: inline-block;

      ul.u-menu-item-group-list {
        li {
          cursor: pointer;
        }
      }
    }

    .u-menu-submenu-title + div > div{
      height: 0;
    }
  }
}

// 零售portal 页面，租户popover
.ant-popover .ant-popover-content {
  .ant-popover-inner-content {
    max-height: 430px;
    overflow: auto;
  }

  .ant-popover-inner-content p {
    padding: 0 30px 0 15px;
    line-height: 28px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }

  .ant-popover-inner-content p:hover {
    background: #f3f5f9;
    border-color: #f3f5f9;
    color: #333;
  }

  .ant-popover-inner-content p:hover a {
    color: #333;
  }

  .ant-popover-inner-content p.topMenu_checked {
    background: #fff7e7;
    position: relative;

    svg {
      position: absolute;
      right: 10px;
      top: 8px;
    }
  }
}

// portal 页面的 menu
.ant-card .ant-card-body {
  .col-float {
    margin-bottom: 10px;
  }

  .ant-tag {
    margin: 0!important;
    height: 38px;
    background-color: #f7f7f7;
    border-radius: 4px;
    width: 90%;
    text-align: center;
    color: #666;
    border: 1px solid #f7f7f7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    vertical-align: middle;
    display: table;
    line-height: 14px;

    span {
      display: table-cell;
      vertical-align: middle;
    }

    &:hover {
      color: #505766;
      border: 1px solid #505766;
      background: #fff;
    }
  }
}