图标替换

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>
+      <i class="el-icon-arrow-right"></i>
     </p>
     <div class="control-panel">
       <ul class="tab-nav cl">
@@ -18,13 +18,13 @@
                   <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>
+                  <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="icon-play-chapter icon-play-exam"></i>
+                  <i class="el-icon el-icon-menu"></i>
                 </li>
               </ul>
             </li>
@@ -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
 }
 
 /* 讲义列表样式 */