nuxtProject/pages/trainsystem/index.vue

<template>
  <div class="client-platform-page client-train-page">

    <!-- 培训平台页 banner栏 -->
    <div class="client-platform-banner" v-if="bannerList.length>0">
      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/train/train-banner-background.png`)})`}" class="client-platform-banner"></div>
      <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
    </div>
    <!-- 企业培训现状 -->
    <div class="train-status-box">
      <h4 class="client-title">企业培训现状</h4>
      <div class="client-container">
        <p>企业的发展在于人才比拼，而人才的比拼在于学习速度的比拼。</p>
        <p>为此，很多企业不惜重金去建设培训体系，对员工进行培训，但却起不到良好的成效。</p>
        <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-white-Btn" @click="goExamPage">在线咨询</span></div>
      </div>
    </div>

    <!-- 企业培训痛点 -->
    <div class="train-pain-point">
      <div class="client-container">
        <h4 class="client-title">企业培训痛点</h4>
        <ul>
          <li><i></i><p>受时间、场地影响</p><p>无法随时随地学习</p></li>
          <li><i></i><p>培训过度，学习不足</p><p>培训课程体系设置不合理</p></li>
          <li><i></i><p>老员工离职，带走工作经验</p><p>新人需重新摸索经验</p></li>
          <li><i></i><p>不能快速响应业务变化</p></li>
          <li><i></i><p>没有针对性，知识无法共享</p></li>
          <li><i></i><p>成本高，导致</p><p>企业不敢进行员工培训</p></li>
        </ul>
      </div>
    </div>

    <!--  解决方案 -->
    <div class="platform-products-services">
      <h4 class="client-title">解决方案</h4>
      <ul>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <img :src="trainAdvantagesImg1" alt="多平台学习" />
              <div class="products-services-content">
                <h5><span>多平台学习</span><i>1</i></h5>
                <i></i>
                <p>电脑端，移动端随时随地进行学习、考试。从而不再受时间地点的约束</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <img :src="trainAdvantagesImg2" alt="碎片化时间" />
              <div class="products-services-content">
                <h5><span>碎片化时间</span><i>2</i></h5>
                <i></i>
                <p>利用碎片时间进行学习，不需要拿出整段的时间，也不需要集中在某个地点</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <img :src="trainAdvantagesImg3" alt="标准化学习" />
              <div class="products-services-content">
                <h5><span>标准化学习</span><i>3</i></h5>
                <i></i>
                <p>课程、学时、学分、统考、练习、证书等标准化统一</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <img :src="trainAdvantagesImg4" alt="大数据分析" />
              <div class="products-services-content">
                <h5><span>大数据分析</span><i>4</i></h5>
                <i></i>
                <p>多维度数据统计，深层分析学情，帮助企业实现人才发掘、测评、培养、考核、任用一体化</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
              </div>
            </div>
          </div>
        </li>
      </ul>

    </div>

    <!--  系统十大适用功能辅助授课 -->
    <div class="train-fzsk-box">
      <h4 class="client-title">系统十大适用功能辅助授课</h4>
      <div class="client-container">
        <ul>
          <li><span>1</span><p>防录屏安全设置</p></li>
          <li><span>2</span><p>自定义章节学习</p></li>
          <li><span>3</span><p>课程笔记回看</p></li>
          <li><span>4</span><p>课程评论打分</p></li>
          <li><span>5</span><p>学习进度跟踪</p></li>
          <li><span>6</span><p>课程观看有效期</p></li>
          <li><span>7</span><p>课件共享下载</p></li>
          <li><span>8</span><p>移动端同步学习</p></li>
          <li><span>9</span><p>移动端同步学习</p></li>
          <li><span>10</span><p>多格式视频上传</p></li>
        </ul>
        <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-white-Btn" @click="goExamPage">在线咨询</span></div>
      </div>
    </div>
    <!-- 系统维护-->
   <!-- <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>-->
  </div>
</template>

<script>
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    name:     'trainsystem',
    layout:   'templateB',
    async asyncData({ $axios,store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/trainsystem');


      let [res1, res2] = await Promise.all([
                                             await $axios.$post(`/home/banner/list`, { 'code': 3 }).then(res => {
                                               return res;
                                             }),
                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'培训' }).then(res => {
                                               return res;
                                             })
                                           ]);
      return {
        bannerList: res1.data.data||[],
        topCarousels: res2.data.data||[],

      };
    },
    data() {
      return {
        trainAdvantagesImg1:  require(`~/static/images/client/train/product-advantages-img1.png`),
        trainAdvantagesImg2:  require(`~/static/images/client/train/product-advantages-img2.png`),
        trainAdvantagesImg3:  require(`~/static/images/client/train/product-advantages-img3.png`),
        trainAdvantagesImg4:  require(`~/static/images/client/train/product-advantages-img4.png`),
      };
    },
    head(){
      return {
        title: '培训学校管理系统_远程培训系统_培训软件系统_【栋科软件工程有限公司】',
        meta: [
          {
            name: 'keywords',
            content: '培训公司系统,培训行业管理系统,模拟培训考试系统,培训系统管理软件,培训软件'
          },
          {
            name:'description',
            content:'麦塔在线培训系统量身定制满足您需求的在线学习平台，完善的学习流程帮助用户建设标准化的在线培训体系，麦塔培训软件系统具有功能丰富的在线考试模块和稳定安全的数据保护。'
          }
        ],
      }
    },
    computed: {},
    methods:  {
      // 免费试用
      FreeTrial(){
      },

      clickBanner(data){
        if(data){
          window.open(data)
        }
      },
    },
    created() {
    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>