【前端】首页静态效果整合和NUXT路由

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1
<template>
2
  
3
  <div>
4
    <!-- 幻灯片 开始 -->
5
    <!-- 幻灯片 结束 -->
6
    
7
     <div id="aCoursesList">
8
      <!-- 网校课程 开始 -->
9
      <div>
10
        <section class="container">
11
          <header class="comm-title">
12
            <h2 class="tac">
13
              <span class="c-333">热门课程</span>
14
            </h2>
15
          </header>
16
          <div>
17
            <article class="comm-course-list">
18
              <ul class="of" id="bna">
19
                <li>
20
                  <div class="cc-l-wrap">
21
                    <section class="course-img">
22
                      <img
23
                        src="~/assets/photo/course/1442295592705.jpg"
24
                        class="img-responsive"
25
                        alt="听力口语"
26
                      >
27
                      <div class="cc-mask">
28
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
29
                      </div>
30
                    </section>
31
                    <h3 class="hLh30 txtOf mt10">
32
                      <a href="#" title="听力口语" class="course-title fsize18 c-333">听力口语</a>
33
                    </h3>
34
                    <section class="mt10 hLh20 of">
35
                      <span class="fr jgTag bg-green">
36
                        <i class="c-fff fsize12 f-fA">免费</i>
37
                      </span>
38
                      <span class="fl jgAttr c-ccc f-fA">
39
                        <i class="c-999 f-fA">9634人学习</i>
40
                        |
41
                        <i class="c-999 f-fA">9634评论</i>
42
                      </span>
43
                    </section>
44
                  </div>
45
                </li>
46
                <li>
47
                  <div class="cc-l-wrap">
48
                    <section class="course-img">
49
                      <img
50
                        src="~/assets/photo/course/1442295581911.jpg"
51
                        class="img-responsive"
52
                        alt="Java精品课程"
53
                      >
54
                      <div class="cc-mask">
55
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
56
                      </div>
57
                    </section>
58
                    <h3 class="hLh30 txtOf mt10">
59
                      <a href="#" title="Java精品课程" class="course-title fsize18 c-333">Java精品课程</a>
60
                    </h3>
61
                    <section class="mt10 hLh20 of">
62
                      <span class="fr jgTag bg-green">
63
                        <i class="c-fff fsize12 f-fA">免费</i>
64
                      </span>
65
                      <span class="fl jgAttr c-ccc f-fA">
66
                        <i class="c-999 f-fA">501人学习</i>
67
                        |
68
                        <i class="c-999 f-fA">501评论</i>
69
                      </span>
70
                    </section>
71
                  </div>
72
                </li>
73
                <li>
74
                  <div class="cc-l-wrap">
75
                    <section class="course-img">
76
                      <img
77
                        src="~/assets/photo/course/1442295604295.jpg"
78
                        class="img-responsive"
79
                        alt="C4D零基础"
80
                      >
81
                      <div class="cc-mask">
82
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
83
                      </div>
84
                    </section>
85
                    <h3 class="hLh30 txtOf mt10">
86
                      <a href="#" title="C4D零基础" class="course-title fsize18 c-333">C4D零基础</a>
87
                    </h3>
88
                    <section class="mt10 hLh20 of">
89
                      <span class="fr jgTag bg-green">
90
                        <i class="c-fff fsize12 f-fA">免费</i>
91
                      </span>
92
                      <span class="fl jgAttr c-ccc f-fA">
93
                        <i class="c-999 f-fA">300人学习</i>
94
                        |
95
                        <i class="c-999 f-fA">300评论</i>
96
                      </span>
97
                    </section>
98
                  </div>
99
                </li>
100
                <li>
101
                  <div class="cc-l-wrap">
102
                    <section class="course-img">
103
                      <img
104
                        src="~/assets/photo/course/1442302831779.jpg"
105
                        class="img-responsive"
106
                        alt="数学给宝宝带来的兴趣"
107
                      >
108
                      <div class="cc-mask">
109
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
110
                      </div>
111
                    </section>
112
                    <h3 class="hLh30 txtOf mt10">
113
                      <a href="#" title="数学给宝宝带来的兴趣" class="course-title fsize18 c-333">数学给宝宝带来的兴趣</a>
114
                    </h3>
115
                    <section class="mt10 hLh20 of">
116
                      <span class="fr jgTag bg-green">
117
                        <i class="c-fff fsize12 f-fA">免费</i>
118
                      </span>
119
                      <span class="fl jgAttr c-ccc f-fA">
120
                        <i class="c-999 f-fA">256人学习</i>
121
                        |
122
                        <i class="c-999 f-fA">256评论</i>
123
                      </span>
124
                    </section>
125
                  </div>
126
                </li>
127
                <li>
128
                  <div class="cc-l-wrap">
129
                    <section class="course-img">
130
                      <img
131
                        src="~/assets/photo/course/1442295455437.jpg"
