<template>
  <div class="right-ctrl">
    <p class="ctrl-arrow">
      <i class="el-icon-arrow-right"></i>
    </p>
    <div class="ctrl-pl">
      <ul class="pl-tab-hd">
        <li class="on">章节</li>
        <li class="br-l-line">讲义</li>
      </ul>
      <div class="pl-tab-bd">
        <div class="tab-pane">
          <ul class="chapter-list">
            <li class="chapter-item">
              <h4>第一章 战略管理与竞争力</h4>
              <ul class="knot-list">
                <li class="on">
                  <a class="knot-name" href="">1.1 战略管理概述</a>
                  <i class="el-icon el-icon-tickets"></i>
                </li>
                <li>
                  <a class="knot-name" href="">战略管理第一章课后试题</a>
                  <i class="el-icon el-icon-menu"></i>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="lecture-list">
            <li class="on">
              <img src="https://img1.ezijing.com/curriculum/ppt/958dbedd5201f69068d8fe61e907d4dc.jpg" alt="" />
            </li>
            <li>
              <img src="https://img1.ezijing.com/curriculum/ppt/d9bbc0df0179f47b4de7f833b592d869.jpg" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right-ctrl {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 200;
  width: 350px;
  background: #212121;
  border-left: 19px solid #1b1b1b;

  /* 箭头 */
  .ctrl-arrow {
    position: absolute;
    top: 0;
    left: -19px;
    bottom: 0;
    width: 19px;
    height: 100%;
    font-size: 14px;
    color: #969696;
    cursor: pointer;
    i {
      position: absolute;
      top: 50%;
      left: 0;
      width: 19px;
      margin-top: -10px;
      text-align: center;
      color: #fff;
    }
  }
  /* 面板 */
  .ctrl-pl {
    position: relative;
    height: 100%;
    /* 头部 - 选择项 */
    .pl-tab-hd {
      margin: 0;
      padding: 15px 0;
      line-height: 1.6;
      background-color: #232323;
      overflow: hidden;
      li {
        float: left;
        position: relative;
        width: 50%;
        padding: 0;
        font-size: 16px;
        color: #909090;
        text-align: center;
        list-style: none;
        cursor: pointer;
        &.on {
          color: #b49441;
        }
      }
      .br-l-line {
        border-left: 1px solid #3f3f3f;
      }
    }
    /* 内部 - 列表项 */
    .pl-tab-bd {
      .tab-pane {
        display: block;
        height: 100%;
        overflow: auto;
      }
      /* 讲义列表样式 */
      .lecture-list {
        padding: 8px 16px;
        li {
          padding: 8px 16px;
          cursor: pointer;
          list-style: none;
          &.on {
            background: #888;
          }
          img {
            width: 100%;
          }
        }
      }
    }
  }


  /* 章节后面小图标的样式 */
  .el-icon {
    display: inline-block;
    position: absolute;
    right: 13px;
    top: 19px;
  }
}

</style>
