效果图如下
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卡片效果</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.cardBox {
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
float: left;
margin-right: 10px;
padding: 5px;
padding-top: 15px;
}
.headerBox {
color: #fff;
padding: 10px;
font-size: 15px;
height: 60px;
}
.bodyBox {
padding: 10px;
}
.bodyBox p {
margin-left: 5px;
}
</style>
</head>
<body>
<div>
<div class="cardBox">
<div class="headerBox" style="background-color: #4caf50;">
<p>
<a title="查看详情" style="cursor: pointer; color:white" onclick="viewXmInfo('${var.OMP_XM_ID}');">项目名称一</a>
</p>
</div>
<div class="bodyBox">
<p>项目经理：成柯</p>
<p>项目主管：王江</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-success" style="border-radius: .25em;">启动</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：1,817,375</p>
</div>
</div>
<div class="cardBox">
<div class="headerBox" style="background-color: #5BC0DE;">
<p>项目名称二</p>
</div>
<div class="bodyBox">
<p>项目经理：朱焕宏</p>
<p>项目主管：朱焕宏</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：0</p>
</div>
</div>
<div class="cardBox">
<div class="headerBox" style="background-color: #5BC0DE;">
<p>项目名称三</p>
</div>
<div class="bodyBox">
<p>项目经理：朱焕宏</p>
<p>项目主管：朱焕宏</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：0</p>
</div>
</div>
<div class="cardBox">
<div class="headerBox" style="background-color: #5BC0DE;">
<p>项目名称四</p>
</div>
<div class="bodyBox">
<p>项目经理：朱焕宏</p>
<p>项目主管：朱焕宏</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：0</p>
</div>
</div>
<div class="cardBox">
<div class="headerBox" style="background-color: #5BC0DE;">
<p>项目名称四</p>
</div>
<div class="bodyBox">
<p>项目经理：朱焕宏</p>
<p>项目主管：朱焕宏</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：0</p>
</div>
</div>
<div class="cardBox">
<div class="headerBox" style="background-color: #5BC0DE;">
<p>项目名称四</p>
</div>
<div class="bodyBox">
<p>项目经理：朱焕宏</p>
<p>项目主管：朱焕宏</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：0</p>
</div>
</div>
<div class="cardBox">
<div class="headerBox" style="background-color: #5BC0DE;">
<p>项目名称五</p>
</div>
<div class="bodyBox">
<p>项目经理：朱焕宏</p>
<p>项目主管：朱焕宏</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：0</p>
</div>
</div>
</div>
<div>
<div class="cardBox">
<div class="headerBox" style="background-color: #4caf50;">
<p>
<a title="查看详情" style="cursor: pointer; color:white" onclick="viewXmInfo('${var.OMP_XM_ID}');">项目名称一</a>
</p>
</div>
<div class="bodyBox">
<p>项目经理：成柯</p>
<p>项目主管：王江</p>
<p>项目状态：
<a href="javascript:void(0)" class="label label-success" style="border-radius: .25em;">启动</a>
</p>
<p>异常状态：<span style="color:green">无异常</span></p>
<p>加工量：1,817,375</p>
</div>
</div>
</div>
</body>
</html>