<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body{width:100%; height:100%;}
body{display:flex;flex-direction:column;}
.header{width:100%;height:72px;
display:flex;
justify-content:center;
}
.main{width:100%;flex:100%;background-color:blue;}
.header .content{width:1200px;height:72px;
display:flex;
align-items:center;
}
.header .content img{width:100px;height:30px;}
.main{
display:flex;
justify-content: center;
align-items: center;
}
.login-box{
width:400px;
height: 240px;
background-color: #fff;
border-radius:8px;
box-shadow: #888 10px 10px 20px;
}
.login{
height:180px;
display:flex;
flex-direction: column;
justify-content: space-evenly;
}
.login p {
height:40px;
/* background-color: orange; */
display:flex;
justify-content: space-evenly;
align-items: center;
}
.login p input{
width:260px;
height:32px;
}
.login p button{
outline: none; /* 去掉外边框*/ border: none; /* 去掉边框*/
width:300px;
height:32px;
border-radius:16px;
background-color:#4872f6;
color:white;
}
.login p button:hover{background-color:#143bbd;
font-weight:600;
}
</style>
</head>
<body>
<!-- 页头 -->
<div class="content">
</div>
</div>
<!-- 页面 -->
<div class="main">
<!-- 登录窗口 -->
<div class="login-box">
<div class="header">管理员登录</div>
<div class="login">
<p>
<label for="zhanghao">账号：</label>
<input type="text" name="zhanghao" id="zhanghao"
placeholder="请输入账号">
</p>
<p>
<label for="mima">密码：</label>
<input type="password" name="mima" id="mima"
placeholder="请输入密码">
</p>
<p>
<button>登录</button>
</p>
</div>
</div>
</div>
</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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root {
--primary-color: #1890ff;
--sidebar-width: 240px;
--header-height: 60px;
--sidebar-bg: #001529;
--content-bg: #f0f2f5;
}
body {
display: flex;
min-height: 100vh;
background-color: var(--content-bg);
}
.sidebar {
width: var(--sidebar-width);
background-color: var(--sidebar-bg);
color: #fff;
position: fixed;
height: 100vh;
left: 0;
top: 0;
}
.sidebar-header {
height: var(--header-height);
display: flex;
align-items: center;
padding: 0 20px;
font-size: 20px;
font-weight: bold;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-menu {
padding: 20px 0;
}
.menu-item {
padding: 12px 20px;
display: flex;
align-items: center;
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: all 0.3s;
}
.menu-item:hover {
color: #fff;
background-color: rgba(255,255,255,0.1);
}
.menu-item.active {
color: #fff;
background-color: var(--primary-color);
}
.menu-item i {
margin-right: 10px;
font-size: 18px;
}
.main-content {
margin-left: var(--sidebar-width);
flex: 1;
}
.header {
height: var(--header-height);
background-color: #fff;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 4px rgba(0,21,41,0.08);
}
.header-left {
display: flex;
align-items: center;
}
.header-right {
display: flex;
align-items: center;
gap: 20px;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #e6f7ff;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
}
.content {
padding: 24px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 24px;
}
.stat-card {
background-color: #fff;
padding: 24px;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.stat-card h3 {
color: rgba(0,0,0,0.45);
font-size: 14px;
margin-bottom: 8px;
}
.stat-card .number {
font-size: 24px;
color: rgba(0,0,0,0.85);
margin-bottom: 8px;
}
.stat-card .trend {
font-size: 14px;
color: #52c41a;
}
.trend.up {
color: #52c41a;
}
.trend.down {
color: #ff4d4f;
}
.table-card {
background-color: #fff;
padding: 24px;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
padding: 16px;
text-align: left;
border-bottom: 1px solid #f0f0f0;
}
.table th {
background-color: #fafafa;
font-weight: 500;
color: rgba(0,0,0,0.85);
}
.table tr:hover td {
background-color: #fafafa;
}
.status-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
}
.status-active {
background-color: #e6f7ff;
color: var(--primary-color);
}
.status-inactive {
background-color: #fff1f0;
color: #ff4d4f;
}
.btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}
.btn-primary:hover {
background-color: #40a9ff;
}
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-header">
管理后台
</div>
<nav class="sidebar-menu">
<a href="#" class="menu-item active">
<i class="bi bi-grid"></i>
控制面板
</a>
<a href="#" class="menu-item">
<i class="bi bi-people"></i>
用户管理
</a>
<a href="#" class="menu-item">
<i class="bi bi-bag"></i>
商品管理
</a>
<a href="#" class="menu-item">
<i class="bi bi-cart"></i>
订单管理
</a>
<a href="#" class="menu-item">
<i class="bi bi-graph-up"></i>
数据统计
</a>
<a href="#" class="menu-item">
<i class="bi bi-gear"></i>
系统设置
</a>
</nav>
</aside>
<main class="main-content">
<header class="header">
<div class="header-left">
<i class="bi bi-list" style="font-size: 20px; margin-right: 20px;"></i>
<span>控制面板</span>
</div>
<div class="header-right">
<i class="bi bi-bell"></i>
<i class="bi bi-envelope"></i>
<div class="user-info">
<div class="user-avatar">
<i class="bi bi-person"></i>
</div>
<span>管理员</span>
</div>
</div>
</header>
<div class="content">
<div class="stats-grid">
<div class="stat-card">
<h3>总销售额</h3>
<div class="number">¥126,560</div>
<div class="trend up">
<i class="bi bi-arrow-up"></i>
较昨日增长12%
</div>
</div>
<div class="stat-card">
<h3>访问量</h3>
<div class="number">88,546</div>
<div class="trend up">
<i class="bi bi-arrow-up"></i>
较昨日增长8%
</div>
</div>
<div class="stat-card">
<h3>订单数</h3>
<div class="number">1,286</div>
<div class="trend down">
<i class="bi bi-arrow-down"></i>
较昨日下降5%
</div>
</div>
<div class="stat-card">
<h3>新增用户</h3>
<div class="number">256</div>
<div class="trend up">
<i class="bi bi-arrow-up"></i>
较昨日增长3%
</div>
</div>
</div>
<div class="table-card">
<div class="table-header">
<h2>最近订单</h2>
<button class="btn btn-primary">
<i class="bi bi-plus"></i>
新建
</button>
</div>
<table class="table">
<thead>
<tr>
<th>订单编号</th>
<th>商品名称</th>
<th>客户名称</th>
<th>订单金额</th>
<th>订单状态</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>#12345</td>
<td>高级会员课程</td>
<td>张三</td>
<td>¥2,999</td>
<td><span class="status-tag status-active">已完成</span></td>
<td>2024-01-20 14:23</td>
</tr>
<tr>
<td>#12344</td>
<td>初级会员课程</td>
<td>李四</td>
<td>¥1,999</td>
<td><span class="status-tag status-active">已完成</span></td>
<td>2024-01-20 13:45</td>
</tr>
<tr>
<td>#12343</td>
<td>企业版套餐</td>
<td>王五</td>
<td>¥5,999</td>
<td><span class="status-tag status-inactive">待付款</span></td>
<td>2024-01-20 11:32</td>
</tr>
<tr>
<td>#12342</td>
<td>基础课程</td>
<td>赵六</td>
<td>¥999</td>
<td><span class="status-tag status-active">已完成</span></td>
<td>2024-01-20 10:15</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body>
</html>
