update

components/common/newsComp2.vue

@@ -4,7 +4,7 @@
     <div class="platform-news-information mta-hidden-xs">
       <!-- 新闻资讯 -->
       <div class="client-container">
-        <h4 class="client-title">新闻资讯</h4>
+        <h4 class="client-title-news">新闻资讯</h4>
         <ul>
           <li style="font-size: 16px" v-for="(item, index) in newsData" :key="index">
             <div>
@@ -21,7 +21,7 @@
     <!-- 新闻资讯 手机-->
     <div class="client-container">
       <div class="client-newsInfo-phone mta-hidden-sm">
-        <h4 class="client-title">新闻资讯</h4>
+        <h4 class="client-title-news">新闻资讯</h4>
         <el-carousel :interval="5000" type="card" height="300px" indicator-position="none" arrow="never">
           <el-carousel-item v-for="(item,index) in newsData" @click="checkInfo(item)" :key="index" class="el-row">
             <img :src="item.pic" alt="新闻资讯"/>
@@ -85,63 +85,62 @@ export default {
 
 <style lang="scss" scoped>
 .platform-news-information {
-  .client-container {
-    h4.client-title {
-      font-size: 30px;
-      font-weight: 800;
-      text-align: center;
-      color: #333;
-      margin-top: 100px;
-      margin-bottom: 80px;
-    }
+  overflow: hidden;
+  h4.client-title-news {
+    font-size: 30px;
+    font-weight: 800;
+    text-align: center;
+    color: #333;
+    margin-top: 100px;
+    margin-bottom: 80px;
+  }
 
-    ul {
-      margin-bottom: 100px;
-    }
+  ul {
+    margin-bottom: 100px;
+  }
 
-    ul > li {
-      .new_title {
-        font-size: 18px;
-        color: #333;
-        text-align: left;
-        font-weight: 800;
+  ul > li {
+    .new_title {
+      font-size: 18px;
+      color: #333;
+      text-align: left;
+      font-weight: 800;
 
 
-      }
+    }
 
-      .new_date {
-        font-size: 12px;
-        font-weight: 500;
-        color: #565656;
-        position: relative;
-        margin-bottom: 20px;
+    .new_date {
+      font-size: 12px;
+      font-weight: 500;
+      color: #565656;
+      position: relative;
+      margin-bottom: 20px;
 
-        &:after {
-          content: '';
-          position: absolute;
-          bottom: -8px;
-          left: 250px;
-          width: 60px;
-          height: 3px;
-          background: #00B96B;
-        }
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        left: 250px;
+        width: 60px;
+        height: 3px;
+        background: #00B96B;
       }
+    }
 
-      .new_des {
-        font-size: 14px;
-        font-weight: 500;
-        color: #565656;
-      }
+    .new_des {
+      font-size: 14px;
+      font-weight: 500;
+      color: #565656;
     }
+  }
 
-    ul > li > div {
-      border-bottom: none;
-      margin-bottom: 66px;
+  ul > li > div {
+    border-bottom: none;
+    margin-bottom: 66px;
 
-      img {
-        width: 226px;
-        height: 152px;
-      }
+    img {
+      width: 226px;
+      height: 152px;
     }
   }
 }

components/common/videoCard.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="video-card" @click="cardClick">
-    <div></div>
-    <h3 v-if="cardData.title">{{cardData.title}}</h3>
+  <div class="video-card" >
+    <div class="img-box">
+      <img :src="cardData.url">
+      <i @click="cardClick"></i>
+    </div>
+    <h4 v-if="cardData.title">{{cardData.title}}</h4>
     <p v-if="cardData.des">{{cardData.des}}</p>
   </div>
 </template>
@@ -23,6 +26,87 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.video-card {
+    width: 370px;
+    height: 210px;
+  .img-box {
+    position: relative;
+    background: greenyellow;
+    width: inherit;
+    height: inherit;
+    overflow: hidden;
 
+    img {
+      width: 100%;
+      height: 100%;
+      transition: all .5s ease;
+    }
+
+    &:hover{img{transform: scale(1.1);}}
+
+    i {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-30px,-30px);
+      display: inline-block;
+      width: 60px;
+      height: 60px;
+      background-image: url("~static/images/client/course/course-video-icon.svg");
+      background-repeat: no-repeat;
+      cursor: pointer;
+    }
+  }
+  h4 {
+    font-size: 24px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-top: 25px;
+  }
+  p {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+    margin-top: 25px;
+  }
+}
+@media (max-width: 768px) {
+  .video-card {
+    width: 100%;
+    height: 100%;
+
+    .img-box {
+      position: relative;
+      background: greenyellow;
+      width: inherit;
+      height: inherit;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        min-height: 160px;
+        transition: all .5s ease;
+      }
+    }
+
+    h4 {
+      font-size: 16px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-top: 15px;
+    }
+
+    p {
+      font-size: 12px;
+      font-weight: 500;
+      color: #333;
+      text-align: center;
+      margin-top: 15px;
+    }
+  }
+}
 </style>

pages/product/courseResource.vue

@@ -14,87 +14,112 @@
     </div>
 
     <!--  企业通用岗位培训方案  -->
-    <div class="platform-animation client-container">
+    <div class="platform-animation-gangwei client-container">
       <h4 class="client-title">企业通用岗位培训方案</h4>
       <ul>
         <li @click="goChildPage('zhiYeSuYang')">
-          <i :style="`background: url('~/static/gangweiIcon/z60.png')`"></i>
-          <span>职业素养</span>
+          <div>
+            <i :style="`background-image: url(${icon1})`"></i>
+            <span>职业素养</span>
+          </div>
         </li>
         <li @click="goChildPage('lingDaoNengLi')">
-          <i :style="`background: url('~/static/gangweiIcon/z61.png')`"></i>
-          <span>领导能力</span>
+          <div>
+            <i :style="`background-image: url(${icon2})`"></i>
+            <span>领导能力</span>
+          </div>
         </li>
         <li @click="goChildPage('renLiZiYuan')">
-          <i :style="`background: url('~/static/gangweiIcon/z62.png')`"></i>
-          <span>人力资源</span>
+          <div>
+            <i :style="`background-image: url(${icon3})`"></i>
+            <span>人力资源</span>
+          </div>
         </li>
         <li @click="goChildPage('shiCHangYingXiao')">
-          <i :style="`background: url('~/static/gangweiIcon/z63.png')`"></i>
-          <span>市场营销</span>
+          <div>
+            <i :style="`background-image: url(${icon4})`"></i>
+            <span>市场营销</span>
+          </div>
         </li>
         <li @click="goChildPage('xingZhengGuanLi')">
-          <i :style="`background: url('~/static/gangweiIcon/z64.png')`"></i>
-          <span>行政管理</span>
+          <div>
+            <i :style="`background-image: url(${icon5})`"></i>
+            <span>行政管理</span>
+          </div>
         </li>
         <li @click="goChildPage('caiWuGuanLi')">
-          <i :style="`background: url('~/static/gangweiIcon/z65.png')`"></i>
-          <span>财务管理</span>
+          <div>
+            <i :style="`background-image: url(${icon6})`"></i>
+            <span>财务管理</span>
+          </div>
         </li>
         <li @click="goChildPage('keFuFuWu')">
-          <i :style="`background: url('~/static/gangweiIcon/z66.png')`"></i>
-          <span>客服服务</span>
+          <div>
+            <i :style="`background-image: url(${icon7})`"></i>
+            <span>客服服务</span>
+          </div>
         </li>
         <li @click="goChildPage('chanPinYunYing')">
-          <i :style="`background: url('~/static/gangweiIcon/z67.png')`"></i>
-          <span>产品运营</span>
+          <div>
+            <i :style="`background-image: url(${icon8})`"></i>
+            <span>产品运营</span>
+          </div>
         </li>
         <li @click="goChildPage('shengChanCaiGou')">
-          <i :style="`background: url('~/static/gangweiIcon/z68.png')`"></i>
-          <span>生产采购</span>
+          <div>
+            <i :style="`background-image: url(${icon9})`"></i>
+            <span>生产采购</span>
+          </div>
         </li>
-
+        <li class="empty mta-hidden-xs">
+        </li>
+        <li class="empty mta-hidden-xs"></li>
+        <li class="empty mta-hidden-xs"></li>
       </ul>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn" />
+      <div class="btns-group mta-hidden-xs">
+        <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn class="online-information-btn"/>
       </div>
     </div>
 
     <!--  为企业培训打造学习矩阵  -->
-    <div class="platform-animation">
+    <div class="platform-animation-juzhen client-container">
       <h4>为企业培训打造学习矩阵</h4>
       <ul>
         <li>
-          <i></i>
-          <span>课程总数近 <i>5000门</i></span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon10})`"></i>
+            <span>课程总数近<i class="icon-font">5000门</i></span>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>涵盖 <i>2000个</i>知识要点</span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon11})`"></i>
+            <span>涵盖<i class="icon-font">2000个</i>知识要点 </span>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>提供 <i>9大</i>通用岗位培训方案</span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon12})`"></i>
+            <span>提供<i class="icon-font">9大</i>通用岗位培训方案</span>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>课程资源 <i>每月</i>持续更新</span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon13})`"></i>
+            <span>课程资源<i class="icon-font">每月</i>持续更新</span>
+          </div>
         </li>
       </ul>
       <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn" />
