nuxtProject/pages/product/xingZhengGuanLi.vue

<template>
  <div class="client-platform-page client-exam-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>
      <span>行政部</span>
    </div>

    <!--  部门描述  -->
    <div class="client-description-box">
      行政部门主要负责企业的行政管理工作，配合业务部门进行文案写作、协调组织会议，商务接待、办公品采购等业务。
    </div>

      <!--  岗位职责  -->
      <gangweiList label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangweiList>


    <!--  部分课程列表  -->
    <div class="platform-course-list">
      <h4>部分课程列表</h4>
      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
      <div class="btns-group">
        <a class="client-default-Btn">
          <freeTrialBtn myType="kaoshi"/>
        </a>
        <onlineInformationBtn class="client-default-Btn"/>
      </div>
    </div>

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

<script>
import mtaTable from "~/components/common/mtaTable";
import videoDialog from "~/components/common/videoDialog";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import pingfen from "~/components/common/pingfen";
import gangweiList from "@/components/common/layout/desComp/gangweiList";
import {BannerImgs, xingzhengguanli} from "~/defaultConfig";

/**
 * @ 产品与服务 -> 课程资源 -> 行政管理
 */

export default {
  name: "professionalQuality",
  layout: 'templateB',
  async asyncData({$axios}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.xingzhenguanli}),
    ]
    const [res1] = await Promise.all(arr);
    return {
      bannerList: res1.data.data || [],
    }
  },
  components: {
    mtaTable, videoDialog,
    freeTrialBtn, onlineInformationBtn, pingfen, gangweiList
  },
  head() {
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name: 'description',
          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  computed: {
    gangwei() {
      return xingzhengguanli
    }
  },
  data() {
    return {
      tableConfig: [
        {
          label: '课程名称',
          key: 'name'
        },
        {
          label: '使用行业',
          key: 'hangye'
        },
        {
          label: '使用人群',
          key: 'renqun'
        }
      ],
      tableData: [
        {
          name: 'B堂课让你成为公文写作高手',
          shikanUrl: 'https://1111',
          hangye: '全行业',
          renqun: '行政专员'
        },
        {
          name: '商务礼仪，职场交往的加分利器',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '行政主管'
        },
        {
          name: '职场能力方程组',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '行政主管'
        },
        {
          name: '巧用思维导图、提高工作效率',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '行政主管'
        },
        {
          name: '赢在执行',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '行政主管'
        },
        {
          name: '时间管理',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '行政主管'
        },
        {
          name: '信息安全',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '行政主管'
        },
        {
          name: '高效主持会议',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '销售经理'
        },
      ],
      curVideo: '',
      visible: false,
    }
  },
  methods: {
    shiKan({url}) {
      this.visible = true;
      this.curVideo = url;
    }
  }
}
</script>

<style scoped>

</style>