236 lines
6.5 KiB
HTML
236 lines
6.5 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
||
|
|
<head th:include="web/index::cmsHeader">
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<style type="text/css">
|
||
|
|
body{
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
.courseView {
|
||
|
|
background-size: auto auto;
|
||
|
|
padding: 50px 0;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
.wWidth1200 .page-width {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 1200px;
|
||
|
|
}
|
||
|
|
.courseView .box {
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #e6e6e6;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.bd-all {
|
||
|
|
border: 1px solid #eee;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
.posnav {
|
||
|
|
padding: 0 30px;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #999;
|
||
|
|
line-height: 45px;
|
||
|
|
height: 45px;
|
||
|
|
}
|
||
|
|
.courseInfo {
|
||
|
|
padding: 0px 30px 30px 560px;
|
||
|
|
position: relative;
|
||
|
|
min-height: 300px;
|
||
|
|
}
|
||
|
|
.courseInfo .image {
|
||
|
|
width: 500px;
|
||
|
|
height: 300px;
|
||
|
|
position: absolute;
|
||
|
|
left: 30px;
|
||
|
|
top: 0px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.courseInfo-right {
|
||
|
|
padding-top: 5px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.clear {
|
||
|
|
clear: both;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
.courseInfo .image img {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100%;
|
||
|
|
}
|
||
|
|
.courseInfo-right .name {
|
||
|
|
font-size: 24px;
|
||
|
|
line-height: 34px;
|
||
|
|
color: #222;
|
||
|
|
}
|
||
|
|
.courseInfo-right .price {
|
||
|
|
height: 44px;
|
||
|
|
line-height: 44px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.courseInfo-right .price span {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.courseInfo-right .price-info {
|
||
|
|
font-size: 24px;
|
||
|
|
color: #e91c35;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.courseInfo-right .button {
|
||
|
|
height: 44px;
|
||
|
|
line-height: 44px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.courseInfo-right .hb-ui-btn, .courseInfo-right .hb-ui-btn1 {
|
||
|
|
height: 44px;
|
||
|
|
line-height: 44px;
|
||
|
|
font-size: 16px;
|
||
|
|
background: #f59121;
|
||
|
|
width: 150px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
border: 0px;
|
||
|
|
-webkit-transition: 0.3s;
|
||
|
|
transition: 0.3s;
|
||
|
|
float: left;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
.courseInfo-right .button em {
|
||
|
|
margin-left: 20px;
|
||
|
|
color: #b1b1b1;
|
||
|
|
}
|
||
|
|
.courseInfo-right .remark{
|
||
|
|
font-family: Arial,hiragino sans gb,microsoft yahei,simsun,sans-serif !important;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #888;
|
||
|
|
height: 88px;
|
||
|
|
line-height: 44px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
em {
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
.nav_content {
|
||
|
|
background: #f5f5f5;
|
||
|
|
border-bottom: 1px solid #e5e5e5;
|
||
|
|
}
|
||
|
|
.nav_content .page-width {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.courseTab {
|
||
|
|
height: 59px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.clearfix {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.courseTab li.active {
|
||
|
|
border-bottom: 3px solid #0288d1;
|
||
|
|
color: #0288d1;
|
||
|
|
}
|
||
|
|
.courseTab li {
|
||
|
|
float: left;
|
||
|
|
margin: 0px 60px 0 0;
|
||
|
|
text-align: center;
|
||
|
|
height: 56px;
|
||
|
|
line-height: 56px;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="fly-header layui-bg-black" th:replace="web/index:: top">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-container">
|
||
|
|
<div class="courseView">
|
||
|
|
<div class="page-width">
|
||
|
|
<form id="form1" action="https://xcx.kesion.com/cshoppingcart.html" method="post">
|
||
|
|
<div class="box bd-all">
|
||
|
|
<div class="posnav">
|
||
|
|
您现在位置：<a href="/vod/zyzg">职业资格</a><em>></em> <a href="/vod/e0ITPX">IT培训</a><em>></em> 浏览课程
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="courseInfo">
|
||
|
|
<div class="image" id="courseImage">
|
||
|
|
<div id="view_flv" style="display:none;"></div>
|
||
|
|
<div class="course-pro0"></div>
|
||
|
|
<img th:src="${trainCourse.cover}" class="course-cover" onerror="this.src='/sysimg/nopic.gif'" width="480" height="290">
|
||
|
|
</div>
|
||
|
|
<div class="courseInfo-right">
|
||
|
|
<div class="name" th:text="${trainCourse.name}">
|
||
|
|
安全测试基础课程
|
||
|
|
</div>
|
||
|
|
<div class="price">
|
||
|
|
<span class="price-info"><span th:text="'¥'+${trainCourse.price}"></span></span>
|
||
|
|
</div>
|
||
|
|
<div class="button">
|
||
|
|
<input type="submit" onclick="return Logincart('551')" class="hb-ui-btn" value="立刻购买">
|
||
|
|
<em>有效期:<span id="shixian">永久</span></em>
|
||
|
|
</div>
|
||
|
|
<div class="remark" th:text="${trainCourse.description}">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="clear"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
||
|
|
<ul class="layui-tab-title">
|
||
|
|
<li class="layui-this">课程目录</li>
|
||
|
|
<li>学员评价(<span id="commentNum">1</span>)</li>
|
||
|
|
<li>相关题库</li>
|
||
|
|
</ul>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
<div class="layui-tab-item layui-show">
|
||
|
|
<ul >
|
||
|
|
<li th:each="sections:${trainCourseSections}" >
|
||
|
|
<a th:href="@{'/web/course/courseSections.html/'+${sections.id}}">
|
||
|
|
<span th:text="${sections.name}"> </span>
|
||
|
|
</a>
|
||
|
|
<hr>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-item">2</div>
|
||
|
|
<div class="layui-tab-item">
|
||
|
|
<ul >
|
||
|
|
<li th:each="practice,obj:${examPractices}" >
|
||
|
|
<span th:text="${obj.index+1}+'.'+${practice.name}"> </span>
|
||
|
|
<hr>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="fly-footer" th:replace="web/index::cmsBottom">
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
layui.use('element', function(){
|
||
|
|
var element = layui.element;
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|