update1

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

@@ -1217,6 +1217,16 @@ client-banner-box.client-banner-index {
   // 左右滑动
   .experience-swiper-tip{margin: 0 auto; font-size: 14px; font-weight: 400; text-align: center}
 
+  @media (max-width: 768px){
+    h4 {
+      text-align: center;
+      font-weight: 800;
+      font-size: 18px;
+      color: #333;
+      line-height: 1.5;
+    }
+  }
+
 }
 
 .client-kehuanli-box {

components/common/videoCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="video-card" >
     <div class="img-box">
-      <img :src="cardData.url">
+      <img :src="cardData.imgUrl">
       <i @click="cardClick"></i>
     </div>
     <h4 v-if="cardData.title">{{cardData.title}}</h4>

components/common/videoDialog.vue

@@ -4,9 +4,10 @@
     :title="title"
     :visible.sync="show"
     @close="closeVideoDialog"
+    @open="openVideoDialog"
     class="course-video-dialog"
     center>
-    <video controls :src="source" class="course-video-box"></video>
+    <video controls :src="videoUrl" class="course-video-box" ref="myVideo"></video>
     <p v-if="footerText">{{footerText}}</p>
   </el-dialog>
 </template>
@@ -31,6 +32,7 @@ export default {
     return {
       title: '',
       show: false,
+      videoUrl: '',
     }
   },
   watch: {
@@ -42,8 +44,13 @@ export default {
     }
   },
   methods: {
+    openVideoDialog() {
+      this.videoUrl = this.source;
+    },
     closeVideoDialog() {
-      this.$emit('update:visible',this.show)
+      this.$refs.myVideo.pause();
+      this.$emit('update:visible',false);
+      this.videoUrl = "";
     }
   }
 }

pages/product/courseCustom.vue

@@ -13,13 +13,13 @@
       <p class="p1">服务企业 <i>100+</i>，累计开发课时 <i>30,000+</i></p>
       <p class="p2">青谷是国内专业、成熟的课程设计、开发团队、拥有丰富的电子课程制作经验，
         业务方向包括教学设计体验、动画设计、视频拍摄等，涉及的行业有教育培训、零售连锁、机械制造、金融保险等。</p>
-        <!--  岗位职责  -->
-        <gangweiList :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
+      <!--  岗位职责  -->
+      <gangweiList :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
 
 
       <div class="btn-groups center">
         <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        <onlineInformationBtn />
+        <onlineInformationBtn/>
       </div>
     </div>
 
@@ -30,27 +30,33 @@
         主要包含：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
       <ul>
         <li>
-          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video1, imgUrl:img1}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '金融保险业', url: video2, imgUrl:img2}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video3, imgUrl:img3}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '生产制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '生产制造业', url: video4, imgUrl:img4}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '信息通讯业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '信息通讯业', url: video5, imgUrl:img5}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '汽车销售业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '汽车销售业', url: video6, imgUrl:img6}"
+                      @card-click="showVideo"></video-card>
         </li>
       </ul>
       <div class="btn-groups center">
         <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        <onlineInformationBtn />
+        <onlineInformationBtn/>
       </div>
     </div>
 
@@ -62,27 +68,33 @@
       </p>
       <ul>
         <li>
-          <video-card class="my-video" :card-data="{title: '能源化工业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '能源化工业', url: video7,  imgUrl:img7}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '金融保险业', url: video8, imgUrl:img8}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video9, imgUrl:img9}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '管理培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '管理培训业', url: video10,  imgUrl:img10}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video11,  imgUrl:img11}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '服装零售业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '服装零售业', url: video12 , imgUrl:img12}"
+                      @card-click="showVideo"></video-card>
         </li>
       </ul>
       <div class="btn-groups center">
-        <applyBtn class="btn-item"  @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        <onlineInformationBtn />
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
@@ -93,18 +105,21 @@
       </p>
       <ul>
         <li>
-          <video-card class="my-video" :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '现代制造业', url: video13,  imgUrl:img13}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video14,  imgUrl:img14}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '物流业', url: video15,  imgUrl:img15}"
+                      @card-click="showVideo"></video-card>
         </li>
       </ul>
       <div class="btn-groups center">
         <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        <onlineInformationBtn />
+        <onlineInformationBtn/>
       </div>
     </div>
 
@@ -117,18 +132,21 @@
       </p>
       <ul>
         <li>
-          <video-card class="my-video" :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '现代制造业', url: video16, imgUrl:'',  imgUrl:img16}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video17, imgUrl:'',  imgUrl:img17}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card class="my-video" :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '物流业', url: video18,  imgUrl:'',  imgUrl:img18}"
+                      @card-click="showVideo"></video-card>
         </li>
       </ul>
       <div class="btn-groups center">
         <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        <onlineInformationBtn />
+        <onlineInformationBtn/>
       </div>
     </div>
 
