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 client-container">
      <h4 class="client-title">企业通用岗位培训方案</h4>
      <ul>
        <li @click="goChildPage('zhiYeSuYang')">
          <i :style="`background: url('~/static/gangweiIcon/z60.png')`"></i>
          <span>职业素养</span>
        </li>
        <li @click="goChildPage('lingDaoNengLi')">
          <i :style="`background: url('~/static/gangweiIcon/z61.png')`"></i>
          <span>领导能力</span>
        </li>
        <li @click="goChildPage('renLiZiYuan')">
          <i :style="`background: url('~/static/gangweiIcon/z62.png')`"></i>
          <span>人力资源</span>
        </li>
        <li @click="goChildPage('shiCHangYingXiao')">
          <i :style="`background: url('~/static/gangweiIcon/z63.png')`"></i>
          <span>市场营销</span>
        </li>
        <li @click="goChildPage('xingZhengGuanLi')">
          <i :style="`background: url('~/static/gangweiIcon/z64.png')`"></i>
          <span>行政管理</span>
        </li>
        <li @click="goChildPage('caiWuGuanLi')">
          <i :style="`background: url('~/static/gangweiIcon/z65.png')`"></i>
          <span>财务管理</span>
        </li>
        <li @click="goChildPage('keFuFuWu')">
          <i :style="`background: url('~/static/gangweiIcon/z66.png')`"></i>
          <span>客服服务</span>
        </li>
        <li @click="goChildPage('chanPinYunYing')">
          <i :style="`background: url('~/static/gangweiIcon/z67.png')`"></i>
          <span>产品运营</span>
        </li>
        <li @click="goChildPage('shengChanCaiGou')">
          <i :style="`background: url('~/static/gangweiIcon/z68.png')`"></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,
      // icon1: require(''),
    }
  },
  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;
}

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

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




.btns-group {
  display: flex;
  text-align: center;
}

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

    li {
      width: 277px;
      height: 112px;
      display: inline-block;

      i {
        display: inline-block;
        width: 64px;
        height: 70px;
      }
    }
  }
}
</style>