nuxtProject/pages/courseware/index.vue

<template>
  <div class="client-course-page">
    <!-- 课程开发页 banner栏 -->
    <div class="client-course-banner">
      <div class="client-container">
        <!--  banner文字区域 -->
        <div class="course-course-container">
          <h4>10年多媒体设计经验</h4>
          <p>让创意与视觉效果完美结合</p>
          <a>申请方案</a>
        </div>
      </div>
    </div>

    <!--  课程定制开发 -->
    <div class="course-made-box">
      <h4 class="client-title">课程定制开发</h4>
      <div class="client-container">
          <div class="course-made-content">
            <p>企业需要定制适合自己的个性化课程，将隐性、零散的企业知识显性化和系统化，使企业多年积累的经验得以有效沉淀和传承。栋科创建12年，凭借创新的技术、高效的服务响应和强大的战略执行，为客户打造专业优质的课程定制服务</p>
            <a>申请方案</a>
          </div>
          <img :src="courseMadeImg" alt="课程定制开发">
        </div>
    </div>

    <!--  E-learning课程 -->
    <div class="course-learn-box">
      <h4 class="client-title">E-learning课程</h4>
      <h5 class="client-subtitle-title">公司于2007年成立，我们凭借创新的技术、高效的服务响应和强大的战略执行，为用户打造可靠、优质、安全易用的教育软件产品及优质专业的内容制作服务</h5>
      <div class="client-container tc">
          <ul class="learn-box-list">
            <li><a href="#"></a><div><span><img :src="courseVideoImg1" alt="两分屏类E-Learning课程"><i></i></span><p>两分屏类E-Learning课程</p></div></li>
            <li><a href="#"></a><div><span><img :src="courseVideoImg2" alt="三分屏类E-Learning课程"><i></i></span><p>三分屏类E-Learning课程</p></div></li>
            <li><a href="#"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i></i></span><p>电子杂志类E-Learning课程</p></div></li>
            <li><a href="#"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i></i></span><p>FLASH图文类E-Learning课程</p></div></li>
            <li><a href="#"></a><div><span><img :src="courseVideoImg5" alt="FLASH交互类E-Learning课程"><i></i></span><p>FLASH交互类E-Learning课程</p></div></li>
            <li><a href="#"></a><div><span><img :src="courseVideoImg6" alt="视频类E-Learning课程"><i></i></span><p>视频类E-Learning课程</p></div></li>
          </ul>
          <a class="course-apply-btn">申请方案</a>
      </div>
    </div>

    <!--  微课程 -->
    <div class="course-learn-box course-micro-box">
      <h4 class="client-title">微课程</h4>
      <h5 class="client-subtitle-title">该类课程主要有：长图文、视频、H5交互等多种形式。内容短小精悍，利用碎片化时间，随时随地轻松学习</h5>
      <div class="client-container tc">
        <ul class="learn-box-list">
          <li><a href="#"></a><div><span><img :src="courseVideoImg7" alt="长图文类微课"><i></i></span><p>长图文类微课</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg8" alt="视频类微课"><i></i></span><p>视频类微课</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg9" alt="H5交互微课"><i></i></span><p>H5交互微课</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg10" alt="情景动画类微课"><i></i></span><p>情景动画类微课</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg11" alt="图文类微课"><i></i></span><p>图文类微课</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg12" alt="PPT微课"><i></i></span><p>PPT微课</p></div></li>
        </ul>
        <a class="course-apply-btn">申请方案</a>
      </div>
    </div>

    <!--  宣传片 -->
    <div class="course-learn-box">
      <h4 class="client-title">宣传片</h4>
      <h5 class="client-subtitle-title">宣传片主要有：手绘动画、MG动画、视频实拍等多种形式。用于企业形象宣传、广告推广等</h5>
      <div class="client-container tc">
        <ul class="learn-box-list">
          <li><a href="#"></a><div><span><img :src="courseVideoImg13" alt="手绘动画类宣传片"><i></i></span><p>手绘动画类宣传片</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg14" alt="MG动画类宣传片"><i></i></span><p>MG动画类宣传片</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg15" alt="视频类宣传片"><i></i></span><p>视频类宣传片</p></div></li>
        </ul>
        <a class="course-apply-btn">申请方案</a>
      </div>
    </div>

    <!--  情景动画 -->
    <div class="course-learn-box course-micro-box">
      <h4 class="client-title">情景动画</h4>
      <h5 class="client-subtitle-title">情景动画形式丰富多样，游戏化教学和精美动画相结合，激发学习者兴趣</h5>
      <div class="client-container tc">
        <ul class="learn-box-list">
          <li><a href="#"></a><div><span><img :src="courseVideoImg16" alt="儿歌动画"><i></i></span><p>儿歌动画</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg17" alt="故事教学"><i></i></span><p>故事教学</p></div></li>
          <li><a href="#"></a><div><span><img :src="courseVideoImg18" alt="过场动画"><i></i></span><p>过场动画</p></div></li>
        </ul>
        <a class="course-apply-btn">申请方案</a>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="client-industry-information">
      <h4 class="client-title">最新动态</h4>
      <div class="information-carousel-box">
        <el-carousel :interval="4000" arrow="always">
          <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
            <div
              class="industry-img-box"
              :style="{ backgroundImage: 'url(' + item.pic + ')' }"
            ></div>
            <div class="industry-content-box">
              <h5>{{ item.title }}</h5>
              <p>{{ item.intro }}</p>
              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name:       'courseware',
    layout:'templateA',
    async fetch({  $axios,store, params }) {
      try {
        store.commit('footerFlag',false)
      } catch(e) {

      }
    },
    components: {
    },
    props:      {
    },
    data() {
      return {
        courseMadeImg:  require(`~/static/images/client/course/course-made-img.png`),
        courseVideoImg1:  require(`~/static/images/client/course/course-video-img1.png`),
        courseVideoImg2:  require(`~/static/images/client/course/course-video-img2.png`),
        courseVideoImg3:  require(`~/static/images/client/course/course-video-img3.png`),
        courseVideoImg4:  require(`~/static/images/client/course/course-video-img4.png`),
        courseVideoImg5:  require(`~/static/images/client/course/course-video-img5.png`),
        courseVideoImg6:  require(`~/static/images/client/course/course-video-img6.png`),
        courseVideoImg7:  require(`~/static/images/client/course/course-video-img7.png`),
        courseVideoImg8:  require(`~/static/images/client/course/course-video-img8.png`),
        courseVideoImg9:  require(`~/static/images/client/course/course-video-img9.png`),
        courseVideoImg10:  require(`~/static/images/client/course/course-video-img10.png`),
        courseVideoImg11:  require(`~/static/images/client/course/course-video-img11.png`),
        courseVideoImg12:  require(`~/static/images/client/course/course-video-img12.png`),
        courseVideoImg13:  require(`~/static/images/client/course/course-video-img13.png`),
        courseVideoImg14:  require(`~/static/images/client/course/course-video-img14.png`),
        courseVideoImg15:  require(`~/static/images/client/course/course-video-img15.png`),
        courseVideoImg16:  require(`~/static/images/client/course/course-video-img16.png`),
        courseVideoImg17:  require(`~/static/images/client/course/course-video-img17.png`),
        courseVideoImg18:  require(`~/static/images/client/course/course-video-img18.png`),
      };
    },
    computed:   {},
    methods:    {

    },
    created() {

    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>