nuxtProject/pages/product/renLiZiYuan.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-xuexishouyi-box client-container">
      <h4 class="client-title">学习收益</h4>
      <ul>
        <li>
          <div class="products-services-box">
            <img :src="img1" alt="能力提升">
            <img :src="img2" alt="能力提升">
          </div>
        </li>
        <li>
          <imgCardLv2 class="my-imgCardLv2" :option="productData"></imgCardLv2>
        </li>
      </ul>
    </div>

    <!--  部分课程列表  -->
    <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 {BannerImgs} from "~/defaultConfig";
import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
import applicationDialog from "~/components/common/applicationDialog";
import applyBtn from "~/components/common/applyBtn";

/**
 * @ 产品与服务 -> 课程资源 -> 人力资源
 */
export default {
  name: "professionalQuality",
  layout:   'templateB',
  async asyncData({$axios}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.renliziyuan}),
    ]
    const [res1] = await Promise.all(arr);
    return {
      bannerList: res1.data.data || [],
    }
  },
  components: {
    mtaTable, videoDialog,applicationDialog,applyBtn,
    freeTrialBtn,onlineInformationBtn, imgCardLv2},
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {
      productData: {
        content: {
          title: '掌握知识',
          list: [
            {
              value: '明确人力资源的角色定位及岗位使命',
            },
            {
              value: '针对人力资源管理中的难点及关键点，掌握相应的处理策略解决问题',
            },
            {
              value: '了解不同性格的团队成员的管理方式，提高员工管理能力',
            },
            {
              value: '掌握人力资源规划、招聘面试、人才管理等日常业务工作的难点及关键点',
            },
            {
              value: '帮助人力资源管理者部署培养的方法及战略执行',
            },
          ],
          order: 2,
        },
        img: {
          url: require("~/static/productImage/p01.png"),
          order: 1,
        },
      },
      tableConfig: [
        {
          label: '课程名称',
          key: 'name'
        },
        {
          label: '使用行业',
          key: 'hangye'
        },
        {
          label: '使用人群',
          key: 'renqun'
        }
      ],
      tableData: [
        {
          name: '招聘与面试技巧',
          shikanUrl: 'https://spdb.mtavip.com/746bcb7504774fdbaa1b4351e316ae71/95a983029e0f450eaab4dbeeed1e547e-b61f71e9923afa45abc786599b7f5e2a-fd.mp4',
          hangye: '全行业',
          renqun: '人力专员'
        },
        {
          name: '校园招聘实操训练营',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力专员'
        },
        {
          name: '面试官的精准识人指南',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力专员'
        },
        {
          name: '薪酬福利管理',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力经理'
        },
        {
          name: '人力资源转型-HRBP的关键方法和实践演练',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力经理'
        },
        {
          name: '全面掌握胜任力模型',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力经理'
        },
        {
          name: '面试其实就是一场讲故事大赛',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力经理'
        },
        {
          name: 'HR入职恳谈',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力经理'
        },
        {
          name: '薪酬体系设计全解',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力总监'
        },
        {
          name: '实战课-从人力资源到团队资本',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '人力总监'
        },
      ],
      curVideo: '',
      visible: false,
      img1: require("~/static/productImage/p48.png"),
      img2: require("~/static/productImage/p02.png"),
      telDl: false,
    }
  },
  methods: {
    shiKan({url}) {
      this.visible = true;
      this.curVideo = url;
    },
    onApplyBtnActive() {
      this.telDl = true;
    },
    onApplyBtnActiveH5() {
      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/renLiZiYuan',}});
    },
  }
}
</script>

<style lang="scss" scoped>

.client-xuexishouyi-box {
  .client-title {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 140px;
  }
  .products-services-box {
    display: flex;
  }
}

.platform-course-list {
  h4 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 98px;
  }
}
div.client-xuexishouyi-box {
  .products-services-box {
    display: flex;
    margin-bottom: 90px;
    justify-content: flex-start;

    img {
      width: 446px;
      height: 342px;

      &:first-child {
        margin-right: 190px;
        width: 383px;
        height: 344px;
        padding-left: 50px;
      }
    }

    @media (max-width: 768px) {
      flex-direction: column;
      justify-content: center;
      margin-bottom: 3%;

      img {
        width: 80%;
        height: 230px;
        display: block;
        margin: 0 auto !important;


        &:nth-child(1) {
          order: 2;
          padding-left: 0px;
        }

        &:nth-child(2) {
          order: 1;
        }
      }
    }
  }
}


@media (max-width: 768px) {

  .client-xuexishouyi-box {
    .client-title {
      font-size: 20px;
      margin-bottom: 10%;
    }

    .products-services-box {
      flex-direction: column;
      img {
        width: 100%;
        margin-bottom: 5%;
      }
    }

    .my-imgCardLv2 {
      margin-bottom: 10%;
    }
  }

  .platform-course-list {
    h4 {
      font-size: 20px;
      margin-bottom: 10%;
    }
  }

}
</style>