样式修改

components/course/course-card-title.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="classification-title">
+  <div class="classification-title-box">
     <i class="left"></i>
     <h3>{{ title }}</h3>
     <i class="right"></i>
@@ -15,16 +15,19 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.classification-title {
+<style lang="scss">
+.classification-title-box {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-bottom: 144px;
 
   i {
     display: inline-block;
     width: 67px;
     height: 26px;
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 
   i.left {
@@ -44,16 +47,16 @@ export default {
   }
 
   @media (max-width: 768px){
-
+    margin-bottom: 42px;
     i {
       display: inline-block;
-      width: 50px;
-      height: 22px;
+      width: 41px;
+      height: 16px;
     }
 
     h3 {
       font-size: 16px;
-      font-weight: 400;
+      font-weight: 700;
       color: #333333;
       margin: 0 15px;
     }

pages/courseware/custom.vue

@@ -219,7 +219,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .course-weike {
 
   .client-course-banner {
@@ -232,10 +232,6 @@ export default {
     height: 737px;
     padding-top: 135px;
 
-    .classification-title {
-      margin-bottom: 144px;
-    }
-
     .classification-items {
       display: flex;
       justify-content: space-between;
@@ -255,25 +251,25 @@ export default {
       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");
+      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.png");
+      background-image: url("~static/images/client/course/animationCard/kc-img2-active.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");
+      background-image: url("~static/images/client/course/animationCard/kc-img3-active.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");
+      background-image: url("~static/images/client/course/animationCard/kc-img4-active.png");
     }
 
   }
@@ -306,25 +302,36 @@ export default {
 
     .classification__info-videos {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: space-between;
       margin: 122px 0 50px 0;
 
 
       .classification-video-item {
-        background-color: #ccc;
-        margin-right: 20px;
-        width: 380px;
-        height: 280px;
+        width: 380px;height: 280px;
+
+        .video-item-box{
+          width: 352px;background: rgba(18,107,255,0.12);margin: 0;
+          border: 1px solid #ffffff;border-radius: 10px;padding: 10px;
+          box-sizing: border-box;position: relative;
+          display: flex;align-items: center;
+          img{width: 100%;border-radius: 8px;z-index: 8;}
+          .video-play-btn{
+            width: 70px;height: 70px;position: absolute;z-index: 10;background-size: cover;background-position: center;
+            background-image: url("~static/images/client/course/animation-video-img1.png");background-repeat: no-repeat;
+            right: -15px;bottom: 30px;transition: 0.5s;
+          }
+          .video-play-btn:hover{transform: scale(1.1);cursor: pointer;}
+        }
+        .video-item-box:before,.video-item-box:after{content: ' ';position: absolute;display: block;background-repeat: no-repeat;background-size: contain;}
+        .video-item-box:before{width: 357px;height: 99px;background-image: url("~static/images/client/course/animation-video-img2.png");bottom: -30px;right: -44px;z-index: 9;}
+        .video-item-box:after{width: 95px;height: 160px;background-image: url("~static/images/client/course/animation-video-img3.png");bottom: 20px;right: -30px;z-index: 7;transform: rotateY(180deg);}
+
 
         &:last-child {
           margin-right: 0;
         }
 
-        img {
-          width: 380px;
-          height: 280px;
-        }
       }
     }
 
@@ -394,9 +401,6 @@ export default {
       height: 400px;
       padding-top: 35px;
 
-      .classification-title {
-        margin-bottom: 42px;
-      }
       .classification-items{
         flex-wrap: wrap;
         justify-content: space-around;