qkui-h5/dist/styles/tabs.less

Quick 框架组件

.qk-tabs {
  .qk-tabs-bar {
    border-bottom: 0.05rem solid #dcdee2;
    padding: 0 1rem;
    display: flex;
    flex-direction: row;
    margin-top: 0.2rem;
    // justify-content: space-between;
    .active {
      color: #007aff;
      // border-bottom: 2px solid #fff;
      background: #fff;
      margin-bottom: -0.05rem;
    }
    //扩展插槽
    .bar-extra {
      position: absolute;
      margin: inherit;
      right: 0;
    }
  }

  // 选项卡
  .qk-tabs-bar-item {
    // border: 1px solid #efefef;
    // width: 3rem;
    // position: relative;
    margin-right: 0.2rem;

    // flex-direction: column;
    // align-items: center;
    // justify-content: center;

    border: 0.05rem solid #dcdee2;
    border-bottom: 0;
    border-radius: 0.2rem 0.2rem 0 0;
    transition: all 0.3s ease-in-out;
    background: #f8f8f9;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    //标题
    .bar-title {
      padding: 0.25rem 0.8rem 0.2rem;
    }
    .icon-guanbi {
      font-size: 0.8em;
      padding-top: 0.3rem;
      padding-right: 0.6rem;
      vertical-align: middle;
    }
  }

  // 显示内容
  .qk-tabs-body {
    // display: none;
    height: inherit;
  }
  // 当前内容
  // .qk-tabs-body.active {
  //   // display: block;
  // }
}