<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单个卡片调试</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f8f9fa;
padding: 20px;
margin: 0;
}
.big-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
padding: 0;
max-width: 800px;
margin: 0 auto;
}
.card-content {
display: flex;
height: 100%;
}
.stats-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.info-bar {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
.info-bar span {
font-size: 14px;
color: #374151;
font-weight: 500;
}
.cards-container {
flex: 1;
display: flex;
}
.avatar-section {
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #e5e7eb;
padding: 16px;
padding-right: 24px;
}
.avatar-circle {
width: 100px;
height: 100px;
background-color: #0d6efd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.avatar-circle .greeting {
font-size: 12px;
margin: 0;
}
.avatar-circle .name {
font-weight: bold;
font-size: 14px;
margin: 2px 0 0 0;
}
.stat-group {
flex: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #e5e7eb;
}
.stat-group:last-child {
border-right: none;
}
.group-inner {
display: flex;
gap: 8px;
width: 100%;
padding: 8px;
}
.stat-card {
flex: 1;
background: white;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 8px;
text-align: center;
border-left: 3px solid;
}
.divider {
width: 1px;
background-color: #e5e7eb;
margin: 0;
align-self: stretch;
}
.stat-card .icon {
font-size: 18px;
margin-bottom: 4px;
}
.stat-card .label {
font-size: 11px;
color: #6b7280;
margin: 0 0 4px 0;
}
.stat-card .value {
font-size: 16px;
font-weight: bold;
margin: 0 0 4px 0;
}
.stat-card .change {
font-size: 10px;
margin: 0;
}
.stat-card.primary {
border-left-color: #0d6efd;
}
.stat-card.primary .icon {
color: #0d6efd;
}
.stat-card.success {
border-left-color: #22c55e;
}
.stat-card.success .icon {
color: #22c55e;
}
.stat-card.warning {
border-left-color: #f59e0b;
}
.stat-card.warning .icon {
color: #f59e0b;
}
.stat-card.danger {
border-left-color: #ef4444;
}
.stat-card.danger .icon {
color: #ef4444;
}
.change-up {
color: #22c55e;
}
.change-down {
color: #ef4444;
}
</style>
</head>
<body>
<div class="big-card">
<div class="card-content">
<div class="avatar-section">
<div class="avatar-circle">
<div>
<p class="greeting">下午好</p>
<p class="name">三寿</p>
</div>
</div>
</div>
<div class="stats-wrapper">
<div class="cards-container">
<div class="stat-group">
<div class="bg-info rounded p-2" style="display: flex; justify-content: space-between; align-items: center; margin: 8px;">
<span style="color: white; font-size: 14px;">总数</span>
<span style="color: white; font-size: 18px; font-weight: bold;">200</span>
</div>
<div class="group-inner">
<div class="stat-card primary">
<div class="icon"><i class="fa fa-users"></i></div>
<p class="label">总用户数</p>
<p class="value">12,843</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 12.5%</p>
</div>
<div class="stat-card success">
<div class="icon"><i class="fa fa-shopping-cart"></i></div>
<p class="label">今日订单</p>
<p class="value">342</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 8.3%</p>
</div>
</div>
</div>
<div class="stat-group">
<div class="bg-info rounded p-2" style="display: flex; justify-content: space-between; align-items: center; margin: 8px;">
<span style="color: white; font-size: 14px;">总数</span>
<span style="color: white; font-size: 18px; font-weight: bold;">100</span>
</div>
<div class="group-inner">
<div class="stat-card warning">
<div class="icon"><i class="fa fa-dollar"></i></div>
<p class="label">今日销售额</p>
<p class="value">¥28,456</p>
<p class="change change-down"><i class="fa fa-arrow-down"></i> 2.1%</p>
</div>
<div class="stat-card danger">
<div class="icon"><i class="fa fa-eye"></i></div>
<p class="label">访问量</p>
<p class="value">45,231</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 15.7%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>/<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>统计卡片调试</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f8f9fa;
padding: 20px;
margin: 0;
}
.big-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
padding: 0;
min-height: 140px;
}
.card-content {
display: flex;
height: 100%;
}
.stats-wrapper {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
}
.avatar-section {
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #e5e7eb;
padding: 16px;
padding-right: 24px;
}
.avatar-circle {
width: 100px;
height: 100px;
background-color: #0d6efd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.avatar-circle .greeting {
font-size: 12px;
margin: 0;
}
.avatar-circle .name {
font-weight: bold;
font-size: 14px;
margin: 2px 0 0 0;
}
.stats-section {
display: flex;
gap: 12px;
width: 100%;
}
.stat-card {
flex: 1;
background: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
text-align: center;
border-left: 3px solid;
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.stat-card .icon {
font-size: 18px;
margin-bottom: 4px;
}
.stat-card .label {
font-size: 11px;
color: #6b7280;
margin: 0 0 4px 0;
}
.stat-card .value {
font-size: 16px;
font-weight: bold;
margin: 0 0 4px 0;
}
.stat-card .change {
font-size: 10px;
margin: 0;
}
.stat-card.primary {
border-left-color: #0d6efd;
}
.stat-card.primary .icon {
color: #0d6efd;
}
.stat-card.success {
border-left-color: #22c55e;
}
.stat-card.success .icon {
color: #22c55e;
}
.stat-card.warning {
border-left-color: #f59e0b;
}
.stat-card.warning .icon {
color: #f59e0b;
}
.stat-card.danger {
border-left-color: #ef4444;
}
.stat-card.danger .icon {
color: #ef4444;
}
.change-up {
color: #22c55e;
}
.change-down {
color: #ef4444;
}
</style>
</head>
<body>
<div class="row g-4">
<div class="col-md-6">
<div class="big-card">
<div class="card-content">
<div class="avatar-section">
<div class="avatar-circle">
<div>
<p class="greeting">下午好</p>
<p class="name">三寿</p>
</div>
</div>
</div>
<div class="stats-wrapper">
<div class="stats-section">
<div class="stat-card primary">
<div class="icon"><i class="fa fa-users"></i></div>
<p class="label">总用户数</p>
<p class="value">12,843</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 12.5%</p>
</div>
<div class="stat-card success">
<div class="icon"><i class="fa fa-shopping-cart"></i></div>
<p class="label">今日订单</p>
<p class="value">342</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 8.3%</p>
</div>
<div class="stat-card warning">
<div class="icon"><i class="fa fa-dollar"></i></div>
<p class="label">今日销售额</p>
<p class="value">¥28,456</p>
<p class="change change-down"><i class="fa fa-arrow-down"></i> 2.1%</p>
</div>
<div class="stat-card danger">
<div class="icon"><i class="fa fa-eye"></i></div>
<p class="label">访问量</p>
<p class="value">45,231</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 15.7%</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="big-card">
<div class="card-content">
<div class="stats-wrapper">
<div class="stats-section">
<div class="stat-card primary">
<div class="icon"><i class="fa fa-users"></i></div>
<p class="label">总用户数</p>
<p class="value">12,843</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 12.5%</p>
</div>
<div class="stat-card success">
<div class="icon"><i class="fa fa-shopping-cart"></i></div>
<p class="label">今日订单</p>
<p class="value">342</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 8.3%</p>
</div>
<div class="stat-card warning">
<div class="icon"><i class="fa fa-dollar"></i></div>
<p class="label">今日销售额</p>
<p class="value">¥28,456</p>
<p class="change change-down"><i class="fa fa-arrow-down"></i> 2.1%</p>
</div>
<div class="stat-card danger">
<div class="icon"><i class="fa fa-eye"></i></div>
<p class="label">访问量</p>
<p class="value">45,231</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 15.7%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单个卡片调试</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f8f9fa;
padding: 20px;
margin: 0;
}
.big-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
padding: 0;
max-width: 800px;
margin: 0 auto;
}
.card-content {
display: flex;
height: 100%;
}
.stats-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.info-bar {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
.info-bar span {
font-size: 14px;
color: #374151;
font-weight: 500;
}
.cards-container {
flex: 1;
display: flex;
}
.avatar-section {
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #e5e7eb;
padding: 16px;
padding-right: 24px;
}
.avatar-circle {
width: 100px;
height: 100px;
background-color: #0d6efd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.avatar-circle .greeting {
font-size: 12px;
margin: 0;
}
.avatar-circle .name {
font-weight: bold;
font-size: 14px;
margin: 2px 0 0 0;
}
.stat-group {
flex: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #e5e7eb;
}
.stat-group:last-child {
border-right: none;
}
.group-inner {
display: flex;
gap: 8px;
width: 100%;
padding: 8px;
}
.stat-card {
flex: 1;
background: white;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 8px;
text-align: center;
border-left: 3px solid;
}
.divider {
width: 1px;
background-color: #e5e7eb;
margin: 0;
align-self: stretch;
}
.stat-card .icon {
font-size: 18px;
margin-bottom: 4px;
}
.stat-card .label {
font-size: 11px;
color: #6b7280;
margin: 0 0 4px 0;
}
.stat-card .value {
font-size: 16px;
font-weight: bold;
margin: 0 0 4px 0;
}
.stat-card .change {
font-size: 10px;
margin: 0;
}
.stat-card.primary {
border-left-color: #0d6efd;
}
.stat-card.primary .icon {
color: #0d6efd;
}
.stat-card.success {
border-left-color: #22c55e;
}
.stat-card.success .icon {
color: #22c55e;
}
.stat-card.warning {
border-left-color: #f59e0b;
}
.stat-card.warning .icon {
color: #f59e0b;
}
.stat-card.danger {
border-left-color: #ef4444;
}
.stat-card.danger .icon {
color: #ef4444;
}
.change-up {
color: #22c55e;
}
.change-down {
color: #ef4444;
}
</style>
</head>
<body>
<div class="big-card">
<div class="card-content">
<div class="avatar-section">
<div class="avatar-circle">
<div>
<p class="greeting">下午好</p>
<p class="name">三寿</p>
</div>
</div>
</div>
<div class="stats-wrapper">
<div class="cards-container">
<div class="stat-group">
<div class="bg-info rounded p-2" style="display: flex; justify-content: space-between; align-items: center; margin: 8px;">
<span style="color: white; font-size: 14px;">总数</span>
<span style="color: white; font-size: 18px; font-weight: bold;">200</span>
</div>
<div class="group-inner">
<div class="stat-card primary">
<div class="icon"><i class="fa fa-users"></i></div>
<p class="label">总用户数</p>
<p class="value">12,843</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 12.5%</p>
</div>
<div class="stat-card success">
<div class="icon"><i class="fa fa-shopping-cart"></i></div>
<p class="label">今日订单</p>
<p class="value">342</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 8.3%</p>
</div>
</div>
</div>
<div class="stat-group">
<div class="bg-info rounded p-2" style="display: flex; justify-content: space-between; align-items: center; margin: 8px;">
<span style="color: white; font-size: 14px;">总数</span>
<span style="color: white; font-size: 18px; font-weight: bold;">100</span>
</div>
<div class="group-inner">
<div class="stat-card warning">
<div class="icon"><i class="fa fa-dollar"></i></div>
<p class="label">今日销售额</p>
<p class="value">¥28,456</p>
<p class="change change-down"><i class="fa fa-arrow-down"></i> 2.1%</p>
</div>
<div class="stat-card danger">
<div class="icon"><i class="fa fa-eye"></i></div>
<p class="label">访问量</p>
<p class="value">45,231</p>
<p class="change change-up"><i class="fa fa-arrow-up"></i> 15.7%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
