一、列表页面
创建 pages/course/index.vue

  2. <template>
  3. <div id="aCoursesList" class="bg-fa of">
  4.    <!-- /课程列表 开始 -->
  5.    <section class="container">
  6.      <header class="comm-title">
  7.        <h2 class="fl tac">
  8.          <span class="c-333">全部课程</span>
  9.        </h2>
  10.      </header>
  11.      <section class="c-sort-box">
  12.        <section class="c-s-dl">
  13.          <dl>
  14.            <dt>
  15.              <span class="c-999 fsize14">课程类别</span>
  16.            </dt>
  17.            <dd class="c-s-dl-li">
  18.              <ul class="clearfix">
  19.                <li>
  20.                  <a title="全部" href="#">全部</a>
  21.                </li>
  22.                <li>
  23.                  <a title="数据库" href="#">数据库</a>
  24.                </li>
  25.                <li class="current">
  26.                  <a title="外语考试" href="#">外语考试</a>
  27.                </li>
  28.                <li>
  29.                  <a title="教师资格证" href="#">教师资格证</a>
  30.                </li>
  31.                <li>
  32.                  <a title="公务员" href="#">公务员</a>
  33.                </li>
  34.                <li>
  35.                  <a title="移动开发" href="#">移动开发</a>
  36.                </li>
  37.                <li>
  38.                  <a title="操作系统" href="#">操作系统</a>
  39.                </li>
  40.              </ul>
  41.            </dd>
  42.          </dl>
  43.          <dl>
  44.            <dt>
  45.              <span class="c-999 fsize14"></span>
  46.            </dt>
  47.            <dd class="c-s-dl-li">
  48.              <ul class="clearfix">
  49.                <li>
  50.                  <a title="职称英语" href="#">职称英语</a>
  51.                </li>
  52.                <li>
  53.                  <a title="英语四级" href="#">英语四级</a>
  54.                </li>
  55.                <li>
  56.                  <a title="英语六级" href="#">英语六级</a>
  57.                </li>
  58.              </ul>
  59.            </dd>
  60.          </dl>
  61.          <div class="clear"></div>
  62.        </section>
  63.        <div class="js-wrap">
  64.          <section class="fr">
  65.            <span class="c-ccc">
  66.              <i class="c-master f-fM">1</i>/
  67.              <i class="c-666 f-fM">1</i>
  68.            </span>
  69.          </section>
  70.          <section class="fl">
  71.            <ol class="js-tap clearfix">
  72.              <li>
  73.                <a title="关注度" href="#">关注度</a>
  74.              </li>
  75.              <li>
  76.                <a title="最新" href="#">最新</a>
  77.              </li>
  78.              <li class="current bg-orange">
  79.                <a title="价格" href="#">价格&nbsp;
  80.                  <span>↓</span>
  81.                </a>
  82.              </li>
  83.            </ol>
  84.          </section>
  85.        </div>
  86.        <div class="mt40">
  87.          <!-- /无数据提示 开始-->
  88.          <section class="no-data-wrap">
  89.            <em class="icon30 no-data-ico">&nbsp;</em>
  90.            <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
  91.          </section>
  92.          <!-- /无数据提示 结束-->
  93.          <article class="comm-course-list">
  94.            <ul class="of" id="bna">
  95.              <li>
  96.                <div class="cc-l-wrap">
  97.                  <section class="course-img">
  98.                    <img src="~/assets/photo/course/1442295592705.jpg" class="img-responsive" alt="听力口语">
  99.                    <div class="cc-mask">
  100.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  101.                    </div>
  102.                  </section>
  103.                  <h3 class="hLh30 txtOf mt10">
  104.                    <a href="/course/1" title="听力口语" class="course-title fsize18 c-333">听力口语</a>
  105.                  </h3>
  106.                  <section class="mt10 hLh20 of">
  107.                    <span class="fr jgTag bg-green">
  108.                      <i class="c-fff fsize12 f-fA">免费</i>
  109.                    </span>
  110.                    <span class="fl jgAttr c-ccc f-fA">
  111.                      <i class="c-999 f-fA">9634人学习</i>
  112.                      |
  113.                      <i class="c-999 f-fA">9634评论</i>
  114.                    </span>
  115.                  </section>
  116.                </div>
  117.              </li>
  118.              <li>
  119.                <div class="cc-l-wrap">
  120.                  <section class="course-img">
  121.                    <img src="~/assets/photo/course/1442295581911.jpg" class="img-responsive" alt="Java精品课程">
  122.                    <div class="cc-mask">
  123.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  124.                    </div>
  125.                  </section>
  126.                  <h3 class="hLh30 txtOf mt10">
  127.                    <a href="/course/1" title="Java精品课程" class="course-title fsize18 c-333">Java精品课程</a>
  128.                  </h3>
  129.                  <section class="mt10 hLh20 of">
  130.                    <span class="fr jgTag bg-green">
  131.                      <i class="c-fff fsize12 f-fA">免费</i>
  132.                    </span>
  133.                    <span class="fl jgAttr c-ccc f-fA">
  134.                      <i class="c-999 f-fA">501人学习</i>
  135.                      |
  136.                      <i class="c-999 f-fA">501评论</i>
  137.                    </span>
  138.                  </section>
  139.                </div>
  140.              </li>
  141.              <li>
  142.                <div class="cc-l-wrap">
  143.                  <section class="course-img">
  144.                    <img src="~/assets/photo/course/1442295604295.jpg" class="img-responsive" alt="C4D零基础">
  145.                    <div class="cc-mask">
  146.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  147.                    </div>
  148.                  </section>
  149.                  <h3 class="hLh30 txtOf mt10">
  150.                    <a href="/course/1" title="C4D零基础" class="course-title fsize18 c-333">C4D零基础</a>
  151.                  </h3>
  152.                  <section class="mt10 hLh20 of">
  153.                    <span class="fr jgTag bg-green">
  154.                      <i class="c-fff fsize12 f-fA">免费</i>
  155.                    </span>
  156.                    <span class="fl jgAttr c-ccc f-fA">
  157.                      <i class="c-999 f-fA">300人学习</i>
  158.                      |
  159.                      <i class="c-999 f-fA">300评论</i>
  160.                    </span>
  161.                  </section>
  162.                </div>
  163.              </li>
  164.              <li>
  165.                <div class="cc-l-wrap">
  166.                  <section class="course-img">
  167.                    <img
  168.                      src="~/assets/photo/course/1442302831779.jpg"
  169.                      class="img-responsive"
  170.                      alt="数学给宝宝带来的兴趣"
  171.                    >
  172.                    <div class="cc-mask">
  173.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  174.                    </div>
  175.                  </section>
  176.                  <h3 class="hLh30 txtOf mt10">
  177.                    <a href="/course/1" title="数学给宝宝带来的兴趣" class="course-title fsize18 c-333">数学给宝宝带来的兴趣</a>
  178.                  </h3>
  179.                  <section class="mt10 hLh20 of">
  180.                    <span class="fr jgTag bg-green">
  181.                      <i class="c-fff fsize12 f-fA">免费</i>
  182.                    </span>
  183.                    <span class="fl jgAttr c-ccc f-fA">
  184.                      <i class="c-999 f-fA">256人学习</i>
  185.                      |
  186.                      <i class="c-999 f-fA">256评论</i>
  187.                    </span>
  188.                  </section>
  189.                </div>
  190.              </li>
  191.              <li>
  192.                <div class="cc-l-wrap">
  193.                  <section class="course-img">
  194.                    <img
  195.                      src="~/assets/photo/course/1442295455437.jpg"
  196.                      class="img-responsive"
  197.                      alt="零基础入门学习Python课程学习"
  198.                    >
  199.                    <div class="cc-mask">
  200.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  201.                    </div>
  202.                  </section>
  203.                  <h3 class="hLh30 txtOf mt10">
  204.                    <a
  205.                      href="/course/1"
  206.                      title="零基础入门学习Python课程学习"
  207.                      class="course-title fsize18 c-333"
  208.                    >零基础入门学习Python课程学习</a>
  209.                  </h3>
  210.                  <section class="mt10 hLh20 of">
  211.                    <span class="fr jgTag bg-green">
  212.                      <i class="c-fff fsize12 f-fA">免费</i>
  213.                    </span>
  214.                    <span class="fl jgAttr c-ccc f-fA">
  215.                      <i class="c-999 f-fA">137人学习</i>
  216.                      |
  217.                      <i class="c-999 f-fA">137评论</i>
  218.                    </span>
  219.                  </section>
  220.                </div>
  221.              </li>
  222.              <li>
  223.                <div class="cc-l-wrap">
  224.                  <section class="course-img">
  225.                    <img
  226.                      src="~/assets/photo/course/1442295570359.jpg"
  227.                      class="img-responsive"
  228.                      alt="MySql从入门到精通"
  229.                    >
  230.                    <div class="cc-mask">
  231.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  232.                    </div>
  233.                  </section>
  234.                  <h3 class="hLh30 txtOf mt10">
  235.                    <a href="/course/1" title="MySql从入门到精通" class="course-title fsize18 c-333">MySql从入门到精通</a>
  236.                  </h3>
  237.                  <section class="mt10 hLh20 of">
  238.                    <span class="fr jgTag bg-green">
  239.                      <i class="c-fff fsize12 f-fA">免费</i>
  240.                    </span>
  241.                    <span class="fl jgAttr c-ccc f-fA">
  242.                      <i class="c-999 f-fA">125人学习</i>
  243.                      |
  244.                      <i class="c-999 f-fA">125评论</i>
  245.                    </span>
  246.                  </section>
  247.                </div>
  248.              </li>
  249.              <li>
  250.                <div class="cc-l-wrap">
  251.                  <section class="course-img">
  252.                    <img src="~/assets/photo/course/1442302852837.jpg" class="img-responsive" alt="搜索引擎优化技术">
  253.                    <div class="cc-mask">
  254.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  255.                    </div>
  256.                  </section>
  257.                  <h3 class="hLh30 txtOf mt10">
  258.                    <a href="/course/1" title="搜索引擎优化技术" class="course-title fsize18 c-333">搜索引擎优化技术</a>
  259.                  </h3>
  260.                  <section class="mt10 hLh20 of">
  261.                    <span class="fr jgTag bg-green">
  262.                      <i class="c-fff fsize12 f-fA">免费</i>
  263.                    </span>
  264.                    <span class="fl jgAttr c-ccc f-fA">
  265.                      <i class="c-999 f-fA">123人学习</i>
  266.                      |
  267.                      <i class="c-999 f-fA">123评论</i>
  268.                    </span>
  269.                  </section>
  270.                </div>
  271.              </li>
  272.              <li>
  273.                <div class="cc-l-wrap">
  274.                  <section class="course-img">
  275.                    <img src="~/assets/photo/course/1442295379715.jpg" class="img-responsive" alt="20世纪西方音乐">
  276.                    <div class="cc-mask">
  277.                      <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  278.                    </div>
  279.                  </section>
  280.                  <h3 class="hLh30 txtOf mt10">
  281.                    <a href="/course/1" title="20世纪西方音乐" class="course-title fsize18 c-333">20世纪西方音乐</a>
  282.                  </h3>
  283.                  <section class="mt10 hLh20 of">
  284.                    <span class="fr jgTag bg-green">
  285.                      <i class="c-fff fsize12 f-fA">免费</i>
  286.                    </span>
  287.                    <span class="fl jgAttr c-ccc f-fA">
  288.                      <i class="c-999 f-fA">34人学习</i>
  289.                      |
  290.                      <i class="c-999 f-fA">34评论</i>
  291.                    </span>
  292.                  </section>
  293.                </div>
  294.              </li>
  295.            </ul>
  296.            <div class="clear"></div>
  297.          </article>
  298.        </div>
  299.        <!-- 公共分页 开始 -->
  300.        <div>
  301.          <div class="paging">
  302.            <a class="undisable" title>首</a>
  303.            <a id="backpage" class="undisable" href="#" title>&lt;</a>
  304.            <a href="#" title class="current undisable">1</a>
  305.            <a href="#" title>2</a>
  306.            <a id="nextpage" href="#" title>&gt;</a>
  307.            <a href="#" title>末</a>
  308.            <div class="clear"></div>
  309.          </div>
  310.        </div>
  311.        <!-- 公共分页 结束 -->
  313.       </section>
  314.     </section>
  315.     <!-- /课程列表 结束 -->
  316.   </div>
  317. </template>
  318. <script>
  319. export default {};
  320. </script>

