<!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>
