图标替换

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

 <template>
-  <h1><a class="play-back" href="/courses/6437296339083591680/6437333685153824768/cont">&lt;</a>Sofia-战略管理</h1>
+  <h1><a class="play-back" href="/courses/6437296339083591680/6437333685153824768/cont"><i class="el-icon-arrow-left"></i></a>Sofia-战略管理</h1>
 </template>
 
 <style lang="scss" scoped>
@@ -11,12 +11,9 @@ h1 {
 }
 .play-back {
   position: absolute;
-  top: 10px;
+  top: 0;
   left: 10px;
-  width: 40px;
-  height: 40px;
-  text-indent: -300px;
-  background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/2vu7tn.png) no-repeat 14px -329px;
+  color: #fff;
   overflow: hidden;
 }
 </style>

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

 <template>
   <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">
-                    <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>
+      <i class="el-icon-arrow-right"></i>
+    </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="el-icon el-icon-tickets"></i>
+                </li>
+                <li class="knob-item">
+                  <div class="knob-progress"></div>
+                  <i class="icon icon-pro" title="学习进度 5%"></i>
+                  <a class="knob-name" href="">战略管理第一章课后试题</a>
+                  <i class="el-icon el-icon-menu"></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>
 </template>
 
@@ -65,13 +65,14 @@
     font-size: .875em;
     color: #969696;
     cursor: pointer;
-    span {
+    i {
       position: absolute;
       top: 50%;
       left: 0;
       width: 19px;
       margin-top: -10px;
       text-align: center;
+      color: #fff;
     }
   }
 }
@@ -199,28 +200,12 @@
   }
 }
 
-/* 章节后面小图标的样式，总共有4种 */
-.icon-play-chapter {
+/* 章节后面小图标的样式 */
+.el-icon {
   display: inline-block;
   position: absolute;
   right: 13px;
   top: 19px;
-  width: 14px;
-  height: 14px;
-  vertical-align: middle;
-  background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/3ZOzuU.png) no-repeat;
-}
-.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
 }
 
 /* 讲义列表样式 */