@@ -209,6 +227,51 @@ export default {
       curVideo: '',
       visible: false,
       telDl: false,
+
+      // 动画类
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img4: require(`~/static/images/client/course/course-video-img2.png`),
+      video4: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img5: require(`~/static/images/client/course/course-video-img2.png`),
+      video5: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img6: require(`~/static/images/client/course/course-video-img2.png`),
+      video6: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+
+      // 视频课程类
+      img7: require(`~/static/images/client/course/course-video-img2.png`),
+      video7: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img8: require(`~/static/images/client/course/course-video-img2.png`),
+      video8: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img9: require(`~/static/images/client/course/course-video-img2.png`),
+      video9: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img10: require(`~/static/images/client/course/course-video-img2.png`),
+      video10: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img11: require(`~/static/images/client/course/course-video-img2.png`),
+      video11: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img12: require(`~/static/images/client/course/course-video-img2.png`),
+      video12: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+
+      // H5 类课
+      img13: require(`~/static/images/client/course/course-video-img2.png`),
+      video13: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img14: require(`~/static/images/client/course/course-video-img2.png`),
+      video14: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img15: require(`~/static/images/client/course/course-video-img2.png`),
+      video15: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+
+      // PPT定制及美化
+      img16: require(`~/static/images/client/course/course-video-img2.png`),
+      video16: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img17: require(`~/static/images/client/course/course-video-img2.png`),
+      video17: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img18: require(`~/static/images/client/course/course-video-img2.png`),
+      video18: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+
     }
   },
   methods: {
@@ -276,6 +339,7 @@ export default {
     }
     .p1 {
       font-size: 14px;
+
       i {
         font-size: 14px;
         color: #565656;
@@ -298,13 +362,15 @@ export default {
     margin-bottom: 70px;
     text-align: center;
   }
-  >p {
+
+  > p {
     text-align: center;
     font-weight: 500;
     color: #565656;
     line-height: 24px;
     font-size: 16px;
   }
+
   ul {
     display: flex;
     justify-content: space-between;
@@ -331,7 +397,8 @@ export default {
       margin-bottom: 5%;
       text-align: center;
     }
-    >p {
+
+    > p {
       text-align: center;
       font-weight: 500;
       color: #565656;
@@ -345,9 +412,11 @@ export default {
         width: 100%;
         height: 200px;
         margin-bottom: 60px;
+
         .my-video {
           margin: 0;
         }
+
         .img-box {
           width: 100%;
           height: auto;

pages/product/courseResource.vue

@@ -119,17 +119,17 @@
         <li>
           <video-card :card-data="{title: 'FLASH动画课程',
           des:'主要以图文动画的形式表现教学者的作用和教与学之间的关系，从而改变学习的本质',
-          url: ''}" @card-click="showVideo"></video-card>
+          url:video1 , imgUrl:img1 }" @card-click="showVideo"></video-card>
         </li>
         <li>
           <video-card :card-data="{title: '视频课程',
           des:'把教师视频与PowerPoint课件一并摄制下来，生成为视频课件',
-          url: ''}" @card-click="showVideo"></video-card>
+          url: video2, imgUrl:img2 }" @card-click="showVideo"></video-card>
         </li>
         <li>
           <video-card :card-data="{title: '名师讲堂',
           des:'各行各业讲师汇聚一堂，为不同专属领域打造明星级课堂',
-          url: ''}" @card-click="showVideo"></video-card>
+          url: video3, imgUrl:img3 }" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -209,6 +209,14 @@ export default {
       icon11: require('~/static/gangweiIcon/z70.png'),
       icon12: require('~/static/gangweiIcon/z71.png'),
       icon13: require('~/static/gangweiIcon/z72.png'),
+
+      // 课程内容多样性
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {

pages/solution/biteAndSup.vue

@@ -7,7 +7,7 @@
         class="client-platform-banner">
         <div class="client-container mta-hidden-xs">
           <div class="banner-btn-groups">
-            <onlineInformationBtn class="online-information-btn btn-item solution-biteAndSup" />
+            <onlineInformationBtn class="online-information-btn btn-item solution-biteAndSup"/>
           </div>
         </div>
       </div>
@@ -51,7 +51,7 @@
       <h4 class="client-title">青谷解决方案</h4>
       <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
         <div class="btn-groups">
-          <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item"/>
         </div>
       </imgCardLv2>
     </div>
@@ -62,13 +62,13 @@
       <p>青谷软件可为金融保险行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称',  url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称',  url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称',  url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -99,13 +99,22 @@ import imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2";
  */
 export default {
   name: "biteAndSup",
-  layout:   'templateB',
-  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
+  layout: 'templateB',
+  components: {
+    chanPinTiYan,
+    freeTrialBtn,
+    onlineInformationBtn,
+    newsComp2,
+    videoDialog,
+    videoCard,
+    desWithCode,
+    imgCardLv2
+  },
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.shipincanyin}),
     ];
-    const [ res2] = await Promise.all(arr);
+    const [res2] = await Promise.all(arr);
     return {
       bannerList: res2.data.data || [],
     }
@@ -238,6 +247,14 @@ export default {
           myType: 'kaoshi'
         }
       ],
+
+      // 食品餐饮
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {
@@ -253,6 +270,7 @@ export default {
 .banner-btn-groups {
   left: 0;
   top: 450px !important;
+
   .solution-biteAndSup {
     color: #00b96b;
     border-color: #fff;
@@ -276,17 +294,21 @@ export default {
           }
         }
       }
+
       &:nth-child(2) {
         div {
           background-image: url("~static/gangweiIcon/z92.png");
+
           i {
             background-image: url('~static/gangweiIcon/z102.png');
           }
         }
       }
+
       &:nth-child(3) {
         div {
           background-image: url("~static/gangweiIcon/z93.png");
+
           i {
             background-image: url('~static/gangweiIcon/z101.png');
           }
@@ -294,6 +316,7 @@ export default {
       }
     }
   }
+
   @media (max-width: 768px) {
     ul {
       li {
@@ -302,11 +325,13 @@ export default {
             background-image: none;
           }
         }
+
         &:nth-child(2) {
           div {
             background-image: none;
           }
         }
+
         &:nth-child(3) {
           div {
             background-image: none;

pages/solution/education.vue

@@ -66,13 +66,13 @@
       <p>青谷软件可为教育培训行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: 'FLASH动画课程', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '视频课程', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '名师讲堂',url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -234,6 +234,14 @@ export default {
           myType: 'kaoshi'
         }
       ],
+
+      // 教育培训类视频
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {

pages/solution/energy.vue

@@ -64,13 +64,13 @@
       <p>青谷软件可为能源化工行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -232,6 +232,14 @@ export default {
           myType: 'kaoshi'
         }
       ],
+
+      // 能源化工类课程案例
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {

pages/solution/erupt.vue

@@ -53,7 +53,7 @@
       <h4>客户案例</h4>
 
       <!--   PC   -->
-      <div class="anli-box-wrap">
+      <div class="anli-box-wrap mta-hidden-xs">
         <el-carousel indicator-position="none" class="anli-box mta-hidden-xs" :interval="5000" height="200px">
           <el-carousel-item v-for="item in anliList" :key="item.iild">
             <div class="anli-content-pc">
@@ -243,10 +243,10 @@ export default {
 
 .client-description-box {
   width: 100%;
-  height: 360px;
+  height: 240px;
   background-image: url("~static/codeImage/code-bj01.png");
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
   padding: 80px 0 0 0;
   margin: 0 auto;
   text-align: center;
@@ -297,16 +297,6 @@ export default {
   }
 }
 
-.client-kehuanli-box {
-  margin-bottom: 160px;
-  h4 {
-    font-size: 30px;
-    font-weight: 800;
-    color: #333;
-    text-align: center;
-    margin-bottom: 70px;
-  }
-}
 
 .solution-exam-online {
   background: #F7DA5C;
@@ -324,8 +314,6 @@ export default {
     }
   }
 
-
-
   .client-description-box {
     height: 140px;
     box-sizing: border-box;
@@ -341,6 +329,7 @@ export default {
       margin: 0 auto 10px;
     }
   }
+
 }
 
 </style>

pages/solution/exam.vue

@@ -341,10 +341,10 @@ export default {
 
 .client-xuanchuan-box {
   width: 100%;
-  height: 360px;
+  height: 240px;
   background-image: url("~static/codeImage/code-bj01.png");
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
   padding: 110px 0 0 0;
   margin: 0 auto;
   text-align: center;

pages/solution/financial.vue

@@ -62,13 +62,13 @@
       <p>青谷软件可为金融保险行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称',url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -232,6 +232,14 @@ export default {
           myType: 'kaoshi'
         }
       ],
+
+      // 金融保险类课程案例
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {

pages/solution/government.vue

@@ -69,17 +69,17 @@
       <ul>
         <li>
           <div>
-            <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+            <video-card :card-data="{title: 'FLASH动画课程',url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
           </div>
         </li>
         <li>
           <div>
-            <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+            <video-card :card-data="{title: '视频课程', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
           </div>
         </li>
         <li>
           <div>
-            <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+            <video-card :card-data="{title: '名师讲堂', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
           </div>
         </li>
       </ul>
@@ -249,6 +249,14 @@ export default {
           myType: 'kaoshi'
         }
       ],
+
+      // 党建类视频
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {

pages/solution/medical.vue

@@ -63,13 +63,13 @@
       <p>青谷软件可为医疗行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称',url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -231,6 +231,14 @@ export default {
           myType: 'kaoshi'
         }
       ],
+
+      // 医疗视频
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {

pages/solution/transportation.vue

@@ -70,13 +70,13 @@
       <p>青谷软件可为交通运输行业行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '课程名称', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -265,6 +265,14 @@ export default {
           lv: 2,
         }
       ],
+
+      // 交通运输
+      img1: require(`~/static/images/client/course/course-video-img2.png`),
+      video1: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img2: require(`~/static/images/client/course/course-video-img2.png`),
+      video2: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
+      img3: require(`~/static/images/client/course/course-video-img2.png`),
+      video3: 'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
     }
   },
   methods: {