专题 班组件二次开发

<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/dsf_styles/themes/nc/404.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>