一、列表页面

创建 pages/teacher/index.vue

  1. <template>
  2.    <div id="aCoursesList" class="bg-fa of">
  3.      <!-- 讲师列表 开始 -->
  4.      <section class="container">
  5.        <header class="comm-title all-teacher-title">
  6.          <h2 class="fl tac">
  7.            <span class="c-333">全部讲师</span>
  8.          </h2>
  10.         <section class="c-tab-title">
  11.           <a id="subjectAll" title="全部" href="#">全部</a>
  12.           <!-- <c:forEach var="subject" items="${subjectList }">
  13.                             <a id="${subject.subjectId}" title="${subject.subjectName }" href="javascript:void(0)" onclick="submitForm(${subject.subjectId})">${subject.subjectName }</a>
  14.           </c:forEach>-->
  15.         </section>
  16.       </header>
  17.       <section class="c-sort-box unBr">
  18.         <div>
  19.           <!-- /无数据提示 开始-->
  20.           <section class="no-data-wrap">
  21.             <em class="icon30 no-data-ico">&nbsp;</em>
  22.             <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
  23.           </section>
  24.           <!-- /无数据提示 结束-->
  25.           <article class="i-teacher-list">
  26.             <ul class="of">
  27.               <li>
  28.                 <section class="i-teach-wrap">
  29.                   <div class="i-teach-pic">
  30.                     <a href="/teacher/1" title="姚晨" target="_blank">
  31.                       <img src="~/assets/photo/teacher/1442297885942.jpg" alt>
  32.                     </a>
  33.                   </div>
  34.                   <div class="mt10 hLh30 txtOf tac">
  35.                     <a href="/teacher/1" title="姚晨" target="_blank" class="fsize18 c-666">姚晨</a>
  36.                   </div>
  37.                   <div class="hLh30 txtOf tac">
  38.                     <span class="fsize14 c-999">北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。</span>
  39.                   </div>
  40.                   <div class="mt15 i-q-txt">
  41.                     <p class="c-999 f-fA">北京师范大学法学院副教授</p>
  42.                   </div>
  43.                 </section>
  44.               </li>
  45.               <li>
  46.                 <section class="i-teach-wrap">
  47.                   <div class="i-teach-pic">
  48.                     <a href="/teacher/1" title="谢娜" target="_blank">
  49.                       <img src="~/assets/photo/teacher/1442297919077.jpg" alt>
  50.                     </a>
  51.                   </div>
  52.                   <div class="mt10 hLh30 txtOf tac">
  53.                     <a href="/teacher/1" title="谢娜" target="_blank" class="fsize18 c-666">谢娜</a>
  54.                   </div>
  55.                   <div class="hLh30 txtOf tac">
  56.                     <span class="fsize14 c-999">十年课程研发和培训咨询经验，曾任国企人力资源经理、大型外企培训经理，负责企业大学和培训体系搭建；曾任专业培训机构高级顾问、研发部总监，为包括广东移动、东莞移动、深圳移动、南方电网、工商银行、农业银行、民生银行、邮储银行、TCL集团、清华大学继续教育学院、中天路桥、广西扬翔股份等超过200家企业提供过培训与咨询服务，并担任近50个大型项目的总负责人。</span>
  57.                   </div>
  58.                   <div class="mt15 i-q-txt">
  59.                     <p class="c-999 f-fA">资深课程设计专家，专注10年AACTP美国培训协会认证导师</p>
  60.                   </div>
  61.                 </section>
  62.               </li>
  63.               <li>
  64.                 <section class="i-teach-wrap">
  65.                   <div class="i-teach-pic">
  66.                     <a href="/teacher/1" title="刘德华" target="_blank">
  67.                       <img src="~/assets/photo/teacher/1442297927029.jpg" alt>
  68.                     </a>
  69.                   </div>
  70.                   <div class="mt10 hLh30 txtOf tac">
  71.                     <a href="/teacher/1" title="刘德华" target="_blank" class="fsize18 c-666">刘德华</a>
  72.                   </div>
  73.                   <div class="hLh30 txtOf tac">
  74.                     <span class="fsize14 c-999">上海师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。</span>
  75.                   </div>
  76.                   <div class="mt15 i-q-txt">
  77.                     <p class="c-999 f-fA">上海师范大学法学院副教授</p>
  78.                   </div>
  79.                 </section>
  80.               </li>
  81.               <li>
  82.                 <section class="i-teach-wrap">
  83.                   <div class="i-teach-pic">
  84.                     <a href="/teacher/1" title="周润发" target="_blank">
  85.                       <img src="~/assets/photo/teacher/1442297935589.jpg" alt>
  86.                     </a>
  87.                   </div>
  88.                   <div class="mt10 hLh30 txtOf tac">
  89.                     <a href="/teacher/1" title="周润发" target="_blank" class="fsize18 c-666">周润发</a>
  90.                   </div>
  91.                   <div class="hLh30 txtOf tac">
  92.                     <span class="fsize14 c-999">法学博士，北京师范大学马克思主义学院副教授，专攻毛泽东思想概论、邓小平理论，长期从事考研辅导。出版著作两部，发表学术论文30余篇，主持国家社会科学基金项目和教育部重大课题子课题各一项，参与中央实施马克思主义理论研究和建设工程项目。</span>
  93.                   </div>
  94.                   <div class="mt15 i-q-txt">
  95.                     <p class="c-999 f-fA">考研政治辅导实战派专家，全国考研政治命题研究组核心成员。</p>
  96.                   </div>
  97.                 </section>
  98.               </li>
  99.               <li>
  101.                 <section class="i-teach-wrap">
  102.                  <div class="i-teach-pic">
  103.                    <a href="/teacher/1" title="钟汉良" target="_blank">
  104.                      <img src="~/assets/photo/teacher/1442298121626.jpg" alt>
  105.                    </a>
  106.                  </div>
  107.                  <div class="mt10 hLh30 txtOf tac">
  108.                    <a href="/teacher/1" title="钟汉良" target="_blank" class="fsize18 c-666">钟汉良</a>
  109.                  </div>
  110.                  <div class="hLh30 txtOf tac">
  111.                    <span class="fsize14 c-999">具备深厚的数学思维功底、丰富的小学教育经验，授课风格生动活泼，擅长用形象生动的比喻帮助理解、简单易懂的语言讲解难题，深受学生喜欢</span>
  112.                  </div>
  113.                  <div class="mt15 i-q-txt">
  114.                    <p class="c-999 f-fA">毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余</p>
  115.                  </div>
  116.                </section>
  117.              </li>
  118.              <li>
  119.                <section class="i-teach-wrap">
  120.                  <div class="i-teach-pic">
  121.                    <a href="/teacher/1" title="唐嫣" target="_blank">
  122.                      <img src="~/assets/photo/teacher/1442297957332.jpg" alt>
  123.                    </a>
  124.                  </div>
  125.                  <div class="mt10 hLh30 txtOf tac">
  126.                    <a href="/teacher/1" title="唐嫣" target="_blank" class="fsize18 c-666">唐嫣</a>
  127.                  </div>
  128.                  <div class="hLh30 txtOf tac">
  129.                    <span class="fsize14 c-999">中国科学院数学与系统科学研究院应用数学专业博士，研究方向为数字图像处理，中国工业与应用数学学会会员。参与全国教育科学“十五”规划重点课题“信息化进程中的教育技术发展研究”的子课题“基与课程改革的资源开发与应用”，以及全国“十五”科研规划全国重点项目“掌上型信息技术产品在教学中的运用和开发研究”的子课题“用技术学数学”。</span>
  130.                  </div>
  131.                  <div class="mt15 i-q-txt">
  132.                    <p class="c-999 f-fA">中国人民大学附属中学数学一级教师</p>
  133.                  </div>
  134.                </section>
  135.              </li>
  136.              <li>
  137.                <section class="i-teach-wrap">
  138.                  <div class="i-teach-pic">
  139.                    <a href="/teacher/1" title="周杰伦" target="_blank">
  140.                      <img src="~/assets/photo/teacher/1442297969808.jpg" alt>
  141.                    </a>
  142.                  </div>
  143.                  <div class="mt10 hLh30 txtOf tac">
  144.                    <a href="/teacher/1" title="周杰伦" target="_blank" class="fsize18 c-666">周杰伦</a>
  145.                  </div>
  146.                  <div class="hLh30 txtOf tac">
  147.                    <span class="fsize14 c-999">中教一级职称。讲课极具亲和力。</span>
  148.                  </div>
  149.                  <div class="mt15 i-q-txt">
  150.                    <p class="c-999 f-fA">毕业于北京大学数学系</p>
  151.                  </div>
  152.                </section>
  153.              </li>
  154.              <li>
  155.                <section class="i-teach-wrap">
  156.                  <div class="i-teach-pic">
  157.                    <a href="/teacher/1" title="陈伟霆" target="_blank">
  158.                      <img src="~/assets/photo/teacher/1442297977255.jpg" alt>
  159.                    </a>
  160.                  </div>
  161.                  <div class="mt10 hLh30 txtOf tac">
  162.                    <a href="/teacher/1" title="陈伟霆" target="_blank" class="fsize18 c-666">陈伟霆</a>
  163.                  </div>
  164.                  <div class="hLh30 txtOf tac">
  165.                    <span
  166.                      class="fsize14 c-999"
  167.                    >政治学博士、管理学博士后，北京师范大学马克思主义学院副教授。多年来总结出了一套行之有效的应试技巧与答题方法，针对性和实用性极强，能帮助考生在轻松中应考，在激励的竞争中取得高分，脱颖而出。</span>
  168.                  </div>
  169.                  <div class="mt15 i-q-txt">
  170.                    <p class="c-999 f-fA">长期从事考研政治课讲授和考研命题趋势与应试对策研究。考研辅导新锐派的代表。</p>
  171.                  </div>
  172.                </section>
  173.              </li>
  174.            </ul>
  175.            <div class="clear"></div>
  176.          </article>
  177.        </div>
  178.        <!-- 公共分页 开始 -->
  179.        <div>
  180.          <div class="paging">
  181.            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
  182.            <a href="#" title="首页">首</a>
  183.            <a href="#" title="前一页">&lt;</a>
  184.            <a href="#" title="第1页" class="current undisable">1</a>
  185.            <a href="#" title="第2页">2</a>
  186.            <a href="#" title="后一页">&gt;</a>
  187.            <a href="#" title="末页">末</a>
  188.            <div class="clear"></div>
  189.          </div>
  190.        </div>
  191.        <!-- 公共分页 结束 -->
  193.       </section>
  194.     </section>
  195.     <!-- /讲师列表 结束 -->
  196.   </div>
  197. </template>
  198. <script>
  199. export default {};
  200. </script>

