nuxtProject/pages/product/caiWuGuanLi.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>
    </div>

    <!--  文本框  -->
    <div class="client-caiwu-text client-container">
      财务部主要负责企业的财务管理，主要只能是在本企业一定的整体目标下，
      关于资本的购置，资本的融通和经营中现金流量，以及利润分配的管理。
    </div>
      <!--  岗位职责  -->
      <gangwei-list label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>

    <!--  部分课程列表  -->
    <div class="platform-course-list client-container">
      <h4>部分课程列表</h4>
      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
      <div class="btn-groups center">
        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn />
      </div>
    </div>

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

    <!--  申请方案  -->
    <applicationDialog :visible.sync="telDl"></applicationDialog>
  </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 gangweiList from "@/components/common/layout/desComp/gangweiList";
import {BannerImgs, caiwuguanli} from "~/defaultConfig";
import applicationDialog from "~/components/common/applicationDialog";
import applyBtn from "~/components/common/applyBtn";

/**
 * @ 产品与服务 -> 课程资源 -> 财务管理
 */
export default {
  name: "professionalQuality",
  layout: 'templateB',
  head() {
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name: 'description',
          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  async asyncData({$axios}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.caiwuguanli}),
    ]
    const [res1] = await Promise.all(arr);
    return {
      bannerList: res1.data.data || [],
    }
  },
  components: {
    mtaTable, videoDialog,applicationDialog,applyBtn,
    freeTrialBtn, onlineInformationBtn, gangweiList
  },
  data() {
    return {
      tableConfig: [
        {
          label: '课程名称',
          key: 'name'
        },
        {
          label: '使用行业',
          key: 'hangye'
        },
        {
          label: '使用人群',
          key: 'renqun'
        }
      ],
      tableData: [
        {
          name: '人际沟通： 如何更好地表达自己',
          shikanUrl: 'https://spdb.mtavip.com/1c1790e6076e481eb6d7f432c1e26241/68e9bb9160d94676837652e031b320af-e8c28036107973b3f30f23c87b318179-fd.mp4',
          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,
      telDl: false,
    }
  },
  computed: {
    gangwei() {
      return caiwuguanli
    }
  },
  methods: {
    shiKan({url}) {
      this.visible = true;
      this.curVideo = url;
    },
    onApplyBtnActive() {
      this.telDl = true;
    },
    onApplyBtnActiveH5() {
      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/caiWuGuanLi',}});
    },
  }
}
</script>

<style lang="scss" scoped>

.client-caiwu-text {
  width: 800px;
  font-size: 24px;
  font-weight: 800;
  line-height: 48px;
  color: #565656;
  text-align: center;
  margin-top: 150px;
  padding: 100px;
  border-radius: 10px;
  background-image: url("~static/productImage/p43.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.platform-course-list {

  h4 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 68px;
  }

}


@media (max-width: 768px) {

  .client-caiwu-text {
    width: 80%;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    color: #565656;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 15%;
    border: none;
    padding: 0;
    background: none;
  }

  .platform-course-list {
    h4 {
      font-size: 18px;
      font-weight: 800;
      color: #333;
      text-align: center;
      margin-bottom: 10%;
      margin-top: 15%;
    }
  }

}

</style>