270 lines
9.7 KiB
HTML
270 lines
9.7 KiB
HTML
<!DOCTYPE HTML>
|
||
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
||
<head th:fragment="cmsHeader">
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>骏聪信息科技培训考试系统</title>
|
||
<meta name="keywords" content="">
|
||
<meta name="description" content="">
|
||
<link rel="shortcut icon" href="favicon.ico">
|
||
<link rel="stylesheet" th:href="@{/web/res/layui/css/layui.css}">
|
||
<link rel="stylesheet" th:href="@{/web/res/css/global.css}">
|
||
<script th:src="@{/js/jquery.min.js}"></script>
|
||
|
||
<!-- jquery-validate 表单验证插件 -->
|
||
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
|
||
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
|
||
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
|
||
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
|
||
<script th:src="@{/web/res/layui/layui.js}"></script>
|
||
<script th:src="@{/ruoyi/js/common.js}"></script>
|
||
<script th:src="@{/ruoyi/js/ry-ui.js}"></script>
|
||
<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
|
||
<script>
|
||
layui.cache.page = '';
|
||
layui.cache.user = {};
|
||
layui.use('element', function(){
|
||
var element = layui.element;
|
||
});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<style type="text/css">
|
||
|
||
.course{
|
||
height: 370px;
|
||
border: 1px solid #8a8a8a;
|
||
background-color: #ffffff;
|
||
}
|
||
.title{
|
||
margin-top: 20px;
|
||
}
|
||
.title span{
|
||
font-size: 28px;
|
||
font-weight: normal;
|
||
float: left;
|
||
margin-left: 10px;
|
||
line-height: 50px;
|
||
}
|
||
.title em{
|
||
display: block;
|
||
width: 70px;
|
||
height: 24px;
|
||
border-bottom: 2px #666 solid;
|
||
float: left;
|
||
}
|
||
.title i{
|
||
float: left;
|
||
font-size: 20px;
|
||
color: #999;
|
||
margin-left: 10px;
|
||
line-height: 50px;
|
||
}
|
||
.in01{
|
||
background: rgba(0,0,0,0.6);
|
||
width: 100%;
|
||
line-height: 30px;
|
||
height: 30px;
|
||
padding: 0px 10px;
|
||
bottom: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
.in01 span {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
}
|
||
.remark{
|
||
width: 80%;
|
||
margin: 5% 10%;
|
||
line-height: 25px;
|
||
font-size: 14px;
|
||
color: #777;
|
||
text-align: left;
|
||
}
|
||
.remark .title{
|
||
height: 50px;
|
||
line-height: 25px;
|
||
overflow: hidden;
|
||
margin: 10px 0;
|
||
}
|
||
.remark .price{
|
||
font-size: 18px;
|
||
line-height: 30px;
|
||
color: #e91c35;
|
||
height: 30px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.remark .free_price{
|
||
font-size: 18px;
|
||
line-height: 30px;
|
||
color: #3ab57f;
|
||
height: 30px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.remark .boxbtn01{
|
||
margin: 0px 20px 20px;
|
||
}
|
||
.remark .clearfix{
|
||
display: block;
|
||
}
|
||
.remark .boxbtn01 .btn01{
|
||
float: left;
|
||
color: #999;
|
||
width: 46%;
|
||
border: 1px solid #ddd;
|
||
}
|
||
.remark .boxbtn01 .btn02{
|
||
float: right;
|
||
background: #0288d1;
|
||
color: #fff;
|
||
width: 46%;
|
||
border: 1px solid #0288d1;
|
||
}
|
||
.remark .boxbtn01 a{
|
||
height: 35px;
|
||
line-height: 35px;
|
||
text-align: center;
|
||
color: #666;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
border-radius: 30px;
|
||
overflow: hidden;
|
||
}
|
||
.filterbox{/*! border:1px solid #ebebeb; */border-radius:4px;background: #fff;margin-top: 40px}
|
||
.filterbox ul{ background-color:white; text-indent:20px;border-radius:3px;}
|
||
.filterbox li{ position: relative;border-top:1px dashed #ebebeb;padding: 15px 15px 15px 0;margin-left: 140px;}
|
||
.filterbox li:first-child{border-top:0px;}
|
||
.filterbox li span{width: 140px;font-size: 16px;line-height:34px;position: absolute;left:-150px;top:15px; color:#fff;background:url(web/res/images/icon-1.png) #ff9f37 no-repeat right center;}
|
||
.filterbox li a{float: left;margin:0px 15px 0px 0;font-size: 14px;color: #828282;line-height: 34px;}
|
||
.filterbox li a.curr,
|
||
.filterbox li a:hover{color:#0288d1;}
|
||
.filterbox li:after{content:".";display:block;height:0;clear:both;visibility:hidden}
|
||
.filterbox .path-now{font-size: 16px;color: #333;margin-bottom:20px;}
|
||
|
||
|
||
</style>
|
||
<div class="fly-header layui-bg-black" th:fragment="top">
|
||
<div class="layui-container">
|
||
<a class="fly-logo" th:href="@{/web}">
|
||
<img th:src="@{/juncong.png}" alt="骏聪" width="100px" height="45px">
|
||
</a>
|
||
<ul class="layui-nav fly-nav layui-hide-xs">
|
||
<li class="layui-nav-item layui-this">
|
||
<a th:href="@{/web}"><i class="iconfont icon-jiaoliu"></i>课程</a>
|
||
</li>
|
||
<li class="layui-nav-item">
|
||
<a th:href="@{/web/practice}"><i class="iconfont icon-iconmingxinganli"></i>练习</a>
|
||
</li>
|
||
<li class="layui-nav-item">
|
||
<a th:href="@{/web/examination}"><i class="iconfont icon-ui"></i>考试</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="layui-nav fly-nav-user">
|
||
|
||
<!-- 未登入的状态 -->
|
||
<li th:if="${user}==null" class="layui-nav-item">
|
||
<a class="iconfont icon-touxiang layui-hide-xs" th:href="@{/web/user/login.html}"></a>
|
||
</li>
|
||
<li th:if="${user}==null" class="layui-nav-item">
|
||
<a th:href="@{/web/user/login.html}">登入</a>
|
||
</li>
|
||
<li th:if="${user}==null" class="layui-nav-item">
|
||
<a th:href="@{/web/user/reg.html}">注册</a>
|
||
</li>
|
||
<!-- 登入后的状态 -->
|
||
<li th:if="${user}!=null" class="layui-nav-item">
|
||
<a class="fly-nav-avatar" href="javascript:;">
|
||
<cite class="layui-hide-xs" th:text="${user.userName}"></cite>
|
||
<i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
|
||
<i class="layui-badge fly-badge-vip layui-hide-xs">VIP</i>
|
||
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
|
||
</a>
|
||
<dl class="layui-nav-child">
|
||
|
||
<!--<dd><a th:href="@{/web/user/message.html}"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>-->
|
||
<!--<dd><a th:href="@{/web/user/home.html}"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;"></i>我的主页</a></dd>-->
|
||
<dd><a th:href="@{/web/user/set.html}"><i class="layui-icon"></i>基本设置</a></dd>
|
||
<dd><a th:href="@{/web/user/set.html}"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;"></i>更多...</a></dd>
|
||
<!--<dd><a th:href="@{/web/user/collectquestion.html}"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;"></i>我的收藏</a></dd>-->
|
||
<dd><a th:href="@{/logout}" style="text-align: center;">退出</a></dd>
|
||
</dl>
|
||
</li>
|
||
<script>
|
||
</script>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="layui-container">
|
||
<section class="filterbox">
|
||
<ul>
|
||
<li field="classid"><span>选择分类：</span>
|
||
<a th:href="@{/web}" th:class="${#strings.isEmpty(selectCategoryId)}?'curr':''">不限</a>
|
||
<a th:each="category:${courseCategories1}" th:href="@{'/web?parentIds='+${category.parentIds}+','+${category.id}}" th:text="${category.name}"
|
||
th:class="${category.id==selectCategoryId||category.id==selectCategoryId1}?'curr':''"></a>
|
||
</li>
|
||
<li field="classid"><span>选择分类：</span>
|
||
<a th:if="${#lists.size(courseCategories2)}>0" th:href="@{'/web?parentIds='+${courseCategories2[0].parentIds}}">不限</a>
|
||
<a th:if="${#lists.size(courseCategories2)}==0" th:href="@{'/web'}">不限</a>
|
||
<a th:each="category:${courseCategories2}" th:href="@{'/web?parentIds='+${category.parentIds}+','+${category.id}}" th:text="${category.name}" th:class="${category.id==selectCategoryId||category.id==selectCategoryId2}?'curr':''"></a>
|
||
|
||
</li>
|
||
<li field="classid"><span>选择分类：</span>
|
||
<a th:if="${#lists.size(courseCategories3)}>0" th:href="@{'/web?parentIds='+${courseCategories3[0].parentIds}}">不限</a>
|
||
<a th:if="${#lists.size(courseCategories3)}==0" th:href="@{'/web'}">不限</a>
|
||
<a th:each="category:${courseCategories3}" th:href="@{'/web?parentIds='+${category.parentIds}+','+${category.id}}" th:text="${category.name}" th:class="${category.id}==${selectCategoryId}?'curr':''"></a>
|
||
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<div class="title">
|
||
<em></em>
|
||
<span>所有课程</span>
|
||
<i>All Course</i>
|
||
</div>
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md3" th:each="course:${trainCourse}">
|
||
<div class="course">
|
||
<div class="courseImg">
|
||
<a th:href="@{'/web/course/courseInfo.html/'+${course.id}}">
|
||
<img th:if="${#strings.isEmpty(course.cover)}" th:src="@{/web/res/images/no_img.png}" th:alt="${course.name}" width="100%" height="180px">
|
||
<img th:if="${not #strings.isEmpty(course.cover)}" th:src="${course.cover}" th:alt="${course.name}" width="100%" height="180px">
|
||
<p class="in01">
|
||
<span class="f20 c77b" th:text="${course.name}"></span>
|
||
<span class="cfff"></span>
|
||
</p>
|
||
</a>
|
||
</div>
|
||
<div class="remark">
|
||
<div class="title" th:text="${course.description}">
|
||
</div>
|
||
<div class="price" th:if="${course.price>0}" th:text="'￥'+${course.price}">
|
||
</div>
|
||
|
||
<div class="free_price" th:if="${course.price==0}" th:text="'免费'">
|
||
</div>
|
||
<div class="boxbtn01 clearfix">
|
||
<a class="btn01" th:href="@{'/web/course/courseInfo.html/'+${course.id}}">了解更多</a>
|
||
<a class="btn02" th:href="@{/web/course/coursePay.html}">立即购买</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fly-footer" th:fragment="cmsBottom">
|
||
<p><a href="http://fly.layui.com/" target="_blank">骏聪信息科技</a></p>
|
||
</div>
|
||
</body>
|
||
</html> |