一、列表页面

创建 pages/course/index.vue

  1. <template>
  2.   <div id="aCoursesList" class="bg-fa of">
  3.     <!-- /课程列表 开始 -->
  4.     <section class="container">
  5.       <header class="comm-title">
  6.         <h2 class="fl tac">
  7.           <span class="c-333">全部课程</span>
  8.         </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">
  101.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  102.                     </div>
  103.                   </section>
  104.                   <h3 class="hLh30 txtOf mt10">
  105.                     <a href="/course/1" title="听力口语" class="course-title fsize18 c-333">听力口语</a>
  106.                   </h3>
  107.                   <section class="mt10 hLh20 of">
  108.                     <span class="fr jgTag bg-green">
  109.                       <i class="c-fff fsize12 f-fA">免费</i>
  110.                     </span>
  111.                     <span class="fl jgAttr c-ccc f-fA">
  112.                       <i class="c-999 f-fA">9634人学习</i>
  113.                       |
  114.                       <i class="c-999 f-fA">9634评论</i>
  115.                     </span>
  116.                   </section>
  117.                 </div>
  118.               </li>
  119.               <li>
  120.                 <div class="cc-l-wrap">
  121.                   <section class="course-img">
  122.                     <img src="~/assets/photo/course/1442295581911.jpg" class="img-responsive" alt="Java精品课程">
  123.                     <div class="cc-mask">
  124.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  125.                     </div>
  126.                   </section>
  127.                   <h3 class="hLh30 txtOf mt10">
  128.                     <a href="/course/1" title="Java精品课程" class="course-title fsize18 c-333">Java精品课程</a>
  129.                   </h3>
  130.                   <section class="mt10 hLh20 of">
  131.                     <span class="fr jgTag bg-green">
  132.                       <i class="c-fff fsize12 f-fA">免费</i>
  133.                     </span>
  134.                     <span class="fl jgAttr c-ccc f-fA">
  135.                       <i class="c-999 f-fA">501人学习</i>
  136.                       |
  137.                       <i class="c-999 f-fA">501评论</i>
  138.                     </span>
  139.                   </section>
  140.                 </div>
  141.               </li>
  142.               <li>
  143.                 <div class="cc-l-wrap">
  144.                   <section class="course-img">
  145.                     <img src="~/assets/photo/course/1442295604295.jpg" class="img-responsive" alt="C4D零基础">
  146.                     <div class="cc-mask">
  147.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  148.                     </div>
  149.                   </section>
  150.                   <h3 class="hLh30 txtOf mt10">
  151.                     <a href="/course/1" title="C4D零基础" class="course-title fsize18 c-333">C4D零基础</a>
  152.                   </h3>
  153.                   <section class="mt10 hLh20 of">
  154.                     <span class="fr jgTag bg-green">
  155.                       <i class="c-fff fsize12 f-fA">免费</i>
  156.                     </span>
  157.                     <span class="fl jgAttr c-ccc f-fA">
  158.                       <i class="c-999 f-fA">300人学习</i>
  159.                       |
  160.                       <i class="c-999 f-fA">300评论</i>
  161.                     </span>
  162.                   </section>
  163.                 </div>
  164.               </li>
  165.               <li>
  166.                 <div class="cc-l-wrap">
  167.                   <section class="course-img">
  168.                     <img
  169.                       src="~/assets/photo/course/1442302831779.jpg"
  170.                       class="img-responsive"
  171.                       alt="数学给宝宝带来的兴趣"
  172.                     >
  173.                     <div class="cc-mask">
  174.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  175.                     </div>
  176.                   </section>
  177.                   <h3 class="hLh30 txtOf mt10">
  178.                     <a href="/course/1" title="数学给宝宝带来的兴趣" class="course-title fsize18 c-333">数学给宝宝带来的兴趣</a>
  179.                   </h3>
  180.                   <section class="mt10 hLh20 of">
  181.                     <span class="fr jgTag bg-green">
  182.                       <i class="c-fff fsize12 f-fA">免费</i>
  183.                     </span>
  184.                     <span class="fl jgAttr c-ccc f-fA">
  185.                       <i class="c-999 f-fA">256人学习</i>
  186.                       |
  187.                       <i class="c-999 f-fA">256评论</i>
  188.                     </span>
  189.                   </section>
  190.                 </div>
  191.               </li>
  192.               <li>
  193.                 <div class="cc-l-wrap">
  194.                   <section class="course-img">
  195.                     <img
  196.                       src="~/assets/photo/course/1442295455437.jpg"
  197.                       class="img-responsive"
  198.                       alt="零基础入门学习Python课程学习"
  199.                     >
  200.                     <div class="cc-mask">
  201.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  202.                     </div>
  203.                   </section>
  204.                   <h3 class="hLh30 txtOf mt10">
  205.                     <a
  206.                       href="/course/1"
  207.                       title="零基础入门学习Python课程学习"
  208.                       class="course-title fsize18 c-333"
  209.                     >零基础入门学习Python课程学习</a>
  210.                   </h3>
  211.                   <section class="mt10 hLh20 of">
  212.                     <span class="fr jgTag bg-green">
  213.                       <i class="c-fff fsize12 f-fA">免费</i>
  214.                     </span>
  215.                     <span class="fl jgAttr c-ccc f-fA">
  216.                       <i class="c-999 f-fA">137人学习</i>
  217.                       |
  218.                       <i class="c-999 f-fA">137评论</i>
  219.                     </span>
  220.                   </section>
  221.                 </div>
  222.               </li>
  223.               <li>
  224.                 <div class="cc-l-wrap">
  225.                   <section class="course-img">
  226.                     <img
  227.                       src="~/assets/photo/course/1442295570359.jpg"
  228.                       class="img-responsive"
  229.                       alt="MySql从入门到精通"
  230.                     >
  231.                     <div class="cc-mask">
  232.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  233.                     </div>
  234.                   </section>
  235.                   <h3 class="hLh30 txtOf mt10">
  236.                     <a href="/course/1" title="MySql从入门到精通" class="course-title fsize18 c-333">MySql从入门到精通</a>
  237.                   </h3>
  238.                   <section class="mt10 hLh20 of">
  239.                     <span class="fr jgTag bg-green">
  240.                       <i class="c-fff fsize12 f-fA">免费</i>
  241.                     </span>
  242.                     <span class="fl jgAttr c-ccc f-fA">
  243.                       <i class="c-999 f-fA">125人学习</i>
  244.                       |
  245.                       <i class="c-999 f-fA">125评论</i>
  246.                     </span>
  247.                   </section>
  248.                 </div>
  249.               </li>
  250.               <li>
  251.                 <div class="cc-l-wrap">
  252.                   <section class="course-img">
  253.                     <img src="~/assets/photo/course/1442302852837.jpg" class="img-responsive" alt="搜索引擎优化技术">
  254.                     <div class="cc-mask">
  255.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  256.                     </div>
  257.                   </section>
  258.                   <h3 class="hLh30 txtOf mt10">
  259.                     <a href="/course/1" title="搜索引擎优化技术" class="course-title fsize18 c-333">搜索引擎优化技术</a>
  260.                   </h3>
  261.                   <section class="mt10 hLh20 of">
  262.                     <span class="fr jgTag bg-green">
  263.                       <i class="c-fff fsize12 f-fA">免费</i>
  264.                     </span>
  265.                     <span class="fl jgAttr c-ccc f-fA">
  266.                       <i class="c-999 f-fA">123人学习</i>
  267.                       |
  268.                       <i class="c-999 f-fA">123评论</i>
  269.                     </span>
  270.                   </section>
  271.                 </div>
  272.               </li>
  273.               <li>
  274.                 <div class="cc-l-wrap">
  275.                   <section class="course-img">
  276.                     <img src="~/assets/photo/course/1442295379715.jpg" class="img-responsive" alt="20世纪西方音乐">
  277.                     <div class="cc-mask">
  278.                       <a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
  279.                     </div>
  280.                   </section>
  281.                   <h3 class="hLh30 txtOf mt10">
  282.                     <a href="/course/1" title="20世纪西方音乐" class="course-title fsize18 c-333">20世纪西方音乐</a>
  283.                   </h3>
  284.                   <section class="mt10 hLh20 of">
  285.                     <span class="fr jgTag bg-green">
  286.                       <i class="c-fff fsize12 f-fA">免费</i>
  287.                     </span>
  288.                     <span class="fl jgAttr c-ccc f-fA">
  289.                       <i class="c-999 f-fA">34人学习</i>
  290.                       |
  291.                       <i class="c-999 f-fA">34评论</i>
  292.                     </span>
  293.                   </section>
  294.                 </div>
  295.               </li>
  296.             </ul>
  297.             <div class="clear"></div>
  298.           </article>
  299.         </div>
  300.         <!-- 公共分页 开始 -->
  301.         <div>
  302.           <div class="paging">
  303.             <a class="undisable" title>首</a>
  304.             <a id="backpage" class="undisable" href="#" title>&lt;</a>
  305.             <a href="#" title class="current undisable">1</a>
  306.             <a href="#" title>2</a>
  307.             <a id="nextpage" href="#" title>&gt;</a>
  308.             <a href="#" title>末</a>
  309.             <div class="clear"></div>
  310.           </div>
  311.         </div>
  312.         <!-- 公共分页 结束 -->
  313.       </section>
  315.     </section>
  316.     <!-- /课程列表 结束 -->
  317.   </div>
  318. </template>
  319. <script>
  320. export default {};
  321. </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>