<div>
<style>
.ds_card_cell{
width:380px !important;
margin-right:29px;
}
.ds_card_cell:nth-child(3n){
margin-right: 0px;
}
.ds_card ds_control{
width:380px !important;
}
.ds_page .ds_control{
padding:0;
}
.ds_page .ds_datagrid>.body>.ds_datagrid_datarange>.ds_datagrid_outer>.ds_datagrid_wrap[type='card'] .ds_datagrid_card_inner>div .ds_card{
border:0;
box-shadow: none;
margin: 0;
width:380px !important;
}
.ds_page.bottom_layout_auto>.ds_page_content {
overflow: scroll !important;
min-height:1300px !important;
}
.ds_page .ds_datagrid>.body.nofull>.ds_datagrid_datarange>.ds_datagrid_outer>.ds_datagrid_wrap{
padding:0;
}
.ds_page .ds_datagrid>.body.nofull{
padding:0;
width:1200px;
}
.ds_page .ds_datagrid>.body.nofull>.ds_datagrid_datarange>.ds_datagrid_outer{
padding:0;
}
.ell {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
.ell2 {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.aitem {
overflow: hidden;
display: inline-block;
vertical-align: top;
margin-bottom: 53px;
width: 100%;
height: 414px;
background: #FFFFFF;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
position: relative;
cursor: pointer;
}
.aimgbox{
height: 285px;
position: relative;
}
.aitem .aimgbox img {
width: 100%;
height: 100%;
}
.aitem .aimgbox .imgtext {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(28, 38, 51, 0.6);
height: 36px;
line-height: 25px;
padding: 5px 5px 4px;
box-sizing: border-box;
color: #fff;
text-align: center;
}
.aitem .aimgbox .imgtext .choosebox {
position: absolute;
top: 5px;
left: 4px;
}
.aitem .aimgbox .imgtext .choosebox span {
display: inline-block;
vertical-align: middle;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
}
.aitem .aimgbox .imgtext .choose1 {
background: #E12617;
}
.aitem .aimgbox .imgtext .choose2 {
background: #FF6A00;
}
.aitem .aimgbox .imgtext .choose3 {
background: #FF8F00;
}
.aitem .aimgbox .imgtext .timecenter {
position: absolute;
bottom: 3px;
left: 50%;
transform: translate(-50%);
}
.aitem .aimgbox .imgtext .timecenter b {
display: inline-block;
vertical-align: middle;
font-weight: normal;
}
.aitem .aimgbox .imgtext .timecenter .icon1 {
font-size: 12px;
vertical-align: text-top;
}
.aitem .item-foot {
padding: 10px 8px 11px 9px;
box-sizing: border-box;
}
.item-foot .ctitle{
font-size: 18px;
color: #333333;
letter-spacing: 0.39px;
text-align: justify;
line-height: 26px;
height: 51px;
}
.item-foot .cclass-hour{
margin-top: 8px;
}
.item-foot .cclass-hour p{
font-size: 16px;
color: #333333;
display: inline-block;
min-width: 120px;
height: 26px;
line-height: 26px;
}
.item-foot .cclass-hour p i{
margin-left: 6px;
font-style: normal;
}
.item-foot .cclass-hour p:last-child{
width: 100%;
}
.aitem .hbox {
transition: 0.15s;
position: absolute;
bottom: -201px;
background: url(/dsfa/res/dsf_styles/themes/styleClass/indexhoverbg.png) no-repeat;
background-size: 100% 100%;
padding: 36px 15px 45px 17px;
box-sizing: border-box;
width: 100%;
height: 200px;
}
.aitem .hbox p {
font-size: 22px;
color: #FFFFFF;
letter-spacing: 0.47px;
text-align: justify;
line-height: 26px;
}
.aitem .hbox .btnbox {
margin-top: 27px;
text-align: center;
}
.aitem .hbox .btnbox span {
display: inline-block;
font-size: 20px;
letter-spacing: 0;
text-align: center;
border: 1px solid #FFFFFF;
border-radius: 4px;
height: 40px;
line-height: 37px;
padding: 0 8px;
box-sizing: border-box;
color: #fff;
margin-right: 11px;
}
.aitem .hbox .btnbox span:last-child {
margin: 0;
}
.aitem .hbox .btnbox .act {
background: #E12617;
}
.aitem .hbox .btnbox span:hover {
opacity: 0.9;
}
.aitem:nth-child(4n) {
margin-right: 0;
}
.aitem:hover .hbox {
bottom: 0;
}
</style>
<%
var photoObject=data["nc_ztb_mhlbdata.cover"];
if(photoObject){
photoObject=JSON.parse(photoObject);
if(photoObject.length<1){
photoObject = null;
}
}
if(!photoObject){
photoObject = null;
}
let str = data["nc_ztb_mhlbdata.label_text"];
let arr = [];
if(str!=null && str!=undefined){
arr=str.split("^");
}
var stime = data["nc_ztb_mhlbdata.bmrq_sdate"];
if(stime){
stime = stime.substr(5,2)+'.'+stime.substr(8,2)
}
var etime = data["nc_ztb_mhlbdata.bmrq_edate"];
if(etime){
etime = ' - '+etime.substr(5,2)+'.'+etime.substr(8,2)
}
var time = stime + etime;
%>
<script>
function todoStyle(id){
dsf.openUrl(1,'/dsfa/nc/pc/stylecenterindex/views/stylecenterindex.html?id='+id)
}
function todoAdd(id,state){
var userName = dsf.getCookie('user_name'),
userId = dsf.getCookie('userId');
console.log(id);
console.log(state);
console.log(userName);
console.log(userId);
if (userId) {
if (state == 0) {
dsf.layer.confirm("您确定要报名吗?", () => {
courseSingUp(id, state, userName, userId);
}, () => {
console.log('取消报名')
})
}else {
let path = dsf.url.getWebPath('nc/pc/stylecenterindex/views/stylecenterindex.html?id=' + id);
window.open(path);
}
} else {
window.parent.openLogin();
}
}
function courseSingUp(id, state, userName, userId){
let params = {
nc_zyb_id: id,
nc_students_id: userId
};
let that = this;
let loading = dsf.layer.loadding();
let singUrl = dsf.url.getWebPath('ztb/xymd/addXymdBm');
dsf.http.request(singUrl, params, "POST")
.done(function (res) {
if (res.success) {
if (res.data) {
dsf.layer.message('报名成功', true);
let t = setTimeout(() => {
that.listSpecial()();
clearTimeout(t);
}, 1000)
}
} else {
dsf.layer.message(res.message, false);
}
})
.error(function (err) {
console.log(err)
dsf.layer.message(err.message, false);
})
.always(function () {
dsf.layer.close(loading);
}).exec();
}
function fun(id){
$.ajax({
type: "get",
url: dsf.url.getWebPath('zxgl/add'),
contentType: "application/json",
async: true,
dataType:"json",
data: {relid:id},
success: function(data) {
if(data.state==20000){
layui.use('layer', function() {
layer.msg(data.message,{icon:6,time:2000});
})
}
}
});
}
function isshowcount(){
}
</script>
<div class="aitem">
<div class="aimgbox">
<img src='<%=photoObject && photoObject[0] && dsf.url.getWebPath(photoObject[0].relativePath)%>' onerror='onerror=null;src="../res/images/500.png"' style="width:100%;">
<div class="imgtext">
<div class="choosebox">
<% if(data["nc_ztb_mhlbdata.sfbx"]==1){ %>
<span class="choose2">必</span>
<% } %>
<% if(data["nc_ztb_mhlbdat.isnew"]==1){ %>
<span class="choose3">新</span>
<% } %>
</div>
<div class="timecenter">
<b class="iconfont icon1 icon-shijian"></b>
<b><%=time%></b>
</div>
</div>
</div>
<div class="item-foot">
<div class="ctitle ell2"><%=data["nc_ztb_mhlbdata.title"]%></div>
<div class="cclass-hour">
<p><span>必修课程</span><i><%=data["nc_ztb_mhlbdata.bxcount"]%></i></p>
<p><span>必修学时</span><i><%=data["nc_ztb_mhlbdata.bxxs"]%></i></p>
<p><span>学员人数</span><i><%=data["nc_ztb_mhlbdata.studentNum"]%></i></p>
</div>
</div>
<div class="hbox">
<p class="ell2"><%=data["nc_ztb_mhlbdata.title"]%></p>
<div class="btnbox">
<span onclick='todoStyle("<%=data["_id"]%>")'>马上学习</span>
<% if(data["nc_ztb_mhlbdata.STATE"]==0){ %>
<span onclick='todoAdd("<%=data["_id"]%>","<%=data["nc_ztb_mhlbdata.STATE"]%>")' class="act">加入在学</span>
<% } %>
<% if(data["nc_ztb_mhlbdata.STATE"]==1){ %>
<span onclick='todoAdd("<%=data["_id"]%>","<%=data["nc_ztb_mhlbdata.STATE"]%>")' class="act">开始学习</span>
<% } %>
<% if(data["nc_ztb_mhlbdata.STATE"]==2){ %>
<span onclick='todoAdd("<%=data["_id"]%>","<%=data["nc_ztb_mhlbdata.STATE"]%>")' class="act">继续学习</span>
<% } %>
<% if(data["nc_ztb_mhlbdata.STATE"]==3){ %>
<span onclick='todoAdd("<%=data["_id"]%>","<%=data["nc_ztb_mhlbdata.STATE"]%>")' class="act">通过学习</span>
<% } %>
</div>
</div>
</div>
</div>