二、详情页面

创建 pages/teacher/_id.vue
修改资源路径为~/assets/

<template>
 <div id="aCoursesList" class="bg-fa of">
   <!-- 讲师介绍 开始 -->
   <section class="container">
     <header class="comm-title">
       <h2 class="fl tac">
         <span class="c-333">讲师介绍</span>
       </h2>
     </header>
     <div class="t-infor-wrap">
       <!-- 讲师基本信息 -->
       <section class="fl t-infor-box c-desc-content">
         <div class="mt20 ml20">
           <section class="t-infor-pic">
             <img src="~/assets/photo/teacher/1442297885942.jpg">
           </section>
           <h3 class="hLh30">
             <span class="fsize24 c-333">姚晨&nbsp;高级讲师</span>
           </h3>
           <section class="mt10">
             <span class="t-tag-bg">北京师范大学法学院副教授</span>
           </section>
           <section class="t-infor-txt">
             <p
               class="mt20"
             >北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。</p>
           </section>
           <div class="clear"></div>
         </div>
       </section>
       <div class="clear"></div>
     </div>
     <section class="mt30">
       <div>
         <header class="comm-title all-teacher-title c-course-content">
           <h2 class="fl tac">
             <span class="c-333">主讲课程</span>
           </h2>
           <section class="c-tab-title">
             <a href="javascript: void(0)">&nbsp;</a>
           </section>
         </header>
         <!-- /无数据提示 开始-->
         <section class="no-data-wrap">
           <em class="icon30 no-data-ico">&nbsp;</em>
           <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
         </section>
         <!-- /无数据提示 结束-->
         <article class="comm-course-list">
           <ul class="of">
             <li>
               <div class="cc-l-wrap">
                 <section class="course-img">
                   <img src="~/assets/photo/course/1442295455437.jpg" class="img-responsive" >
                   <div class="cc-mask">
                     <a href="#" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a>
                   </div>
                 </section>
                 <h3 class="hLh30 txtOf mt10">
                   <a href="#" title="零基础入门学习Python课程学习" target="_blank" class="course-title fsize18 c-333">零基础入门学习Python课程学习</a>
                 </h3>
               </div>
             </li>
             <li>
               <div class="cc-l-wrap">
                 <section class="course-img">
                   <img src="~/assets/photo/course/1442295472860.jpg" class="img-responsive" >
                   <div class="cc-mask">
                     <a href="#" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a>
                   </div>
                 </section>
                 <h3 class="hLh30 txtOf mt10">
                   <a href="#" title="影想力摄影小课堂" target="_blank" class="course-title fsize18 c-333">影想力摄影小课堂</a>
                 </h3>
               </div>
             </li>
             <li>
               <div class="cc-l-wrap">
                 <section class="course-img">
                   <img src="~/assets/photo/course/1442302831779.jpg" class="img-responsive" >
                   <div class="cc-mask">
                     <a href="#" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a>
                   </div>
                 </section>
                 <h3 class="hLh30 txtOf mt10">
                   <a href="#" title="数学给宝宝带来的兴趣" target="_blank" class="course-title fsize18 c-333">数学给宝宝带来的兴趣</a>
                 </h3>
               </div>
             </li>
             <li>
               <div class="cc-l-wrap">
                 <section class="course-img">
                   <img src="~/assets/photo/course/1442295506745.jpg" class="img-responsive" >
                   <div class="cc-mask">
                     <a href="#" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a>
                   </div>
                 </section>
                 <h3 class="hLh30 txtOf mt10">
                   <a href="#" title="国家教师资格考试专用" target="_blank" class="course-title fsize18 c-333">国家教师资格考试专用</a>
                 </h3>
               </div>
             </li>
           </ul>
           <div class="clear"></div>
         </article>
       </div>
     </section>

    </section>
    <!-- /讲师介绍 结束 -->
  </div>
</template>
<script>
export default {};
</script>