二、详情页面

创建 pages/course/_id.vue

<template>
  <div id="aCoursesList" class="bg-fa of">
   <!-- /课程详情 开始 -->
   <section class="container">
     <section class="path-wrap txtOf hLh30">
       <a href="#" title class="c-999 fsize14">首页</a>
       \
       <a href="#" title class="c-999 fsize14">课程列表</a>
       \
       <span class="c-333 fsize14">Java精品课程</span>
     </section>
     <div>
       <article class="c-v-pic-wrap" style="height: 357px;">
         <section class="p-h-video-box" id="videoPlay">
           <img src="~/assets/photo/course/1442295581911.jpg" alt="Java精品课程" class="dis c-v-pic">
         </section>
       </article>
       <aside class="c-attr-wrap">
         <section class="ml20 mr15">
           <h2 class="hLh30 txtOf mt15">
             <span class="c-fff fsize24">Java精品课程</span>
           </h2>
           <section class="c-attr-jg">
             <span class="c-fff">价格：</span>
             <b class="c-yellow" style="font-size:24px;">￥0.00</b>
           </section>
           <section class="c-attr-mt c-attr-undis">
             <span class="c-fff fsize14">主讲： 唐嫣&nbsp;&nbsp;&nbsp;</span>
           </section>
           <section class="c-attr-mt of">
             <span class="ml10 vam">
               <em class="icon18 scIcon"></em>
               <a class="c-fff vam" title="收藏" href="#" >收藏</a>
             </span>
           </section>
           <section class="c-attr-mt">
             <a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
           </section>
         </section>
       </aside>
       <aside class="thr-attr-box">
         <ol class="thr-attr-ol clearfix">
           <li>
             <p>&nbsp;</p>
             <aside>
               <span class="c-fff f-fM">购买数</span>
               <br>
               <h6 class="c-fff f-fM mt10">150</h6>
             </aside>
           </li>
           <li>
             <p>&nbsp;</p>
             <aside>
               <span class="c-fff f-fM">课时数</span>
               <br>
               <h6 class="c-fff f-fM mt10">20</h6>
             </aside>
           </li>
           <li>
             <p>&nbsp;</p>
             <aside>
               <span class="c-fff f-fM">浏览数</span>
               <br>
               <h6 class="c-fff f-fM mt10">501</h6>
             </aside>
           </li>
         </ol>
       </aside>
       <div class="clear"></div>
     </div>
     <!-- /课程封面介绍 -->
     <div class="mt20 c-infor-box">
       <article class="fl col-7">
         <section class="mr30">
           <div class="i-box">
             <div>
               <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                 <a name="c-i" class="current" title="课程详情">课程详情</a>
               </section>
             </div>
             <article class="ml10 mr10 pt20">
               <div>
                 <h6 class="c-i-content c-infor-title">
                   <span>课程介绍</span>
                 </h6>
                 <div class="course-txt-body-wrap">
                   <section class="course-txt-body">
                     <p>
                       Java的发展历史，可追溯到1990年。当时Sun&nbsp;Microsystem公司为了发展消费性电子产品而进行了一个名为Green的项目计划。该计划
                       负责人是James&nbsp;Gosling。起初他以C++来写一种内嵌式软件，可以放在烤面包机或PAD等小型电子消费设备里，使得机器更聪明，具有人工智
                       能。但他发现C++并不适合完成这类任务！因为C++常会有使系统失效的程序错误，尤其是内存管理，需要程序设计师记录并管理内存资源。这给设计师们造成
                       极大的负担，并可能产生许多bugs。&nbsp;
                       <br>为了解决所遇到的问题，Gosling决定要发展一种新的语言，来解决C++的潜在性危险问题，这个语言名叫Oak。Oak是一种可移植性语言，也就是一种平台独立语言，能够在各种芯片上运行。
                       <br>1994年，Oak技术日趋成熟，这时网络正开始蓬勃发展。Oak研发小组发现Oak很适合作为一种网络程序语言。因此发展了一个能与Oak配合的浏
                       览器--WebRunner，后更名为HotJava，它证明了Oak是一种能在网络上发展的程序语言。由于Oak商标已被注册，工程师们便想到以自己常
                       享用的咖啡(Java)来重新命名，并于Sun&nbsp;World&nbsp;95中被发表出来。
                     </p>
                   </section>
                 </div>
               </div>
               <!-- /课程介绍 -->
               <div class="mt50">
                 <h6 class="c-g-content c-infor-title">
                   <span>课程大纲</span>
                 </h6>
                 <section class="mt20">
                   <div class="lh-menu-wrap">
                     <menu id="lh-menu" class="lh-menu mt10 mr10">
                       <ul>
                         <!-- 文件目录 -->
                         <li class="lh-menu-stair">
                           <a href="javascript: void(0)" title="第一章" class="current-1">
                             <em class="lh-menu-i-1 icon18 mr10"></em>第一章
                           </a>
                           <ol class="lh-menu-ol" style="display: block;">
                             <li class="lh-menu-second ml30">
                               <a href="#" title>
                                 <span class="fr">
                                   <i class="free-icon vam mr10">免费试听</i>
                                 </span>
                                 <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>第一节
                               </a>
                             </li>
                             <li class="lh-menu-second ml30">
                               <a href="#" title class="current-2">
                                 <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>第二节
                               </a>
                             </li>
                           </ol>
                         </li>
                       </ul>
                     </menu>
                   </div>
                 </section>
               </div>
               <!-- /课程大纲 -->
             </article>
           </div>
         </section>
       </article>
       <aside class="fl col-3">
         <div class="i-box">
           <div>
             <section class="c-infor-tabTitle c-tab-title">
               <a title href="javascript:void(0)">主讲讲师</a>
             </section>
             <section class="stud-act-list">
               <ul style="height: auto;">
                 <li>
                   <div class="u-face">
                     <a href="#">
                       <img src="~/assets/photo/teacher/1442297969808.jpg" width="50" height="50" alt>
                     </a>
                   </div>
                   <section class="hLh30 txtOf">
                     <a class="c-333 fsize16 fl" href="#">周杰伦</a>
                   </section>
                   <section class="hLh20 txtOf">
                     <span class="c-999">毕业于北京大学数学系</span>
                   </section>
                 </li>
               </ul>
             </section>
           </div>
         </div>
       </aside>
       <div class="clear"></div>
     </div>

    </section>
    <!-- /课程详情 结束 -->
  </div>
</template>

<script>
export default {};
</script>