nuxtProject/pages/product/zhiYeSuYang.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><i></i> 入职1~2年的基层员工</span>
    </div>

    <!--  学习收益  -->
    <div class="client-xuexishouyi-box">
      <h4 class="client-title">学习收益</h4>
      <ul>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <div class="products-services-content">
                <h5>能力提升</h5>
                <p><span>职业意识：</span> <pingfen value="5"></pingfen></p>
                <p><span>逻辑思维：</span> <pingfen value="5"></pingfen></p>
                <p><span>情商管理：</span> <pingfen value="5"></pingfen></p>
                <p><span>时间管理： </span><pingfen value="5"></pingfen></p>
                <p><span>呈现能力：</span> <pingfen value="5"></pingfen></p>
                <p><span>沟通能力：</span> <pingfen value="5"></pingfen></p>
                <p><span>礼仪修养： </span><pingfen value="5"></pingfen></p>
              </div>
              <img src="#" alt="能力提升">
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <div class="products-services-content">
                <h5>掌握知识</h5>
                <p class="p-before-circle">了解职业素养的相关内容，提高职业意识和职业化程度</p>
                <p class="p-before-circle">掌握时间管理的方法和技巧，提高办公效率和精准度</p>
                <p class="p-before-circle">通过学习快速了解压力的来源及情绪的调度，帮助处理好职场人际关系</p>
                <p class="p-before-circle">熟练掌握沟通表达，商务呈现等必备职业技能</p>
                <p class="p-before-circle">提升职业礼仪及修养，养成良好的职业习惯</p>
              </div>
              <img src="#" alt="多种终端支持，随时随地考试"/>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!--  部分课程列表  -->
    <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 {BannerImgs} from "~/defaultConfig";

/**
 * @ 产品与服务 -> 课程资源 -> 职业素养
 */

export default {
  name: "professionalQuality",
  layout:   'templateB',
  async asyncData({$axios}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhiyesuyang}),
    ]
    const [res1] = await Promise.all(arr);
    return {
      bannerList: res1.data.data || [],
    }
  },
  components: {
    mtaTable, videoDialog,
    freeTrialBtn,onlineInformationBtn, pingfen},
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {
      tableConfig: [
        {
          label: '课程名称',
          key: 'name'
        },
        {
          label: '使用行业',
          key: 'hangye'
        },
        {
          label: '使用人群',
          key: 'renqun'
        }
      ],
      tableData: [
        {
          name: '人际沟通： 如何更好地表达自己',
          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 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;
  }
}

</style>