<!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">
.card {
width:
200
px;
box-shadow:
0
4
px
8
px
0
rgba(
0,
0,
0,
0.2),
0
6
px
20
px
0
rgba(
0,
0,
0,
0.19);
text-align:
center;
float:
left;
margin-right:
10
px;
}
.header {
color:
#fff;
padding:
10
px;
font-size:
15
px;
height:
60
px;
}
.body {
padding:
10
px;
}
.body
p {
margin-left:
5
px;
}
</
style>
</
head>
<
body>
<
div
class=
"card">
<
div
class=
"header"
style=
"background-color: #4caf50;">
<
p><
a
title=
"查看详情"
style=
"cursor: pointer; color:white"
onclick=
"viewXmInfo('${var.OMP_XM_ID}');">项目名称一</
a></
p>
</
div>
<
div
class=
"body">
<
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=
"card">
<
div
class=
"header"
style=
"background-color: #5BC0DE;">
<
p>项目名称二</
p>
</
div>
<
div
class=
"body">
<
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=
"card">
<
div
class=
"header"
style=
"background-color: #5BC0DE;">
<
p>项目名称三</
p>
</
div>
<
div
class=
"body">
<
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=
"card">
<
div
class=
"header"
style=
"background-color: #5BC0DE;">
<
p>项目名称四</
p>
</
div>
<
div
class=
"body">
<
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=
"card">
<
div
class=
"header"
style=
"background-color: #5BC0DE;">
<
p>项目名称五</
p>
</
div>
<
div
class=
"body">
<
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>
</
body>
</
html>
有修改,原文转自:http://blog.csdn.net/tyutjavalily/article/details/52159389