追加active

components/course/course-video.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="video-container">
+
+    <div class="video-box">
+      <span>
+        <img :src="imgUrl" :alt="title">
+        <i @click="playVideo"></i>
+      </span>
+      <p>{{ title }}</p>
+    </div>
+
+    <!--  视频播放弹窗 -->
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="videoDialogFlag"
+      @close="closeVideoDialog"
+      class="course-video-dialog"
+      center>
+      <video controls :src="curSource" class="course-video-box"></video>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "course-video",
+  props: {
+    source: {
+      type: String,
+      require: '',
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    dialogTitle: {
+      type: String,
+      default: ''
+    },
+    imgUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      videoDialogFlag: false,
+      curSource: '',
+    }
+  },
+  methods: {
+    closeVideoDialog() {
+      this.videoDialogFlag = false;
+      this.curSource = "";
+    },
+    playVideo() {
+      this.videoDialogFlag = true;
+      this.curSource = this.source;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.video-container {
+  width: 380px;
+  height: 280px;
+
+  .video-box {
+    text-align: center;
+    > span {
+      position: relative;
+      display: inline-block;
+    }
+    p {
+      height: 23px;
+      font-size: 24px;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    i:hover {
+      background-image: url("~static/images/client/course/course-video-icon-a.svg");
+      background-size: cover;
+      background-position: bottom;
+    }
+
+    i {
+      width: 48px;
+      height: 48px;
+      cursor: pointer;
+      background-image: url("~static/images/client/course/course-video-icon.svg");
+      display: inline-block;
+      position: absolute;
+      left: 50%;
+      margin-left: -24px;
+      z-index: 5;
+      top: 50%;
+      margin-top: -24px;
+      background-size: cover;
+      background-position: bottom;
+      transition: all 0.5s;
+    }
+
+    img {
+      width: 100%;
+    }
+
+  }
+}
+</style>

pages/courseware/animation.vue

@@ -19,7 +19,7 @@
         <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" />
+            <course-video :img-url="item.imgUrl" :title="item.title" :dialog-title="item.title" :source="item.url"></course-video>
           </li>
         </ul>
         <div class="classification-btns">
@@ -43,6 +43,7 @@
 <script>
 import courseCardTitle from "@/components/course/course-card-title";
 import courseBaojia from "@/components/course/course-baojia";
+import courseVideo from "@/components/course/course-video";
 
 export default {
   name: 'animation',
@@ -64,7 +65,8 @@ export default {
   },
   components: {
     courseCardTitle,
-    courseBaojia
+    courseBaojia,
+    courseVideo
   },
   async asyncData({$axios, store}) {
     // 设置选中菜单
@@ -95,7 +97,7 @@ export default {
                 title: '情景动画',
                 purpose: '宣传营销', // 用途
                 imgUrl: require('~/static/images/client/course/animation/animation-01.png'),
-                url: '',
+                url: 'https://spdb.mtavip.com/sv/443e4168-18561fbbaa4/443e4168-18561fbbaa4.mp4',
               },
               {
                 title: '情景动画',

pages/courseware/custom.vue

@@ -21,10 +21,11 @@
         <div class="classification__info-subHead">{{curItem.subhead}}</div>
         <ul class="classification__info-videos">
           <li v-for="item in curItem.videos" class="classification-video-item">
-            <div class="video-item-box">
-              <i class="video-play-btn"></i><img :src="item.imgUrl">
-              <p><span>展现：Mg动画</span><span>用途：生产工艺</span></p>
-            </div>
+            <course-video :img-url="item.imgUrl" :title="item.title" :dialog-title="item.title" :source="item.url"></course-video>
+<!--            <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">
@@ -48,7 +49,7 @@
 <script>
 import courseCardTitle from "@/components/course/course-card-title";
 import courseBaojia from "@/components/course/course-baojia";
-
+import courseVideo from "@/components/course/course-video";
 export default {
   name: 'weike',
   layout: 'templateB',
@@ -69,7 +70,8 @@ export default {
   },
   components: {
     courseCardTitle,
-    courseBaojia
+    courseBaojia,
+    courseVideo
   },
   async asyncData({$axios, store}) {
     // 设置选中菜单

pages/courseware/ppt.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" :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)">{{ item.title }}
+          </li>
         </ul>
       </div>
     </div>
@@ -15,11 +17,12 @@
     <div class="client-course-classification__info">
       <div class="client-container">
         <courseCardTitle :title="curItem.title" class="classification__info-title"></courseCardTitle>
-        <div class="classification__info-mainTitle">{{curItem.mainTitle}}</div>
-        <div class="classification__info-subHead">{{curItem.subhead}}</div>
+        <div class="classification__info-mainTitle">{{ curItem.mainTitle }}</div>
+        <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" />
+            <course-video :img-url="item.imgUrl" :title="item.title" :dialog-title="item.title"
+                          :source="item.url"></course-video>
           </li>
         </ul>
         <div class="classification-btns">
@@ -43,6 +46,7 @@
 <script>
 import courseCardTitle from "@/components/course/course-card-title";
 import courseBaojia from "@/components/course/course-baojia";
+import courseVideo from "@/components/course/course-video";
 
 export default {
   name: 'animation',
@@ -56,21 +60,22 @@ export default {
           content: '课件PPT,PPT制作,课件PPT制作,教学微课,教学课件,微课课件,教学课件制作,课件制作,PPT修改,PPT美化,PPT设计'
         },
         {
-          name:'description',
-          content:'麦塔拥有国内专业、成熟的课件PPT制作团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、教学课件、微课、课件PPT等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过15年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
+          name: 'description',
+          content: '麦塔拥有国内专业、成熟的课件PPT制作团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、教学课件、微课、课件PPT等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过15年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
         }
       ]
     }
   },
   components: {
     courseCardTitle,
-    courseBaojia
+    courseBaojia,
+    courseVideo
   },
   async asyncData({$axios, store}) {
     // 设置选中菜单
     store.commit('setActiveNav', '/courseware');
 
-    let [ res2, res3] = await Promise.all([
+    let [res2, res3] = await Promise.all([
       $axios.$post(`/develop/sum`, {}),
       $axios.$post(`/develop/userlist`, {}),
     ])
@@ -206,9 +211,9 @@ export default {
       this.activeItem = item.type;
     },
     goQuotation() {
-      document.documentElement.scrollTop = this.$refs.quotation.offsetTop-150;
-      window.pageYOffset = this.$refs.quotation.offsetTop -150;
-      document.body.scrollTop=this.$refs.quotation.offsetTop -150;
+      document.documentElement.scrollTop = this.$refs.quotation.offsetTop - 150;
+      window.pageYOffset = this.$refs.quotation.offsetTop - 150;
+      document.body.scrollTop = this.$refs.quotation.offsetTop - 150;
     }
   }
 };
@@ -298,6 +303,7 @@ export default {
 
     .classification-btns {
       text-align: center;
+
       .classification-online-zixun {
         display: inline-block;
         background: #0065cd;
@@ -355,7 +361,7 @@ export default {
   }
 
 
-  @media (max-width: 768px){
+  @media (max-width: 768px) {
     .client-course-classification {
       box-sizing: border-box;
       text-align: center;
@@ -365,10 +371,12 @@ export default {
       .classification-title {
         margin-bottom: 42px;
       }
-      .classification-items{
+
+      .classification-items {
         flex-wrap: wrap;
         justify-content: space-around;
       }
+
       .classification-item {
         box-sizing: border-box;
         margin: 10px;
@@ -378,13 +386,14 @@ export default {
         &:not(:nth-child(even)) {
           margin-right: 0;
         }
+
         &:nth-child(n+3) {
           margin-top: 0;
         }
       }
     }
 
-    .client-course-classification__info{
+    .client-course-classification__info {
       height: auto;
       padding-top: 42px;