样式调整

assets/scss/cus-client/cus-client-common.scss

@@ -940,6 +940,71 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     }
   }
 }
+
+/**************** 课程开发-课程类型通用样式 ****************/
+.classification-items {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  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;}
+  }
+  @media (max-width: 768px){
+    flex-wrap: wrap;justify-content: space-evenly;
+    .classification-item {
+      width: 140px;
+      height: 167px;
+      margin: 10px;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      p{font-size: 14px;bottom: 30px;}
+
+      &:not(:nth-child(even)) {
+        margin-right: 0;
+      }
+      &:nth-child(n+3) {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+/**************** 课程开发-视频通用样式 ****************/
+.classification__info-videos {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 122px 0 50px 0;
+
+
+  .classification-video-item {
+    width: 30%;
+    img{width: 100%;}
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @media (max-width: 768px) {
+  flex-wrap: wrap;
+  flex-direction: column;
+  margin: 30px 0 0 0;
+    .classification-video-item {
+      width: 100%;
+      margin: 0 0 10px;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+
 /********************************* 麦塔栅格**********************************/
 /*
 栅格说明：

components/course/course-video.vue

@@ -80,7 +80,13 @@ export default {
   .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);}
   @media (max-width: 768px){
     .video-item-box{
-      transform: scale(0.8);
+      width: 90%;margin: 0 auto 16px;
+      .video-play-btn{width: 30%;height: 30%;top: 50%;left: 50%;transform: translate(-50%,-50%);background-size: contain;}
+      p{font-size: 14px;left: 10px;right: 10px;bottom: 10px;padding: 6px 12px;
+      background: #006cf8;border-radius: 0 0 8px 8px;box-sizing: border-box;}
     }
+    .video-item-box:before{display: none;}
+    .video-item-box:after{display: none;}
+
   }
 </style>

pages/courseware/animation.vue

@@ -274,30 +274,6 @@ export default {
 
     }
 
-    .classification__info-videos {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 122px 0 50px 0;
-
-
-      .classification-video-item {
-        background-color: #ccc;
-        margin-right: 20px;
-        width: 380px;
-        height: 280px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-
-        img {
-          width: 380px;
-          height: 280px;
-        }
-      }
-    }
-
     .classification-btns {
       text-align: center;
       .classification-online-zixun {
@@ -390,26 +366,6 @@ export default {
       height: auto;
       padding-top: 42px;
 
-      .classification__info-videos {
-        flex-wrap: wrap;
-        flex-direction: column;
-        box-sizing: border-box;
-        padding: 20px;
-        margin: 30px 0 0 0;
-
-        .classification-video-item {
-          height: auto;
-          flex: 1;
-          width: 100%;
-          margin: 0 0 10px;
-
-          img {
-            height: auto;
-            width: 100%;
-          }
-        }
-      }
-
       .classification-btns {
         .classification-online-zixun {
           margin-bottom: 60px;

pages/courseware/custom.vue

@@ -230,21 +230,6 @@ export default {
     height: 737px;
     padding-top: 135px;
 
-    .classification-items {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    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");
     }
@@ -298,21 +283,6 @@ export default {
 
     }
 
-    .classification__info-videos {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin: 122px 0 50px 0;
-
-
-      .classification-video-item {
-        width: 380px;height: 280px;
-        &:last-child {
-          margin-right: 0;
-        }
-
-      }
-    }
 
     .classification-btns {
       text-align: center;
@@ -379,51 +349,17 @@ export default {
       text-align: center;
       height: unset;
       padding: 35px 0;
-
-      .classification-items{
-        flex-wrap: wrap;
-        justify-content: space-evenly;
-      }
-      .classification-item {
-        width: 140px;
-        height: 167px;
-        margin: 10px;
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
-        p{font-size: 14px;bottom: 30px;}
-
-        &:not(:nth-child(even)) {
-          margin-right: 0;
-        }
-        &:nth-child(n+3) {
-          margin-top: 0;
-        }
-      }
     }
 
     .client-course-classification__info{
-      height: auto;
-      padding-top: 42px;
+      height: auto;background-repeat: no-repeat;
+      background-size: cover;padding-top: 42px;
 
-      .classification__info-videos {
-        flex-wrap: wrap;
-        flex-direction: column;
-        box-sizing: border-box;
-        padding: 20px;
-        margin: 30px 0 0 0;
-
-        .classification-video-item {
-          height: auto;
-          flex: 1;
-          width: 100%;
-          margin: 0 0 10px;
-
-          img {
-            height: auto;
-            width: 100%;
-          }
-        }
+      .classification__info-mainTitle{
+        font-size: 15px;color: #333;margin-bottom: 16px;
+      }
+      .classification__info-subHead{
+        font-size: 13px;color: #555;margin-bottom: 16px;
       }
 
       .classification-btns {
@@ -433,6 +369,8 @@ export default {
       }
     }
 
+
+
     .client-course-quotation {
       margin-bottom: 200px;
       height: 400px;

pages/courseware/ppt.vue

@@ -276,30 +276,6 @@ export default {
 
     }
 
-    .classification__info-videos {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 122px 0 50px 0;
-
-
-      .classification-video-item {
-        background-color: #ccc;
-        margin-right: 20px;
-        width: 380px;
-        height: 280px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-
-        img {
-          width: 380px;
-          height: 280px;
-        }
-      }
-    }
-
     .classification-btns {
       text-align: center;
 
@@ -396,26 +372,6 @@ export default {
       height: auto;
       padding-top: 42px;
 
-      .classification__info-videos {
-        flex-wrap: wrap;
-        flex-direction: column;
-        box-sizing: border-box;
-        padding: 20px;
-        margin: 30px 0 0 0;
-
-        .classification-video-item {
-          height: auto;
-          flex: 1;
-          width: 100%;
-          margin: 0 0 10px;
-
-          img {
-            height: auto;
-            width: 100%;
-          }
-        }
-      }
-
       .classification-btns {
         .classification-online-zixun {
           margin-bottom: 60px;

pages/courseware/synopsis.vue

@@ -123,8 +123,8 @@
             choseImg4:   require(`~/static/images/client/index/index-chose-operate-icon.png`),
             synopsisArr1:['高等院校','公司企业','培训机构','政府机构','媒体出版','事业单位'],
             synopsisArr2:['Mg动画','情景动画','Flash动画','片头动画','定格动画','动画短片','三维动画','宣传动画'],
-            synopsisArr3:['动画微课','视频微课','文图微课','长图微课','PPT微课','H5微课 '],
-            synopsisArr4:['优质公开课','教育精品课','培训网络课','教学PPT制作','医学PPT制作','PPT美化','PPT修改','PPT设计 '],
+            synopsisArr3:['动画微课','视频微课','文图微课','长图微课','PPT微课','H5微课'],
+            synopsisArr4:['优质公开课','教育精品课','培训网络课','教学PPT制作', '医学PPT制作','PPT美化','PPT修改','PPT设计'],
             synopsisArr5:['在线考试','在线培训','组卷抽题','线上直播','考试防作弊','视频课程','阅卷判卷','学习监控'],
           }
         },