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>


</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`),
      };
    },
    computed:   {},
    methods:    {

    },
    created() {

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

</style>