  // 课程目录
  .directory {
    .empty {
      color: #71777d;
      padding-left: 10px;
      font-size: vw(14);
    }
    .e-panel-body {
      @extend .flex-column;
      margin:0 vw(-10) vw(50);
    }
    &.join-after-dirctory {
      .e-panel-body {
        margin:0 vw(-10);
      }
    }
    .directory-list {
      &__item {
        &-chapter {
          display: flex;
          justify-content: space-between;
          @extend .title-16;
          height: vw(52);
          line-height:vw(52);
          background: #F0F0F0;
          border-radius: 5px;
          padding-left: vw(10);
          padding-right: vw(15);
          box-sizing: border-box;
          i {
            margin-top: vw(20);
          }
          margin-bottom: vw(20);
        }
        &-unit {
          height: 0;
          overflow: hidden;
          &.unit-show {
            height: auto;
            margin:0 0 0 vw(10);
          }
        }
        .lesson-cell {
          @extend .flex-row;
          @extend .font-family-PFM;

          margin-left: vw(20);
          font-size: vw(14);
          &__unit {
            display: flex;
            justify-content: space-between;
            margin-bottom: vw(12);
            padding-right: vw(5);
            height: vw(52);
            line-height:vw(52);
            background: #F7F7F7;
            border-radius: 5px;
            padding-left: vw(10);
            padding-right: vw(15);
            box-sizing: border-box;
            @extend .title-16;
            i {
              margin-top: vw(20);
            }
            &-title {
              max-width: 90%;
            }
          }
          &__hour {
            position: relative;
            left: vw(-3);
            height: 0;
            padding-top: 0;
            margin-top: 0;
            margin-bottom: 0;
            color: #71777D;
            &.lesson-show {
              height: auto;
              margin-top: vw(5);
              padding-top: vw(5);
              padding-left: vw(10);
              margin-bottom: vw(5);
            }
          }
          &__lesson {
            margin-bottom: vw(5);
          }
          &__content {
            @extend .flex-column;
            width: 84%;
            padding-left: vw(10);
            box-sizing: border-box;
            flex-shrink: 0;
            // flex: 1;
            span {
              color: #2B333B;
              word-break: break-word;
            }
            .lesson-cell-last__text {
              color: #b0bdc9;
              margin-top: vw(10);
            }
          }
          &__number {
            color: #b0bdc9;
          }
          &__status {
            height: vw(18);
            padding: vw(2) vw(10);
            border-radius: 2px;
            color: white;
            line-height: vw(18);
            font-size: vw(12);
            &.is-free {
              background: $primary-color;
            }
            &.is-tryLook{
              background:#FF9E6D;
            }
          }
          &__text {
            display: flex;
            justify-content: space-between;
            .live-text {
              padding-left: 3px;
              padding-right: 3px;
              font-size: vw(14);
            }
            .live-done {
              color: #b0bdc9;
              border: 1px solid #b0bdc9;
            }
            .live-replay {
              color: #FFA51F;
              border: 1px solid #FFA51F;
            }
            .living {
              color: $primary-color;
              border: 1px solid $primary-color;
            }
          }
        }
      }
    }
  }
