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="onlineFun">在线咨询</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="onlineFun">在线咨询</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="onlineFun">在线咨询</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="onlineFun">在线咨询</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="onlineFun">在线咨询</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="onlineFun">在线咨询</span></div>
      </div>
    </div>

    <!-- 我们与优秀客户一同发展 -->
    <div class="client-customer-box">
      <div class="client-container">
        <h4 class="client-title">我们与优秀客户一同发展</h4>
        <img :src="customerImgAll" alt="我们与优秀客户一同发展" />
      </div>

    </div>
    <!-- 系统维护-->
   <!-- <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>-->

    <!-- 免费试用弹窗-->
    <reg-dialog :dialogVisible="regDialogFlag"  systemType="pxAdmin" @changeShow="showRegDialogUpdate"></reg-dialog>
  </div>
</template>

<script>
  import regDialog from '~/components/registerDialog';
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    name:     'trainsystem',
    layout:   'templateB',
    components: {
      regDialog,
    },
    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`),
        regDialogFlag:false,
        customerImgAll:  require(`~/static/images/client/train/train-customer-imgAll.png`),
      };
    },
    head(){
      return {
        title: '培训软件_培训软件app_培训软件系统下载',
        meta: [
          {
            name: 'keywords',
            content: '培训软件下载,培训系统下载'
          },
          {
            name:'description',
            content:'久创培训软件系统是一款高效智能的企业培训系统，集练习、测评考试、在线培训学习于一体,拥有强大的督学体系，支持市面各种主流浏览器，轻松助力企业实现高频培训。'
          }
        ],
      }
    },
    computed: {},
    methods:  {
      // 弹窗关闭
      showRegDialogUpdate(data){
        this.regDialogFlag  = !data
        if(data === 'false'){
          this.regDialogFlag = false
        }else{
          this.regDialogFlag = true
        }
      },
      // 免费试用
      FreeTrial(){
        this.regDialogFlag = true;
      },

      // 在线咨询
      onlineFun(){
        window.open('https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd')
      },

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

</style>