"name": "vue-front",
"version": "1.0.0",
"description": "小帽学堂前台网站",
"author": "Alex",
head: {
title: '小帽学堂 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程,谷粉力挺,老学员为你推荐',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'keywords', name: 'keywords', content: '小帽学堂,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频' },
{ hid: 'description', name: 'description', content: '小帽学堂是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计!会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程,被广大学习者及IT工程师誉为:业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程!' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
module.exports = {
// some nuxt config...
plugins: [
{ src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
],
css: [
'swiper/dist/css/swiper.css'
]
}
<template>
<div class="in-wrap">
<header id="header">
<section class="container">
<h1 id="logo">
<a href="#" title="谷粒学院">
<img src="~/assets/img/logo.png" width="100%" alt="谷粒学院">
a>
h1>
<div class="h-r-nsl">
<ul class="nav">
<router-link to="/" tag="li" active-class="current" exact>
<a>首页a>
router-link>
<router-link to="/course" tag="li" active-class="current">
<a>课程a>
router-link>
<router-link to="/teacher" tag="li" active-class="current">
<a>名师a>
router-link>
<router-link to="/article" tag="li" active-class="current">
<a>文章a>
router-link>
<router-link to="/qa" tag="li" active-class="current">
<a>问答a>
router-link>
ul>
<ul class="h-r-login">
<li id="no-login">
<a href="/sing_in" title="登录">
<em class="icon18 login-icon"> em>
<span class="vam ml5">登录span>
a>
|
<a href="/sign_up" title="注册">
<span class="vam ml5">注册span>
a>
li>
<li class="mr10 undis" id="is-login-one">
<a href="#" title="消息" id="headerMsgCountId">
<em class="icon18 news-icon"> em>
a>
<q class="red-point" style="display: none"> q>
li>
<li class="h-r-user undis" id="is-login-two">
<a href="#" title>
<img
src="~/assets/img/avatar-boy.gif"
width="30"
height="30"
class="vam picImg"
alt
>
<span class="vam disIb" id="userName">span>
a>
<a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出a>
li>
ul>
<aside class="h-r-search">
<form action="#" method="post">
<label class="h-r-s-box">
<input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>
<button type="submit" class="s-btn">
<em class="icon18"> em>
button>
label>
form>
aside>
div>
<aside class="mw-nav-btn">
<div class="mw-nav-icon">div>
aside>
<div class="clear">div>
section>
header>
<nuxt/>
<footer id="footer">
<section class="container">
<div class>
<h4 class="hLh30">
<span class="fsize18 f-fM c-999">友情链接span>
h4>
<ul class="of flink-list">
<li>
<a href="http://www.baidu.com/" title="小帽学堂" target="_blank">小帽学堂a>
li>
ul>
<div class="clear">div>
div>
<div class="b-foot">
<section class="fl col-7">
<section class="mr20">
<section class="b-f-link">
<a href="#" title="关于我们" target="_blank">关于我们a>|
<a href="#" title="联系我们" target="_blank">联系我们a>|
<a href="#" title="帮助中心" target="_blank">帮助中心a>|
<a href="#" title="资源下载" target="_blank">资源下载a>|
<span>服务热线:010-56253825(北京) 0755-85293825(深圳)span>
<span>Email:[email protected]span>
section>
<section class="b-f-link mt10">
<span>©2018课程版权均归小帽学堂所有 京ICP备17055252号span>
section>
section>
section>
<aside class="fl col-3 tac mt15">
<section class="gf-tx">
<span>
<img src="~/assets/img/wx-icon.png" alt>
span>
section>
<section class="gf-tx">
<span>
<img src="~/assets/img/wb-icon.png" alt>
span>
section>
aside>
<div class="clear">div>
div>
section>
footer>
div>
template>
<script>
import "~/assets/css/reset.css";
import "~/assets/css/theme.css";
import "~/assets/css/global.css";
import "~/assets/css/web.css";
export default {};
script>
<template>
<div>
<div id="aCoursesList">
<div>
<section class="container">
<header class="comm-title">
<h2 class="tac">
<span class="c-333">热门课程span>
h2>
header>
<div>
<article class="comm-course-list">
<ul class="of" id="bna">
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295592705.jpg"
class="img-responsive"
alt="听力口语"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="#" title="听力口语" class="course-title fsize18 c-333">听力口语a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">9634人学习i>
|
<i class="c-999 f-fA">9634评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295581911.jpg"
class="img-responsive"
alt="Java精品课程"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="#" title="Java精品课程" class="course-title fsize18 c-333">Java精品课程a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">501人学习i>
|
<i class="c-999 f-fA">501评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295604295.jpg"
class="img-responsive"
alt="C4D零基础"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="#" title="C4D零基础" class="course-title fsize18 c-333">C4D零基础a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">300人学习i>
|
<i class="c-999 f-fA">300评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442302831779.jpg"
class="img-responsive"
alt="数学给宝宝带来的兴趣"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="#" title="数学给宝宝带来的兴趣" class="course-title fsize18 c-333">数学给宝宝带来的兴趣a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">256人学习i>
|
<i class="c-999 f-fA">256评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295455437.jpg"
class="img-responsive"
alt="零基础入门学习Python课程学习"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a
href="#"
title="零基础入门学习Python课程学习"
class="course-title fsize18 c-333"
>零基础入门学习Python课程学习a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">137人学习i>
|
<i class="c-999 f-fA">137评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295570359.jpg"
class="img-responsive"
alt="MySql从入门到精通"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="#" title="MySql从入门到精通" class="course-title fsize18 c-333">MySql从入门到精通a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">125人学习i>
|
<i class="c-999 f-fA">125评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442302852837.jpg"
class="img-responsive"
alt="搜索引擎优化技术"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="#" title="搜索引擎优化技术" class="course-title fsize18 c-333">搜索引擎优化技术a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">123人学习i>
|
<i class="c-999 f-fA">123评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295379715.jpg"
class="img-responsive"
alt="20世纪西方音乐"
>
<div class="cc-mask">
<a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="#" title="20世纪西方音乐" class="course-title fsize18 c-333">20世纪西方音乐a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">34人学习i>
|
<i class="c-999 f-fA">34评论i>
span>
section>
div>
li>
ul>
<div class="clear">div>
article>
<section class="tac pt20">
<a href="#" title="全部课程" class="comm-btn c-btn-2">全部课程a>
section>
div>
section>
div>
<div>
<section class="container">
<header class="comm-title">
<h2 class="tac">
<span class="c-333">名师大咖span>
h2>
header>
<div>
<article class="i-teacher-list">
<ul class="of">
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="姚晨">
<img alt="姚晨" src="~/assets/photo/teacher/1442297885942.jpg">
a>
div>
<div class="mt10 hLh30 txtOf tac">
<a href="/teacher/1" title="姚晨" 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"
>北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导,深知命题规律,了解解题技巧。内容把握准确,授课重点明确,层次分明,调理清晰,将法条法理与案例有机融合,强调综合,深入浅出。p>
div>
section>
li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="谢娜">
<img alt="谢娜" src="~/assets/photo/teacher/1442297919077.jpg">
a>
div>
<div class="mt10 hLh30 txtOf tac">
<a href="/teacher/1" title="谢娜" class="fsize18 c-666">谢娜a>
div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999">资深课程设计专家,专注10年AACTP美国培训协会认证导师span>
div>
<div class="mt15 i-q-txt">
<p
class="c-999 f-fA"
>十年课程研发和培训咨询经验,曾任国企人力资源经理、大型外企培训经理,负责企业大学和培训体系搭建;曾任专业培训机构高级顾问、研发部总监,为包括广东移动、东莞移动、深圳移动、南方电网、工商银行、农业银行、民生银行、邮储银行、TCL集团、清华大学继续教育学院、中天路桥、广西扬翔股份等超过200家企业提供过培训与咨询服务,并担任近50个大型项目的总负责人。p>
div>
section>
li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="刘德华">
<img alt="刘德华" src="~/assets/photo/teacher/1442297927029.jpg">
a>
div>
<div class="mt10 hLh30 txtOf tac">
<a href="/teacher/1" title="刘德华" 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"
>上海师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导,深知命题规律,了解解题技巧。内容把握准确,授课重点明确,层次分明,调理清晰,将法条法理与案例有机融合,强调综合,深入浅出。p>
div>
section>
li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="周润发">
<img alt="周润发" src="~/assets/photo/teacher/1442297935589.jpg">
a>
div>
<div class="mt10 hLh30 txtOf tac">
<a href="/teacher/1" title="周润发" 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>
<section class="tac pt20">
<a href="#" title="全部讲师" class="comm-btn c-btn-2">全部讲师a>
section>
div>
section>
div>
div>
div>
template>
<script>
export default {
}
script>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background: #040B1B;">
<a target="_blank" href="/">
<img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
a>
div>
<div class="swiper-slide" style="background: #040B1B;">
<a target="_blank" href="/">
<img src="~/assets/photo/banner/153525d0ef15459596.jpg" alt="首页banner">
a>
div>
div>
<div class="swiper-pagination swiper-pagination-white">div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev">div>
<div class="swiper-button-next swiper-button-white" slot="button-next">div>
div>
<script>
export default {
data () {
return {
swiperOption: {
//配置分页
pagination: {
el: '.swiper-pagination'//分页的dom节点
},
//配置导航
navigation: {
nextEl: '.swiper-button-next',//下一页dom节点
prevEl: '.swiper-button-prev'//前一页dom节点
}
}
}
}
}
script>
路由
固定路由
<router-link to="/course" tag="li" active-class="current">
<a>课程a>
router-link>
<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>
<section class="c-sort-box">
<section class="c-s-dl">
<dl>
<dt>
<span class="c-999 fsize14">课程类别span>
dt>
<dd class="c-s-dl-li">
<ul class="clearfix">
<li>
<a title="全部" href="#">全部a>
li>
<li>
<a title="数据库" href="#">数据库a>
li>
<li class="current">
<a title="外语考试" href="#">外语考试a>
li>
<li>
<a title="教师资格证" href="#">教师资格证a>
li>
<li>
<a title="公务员" href="#">公务员a>
li>
<li>
<a title="移动开发" href="#">移动开发a>
li>
<li>
<a title="操作系统" href="#">操作系统a>
li>
ul>
dd>
dl>
<dl>
<dt>
<span class="c-999 fsize14">span>
dt>
<dd class="c-s-dl-li">
<ul class="clearfix">
<li>
<a title="职称英语" href="#">职称英语a>
li>
<li>
<a title="英语四级" href="#">英语四级a>
li>
<li>
<a title="英语六级" href="#">英语六级a>
li>
ul>
dd>
dl>
<div class="clear">div>
section>
<div class="js-wrap">
<section class="fr">
<span class="c-ccc">
<i class="c-master f-fM">1i>/
<i class="c-666 f-fM">1i>
span>
section>
<section class="fl">
<ol class="js-tap clearfix">
<li>
<a title="关注度" href="#">关注度a>
li>
<li>
<a title="最新" href="#">最新a>
li>
<li class="current bg-orange">
<a title="价格" href="#">价格
<span>↓span>
a>
li>
ol>
section>
div>
<div class="mt40">
<section class="no-data-wrap">
<em class="icon30 no-data-ico"> em>
<span class="c-666 fsize14 ml10 vam">没有相关数据,小编正在努力整理中...span>
section>
<article class="comm-course-list">
<ul class="of" id="bna">
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img src="~/assets/photo/course/1442295592705.jpg" class="img-responsive" alt="听力口语">
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="/course/1" title="听力口语" class="course-title fsize18 c-333">听力口语a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">9634人学习i>
|
<i class="c-999 f-fA">9634评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img src="~/assets/photo/course/1442295581911.jpg" class="img-responsive" alt="Java精品课程">
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="/course/1" title="Java精品课程" class="course-title fsize18 c-333">Java精品课程a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">501人学习i>
|
<i class="c-999 f-fA">501评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img src="~/assets/photo/course/1442295604295.jpg" class="img-responsive" alt="C4D零基础">
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="/course/1" title="C4D零基础" class="course-title fsize18 c-333">C4D零基础a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">300人学习i>
|
<i class="c-999 f-fA">300评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442302831779.jpg"
class="img-responsive"
alt="数学给宝宝带来的兴趣"
>
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="/course/1" title="数学给宝宝带来的兴趣" class="course-title fsize18 c-333">数学给宝宝带来的兴趣a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">256人学习i>
|
<i class="c-999 f-fA">256评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295455437.jpg"
class="img-responsive"
alt="零基础入门学习Python课程学习"
>
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
title="零基础入门学习Python课程学习"
class="course-title fsize18 c-333"
>零基础入门学习Python课程学习a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">137人学习i>
|
<i class="c-999 f-fA">137评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295570359.jpg"
class="img-responsive"
alt="MySql从入门到精通"
>
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="/course/1" title="MySql从入门到精通" class="course-title fsize18 c-333">MySql从入门到精通a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">125人学习i>
|
<i class="c-999 f-fA">125评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img src="~/assets/photo/course/1442302852837.jpg" class="img-responsive" alt="搜索引擎优化技术">
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="/course/1" title="搜索引擎优化技术" class="course-title fsize18 c-333">搜索引擎优化技术a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">123人学习i>
|
<i class="c-999 f-fA">123评论i>
span>
section>
div>
li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img src="~/assets/photo/course/1442295379715.jpg" class="img-responsive" alt="20世纪西方音乐">
<div class="cc-mask">
<a href="/course/1" title="开始学习" class="comm-btn c-btn-1">开始学习a>
div>
section>
<h3 class="hLh30 txtOf mt10">
<a href="/course/1" title="20世纪西方音乐" class="course-title fsize18 c-333">20世纪西方音乐a>
h3>
<section class="mt10 hLh20 of">
<span class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费i>
span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">34人学习i>
|
<i class="c-999 f-fA">34评论i>
span>
section>
div>
li>
ul>
<div class="clear">div>
article>
div>
<div>
<div class="paging">
<a class="undisable" title>首a>
<a id="backpage" class="undisable" href="#" title><a>
<a href="#" title class="current undisable">1a>
<a href="#" title>2a>
<a id="nextpage" href="#" title>>a>
<a href="#" title>末a>
<div class="clear">div>
div>
div>
section>
section>
div>
template>
<script>
export default {};
script>
<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.00b>
section>
<section class="c-attr-mt c-attr-undis">
<span class="c-fff fsize14">主讲: 唐嫣 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> p>
<aside>
<span class="c-fff f-fM">购买数span>
<br>
<h6 class="c-fff f-fM mt10">150h6>
aside>
li>
<li>
<p> p>
<aside>
<span class="c-fff f-fM">课时数span>
<br>
<h6 class="c-fff f-fM mt10">20h6>
aside>
li>
<li>
<p> p>
<aside>
<span class="c-fff f-fM">浏览数span>
<br>
<h6 class="c-fff f-fM mt10">501h6>
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 Microsystem公司为了发展消费性电子产品而进行了一个名为Green的项目计划。该计划
负责人是James Gosling。起初他以C++来写一种内嵌式软件,可以放在烤面包机或PAD等小型电子消费设备里,使得机器更聪明,具有人工智
能。但他发现C++并不适合完成这类任务!因为C++常会有使系统失效的程序错误,尤其是内存管理,需要程序设计师记录并管理内存资源。这给设计师们造成
极大的负担,并可能产生许多bugs。
<br>为了解决所遇到的问题,Gosling决定要发展一种新的语言,来解决C++的潜在性危险问题,这个语言名叫Oak。Oak是一种可移植性语言,也就是一种平台独立语言,能够在各种芯片上运行。
<br>1994年,Oak技术日趋成熟,这时网络正开始蓬勃发展。Oak研发小组发现Oak很适合作为一种网络程序语言。因此发展了一个能与Oak配合的浏
览器--WebRunner,后更名为HotJava,它证明了Oak是一种能在网络上发展的程序语言。由于Oak商标已被注册,工程师们便想到以自己常
享用的咖啡(Java)来重新命名,并于Sun World 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"> em>第一节
a>
li>
<li class="lh-menu-second ml30">
<a href="#" title class="current-2">
<em class="lh-menu-i-2 icon16 mr5"> 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>
讲师页面同理
// 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>
section>
header>
<section class="c-sort-box unBr">
<div>
<section class="no-data-wrap">
<em class="icon30 no-data-ico"> 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">曼彻斯特大学计算机实验室的副主任,负责最早的真正的计算机---曼彻斯特一号的软件工作。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">
<a href="#" title="首页">首a>
<a href="#" title="前一页"><a>
<a href="#" title="第1页" class="current undisable">1a>
<a href="#" title="第2页">2a>
<a href="#" title="后一页">>a>
<a href="#" title="末页">末a>
<div class="clear">div>
div>
div>
section>
section>
div>
template>
<script>
export default {};
script>
// 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">姚晨 高级讲师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)"> a>
section>
header>
<section class="no-data-wrap">
<em class="icon30 no-data-ico"> 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>