278 lines
11 KiB
HTML
278 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>小u课堂</title>
|
||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
|
||
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
<script src="./js/vue.js"></script>
|
||
<script src="./js/axios.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<q id="app">
|
||
<!-- 导航菜单 -->
|
||
<nav>
|
||
<div class="main">
|
||
<img src="./img/index/logo.png" alt="" class="logo">
|
||
<ul class="">
|
||
<li class="check"><a href="./index.html">首页</a></li>
|
||
<li><a href="./pages/online.html?typeId=1">Java</a></li>
|
||
<li><a href="./pages/online.html?typeId=2">Mysql</a></li>
|
||
<li><a href="./pages/online.html?typeId=3">Web</a></li>
|
||
</ul>
|
||
<div class="search">
|
||
<div class="left">课程<i class="iconfont icon-down"></i>
|
||
</div>
|
||
<input type="text" v-model="keyword" placeholder="搜索感兴趣的内容">
|
||
<img src="./img/index/search.png" @click="toSearch()" alt="">
|
||
</div>
|
||
<div class="login">
|
||
<a href="./pages/loginAndRegister/login.html">登陆</a>
|
||
/
|
||
<a href="./pages/loginAndRegister/register.html">注册</a>
|
||
</div>
|
||
<div class="user">
|
||
<img src="./img/login/user.png" alt="">
|
||
<div class="userlist">
|
||
<ul>
|
||
<li><a href="javascript:">我是用户名</a></li>
|
||
<li><a href="javascript:">课程中心</a></li>
|
||
<li><a href="./pages/product.html">订单中心</a></li>
|
||
<li><a href="javascript:">资金管理</a></li>
|
||
<li><a href="./pages/userSeting.html">个人中心</a></li>
|
||
<li class="out"><a href="javascript:">退出登陆</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主体内容 -->
|
||
<main>
|
||
<!-- banner -->
|
||
<div class="banner">
|
||
<ul class="img">
|
||
<!-- <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
|
||
<li><img src="./img/index/tbanner1.png" alt=""></li>
|
||
<li><img src="./img/index/tbanner3.png" alt=""></li> -->
|
||
</ul>
|
||
<ul class="list">
|
||
<!-- <li class="high">24小时不断电大课堂</li>
|
||
<li>内容不够2</li>
|
||
<li>内容不够3</li>
|
||
<li>内容不够4</li>
|
||
<li>内容不够5</li>
|
||
<li>内容不够6</li> -->
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- JAVA学习 -->
|
||
<div class="online">
|
||
<div class="title">
|
||
<span class="line"></span>
|
||
<span class="cont">JAVA</span>
|
||
<span class="more" @click="toOnline(1)">更多课程<i class="iconfont icon-right1"></i>
|
||
</span>
|
||
</div>
|
||
<div class="onlineCont">
|
||
<div class="content">
|
||
<ul>
|
||
<li v-for="sc in java_datas" @click="toDetail(sc.cid)">
|
||
<div class="top">
|
||
<!-- <span class="rj">人教版</span>-->
|
||
<img :src="sc.courseImage" alt="" class="m">
|
||
<p>1100人在学习</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="left">
|
||
<span>{{sc.courseName}}</span>
|
||
<span class="time">23课时</span>
|
||
</div>
|
||
<div class="right">免费学习</div>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页面广告 -->
|
||
<div class="contBanner">
|
||
<img src="img/index/yjy%20(4).jpg" alt="">
|
||
</div>
|
||
|
||
<!-- mysql -->
|
||
<div class="testClass">
|
||
<div class="title">
|
||
<span class="line"></span>
|
||
<span class="cont">Mysql</span>
|
||
<span class="more" @click="toOnline(2)">更多课程<i class="iconfont icon-right1"></i>
|
||
</span>
|
||
</div>
|
||
<div class="onlineCont">
|
||
<div class="content">
|
||
<ul>
|
||
<li v-for="sc in db_datas" @click="toDetail(sc.cid)">
|
||
<div class="top">
|
||
<!-- <span class="rj">北京</span>-->
|
||
<img :src="sc.courseImage" alt="" class="m">
|
||
<p>
|
||
<span>1100人已考试</span>
|
||
<span>初一</span>
|
||
</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="left">
|
||
<span>{{sc.courseName}}</span>
|
||
</div>
|
||
<div class="right">去考试</div>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- web -->
|
||
<div class="goodClass">
|
||
<div class="title">
|
||
<span class="line"></span>
|
||
<span class="cont">web</span>
|
||
<span class="more" @click="toOnline(3)">更多课程<i class="iconfont icon-right1"></i>
|
||
</span>
|
||
</div>
|
||
<div class="onlineCont">
|
||
<div class="content">
|
||
<ul>
|
||
<li v-for="sc in web_datas" @click="toDetail(sc.cid)">
|
||
<div class="top">
|
||
<!-- <span class="rj">天津</span>-->
|
||
<img :src="sc.courseImage" alt="" class="m">
|
||
<p>1100人在学习</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="left">
|
||
<span>{{sc.courseName}}</span>
|
||
<span class="time">23课时</span>
|
||
</div>
|
||
<div class="right">免费学习</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="rightCont">
|
||
<img src="./img/index/yuan.webp" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footB">
|
||
<div><img src="./img/index/java.webp" alt=""></div>
|
||
<div><img src="./img/index/mysql.webp" alt=""></div>
|
||
<div><img src="./img/index/web.webp" alt=""></div>
|
||
</div>
|
||
|
||
<!-- <div class="fix">-->
|
||
<!-- <div class="lesson">-->
|
||
<!-- <img src="./img/index/mylesson.png" alt="">-->
|
||
<!-- </div>-->
|
||
<!-- <div class="test">-->
|
||
<!-- <img src="./img/index/mytest.png" alt="">-->
|
||
<!-- </div>-->
|
||
<!-- <div class="top">-->
|
||
<!-- <img src="./img/index/gotop.png" alt="">-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</main>
|
||
</q>
|
||
<footer>
|
||
<div class="cont">
|
||
<div class="main">
|
||
<p>
|
||
首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
|
||
| 教师资格证公示
|
||
|
||
</p>
|
||
<p>
|
||
京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
|
||
01010102002533号
|
||
</p>
|
||
<p>
|
||
京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
|
||
食品经营许可证：JY13101140088888
|
||
</p>
|
||
<p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/data.js"></script>
|
||
<script src="js/ujiuye.js"></script>
|
||
<script src="js/index.js"></script>
|
||
<script src="./utils/utils.js"></script>
|
||
<script src="./js/user.js"></script>
|
||
<script>
|
||
var app = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
java_datas: [],
|
||
db_datas: [],
|
||
web_datas: [],
|
||
keyword: ''
|
||
},
|
||
methods: {
|
||
|
||
//定义一个方法：加载java学习分类课程
|
||
load_CoursesTop8ByType(typeId) {
|
||
//调用axios向服务器端发出请求，获取指定分类编号的数据
|
||
axios.get('http://localhost:8001/edu/course/items/' + typeId)
|
||
.then(res => {
|
||
//判断分类编号
|
||
if (typeId == 1) {
|
||
this.java_datas = res.data;
|
||
}
|
||
if (typeId == 2) {
|
||
this.db_datas = res.data;
|
||
}
|
||
if (typeId == 3) {
|
||
this.web_datas = res.data;
|
||
}
|
||
|
||
})
|
||
},
|
||
//跳转到对应列表页
|
||
toOnline(typeId) {
|
||
location.href = "./pages/online.html?typeId=" + typeId;
|
||
|
||
},
|
||
//跳转到搜索页面
|
||
toSearch() {
|
||
location.href = "./pages/search.html?keyword=" + this.keyword;
|
||
},
|
||
//跳转到课程详情页面
|
||
toDetail(cid) {
|
||
location.href = "./pages/videoDetail.html?cid=" + cid;
|
||
|
||
}
|
||
},
|
||
created() {
|
||
//当页面加载时候调用方法，获取分类1课程数据
|
||
this.load_CoursesTop8ByType(1);
|
||
//当页面加载时候调用方法，获取分类2课程数据
|
||
this.load_CoursesTop8ByType(2);
|
||
//当页面加载时候调用方法，获取分类3课程数据
|
||
this.load_CoursesTop8ByType(3);
|
||
|
||
console.log(this.java_datas)
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |