样式修改

pages/courseware/custom.vue

@@ -7,7 +7,9 @@
       <div class="client-container">
         <courseCardTitle :title="project.title" class="classification-title"></courseCardTitle>
         <ul class="classification-items">
-          <li class="classification-item" v-for="item in project.data" @click="changeItem(item)">{{ item.title }}</li>
+          <li class="classification-item" v-for="item in project.data" @click="changeItem(item)">
+            <p>{{ item.title }}</p>
+          </li>
         </ul>
       </div>
     </div>
@@ -19,7 +21,10 @@
         <div class="classification__info-subHead">{{curItem.subhead}}</div>
         <ul class="classification__info-videos">
           <li v-for="item in curItem.videos" class="classification-video-item">
-            <img :src="item.imgUrl" />
+            <div class="video-item-box">
+              <i class="video-play-btn"></i><img :src="item.imgUrl">
+              <p><span>展现：Mg动画</span><span>用途：生产工艺</span></p>
+            </div>
           </li>
         </ul>
         <div class="classification-btns">
@@ -233,15 +238,42 @@ export default {
 
     .classification-items {
       display: flex;
-
       justify-content: space-between;
       align-items: center;
     }
 
-    .classification-item {
-      background-color: #cccccc;
-      width: 250px;
-      height: 280px;
+    li{
+      width: 279px;height: 333px;position:relative;background-size: cover;
+      background-repeat: no-repeat;cursor: pointer;
+      p{font-size: 24px;color: #333;position: absolute;bottom: 65px;left:0;right:0;text-align: center;}
+    }
+    li.active{
+      p{color: #2770FF;}
+    }
+
+    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.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.png");
+    }
+    li:nth-child(3){
+      background-image: url("~static/images/client/course/animationCard/kc-img3.png");
+    }
+    li.active:nth-child(3){
+      background-image: url("~static/images/client/course/animationCard/kc-img3.png");
+    }
+    li:nth-child(4){
+      background-image: url("~static/images/client/course/animationCard/kc-img4.png");
+    }
+    li.active:nth-child(4){
+      background-image: url("~static/images/client/course/animationCard/kc-img4.png");
     }
 
   }