play

client/project/elearning-node/pages/static/header.vue

+<template>
+  <div class="left-content">
+    <h1><a class="play-back" href="/courses/6437296339083591680/6437333685153824768/cont">&lt;</a>Sofia-战略管理</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'playHeader'
+}
+</script>
+<style lang="scss" scoped>
+.left-content {
+  position: absolute;
+  right: 350px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  min-width: 705px;
+  height: 100%;
+}
+h1{
+  line-height: 56px;
+  margin: 0;
+  text-align: center;
+  font-size: 20px;
+}
+.play-back {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  text-indent: -300px;
+  background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/2vu7tn.png) no-repeat 14px -329px;
+}
+</style>

client/project/elearning-node/pages/static/index.vue

 <template>
-  <div>静态页</div>
+  <div class="play">
+    <playHeader />
+    <div class="right-content">
+      <p class="right-arrow">
+        <span>></span>
+      </p>
+      <div class="control-panel">
+        <ul class="tab-nav cl">
+          <li class="video-chapter current">
+            章节
+          </li>
+          <li class="video-jy">
+            讲义
+          </li>
+        </ul>
+        <div class="tab-content">
+          <div class="tab-pane">
+            <ul class="chapter-list">
+              <li class="chapter-item">
+                <h4>第一章 战略管理与竞争力</h4>
+                <ul class="knob-list">
+                  <li class="knob-item current">
+                    <div class="knob-progress"></div>
+                    <i class="icon icon-pro" title="学习进度 5%"></i>
+                    <a class="knob-name" href="">1.1 战略管理概述</a>
+                    <i class="icon-play-chapter icon-play-video"></i>
+                  </li>
+                  <li class="knob-item current">
+                    <div class="knob-progress"></div>
+                    <i class="icon icon-pro" title="学习进度 5%"></i>
+                    <a class="knob-name" href="">战略管理第一章课后试题</a>
+                    <i class="icon-play-chapter icon-play-exam"></i>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <ul class="jiangyi-list">
+              <li class="current">
+                <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>
+  </div>
 </template>
 
+<script>
+import playHeader from './header.vue'
+export default {
+  components: { playHeader }
+}
+</script>
 <style lang="scss" scoped>
-
+.play{
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  z-index: 800;
+  width: 100%;
+  height: 100%;
+  background-color: #3f3f3f;
+  color: #a0a0a0;
+}
+.right-content {
+  position: absolute;
+  right: 0;
+  width: 350px;
+  z-index: 200;
+  background: #212121;
+  bottom: 0;
+  top: 0;
+  border-left: 19px solid #1b1b1b;
+  .right-arrow {
+    position: absolute;
+    left: -19px;
+    top: 0;
+    bottom: 0;
+    width: 19px;
+    height: 100%;
+    cursor: pointer;
+    color: #969696;
+    font-size: .875em;
+    span {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 19px;
+      margin-top: -10px;
+      text-align: center;
+    }
+  }
+}
+.control-panel {
+  height: 100%;
+  position: relative;
+  .tab-nav {
+    margin: 0;
+    padding: 15px 0;
+    border-bottom: 0;
+    background-color: #232323;
+    line-height: 1.6;
+    overflow: hidden;
+    li{
+      float: left;
+      line-height: 28px;
+      position: relative;
+      width: 50%;
+      padding: 0;
+      font-size: 16px;
+      text-align: center;
+      color: #909090;
+      list-style: none;
+      cursor: pointer;
+      &.current{
+        color: #b49441;
+      }
+    }
+    .video-jy {
+      border-left: 1px solid #3f3f3f;
+    }
+  }
+  .tab-content{
+    .tab-pane {
+      display: block;
+      height: 100%;
+      overflow: auto;
+    }
+    .chapter-list{
+      margin: 0;
+      padding: 0;
+      line-height: 1.6;
+      overflow: hidden;
+    }
+    .chapter-item{
+      h4 {
+        color: #b0b0b0;
+        padding: 10px 22px;
+        background-color: #2f2f2f;
+      }
+    }
+  }
+  .knob-list{
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    overflow: hidden;
+    li{
+      position: relative;
+      padding: 0 0 0 23px;
+      &.current {
+        background: #232323;
+        a{
+          color: #b49441;
+        }
+      }
+      &:before {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        border: 2px solid #5b5b5b;
+        background: #5b5b5b;
+        position: absolute;
+        left: 13px;
+        top: 16px;
+        content: "";
+        display: block;
+        z-index: 10;
+      }
+    }
+    .knob-progress{
+      position: absolute;
+      top: 16px;
+      left: 13px;
+      z-index: 20;
+      display: none\0;
+    }
+    .icon-pro {
+      position: absolute;
+      width: 19px;
+      height: 19px;
+      border-radius: 9px;
+      top: 16px;
+      left: 23px;
+      z-index: 15;
+      display: none;
+      display: block\0;
+    }
+    .knob-name{
+      color: #909090;
+      font-size: .875em;
+      padding: 14px 35px 14px 20px;
+      text-decoration: none;
+      display: block;
+      cursor: pointer;
+    }
+  }
+}
+.icon-play-chapter {
+  display: inline-block;
+  vertical-align: middle;
+  width: 14px;
+  height: 14px;
+  background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/3ZOzuU.png) no-repeat;
+  position: absolute;
+  right: 13px;
+  top: 19px;
+}
+.icon-play-video {
+  background-position: 0 0
+}
+.icon-play-work {
+  background-position: 0 -37px
+}
+.icon-play-exam {
+  background-position: 0 -73px
+}
+.icon-play-read {
+  background-position: 0 -110px
+}
+.jiangyi-list{
+  padding: 8px 16px;
+  li{
+    padding: 8px 16px;
+    cursor: pointer;
+    list-style: none;
+    &.current {
+      background: #888;
+    }
+    img {
+      width: 100%;
+    }
+  }
+}
 </style>