132
                        class="img-responsive"
133
                        alt="零基础入门学习Python课程学习"
134
                      >
135
                      <div class="cc-mask">
136
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
137
                      </div>
138
                    </section>
139
                    <h3 class="hLh30 txtOf mt10">
140
                      <a
141
                        href="#"
142
                        title="零基础入门学习Python课程学习"
143
                        class="course-title fsize18 c-333"
144
                      >零基础入门学习Python课程学习</a>
145
                    </h3>
146
                    <section class="mt10 hLh20 of">
147
                      <span class="fr jgTag bg-green">
148
                        <i class="c-fff fsize12 f-fA">免费</i>
149
                      </span>
150
                      <span class="fl jgAttr c-ccc f-fA">
151
                        <i class="c-999 f-fA">137人学习</i>
152
                        |
153
                        <i class="c-999 f-fA">137评论</i>
154
                      </span>
155
                    </section>
156
                  </div>
157
                </li>
158
                <li>
159
                  <div class="cc-l-wrap">
160
                    <section class="course-img">
161
                      <img
162
                        src="~/assets/photo/course/1442295570359.jpg"
163
                        class="img-responsive"
164
                        alt="MySql从入门到精通"
165
                      >
166
                      <div class="cc-mask">
167
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
168
                      </div>
169
                    </section>
170
                    <h3 class="hLh30 txtOf mt10">
171
                      <a href="#" title="MySql从入门到精通" class="course-title fsize18 c-333">MySql从入门到精通</a>
172
                    </h3>
173
                    <section class="mt10 hLh20 of">
174
                      <span class="fr jgTag bg-green">
175
                        <i class="c-fff fsize12 f-fA">免费</i>
176
                      </span>
177
                      <span class="fl jgAttr c-ccc f-fA">
178
                        <i class="c-999 f-fA">125人学习</i>
179
                        |
180
                        <i class="c-999 f-fA">125评论</i>
181
                      </span>
182
                    </section>
183
                  </div>
184
                </li>
185
                <li>
186
                  <div class="cc-l-wrap">
187
                    <section class="course-img">
188
                      <img
189
                        src="~/assets/photo/course/1442302852837.jpg"
190
                        class="img-responsive"
191
                        alt="搜索引擎优化技术"
192
                      >
193
                      <div class="cc-mask">
194
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
195
                      </div>
196
                    </section>
197
                    <h3 class="hLh30 txtOf mt10">
198
                      <a href="#" title="搜索引擎优化技术" class="course-title fsize18 c-333">搜索引擎优化技术</a>
199
                    </h3>
200
                    <section class="mt10 hLh20 of">
201
                      <span class="fr jgTag bg-green">
202
                        <i class="c-fff fsize12 f-fA">免费</i>
203
                      </span>
204
                      <span class="fl jgAttr c-ccc f-fA">
205
                        <i class="c-999 f-fA">123人学习</i>
206
                        |
207
                        <i class="c-999 f-fA">123评论</i>
208
                      </span>
209
                    </section>
210
                  </div>
211
                </li>
212
                <li>
213
                  <div class="cc-l-wrap">
214
                    <section class="course-img">
215
                      <img
216
                        src="~/assets/photo/course/1442295379715.jpg"
217
                        class="img-responsive"
218
                        alt="20世纪西方音乐"
219
                      >
220
                      <div class="cc-mask">
221
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
222
                      </div>
223
                    </section>
224
                    <h3 class="hLh30 txtOf mt10">
225
                      <a href="#" title="20世纪西方音乐" class="course-title fsize18 c-333">20世纪西方音乐</a>
226
                    </h3>
227
                    <section class="mt10 hLh20 of">
228
                      <span class="fr jgTag bg-green">
229
                        <i class="c-fff fsize12 f-fA">免费</i>
230
                      </span>
231
                      <span class="fl jgAttr c-ccc f-fA">
232
                        <i class="c-999 f-fA">34人学习</i>
233
                        |
234
                        <i class="c-999 f-fA">34评论</i>
235
                      </span>
236
                    </section>
237
                  </div>
238
                </li>
239
              </ul>
240
              <div class="clear"></div>
241
            </article>
242
            <section class="tac pt20">
243
              <a href="#" title="全部课程" class="comm-btn c-btn-2">全部课程</a>
244
            </section>
245
          </div>
246
        </section>
247
      </div>
248
      <!-- /网校课程 结束 -->
249
      <!-- 网校名师 开始 -->
250
      <div>
251
        <section class="container">
252
          <header class="comm-title">
253
            <h2 class="tac">
254
              <span class="c-333">名师大咖</span>
255
            </h2>
256
          </header>
257
          <div>
258
            <article class="i-teacher-list">
259
              <ul class="of">
260
                <li>
261
                  <section class="i-teach-wrap">
262
                    <div class="i-teach-pic">
