nuxtProject/pages/product/courseResource.vue

<template>
  <div class="client-exam-page client-platform-page">
    <!--  广告位置  -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${ bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="platform-banner-img">
        <div class="client-container">

          按钮------------
        </div>
      </div>

    </div>

    <!--  企业通用岗位培训方案  -->
    <div class="platform-animation-gangwei client-container">
      <h4 class="client-title">企业通用岗位培训方案</h4>
      <ul>
        <li @click="goChildPage('zhiYeSuYang')">
          <div>
            <i :style="`background-image: url(${icon1})`"></i>
            <span>职业素养</span>
          </div>
        </li>
        <li @click="goChildPage('lingDaoNengLi')">
          <div>
            <i :style="`background-image: url(${icon2})`"></i>
            <span>领导能力</span>
          </div>
        </li>
        <li @click="goChildPage('renLiZiYuan')">
          <div>
            <i :style="`background-image: url(${icon3})`"></i>
            <span>人力资源</span>
          </div>
        </li>
        <li @click="goChildPage('shiCHangYingXiao')">
          <div>
            <i :style="`background-image: url(${icon4})`"></i>
            <span>市场营销</span>
          </div>
        </li>
        <li @click="goChildPage('xingZhengGuanLi')">
          <div>
            <i :style="`background-image: url(${icon5})`"></i>
            <span>行政管理</span>
          </div>
        </li>
        <li @click="goChildPage('caiWuGuanLi')">
          <div>
            <i :style="`background-image: url(${icon6})`"></i>
            <span>财务管理</span>
          </div>
        </li>
        <li @click="goChildPage('keFuFuWu')">
          <div>
            <i :style="`background-image: url(${icon7})`"></i>
            <span>客服服务</span>
          </div>
        </li>
        <li @click="goChildPage('chanPinYunYing')">
          <div>
            <i :style="`background-image: url(${icon8})`"></i>
            <span>产品运营</span>
          </div>
        </li>
        <li @click="goChildPage('shengChanCaiGou')">
          <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 mta-hidden-xs">
        <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn class="online-information-btn"/>
      </div>
    </div>

    <!--  为企业培训打造学习矩阵  -->
    <div class="platform-animation-juzhen client-container">
      <h4>为企业培训打造学习矩阵</h4>
      <ul>
        <li>
          <div>
            <i class="mta-hidden-xs" :style="`background-image:url(${icon10})`"></i>
            <span>课程总数近<i class="icon-font">5000门</i></span>
          </div>
        </li>
        <li>
          <div>
            <i class="mta-hidden-xs" :style="`background-image:url(${icon11})`"></i>
            <span>涵盖<i class="icon-font">2000个</i>知识要点 </span>
          </div>
        </li>
        <li>
          <div>
            <i class="mta-hidden-xs" :style="`background-image:url(${icon12})`"></i>
            <span>提供<i class="icon-font">9大</i>通用岗位培训方案</span>
          </div>
        </li>
        <li>
          <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">
        <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn class="online-information-btn"/>
      </div>
    </div>

    <!--  课程内容形式多样  -->
    <div class="platform-animation-videos client-container">
      <h4>课程内容多样性</h4>
      <ul>
        <li>
          <video-card :card-data="{title: 'FLASH动画课程',
          des:'主要以图文动画的形式表现教学者的作用和教与学之间的关系，从而改变学习的本质',
          url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '视频课程',
          des:'把教师视频与PowerPoint课件一并摄制下来，生成为视频课件',
          url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '名师讲堂',
          des:'各行各业讲师汇聚一堂，为不同专属领域打造明星级课堂',
          url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
    </div>

    <!--  新闻咨询  -->
    <newsComp2 :newsData="topCarousels"></newsComp2>

    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>

    <!--  申请方案  -->
    <applicationDialog :visible.sync="telDl"></applicationDialog>
  </div>
</template>

<script>
import applicationDialog from "~/components/common/applicationDialog";
import applyBtn from "~/components/common/applyBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import chanPinTiYan from "~/components/common/chanPinTiYan";
import videoDialog from "~/components/common/videoDialog";
import videoCard from "~/components/common/videoCard";
import {BannerImgs, classifys} from "~/defaultConfig";

/**
 * @ 产品与服务 -> 课程资源
 */

export default {
  name: "courseResource",
  layout: 'templateB',
  head() {
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name: 'description',
          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  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/banner/list`, {'code': BannerImgs.tongyongkecheng}),
    ]
    const [res1, res2] = await Promise.all(arr);
    return {
      topCarousels: res1.data.data || [],
      bannerList: res2.data.data || [],
    }
  },
  data() {
    return {
      curVideo: '',
      visible: false,
      telDl: false,
      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}`})
    },
    showVideo({url}) {
      this.curVideo = url;
      this.visible = true;
    },
    onApplyBtnActive() {
      this.telDl = true;
    },
    onApplyBtnActiveH5() {
      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: 'shouye',}});
    },
  }
}
</script>

<style lang="scss" scoped>
.client-banner-box {
  width: 100%;
  height: 736px;
}

.platform-banner-img {
  height: 736px;
}

.btns-group {
  margin: 40px auto 120px;
  text-align: center;

  .online-information-btn {
    margin-left: 20px;
  }
}

.platform-animation-gangwei {
  margin-top: 60px;

  .client-title {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 100px;
    padding-top: 0;
  }

  ul {
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    li {
      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>