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="client-platform-banner"></div>
      <h3>青谷，专业的企业培训课程资源解决方案供应商</h3>
      <p>基于岗位胜任力模型，提供通用岗位培训方案，满足企业内训需求</p>
    </div>

    <!--  企业通用岗位培训方案  -->
    <div class="platform-animation">
      <h4 class="client-title">企业通用岗位培训方案</h4>
      <ul>
        <li @click="goChildPage('zhiYeSuYang')">
          <i></i>
          <span>职业素养</span>
        </li>
        <li @click="goChildPage('lingDaoNengLi')">
          <i></i>
          <span>领导能力</span>
        </li>
        <li @click="goChildPage('renLiZiYuan')">
          <i></i>
          <span>人力资源</span>
        </li>
        <li @click="goChildPage('shiCHangYingXiao')">
          <i></i>
          <span>市场营销</span>
        </li>
        <li @click="goChildPage('xingZhengGuanLi')">
          <i></i>
          <span>行政管理</span>
        </li>
        <li @click="goChildPage('caiWuGuanLi')">
        <i></i>
          <span>财务管理</span>
        </li>
        <li @click="goChildPage('keFuFuWu')">
          <i></i>
          <span>客服服务</span>
        </li>
        <li @click="goChildPage('chanPinYunYing')">
          <i></i>
          <span>产品运营</span>
        </li>
        <li @click="goChildPage('shengChanCaiGou')">
          <i></i>
          <span>生产采购</span>
        </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>
    </div>

    <!--  为企业培训打造学习矩阵  -->
    <div class="platform-animation">
      <h4>为企业培训打造学习矩阵</h4>
      <ul>
        <li>
          <i></i>
          <span>课程总数近 <i>5000门</i></span>
        </li>
        <li>
          <i></i>
          <span>涵盖 <i>2000个</i>知识要点</span>
        </li>
        <li>
          <i></i>
          <span>提供 <i>9大</i>通用岗位培训方案</span>
        </li>
        <li>
          <i></i>
          <span>课程资源 <i>每月</i>持续更新</span>
        </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>
    </div>

    <!--  课程内容形式多样  -->
    <div class="platform-animation">
      <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,
    }
  },
  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-exam-page {
  margin-top: 70px;
}

.client-banner-box {
  height: 200px;
  background: green;
  text-align: center;
  color: #fff;
}

.btns-group {
  display: flex;
  text-align: center;
  .client-default-Btn {
    width: 120px;
    margin-right: 20px;
  }
}

.platform-animation {
  ul {
    font-size: 16px;
  }
}
</style>