+        <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn class="online-information-btn"/>
       </div>
     </div>
 
     <!--  课程内容形式多样  -->
-    <div class="platform-animation">
-      <h4>为企业培训打造学习矩阵</h4>
+    <div class="platform-animation-videos client-container">
+      <h4>课程内容多样性</h4>
       <ul>
         <li>
           <video-card :card-data="{title: 'FLASH动画课程',
@@ -140,8 +165,8 @@ import {BannerImgs, classifys} from "~/defaultConfig";
 
 export default {
   name: "courseResource",
-  layout:   'templateB',
-  head(){
+  layout: 'templateB',
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -150,8 +175,8 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
@@ -159,7 +184,10 @@ export default {
   components: {applyBtn, onlineInformationBtn, newsComp2, chanPinTiYan, videoDialog, videoCard, applicationDialog},
   async asyncData({$axios, store}) {
     const arr = [
-      $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.kechengziyuan.classify, 'keyword': classifys.kechengziyuan.keyword}),
+      $axios.$post(`/home/news/carousel`, {
+        'newsClassifyId': classifys.kechengziyuan.classify,
+        'keyword': classifys.kechengziyuan.keyword
+      }),
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.tongyongkecheng}),
     ]
     const [res1, res2] = await Promise.all(arr);
@@ -173,12 +201,24 @@ export default {
       curVideo: '',
       visible: false,
       telDl: false,
-      // icon1: require(''),
+      icon1: require('~/static/gangweiIcon/z60.png'),
+      icon2: require('~/static/gangweiIcon/z61.png'),
+      icon3: require('~/static/gangweiIcon/z62.png'),
+      icon4: require('~/static/gangweiIcon/z63.png'),
+      icon5: require('~/static/gangweiIcon/z64.png'),
+      icon6: require('~/static/gangweiIcon/z65.png'),
+      icon7: require('~/static/gangweiIcon/z66.png'),
+      icon8: require('~/static/gangweiIcon/z67.png'),
+      icon9: require('~/static/gangweiIcon/z68.png'),
+      icon10: require('~/static/gangweiIcon/z69.png'),
+      icon11: require('~/static/gangweiIcon/z70.png'),
+      icon12: require('~/static/gangweiIcon/z71.png'),
+      icon13: require('~/static/gangweiIcon/z72.png'),
     }
   },
   methods: {
     goChildPage(key) {
-      this.$router.push({ path: `/product/${key}` })
+      this.$router.push({path: `/product/${key}`})
     },
     showVideo({url}) {
       this.curVideo = url;
@@ -204,7 +244,16 @@ export default {
   height: 736px;
 }
 
-.platform-animation {
+.btns-group {
+  margin: 40px auto 120px;
+  text-align: center;
+
+  .online-information-btn {
+    margin-left: 20px;
+  }
+}
+
+.platform-animation-gangwei {
   margin-top: 60px;
 
   .client-title {
@@ -215,17 +264,7 @@ export default {
     margin-bottom: 100px;
     padding-top: 0;
   }
-}
-
-
-
-
-.btns-group {
-  display: flex;
-  text-align: center;
-}
 
-.platform-animation {
   ul {
     font-size: 16px;
     display: flex;
@@ -233,16 +272,290 @@ export default {
     justify-content: center;
 
     li {
-      width: 277px;
-      height: 112px;
-      display: inline-block;
+      width: 25%;
+
+      > div {
+        width: 100%;
+        height: 112px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 20px;
+        margin-right: 30px;
+        cursor: pointer;
+        border: 1px solid #fff;
+      }
 
       i {
         display: inline-block;
         width: 64px;
         height: 70px;
+        margin-right: 40px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
+      span {
+        font-size: 24px;
+        color: #333;
+        font-weight: 800;
+        display: inline-block;
+        position: relative;
+      }
+
+      &:last-child {
+        justify-self: flex-start;
+      }
+
+      &:hover > div {
+        border: 1px solid #51C779;
+        border-radius: 10px;
+
+        span {
+          color: #46c37b;
+
+          &:before {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            width: 100%;
+            height: 4px;
+            background: #00b96b;
+          }
+        }
+      }
+    }
+  }
+}
+
+.platform-animation-juzhen {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 80px;
+  }
+
+  ul {
+    li {
+      width: 50%;
+      display: inline-block;
+
+      & > div {
+        margin-bottom: 120px;
+        display: flex;
+        align-items: center;
+
+        .icon-font {
+          font-size: 30px;
+          color: #00b96b;
+          font-weight: 500;
+          padding: 0 10px;
+        }
+
+        span {
+          font-size: 24px;
+          color: #333;
+          font-weight: 500;
+        }
+
+
+        & > i {
+          width: 88px;
+          height: 90px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          margin-right: 22px;
+        }
+      }
+    }
+
+    li:nth-child(3) {
+      div {
+        margin-bottom: 40px;
+      }
+    }
+
+    li:nth-child(4) {
+      div {
+        margin-bottom: 40px;
       }
     }
   }
 }
+
+.platform-animation-videos {
+  margin-bottom: 200px;
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 120px;
+  }
+  ul {
+    display: flex;
+    justify-content: center;
+
+    li {
+      width: 33%;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .platform-animation-gangwei {
+    margin-top: 20px;
+
+    h4.client-title {
+      font-size: 20px;
+      margin-bottom: 20px;
+      font-weight: 800;
+    }
+
+    ul {
+      li {
+        width: 33%;
+
+        > div {
+          width: 100%;
+          height: 112px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          box-sizing: border-box;
+          padding: 20px;
+          margin-right: 30px;
+          cursor: pointer;
+          border: 1px solid #fff;
+        }
+
+        i {
+          display: inline-block;
+          width: 50%;
+          height: 100%;
+          margin-right: 0;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        span {
+          font-size: 12px;
+          color: #333;
+          font-weight: 800;
+          position: relative;
+
+        }
+
+        &:last-child {
+          justify-self: flex-start;
+        }
+
+        &:hover > div {
+          border: 1px solid #51C779;
+          border-radius: 10px;
+
+          span {
+            color: #46c37b;
+          }
+        }
+      }
+    }
+  }
+
+  .btns-group {
+    margin: 30px auto 60px;
+    text-align: center;
+
+    .online-information-btn {
+      margin-left: 20px;
+    }
+  }
+
+  .platform-animation-juzhen {
+    margin-bottom: 30px;
+
+    h4 {
+      font-size: 20px;
+      margin-bottom: 20px;
+      font-weight: 800;
+      margin-top: 40px;
+    }
+
+    ul li {
+      width: 100%;
+      margin: 0 auto;
+
+      & > div {
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+
+        .icon-font {
+          font-size: 20px;
+          color: #00b96b;
+          font-weight: 500;
+          padding: 0 5px;
+        }
+
+        span {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+          display: inline-block;
+          width: 100%;
+          text-align: center;
+        }
+
+        & > i {
+          width: 88px;
+          height: 90px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          margin-right: 22px;
+        }
+      }
+
+      &:nth-child(3) {
+        div {
+          margin-bottom: 20px;
+        }
+      }
+
+      &:nth-child(4) {
+        div {
+          margin-bottom: 20px;
+        }
+      }
+    }
+
+  }
+
+
+  .platform-animation-videos {
+    h4 {
+      font-size: 20px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 30px;
+    }
+    ul {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+
+      li {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+}
 </style>