调整控制

components/course/course-video.vue

@@ -3,8 +3,8 @@
     <i @click="playVideo" class="video-play-btn"></i>
     <img :src="imgUrl" :alt="videoData.title">
     <p>
-      <span v-if="videoData.title">{{ videoData.title }}</span>
-      <span v-if="showTitle">{{videoData.purpose}}</span></p>
+      <span v-if="videoData.title">展现：{{ videoData.title }}</span>
+      <span v-if="showTitle">用途：{{videoData.purpose}}</span></p>
     <!--  视频播放弹窗 -->
     <el-dialog
       :title="videoData.title"

pages/courseware/animation.vue

@@ -7,7 +7,8 @@
       <div class="client-container">
         <courseCardTitle :title="project.title" class="classification-title"></courseCardTitle>
         <ul class="classification-items">
-          <li class="classification-item" :class="{active:item.type === activeItem }" v-for="item in project.data" @click="changeItem(item)">{{ item.title }}</li>
+          <li class="classification-item" :class="{active:item.type === activeItem }" v-for="item in project.data" @click="changeItem(item)">
+            <p>{{ item.title }}</p></li>
         </ul>
       </div>
     </div>
@@ -229,6 +230,33 @@ export default {
     height: 737px;
     padding-top: 135px;
 
+
+    li:nth-child(1){
+      background-image: url("~static/images/client/course/animationCard/kc-img1.png");
+    }
+    li.active:nth-child(1){
+      background-image: url("~static/images/client/course/animationCard/kc-img1-active.png");
+    }
+    li:nth-child(2){
+      background-image: url("~static/images/client/course/animationCard/kc-img2.png");
+    }
+    li.active:nth-child(2){
+      background-image: url("~static/images/client/course/animationCard/kc-img2-active.png");
+    }
+    li:nth-child(3){
+      background-image: url("~static/images/client/course/animationCard/gd-img3.png");
+    }
+    li.active:nth-child(3){
+      background-image: url("~static/images/client/course/animationCard/gd-img3-active.png");
+    }
+    li:nth-child(4){
+      background-image: url("~static/images/client/course/animationCard/gd-img4.png");
+    }
+    li.active:nth-child(4){
+      background-image: url("~static/images/client/course/animationCard/gd-img4-active.png");
+    }
+
+
     .classification-title {
       margin-bottom: 144px;
     }
@@ -241,7 +269,6 @@ export default {
     }
 
     .classification-item {
-      background-color: #cccccc;
       width: 250px;
       height: 280px;
     }

pages/courseware/ppt.vue

@@ -8,7 +8,8 @@
         <courseCardTitle :title="project.title" class="classification-title"></courseCardTitle>
         <ul class="classification-items">
           <li class="classification-item" :class="{active:item.type === activeItem }" v-for="item in project.data"
-              @click="changeItem(item)">{{ item.title }}
+              @click="changeItem(item)">
+            <p>{{ item.title }}</p>
           </li>
         </ul>
       </div>
@@ -231,6 +232,33 @@ export default {
     height: 737px;
     padding-top: 135px;
 
+    li:nth-child(1){
+      background-image: url("~static/images/client/course/animationCard/ppt-img1.png");
+    }
+    li.active:nth-child(1){
+      background-image: url("~static/images/client/course/animationCard/ppt-img1-active.png");
+    }
+    li:nth-child(2){
+      background-image: url("~static/images/client/course/animationCard/ppt-img2.png");
+    }
+    li.active:nth-child(2){
+      background-image: url("~static/images/client/course/animationCard/ppt-img2-active.png");
+    }
+    li:nth-child(3){
+      background-image: url("~static/images/client/course/animationCard/ppt-img3.png");
+    }
+    li.active:nth-child(3){
+      background-image: url("~static/images/client/course/animationCard/ppt-img3-active.png");
+    }
+    li:nth-child(4){
+      background-image: url("~static/images/client/course/animationCard/ppt-img4.png");
+    }
+    li.active:nth-child(4){
+      background-image: url("~static/images/client/course/animationCard/ppt-img4-active.png");
+    }
+
+
+
     .classification-title {
       margin-bottom: 144px;
     }
@@ -243,7 +271,6 @@ export default {
     }
 
     .classification-item {
-      background-color: #cccccc;
       width: 250px;
       height: 280px;
     }