263
                      <a href="/teacher/1" title="姚晨">
264
                        <img alt="姚晨" src="~/assets/photo/teacher/1442297885942.jpg">
265
                      </a>
266
                    </div>
267
                    <div class="mt10 hLh30 txtOf tac">
268
                      <a href="/teacher/1" title="姚晨" class="fsize18 c-666">姚晨</a>
269
                    </div>
270
                    <div class="hLh30 txtOf tac">
271
                      <span class="fsize14 c-999">北京师范大学法学院副教授</span>
272
                    </div>
273
                    <div class="mt15 i-q-txt">
274
                      <p
275
                        class="c-999 f-fA"
276
                      >北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导,深知命题规律,了解解题技巧。内容把握准确,授课重点明确,层次分明,调理清晰,将法条法理与案例有机融合,强调综合,深入浅出。</p>
277
                    </div>
278
                  </section>
279
                </li>
280
                <li>
281
                  <section class="i-teach-wrap">
282
                    <div class="i-teach-pic">
283
                      <a href="/teacher/1" title="谢娜">
284
                        <img alt="谢娜" src="~/assets/photo/teacher/1442297919077.jpg">
285
                      </a>
286
                    </div>
287
                    <div class="mt10 hLh30 txtOf tac">
288
                      <a href="/teacher/1" title="谢娜" class="fsize18 c-666">谢娜</a>
289
                    </div>
290
                    <div class="hLh30 txtOf tac">
291
                      <span class="fsize14 c-999">资深课程设计专家,专注10年AACTP美国培训协会认证导师</span>
292
                    </div>
293
                    <div class="mt15 i-q-txt">
294
                      <p
295
                        class="c-999 f-fA"
296
                      >十年课程研发和培训咨询经验,曾任国企人力资源经理、大型外企培训经理,负责企业大学和培训体系搭建;曾任专业培训机构高级顾问、研发部总监,为包括广东移动、东莞移动、深圳移动、南方电网、工商银行、农业银行、民生银行、邮储银行、TCL集团、清华大学继续教育学院、中天路桥、广西扬翔股份等超过200家企业提供过培训与咨询服务,并担任近50个大型项目的总负责人。</p>
297
                    </div>
298
                  </section>
299
                </li>
300
                <li>
301
                  <section class="i-teach-wrap">
302
                    <div class="i-teach-pic">
303
                      <a href="/teacher/1" title="刘德华">
304
                        <img alt="刘德华" src="~/assets/photo/teacher/1442297927029.jpg">
305
                      </a>
306
                    </div>
307
                    <div class="mt10 hLh30 txtOf tac">
308
                      <a href="/teacher/1" title="刘德华" class="fsize18 c-666">刘德华</a>
309
                    </div>
310
                    <div class="hLh30 txtOf tac">
311
                      <span class="fsize14 c-999">上海师范大学法学院副教授</span>
312
                    </div>
313
                    <div class="mt15 i-q-txt">
314
                      <p
315
                        class="c-999 f-fA"
316
                      >上海师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导,深知命题规律,了解解题技巧。内容把握准确,授课重点明确,层次分明,调理清晰,将法条法理与案例有机融合,强调综合,深入浅出。</p>
317
                    </div>
318
                  </section>
319
                </li>
320
                <li>
321
                  <section class="i-teach-wrap">
322
                    <div class="i-teach-pic">
323
                      <a href="/teacher/1" title="周润发">
324
                        <img alt="周润发" src="~/assets/photo/teacher/1442297935589.jpg">
325
                      </a>
326
                    </div>
327
                    <div class="mt10 hLh30 txtOf tac">
328
                      <a href="/teacher/1" title="周润发" class="fsize18 c-666">周润发</a>
329
                    </div>
330
                    <div class="hLh30 txtOf tac">
331
                      <span class="fsize14 c-999">考研政治辅导实战派专家,全国考研政治命题研究组核心成员。</span>
332
                    </div>
333
                    <div class="mt15 i-q-txt">
334
                      <p
335
                        class="c-999 f-fA"
336
                      >法学博士,北京师范大学马克思主义学院副教授,专攻毛泽东思想概论、邓小平理论,长期从事考研辅导。出版著作两部,发表学术论文30余篇,主持国家社会科学基金项目和教育部重大课题子课题各一项,参与中央实施马克思主义理论研究和建设工程项目。</p>
337
                    </div>
338
                  </section>
339
                </li>
340
              </ul>
341
              <div class="clear"></div>
342
            </article>
343
            <section class="tac pt20">
344
              <a href="#" title="全部讲师" class="comm-btn c-btn-2">全部讲师</a>
345
            </section>
346
          </div>
347
        </section>
348
      </div>
349
      <!-- /网校名师 结束 -->
350
    </div>
351
  </div>
352
</template>
353
354
<script>
355
export default {
356
  
357
}
358
</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr_树先森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值