谷粒学院——Day14【首页课程和名师功能】

❤ 作者主页：Java技术一点通的博客
❀ 个人介绍：大家好，我是Java技术一点通！(￣▽￣)~*
🍊 记得关注、点赞、收藏、评论⭐️⭐️⭐️
📣 认真学习，共同进步！！！🎉🎉

首页名师功能

一、名师页面静态效果整合

1. 列表页面

pages/teacher/index.vue

<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <header class="comm-title all-teacher-title">
        <h2 class="fl tac">
          <span class="c-333">全部讲师</span>
        </h2>
        <section class="c-tab-title">
          <a id="subjectAll" title="全部" href="#">全部</a>
          <!-- <c:forEach var="subject" items="${subjectList }">
            <a id="${subject.subjectId}"
            title="${subject.subjectName }" href="javascript:void(0)"
            οnclick="submitForm(${subject.subjectId})">${subject.subjectName }</a>
            </c:forEach>-->
        </section>
      </header>
      <section class="c-sort-box unBr">
        <div>
          <!-- /无数据提示 开始-->
          <section class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam"
              >没有相关数据，小编正在努力整理 中...</span
            >
          </section>
          <!-- /无数据提示 结束-->
          <article class="i-teacher-list">
            <ul class="of">
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="姚晨" target="_blank">
                      <img src="~/assets/photo/teacher/1442297885942.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="姚晨"
                      target="_blank"
                      class="fsize18 c-666"
                      >姚晨</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >北京师范大学法学院副教授、清华大
                      学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规
                      律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机
                      融合，强调综合，深入浅出。</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">北京师范大学法学院副教授</p>
                  </div>
                </section>
              </li>
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="谢娜" target="_blank">
                      <img src="~/assets/photo/teacher/1442297919077.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="谢娜"
                      target="_blank"
                      class="fsize18 c-666"
                      >谢娜</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >十年课程研发和培训咨询经验，曾任
                      国企人力资源经理、大型外企培训经理，负责企业大学和培训体系搭建；曾任专业培训机构高级顾
                      问、研发部总监，为包括广东移动、东莞移动、深圳移动、南方电网、工商银行、农业银行、民生
                      银行、邮储银行、TCL集团、清华大学继续教育学院、中天路桥、广西扬翔股份等超过200家企业
                      提供过培训与咨询服务，并担任近50个大型项目的总负责人。</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">
                      资深课程设计专家，专注10年AACTP美国培训 协会认证导师
                    </p>
                  </div>
                </section>
              </li>
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="刘德华" target="_blank">
                      <img src="~/assets/photo/teacher/1442297927029.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="刘德华"
                      target="_blank"
                      class="fsize18 c-666"
                      >刘德华</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >上海师范大学法学院副教授、清华大
                      学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规
                      律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机
                      融合，强调综合，深入浅出。</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">上海师范大学法学院副教授</p>
                  </div>
                </section>
              </li>
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="周润发" target="_blank">
                      <img src="~/assets/photo/teacher/1442297935589.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="周润发"
                      target="_blank"
                      class="fsize18 c-666"
                      >周润发</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >法学博士，北京师范大学马克思主义
                      学院副教授，专攻毛泽东思想概论、邓小平理论，长期从事考研辅导。出版著作两部，发表学术论
                      文30余篇，主持国家社会科学基金项目和教育部重大课题子课题各一项，参与中央实施马克思主
                      义理论研究和建设工程项目。</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">
                      考研政治辅导实战派专家，全国考研政治命 题研究组核心成员。
                    </p>
                  </div>
                </section>
              </li>
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="钟汉良" target="_blank">
                      <img src="~/assets/photo/teacher/1442298121626.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="钟汉良"
                      target="_blank"
                      class="fsize18 c-666"
                      >钟汉良</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >具备深厚的数学思维功底、丰富的小
                      学教育经验，授课风格生动活泼，擅长用形象生动的比喻帮助理解、简单易懂的语言讲解难题，深
                      受学生喜欢</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">
                      毕业于师范大学数学系，热爱教育事业，执 教数学思维6年有余
                    </p>
                  </div>
                </section>
              </li>
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="唐嫣" target="_blank">
                      <img src="~/assets/photo/teacher/1442297957332.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="唐嫣"
                      target="_blank"
                      class="fsize18 c-666"
                      >唐嫣</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >中国科学院数学与系统科学研究院应
                      用数学专业博士，研究方向为数字图像处理，中国工业与应用数学学会会员。参与全国教育科
                      学“十五”规划重点课题“信息化进程中的教育技术发展研究”的子课题“基与课程改革的资源开发与
                      应用”，以及全国“十五”科研规划全国重点项目“掌上型信息技术产品在教学中的运用和开发研
                      究”的子课题“用技术学数学”。</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">中国人民大学附属中学数学一级教师</p>
                  </div>
                </section>
              </li>
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="周杰伦" target="_blank">
                      <img src="~/assets/photo/teacher/1442297969808.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="周杰伦"
                      target="_blank"
                      class="fsize18 c-666"
                      >周杰伦</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >中教一级职称。讲课极具亲和 力。</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">毕业于北京大学数学系</p>
                  </div>
                </section>
              </li>
              <li>
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a href="/teacher/1" title="陈伟霆" target="_blank">
                      <img src="~/assets/photo/teacher/1442297977255.jpg" alt />
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a
                      href="/teacher/1"
                      title="陈伟霆"
                      target="_blank"
                      class="fsize18 c-666"
                      >陈伟霆</a
                    >
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span class="fsize14 c-999"
                      >政治学博士、管理学博士后，北京师范大学马克思主义学院副教授。多
                      年来总结出了一套行之有效的应试技巧与答题方法，针对性和实用性极强，能帮助考生在轻松中应
                      考，在激励的竞争中取得高分，脱颖而出。</span
                    >
                  </div>
                  <div class="mt15 i-q-txt">
                    <p class="c-999 f-fA">
                      长期从事考研政治课讲授和考研命题趋势与
                      应试对策研究。考研辅导新锐派的代表。
                    </p>
                  </div>
                </section>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>
        <!-- 公共分页 开始 -->
        <div>
          <div class="paging">
            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
            <a href="#" title="首页">首</a>
            <a href="#" title="前一页">&lt;</a>
            <a href="#" title="第1页" class="current undisable">1</a>
            <a href="#" title="第2页">2</a>
            <a href="#" title="后一页">&gt;</a>
            <a href="#" title="末页">末</a>
            <div class="clear"></div>
          </div>
        </div>
        <!-- 公共分页 结束 -->
      </section>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>
<script>
export default {};
</script>

2. 详情页面

pages/teacher/_id.vue

<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>