卡片显示二次开发

二次开发 

<div>
	<style>
      .ell {
        padding: 0 4px;
        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;
      }
      .layui-btn-sm {
          border-color: #C90C0A;
          border-radius: 6px;
          color: #C90C0A;
          cursor: default;
      }
      .citem{
      	padding: 27px 0 33px 0;
        position: relative;
        padding-left: 252px;
        box-sizing: border-box;
        //border-bottom: 1px solid #E8E8E8;
        height: 249px;
      }
      .citem .cleftbox{
      	width: 252px;
        height: 189px;
        border-radius: 4px;
        overflow: hidden;
        position: absolute;
        top: 27px;
        left: 0;
        cursor: pointer;
      }
      .citem .cleftbox img{width:100%;height:100%}
      .crightbox{
        padding-left: 19px;
        padding-top: 7px;
        box-sizing: border-box;
        position: relative;
        height: 100%;
      }
      .crightbox p {
        font-size: 24px;
        color: #333333;
        height: 33px;
        line-height: 33px;
        cursor: pointer;
    }
      .crightbox h6 {
        font-size: 14px;
        color: #333333;
        line-height: 30px;
        
        text-align: justify;
    }
      .crightbox .h6one{
        margin-top: 19px;
      }
      .citem .crightbox .choosebtns {
        position: absolute;
        bottom: 4px;
        width: 79%;
        height: 30px;
        overflow: hidden;
    }
      .citem .crightbox h5 {
        position: absolute;
        right: 0;
        top: 10px;
        height: 26px;
    	line-height: 26px;
    }
      .citem .crightbox .rightcon2 {
        right: 82px;
    }
     .citem .crightbox h5 i{
       display: inline-block;
       vertical-align: middle;
       width: 20px;
       height: 12px;
       background: url(../res/images/eye.png) no-repeat;
       background-size: 100% 100%;
      }
      .citem .crightbox h5 span{
      	vertical-align: middle;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
        line-height: 20px;
        margin-left: 4px;
      }
      .citem .crightbox h5 span em{
      	font-size: 20px;
        color: #D60C0C;
        line-height: 28px;
        font-style: normal;
        vertical-align: middle;
        margin-right: 3px;
      }
	</style>
    <%

       var photoObject=data["nc_szk_mslbsjy.photo"];//固定图片格式
       if(photoObject){
            photoObject=JSON.parse(photoObject);
            if(photoObject.length<1){
                photoObject = null;
            }
       }
       if(!photoObject){
            photoObject = null;
       }
      
  
       let str = data["nc_szk_mslbsjy.label_text"];//二次开发的方法
       let arr = [];
       if(str!=null && str!=undefined){
  		  arr=str.split("^");
       }
                                                   
    %>
  <div class="citembox">
	<div class="citem" onclick="fun('<%=data["nc_szk_mslbsjy.nc_szk_id"]%>')" id="<%=data["nc_szk_mslbsjy.nc_szk_id"]%>">
      <div class="cleftbox"><img src='<%=photoObject && photoObject[0] && dsf.url.getWebPath(photoObject[0].relativePath)%>' onerror='onerror=null;src="/dsfa/res/dsf_styles/themes/nc/404.png"'  style="width:100%;"></div>
      <div class="crightbox">
      	<p class="ell" title=""><%=data["nc_szk_mslbsjy.name"]%></p>
        <h6 class="h6one ell"><%=data["nc_szk_mslbsjy.unit"]%> <%=data["nc_szk_mslbsjy.job_text"]%></h6>  
        <h6 class="ell2"><%=(data["nc_szk_mslbsjy.nc_szk_mslbsjy.byyxjzy"]==null?"暂无内容":data["nc_szk_mslbsjy.nc_szk_mslbsjy.byyxjzy"])%></h6>
        <div class="choosebtns">
		<% if(arr && arr.length>0){%>
          	<%for(var i=0,len=arr.length;i<len;i++){%>
          		
               <button type="button" class="jschannelbtn layui-btn layui-btn-sm layui-btn-primary"><%=arr[i]%></button>
            <%}%>
         <%}%>
		</div>
      	<h5 class="rightcon2"><span><em><%=data["nc_szk_mslbsjy.kcnum"]%></em>门课程</span></h5>
        <h5 class="rightcon1"><i></i><span><%=data["nc_szk_mslbsjy.gkcs"]%></span></h5>
      </div>
    </div>
   </div>
   <script>
   		function fun(id){
            dsf.openUrl(1,'/dsfa/nc/mhsy/views/msxq.html?id='+id)
        }
  </script>             
</div>

 

来源：CSDN

作者：dongsdh

链接：https://blog.csdn.net/dongsdh/article/details/103566802