.data-v-tabs {
  display: flex;
  flex-direction: column;

  .tabs-nav {
    // width: 120px;
    // border-right: 1px solid #eee;
    display: flex;
    flex-direction: row;
    gap: 6px;

    .tab-nav-item {
      padding: 10px;
      cursor: pointer;
      transition: all 0.3s;
      background: linear-gradient(to right, #31333c 100%, #31333c 0%);
      color: #fff;
      // &:hover {
      //   background: #f5f5f5;
      // }

      &.active {
        background: #353948;
        color: #7df0fa;
        border-top: 1px solid #fff;
      }
    }
  }

  .tabs-content {
    flex: 1;
    // padding: 0 20px;
    height: 100%;
    margin-top: 16px;

    .tab-content-item {
      display: flex;
      width: 100%;
      height: 100%;
      // display: none;

      // &.active {
      //   display: block;
      // }
    }
  }
}