.zl-ls-element {
  z-index: 1020;
  position: relative;
  width: 310px;
  height: 100%;
  border-right: 1px solid var(--color-black);
}

.defauSpacing {
  margin: 0;
  padding: 0;
}

.zl-ls-element-content {
  display: flex;
  height: calc(100% - 50px);

  // flex-direction: row;
  // background: #468643;

  .zl-ls-element-content-menus {
    // display: flex;
    width: 50px;
    height: 100%;
    border-right: 1px solid var(--color-black);
    background-color: var(--color-title-bg);

    scrollbar-width: none;

    //chrome修改滚动条样式
    &::-webkit-scrollbar {
      width: 0;
    }

    ul {
      height: 100%;
      padding: 15px 0;

@extend .defauSpacing;

      li {
        display: flex;
        width: 100%;
        height: 64px;
        margin-bottom: 4px;
        text-align: center;
        color: var(--color-stories-font);
        font-size: var(--font-size-12);
        cursor: pointer;
        flex-direction: column;
        list-style: none;

@extend .defauSpacing;
        justify-content: center;
        align-items: center;

        .zl-icon-font
        , .zl-icon {
          margin-bottom: 6px;
          font-size: 20px;
        }

        &.current {
          color: var(--color-main);
        }

        &.disabled {
          color: var(--color-menu-list-disabled);
        }
      }
    }
  }

  .zl-ls-element-content-cards {
    width: calc(100% - 50px);
    background: var(--color-content-bg);

    flex: 1;

    .zl-ls-element-content-cards-content {
      display: flex;
      width: 100%;
      flex-direction: row;
    }

    .zl-ls-element-sub-silder {
      overflow-y: auto;
      width: 60px;
      height: 100%;
      padding: 10px 0;
      border-right: 1px solid var(--color-black);

//firefox修改滚动条样式

      scrollbar-width: none;

      //chrome修改滚动条样式
      &::-webkit-scrollbar {
        width: 0;
      }

      ul {
        @extend .defauSpacing;

        li {
          width: 100%;
          height: var(--spacing36);

// border-bottom: 1px solid var(--color-font);
          line-height: var(--spacing36);
          text-align: center;
          color: var(--color-font);
          cursor: pointer;
          list-style: none;

@extend .defauSpacing;

          &.current {
            color: var(--color-main);
          }

          &.disabled {
            color: var(--color-menu-list-disabled);
          }
        }
      }
    }

    .zl-ls-element-card-list {
      overflow-y: auto;
      padding: 20px;

      flex: 1;

//firefox修改滚动条样式
      scrollbar-width: none;

      //chrome修改滚动条样式
      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}