yovinchen
/
eduWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
eduWeb/pages/online.html

288 lines
9.9 KiB
HTML
Raw Permalink Normal View History

Initial commit
2022-08-28 18:09:27 +08:00
<!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>视频详情</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/online.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/public/logo.png" alt="" class="logo">
<ul>
<li><a href="../index.html">首页</a></li>
<li :class="check1"><a href="./online.html?typeId=1">Java</a></li>
<li :class="check2"><a href="./online.html?typeId=2">Mysql</a></li>
<li :class="check3"><a href="./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/public/search.png" @click="toSearch()" alt="">
</div>
<div class="login">
<a href="./loginAndRegister/login.html">登陆</a>
/
<a href="./loginAndRegister/register.html">注册</a>
</div>
<div class="user">
<img src="../img/login/user.png" alt="">
<div class="userlist">
<ul>
<li>我是用户名</li>
<li>课程中心</li>
<li>订单中心</li>
<li>资金管理</li>
<li>个人中心</li>
<li class="out">退出登陆</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- 主体内容 -->
<main>
<div class="row">
<div class="left">按省份选择</div>
<div class="right">
<span>省份<i class="iconfont icon-down"></i></span>
<span>城市<i class="iconfont icon-down"></i></span>
</div>
</div>
<div class="row">
<div class="left">热门城市</div>
<div class="right">
<ul>
<li><a>北京</a></li>
<li><a>上海</a></li>
<li><a>江苏</a></li>
<li><a>济南</a></li>
<li><a>河南</a></li>
<li><a>天津</a></li>
<li><a>沈阳</a></li>
<li><a>石家庄</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">按年级选择</div>
<div class="right">
<ul>
<li><a>大班</a></li>
<li><a>中班</a></li>
<li><a>一年级</a></li>
<li><a>二年级</a></li>
<li><a>三年级</a></li>
<li><a>四年级</a></li>
<li><a>五年级</a></li>
<li><a>六年级</a></li>
<li><a>初一</a></li>
<li><a>初二</a></li>
<li><a>初三</a></li>
<li><a>高一</a></li>
<li><a>高二</a></li>
<li><a>高三</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">按学科选择</div>
<div class="right">
<ul>
<li obj="1"><a>全部</a></li>
<li obj="yuwen"><a>语文</a></li>
<li obj="shuxue"><a>数学</a></li>
<li obj="english"><a>英语</a></li>
<li obj="shengwu"><a>生物</a></li>
<li obj="lishi"><a>历史</a></li>
<li obj="zhengzhi"><a>政治</a></li>
<li obj="wuli"><a>物理</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">按版本选择</div>
<div class="right">
<ul>
<li><a class="active">人教版</a></li>
<li><a>沪教版</a></li>
<li><a>苏教版</a></li>
<li><a>浙教版</a></li>
<li><a>外研版</a></li>
<li><a>人教版</a></li>
<li><a>人教版</a></li>
</ul>
</div>
</div>
<div class="lesson">
<ul>
<li v-for="sc in datas" @click="toDetail(sc.cid)">
<div class="top">
<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="pageNum">
<button>上一页</button>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<button class="active">下一页</button>
</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>
<div class="pos">
<div class="login">
<span class="close iconfont icon-close"></span>
<img src="../img/login/loginlogo.png" alt="">
<ul>
<li></li>
<li class="phone">使用手机号登陆</li>
<li></li>
</ul>
<input type="text" name="" id="" placeholder="请输入您的手机号">
<input type="password" name="" id="" placeholder="请输入密码">
<button class="loginbtn">
登陆
</button>
<p>
<span><a href="javascript:;">忘记密码</a></span>
<span>
还没有账号?
<a href="javascript:;">点击注册</a>
</span>
</p>
<ul>
<li></li>
<li class="phone">使用第三方软件登录</li>
<li></li>
</ul>
<p class="getCenter">
<img src="../img/login/wx.png" alt=""><img src="../img/login/qq.png" alt=""><img
src="../img/login/sina.png" alt="">
</p>
</div>
</div>
<script src="../js/ujiuye.js"></script>
<script src="../js/onlinedata.js"></script>
<script src="../js/online.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
datas: [],
check1: 'check',
check2: 'check',
check3: 'check',
keyword: ''
},
methods: {
//根据传入分类编号，读取对应全部的题目数据
load_data(typeId) {
axios.get('http://localhost:8001/edu/course/itemsall/' + typeId)
.then(res => {
this.datas = res.data;
})
},
//跳转到课程详情页面
toDetail(cid) {
location.href = "./videoDetail.html?cid=" + cid;
},
//跳转到搜索页面
toSearch() {
location.href = "./search.html?keyword=" + this.keyword;
}
},
created() {
//捕获当前uri http://localhost:63342/uxue-edu-web001/pages/online.html?typeId=1
console.log(location.href)
var url = location.href;
var split = url.split("?");
//访问数组第2个 typeId=1
var parm = split[1];
var split2 = parm.split("=");
var typeId = split2[1];
console.log("value:" + typeId)
//根据传入分类编号，设置样式
if (typeId == 1) {
this.check2 = '';
this.check3 = '';
}
if (typeId == 2) {
this.check1 = '';
this.check3 = '';
}
if (typeId == 3) {
this.check1 = '';
this.check2 = '';
}
//调用方法，获取数据
this.load_data(typeId);
}
})
</script>
</body>
</html>