315 lines
6.8 KiB
HTML
315 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>卡片</title>
|
|
<link href="../../assets/css/pearone.css" rel="stylesheet" />
|
|
<link href="../../component/layui/css/layui.css" rel="stylesheet"/>
|
|
<link href="../../component/font-awesome/css/font-awesome.css" rel="stylesheet"/>
|
|
<style>
|
|
body{
|
|
margin:10px;
|
|
background-color: lightgray;
|
|
}
|
|
|
|
.layui-card-danger{
|
|
background-color: #FF5722;
|
|
min-height: 140px;
|
|
}
|
|
|
|
.layui-card-normal{
|
|
background-color: #1E9FFF;
|
|
min-height: 140px;
|
|
}
|
|
|
|
.layui-card-warm{
|
|
background-color: #FFB800;
|
|
min-height: 140px;
|
|
}
|
|
|
|
.layui-card-primary{
|
|
|
|
background-color:#009688 ;
|
|
min-height: 140px;
|
|
}
|
|
|
|
.layui-card-default{
|
|
background-color: whitesmoke;
|
|
min-height: 140px;
|
|
}
|
|
|
|
.layui-card-default:hover{
|
|
background-color: white;
|
|
box-shadow: 0px 0px 5px gray;
|
|
}
|
|
|
|
.layui-card-footer{
|
|
height: 42px;
|
|
border-top: 1px solid #f6f6f6;
|
|
border-radius: 0px 0px 2px 2px;
|
|
line-height: 42px;
|
|
color: #333;
|
|
padding: 0 15px;
|
|
}
|
|
.layui-card .layui-card-icon{
|
|
font-size: 50px;
|
|
height: 120px;
|
|
line-height: 110px;
|
|
padding-left: 30px;
|
|
color: white;
|
|
}
|
|
|
|
.layui-card .layui-card-value{
|
|
font-size: 40px;
|
|
color: white;
|
|
position: absolute;
|
|
right: 80px!important;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">默认卡片</div>
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">默认卡片</div>
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">默认卡片</div>
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">默认卡片</div>
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"></div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card layui-card-default">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card layui-card-default">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card layui-card-default">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card layui-card-default">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card layui-card-info">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
<div class="layui-card-footer">
|
|
底部标题
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
<div class="layui-card-footer">
|
|
底部标题
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
<div class="layui-card-footer">
|
|
底部标题
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
|
|
<div class="layui-card-body">
|
|
|
|
</div>
|
|
<div class="layui-card-footer">
|
|
底部标题
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md6">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card layui-card-primary">
|
|
|
|
<div class="layui-card-body">
|
|
<i class="layui-card-icon layui-icon layui-icon-component">
|
|
|
|
</i>
|
|
<span class="layui-card-value">
|
|
191
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card layui-card-normal">
|
|
<div class="layui-card-body">
|
|
<i class="layui-card-icon layui-icon layui-icon-app">
|
|
|
|
</i>
|
|
<span class="layui-card-value">
|
|
194
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card layui-card-warm">
|
|
<div class="layui-card-body">
|
|
<i class="layui-card-icon layui-icon layui-icon-template-1">
|
|
|
|
</i>
|
|
<span class="layui-card-value">
|
|
234
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card layui-card-danger">
|
|
<div class="layui-card-body">
|
|
<i class="layui-card-icon layui-icon layui-icon-home">
|
|
|
|
</i>
|
|
|
|
<span class="layui-card-value">
|
|
132
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card" style="height: 140px;">
|
|
<div class="layui-card-header">
|
|
<span class="layui-badge">赤</span>
|
|
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<div class="value">156</div>
|
|
<div class="title">今日浏览</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card" style="height: 140px;">
|
|
<div class="layui-card-header">
|
|
<span class="layui-badge layui-bg-orange">橙</span>
|
|
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<div class="value">1264</div>
|
|
<div class="title">本月流量</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card" style="height: 140px;">
|
|
<div class="layui-card-header">
|
|
<span class="layui-badge layui-bg-green">绿</span>
|
|
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<div class="value">97</div>
|
|
<div class="title">下载次数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card" style="height: 140px;">
|
|
<div class="layui-card-header">
|
|
|
|
<span class="layui-badge layui-bg-blue">蓝</span>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<div class="value">53</div>
|
|
<div class="title">捐献人次</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../../component/layui/layui.js"></script>
|
|
</body>
|
|
</html>
|