综述: 综合优化商家端用户界面和功能体验
- 优化页面布局和表格样式,提升视觉效果和数据可读性 - 统一页面头部样式设计,优化用户体验和视觉一致性 - 优化订单管理页面字段显示和搜索条件,提升操作便捷性 - 调整容器宽度、侧边栏布局和表格内边距,全面改善用户界面
This commit is contained in:
parent
2c51b65796
commit
12e094fafc
|
|
@ -22,27 +22,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
max-width: 1600px;
|
||||||
height: 100vh;
|
margin: 0 auto;
|
||||||
margin: 0;
|
padding: 20px;
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.page-header {
|
||||||
background-color: rgb(9, 84, 43);
|
background: white;
|
||||||
color: #fff;
|
padding: 16px 24px;
|
||||||
padding: 20px 30px;
|
margin-bottom: 16px;
|
||||||
display: flex;
|
border-radius: 8px;
|
||||||
justify-content: space-between;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.page-title {
|
||||||
font-size: 1.8rem;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|
@ -76,27 +72,27 @@
|
||||||
background-color: #ffc53d;
|
background-color: #ffc53d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 40px;
|
background: white;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 1.4rem;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #262626;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 12px;
|
||||||
border-bottom: 2px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-container {
|
.form-container {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
padding: 25px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #e8e8e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -161,8 +157,8 @@
|
||||||
|
|
||||||
.permissions-container {
|
.permissions-container {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
padding: 25px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #e8e8e8;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
@ -236,12 +232,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
|
background: white;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 10px;
|
gap: 12px;
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #e8e8e8;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
|
|
@ -306,13 +304,10 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- 头部 -->
|
<!-- 页面标题 -->
|
||||||
<div class="header">
|
<div class="page-header">
|
||||||
<h1 id="pageTitle">创建新商户</h1>
|
<h1 class="page-title" id="pageTitle">创建新商户</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
|
||||||
<div class="content">
|
|
||||||
<!-- 操作类型选择 -->
|
<!-- 操作类型选择 -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
|
|
@ -488,14 +483,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="btn btn-warning">
|
<button class="btn btn-warning">
|
||||||
<i class="fas fa-times"></i> 取消
|
<i class="fas fa-times"></i> 取消
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-success">
|
<button class="btn btn-success">
|
||||||
<i class="fas fa-save"></i> 提交
|
<i class="fas fa-save"></i> 提交
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,32 +22,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
max-width: 1600px;
|
||||||
height: 100vh;
|
margin: 0 auto;
|
||||||
margin: 0;
|
padding: 20px;
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.page-header {
|
||||||
background-color: rgb(9, 84, 43);
|
background: white;
|
||||||
color: #fff;
|
padding: 16px 24px;
|
||||||
padding: 20px 30px;
|
margin-bottom: 16px;
|
||||||
display: flex;
|
border-radius: 8px;
|
||||||
justify-content: space-between;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.page-title {
|
||||||
font-size: 1.8rem;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
color: #262626;
|
||||||
|
|
||||||
.header-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|
@ -92,28 +83,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 内容区域 */
|
/* 内容区域 */
|
||||||
.content {
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 40px;
|
background: white;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 1.4rem;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #262626;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 12px;
|
||||||
border-bottom: 2px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 账号管理区域 */
|
/* 账号管理区域 */
|
||||||
.account-form {
|
.account-form {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
padding: 25px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #e8e8e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -167,8 +158,8 @@
|
||||||
/* 权限分配区域 */
|
/* 权限分配区域 */
|
||||||
.permissions-container {
|
.permissions-container {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
padding: 25px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #e8e8e8;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
@ -283,12 +274,14 @@
|
||||||
|
|
||||||
/* 操作区域 */
|
/* 操作区域 */
|
||||||
.actions {
|
.actions {
|
||||||
|
background: white;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 10px;
|
gap: 12px;
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid #e8e8e8;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
|
|
@ -317,15 +310,10 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- 头部 -->
|
<!-- 页面标题 -->
|
||||||
<div class="header">
|
<div class="page-header">
|
||||||
<h1>子经营者账号管理</h1>
|
<h1 class="page-title">子经营者账号管理</h1>
|
||||||
<div class="header-actions">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
|
||||||
<div class="content">
|
|
||||||
<!-- 账号管理区域 -->
|
<!-- 账号管理区域 -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2 class="section-title">账号管理</h2>
|
<h2 class="section-title">账号管理</h2>
|
||||||
|
|
@ -386,15 +374,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="btn btn-warning" onclick="cancelOperation()">
|
<button class="btn btn-warning" onclick="cancelOperation()">
|
||||||
<i class="fas fa-times"></i> 取消
|
<i class="fas fa-times"></i> 取消
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-success" onclick="saveOperation()">
|
<button class="btn btn-success" onclick="saveOperation()">
|
||||||
<i class="fas fa-save"></i> 保存
|
<i class="fas fa-save"></i> 保存
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
width: 220px;
|
width: 200px;
|
||||||
height: calc(100vh - 50px);
|
height: calc(100vh - 50px);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-right: 1px solid #e8e8e8;
|
border-right: 1px solid #e8e8e8;
|
||||||
|
|
@ -190,11 +190,11 @@
|
||||||
|
|
||||||
/* 主内容区域 */
|
/* 主内容区域 */
|
||||||
.main-content {
|
.main-content {
|
||||||
margin-left: 220px;
|
margin-left: 200px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
height: calc(100vh - 50px);
|
height: calc(100vh - 50px);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,31 +18,31 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1400px;
|
max-width: 1600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 20px;
|
padding: 16px 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1a1a1a;
|
color: #262626;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-form {
|
.search-form {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-item {
|
.form-item {
|
||||||
|
|
@ -78,6 +78,14 @@
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-section {
|
||||||
|
background: white;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -219,7 +227,7 @@
|
||||||
|
|
||||||
.product-table th {
|
.product-table th {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
padding: 12px;
|
padding: 12px 16px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-bottom: 2px solid #f0f0f0;
|
border-bottom: 2px solid #f0f0f0;
|
||||||
|
|
@ -227,7 +235,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-table td {
|
.product-table td {
|
||||||
padding: 16px 12px;
|
padding: 16px 16px;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -349,17 +357,19 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- 页面头部 -->
|
<!-- 页面头部 -->
|
||||||
|
<!-- 页面标题 -->
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1 class="page-title">商品管理</h1>
|
<h1 class="page-title">商品管理</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 搜索表单 -->
|
<!-- 搜索区域 -->
|
||||||
|
<div class="search-section">
|
||||||
<div class="search-form">
|
<div class="search-form">
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label class="form-label">商品搜索</label>
|
<label class="form-label">商品搜索</label>
|
||||||
<input type="text" class="form-input" placeholder="请输入商品名称">
|
<input type="text" class="form-input" placeholder="请输入商品名称">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label class="form-label">店铺</label>
|
<label class="form-label">店铺</label>
|
||||||
<select class="form-select">
|
<select class="form-select">
|
||||||
|
|
@ -368,7 +378,6 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label class="form-label">状态</label>
|
<label class="form-label">状态</label>
|
||||||
<select class="form-select">
|
<select class="form-select">
|
||||||
|
|
|
||||||
|
|
@ -20,18 +20,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1400px;
|
max-width: 1600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 30px;
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
background: white;
|
||||||
|
padding: 16px 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部筛选区域 */
|
/* 顶部筛选区域 */
|
||||||
.filter-section {
|
.filter-section {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-row {
|
.filter-row {
|
||||||
|
|
@ -107,9 +121,9 @@
|
||||||
.product-overview {
|
.product-overview {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-title {
|
.overview-title {
|
||||||
|
|
@ -146,9 +160,9 @@
|
||||||
.ranking-section {
|
.ranking-section {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ranking-title {
|
.ranking-title {
|
||||||
|
|
@ -220,6 +234,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">商品分析</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 筛选区域 -->
|
<!-- 筛选区域 -->
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
|
|
|
||||||
|
|
@ -20,18 +20,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1400px;
|
max-width: 1600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 30px;
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
background: white;
|
||||||
|
padding: 16px 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 筛选区域 */
|
/* 筛选区域 */
|
||||||
.filter-section {
|
.filter-section {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-row {
|
.filter-row {
|
||||||
|
|
@ -107,8 +121,8 @@
|
||||||
.stats-section {
|
.stats-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
gap: 20px;
|
gap: 16px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-card {
|
.stats-card {
|
||||||
|
|
@ -203,7 +217,7 @@
|
||||||
.charts-section {
|
.charts-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||||
gap: 20px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-section {
|
.chart-section {
|
||||||
|
|
@ -319,6 +333,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">客户分析</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 筛选区域 -->
|
<!-- 筛选区域 -->
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
|
|
|
||||||
|
|
@ -20,18 +20,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1400px;
|
max-width: 1600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 30px;
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
background: white;
|
||||||
|
padding: 16px 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部筛选区域 */
|
/* 顶部筛选区域 */
|
||||||
.filter-section {
|
.filter-section {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-row {
|
.filter-row {
|
||||||
|
|
@ -103,21 +117,14 @@
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 订单分析标题 */
|
|
||||||
.page-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 订单统计概览 */
|
/* 订单统计概览 */
|
||||||
.order-overview {
|
.order-overview {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 16px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-grid {
|
.stats-grid {
|
||||||
|
|
@ -215,6 +222,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">订单分析</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 顶部筛选区域 -->
|
<!-- 顶部筛选区域 -->
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
|
|
@ -242,9 +254,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 页面标题 -->
|
|
||||||
<h1 class="page-title">订单分析</h1>
|
|
||||||
|
|
||||||
<!-- 订单统计概览 -->
|
<!-- 订单统计概览 -->
|
||||||
<div class="order-overview">
|
<div class="order-overview">
|
||||||
<!-- 第一行统计数据 -->
|
<!-- 第一行统计数据 -->
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1400px;
|
max-width: 1600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -210,7 +210,7 @@
|
||||||
|
|
||||||
.order-table th {
|
.order-table th {
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
padding: 12px 8px;
|
padding: 12px 16px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
@ -219,7 +219,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-table td {
|
.order-table td {
|
||||||
padding: 12px 8px;
|
padding: 12px 16px;
|
||||||
border-bottom: 1px solid #f9f9f9;
|
border-bottom: 1px solid #f9f9f9;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
@ -418,7 +418,7 @@
|
||||||
<input type="text" class="form-input" placeholder="订单编号">
|
<input type="text" class="form-input" placeholder="订单编号">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label class="form-label">订单状态</label>
|
<label class="form-label">结算单位订单状态</label>
|
||||||
<select class="form-input">
|
<select class="form-input">
|
||||||
<option value="">全部</option>
|
<option value="">全部</option>
|
||||||
<option value="pending_payment">待支付</option>
|
<option value="pending_payment">待支付</option>
|
||||||
|
|
@ -532,7 +532,7 @@
|
||||||
<th></th>
|
<th></th>
|
||||||
<th>序号</th>
|
<th>序号</th>
|
||||||
<th>店铺订单号</th>
|
<th>店铺订单号</th>
|
||||||
<th>档位</th>
|
<th>店铺名称</th>
|
||||||
<th>订单状态</th>
|
<th>订单状态</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -558,7 +558,6 @@
|
||||||
<th>商品终价</th>
|
<th>商品终价</th>
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th>订单状态</th>
|
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
@ -571,7 +570,6 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>2</td>
|
<td>2</td>
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td><span class="status-tag status-pending">待备货</span></td>
|
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -608,7 +606,7 @@
|
||||||
<th></th>
|
<th></th>
|
||||||
<th>序号</th>
|
<th>序号</th>
|
||||||
<th>店铺订单号</th>
|
<th>店铺订单号</th>
|
||||||
<th>档位</th>
|
<th>店铺名称</th>
|
||||||
<th>订单状态</th>
|
<th>订单状态</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -634,7 +632,6 @@
|
||||||
<th>商品终价</th>
|
<th>商品终价</th>
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th>订单状态</th>
|
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
@ -647,7 +644,6 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>0.9</td>
|
<td>0.9</td>
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td><span class="status-tag status-pending">待备货</span></td>
|
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -684,7 +680,7 @@
|
||||||
<th></th>
|
<th></th>
|
||||||
<th>序号</th>
|
<th>序号</th>
|
||||||
<th>店铺订单号</th>
|
<th>店铺订单号</th>
|
||||||
<th>档位</th>
|
<th>店铺名称</th>
|
||||||
<th>订单状态</th>
|
<th>订单状态</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -710,7 +706,6 @@
|
||||||
<th>商品终价</th>
|
<th>商品终价</th>
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th>订单状态</th>
|
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
@ -723,7 +718,6 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>金额</td>
|
<td>金额</td>
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td><span class="status-tag status-completed">完成</span></td>
|
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -760,7 +754,7 @@
|
||||||
<th></th>
|
<th></th>
|
||||||
<th>序号</th>
|
<th>序号</th>
|
||||||
<th>店铺订单号</th>
|
<th>店铺订单号</th>
|
||||||
<th>档位</th>
|
<th>店铺名称</th>
|
||||||
<th>订单状态</th>
|
<th>订单状态</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -786,7 +780,6 @@
|
||||||
<th>商品终价</th>
|
<th>商品终价</th>
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th>订单状态</th>
|
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
@ -799,7 +792,6 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>金额</td>
|
<td>金额</td>
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td><span class="status-tag status-completed">完成</span></td>
|
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -836,7 +828,7 @@
|
||||||
<th></th>
|
<th></th>
|
||||||
<th>序号</th>
|
<th>序号</th>
|
||||||
<th>店铺订单号</th>
|
<th>店铺订单号</th>
|
||||||
<th>档位</th>
|
<th>店铺名称</th>
|
||||||
<th>订单状态</th>
|
<th>订单状态</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -862,7 +854,6 @@
|
||||||
<th>商品终价</th>
|
<th>商品终价</th>
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th>订单状态</th>
|
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
@ -875,7 +866,6 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>金额</td>
|
<td>金额</td>
|
||||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td><span class="status-tag status-completed">完成</span></td>
|
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue