综述: 综合优化商家端用户界面和功能体验

- 优化页面布局和表格样式,提升视觉效果和数据可读性
- 统一页面头部样式设计,优化用户体验和视觉一致性
- 优化订单管理页面字段显示和搜索条件,提升操作便捷性
- 调整容器宽度、侧边栏布局和表格内边距,全面改善用户界面
This commit is contained in:
linbin 2025-10-01 12:55:41 +08:00
parent 2c51b65796
commit 12e094fafc
8 changed files with 202 additions and 175 deletions

View File

@ -22,27 +22,23 @@
}
.container {
width: 100%;
height: 100vh;
margin: 0;
background-color: #fff;
border-radius: 0;
box-shadow: none;
overflow-y: auto;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: rgb(9, 84, 43);
color: #fff;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
.page-header {
background: white;
padding: 16px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header h1 {
font-size: 1.8rem;
.page-title {
font-size: 24px;
font-weight: 600;
color: #262626;
}
.btn {
@ -76,27 +72,27 @@
background-color: #ffc53d;
}
.content {
padding: 30px;
}
.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 {
font-size: 1.4rem;
font-size: 18px;
font-weight: 600;
color: #333;
color: #262626;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.form-container {
background-color: #fafafa;
padding: 25px;
border-radius: 8px;
padding: 20px;
border-radius: 6px;
border: 1px solid #e8e8e8;
}
@ -161,8 +157,8 @@
.permissions-container {
background-color: #fafafa;
padding: 25px;
border-radius: 8px;
padding: 20px;
border-radius: 6px;
border: 1px solid #e8e8e8;
max-height: 500px;
overflow-y: auto;
@ -236,12 +232,14 @@
}
.actions {
background: white;
padding: 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 20px;
border-top: 1px solid #e8e8e8;
margin-top: 30px;
gap: 12px;
}
.image-uploader {
@ -306,13 +304,10 @@
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<h1 id="pageTitle">创建新商户</h1>
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title" id="pageTitle">创建新商户</h1>
</div>
<!-- 内容区域 -->
<div class="content">
<!-- 操作类型选择 -->
<div class="section">
<div class="form-container">
@ -497,7 +492,6 @@
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {

View File

@ -22,32 +22,23 @@
}
.container {
width: 100%;
height: 100vh;
margin: 0;
background-color: #fff;
border-radius: 0;
box-shadow: none;
overflow-y: auto;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: rgb(9, 84, 43);
color: #fff;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
.page-header {
background: white;
padding: 16px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header h1 {
font-size: 1.8rem;
.page-title {
font-size: 24px;
font-weight: 600;
}
.header-actions {
display: flex;
gap: 10px;
color: #262626;
}
.btn {
@ -92,28 +83,28 @@
}
/* 内容区域 */
.content {
padding: 30px;
}
.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 {
font-size: 1.4rem;
font-size: 18px;
font-weight: 600;
color: #333;
color: #262626;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
/* 账号管理区域 */
.account-form {
background-color: #fafafa;
padding: 25px;
border-radius: 8px;
padding: 20px;
border-radius: 6px;
border: 1px solid #e8e8e8;
}
@ -167,8 +158,8 @@
/* 权限分配区域 */
.permissions-container {
background-color: #fafafa;
padding: 25px;
border-radius: 8px;
padding: 20px;
border-radius: 6px;
border: 1px solid #e8e8e8;
max-height: 500px;
overflow-y: auto;
@ -283,12 +274,14 @@
/* 操作区域 */
.actions {
background: white;
padding: 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 20px;
border-top: 1px solid #e8e8e8;
margin-top: 30px;
gap: 12px;
}
/* 响应式设计 */
@ -317,15 +310,10 @@
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<h1>子经营者账号管理</h1>
<div class="header-actions">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">子经营者账号管理</h1>
</div>
</div>
<!-- 内容区域 -->
<div class="content">
<!-- 账号管理区域 -->
<div class="section">
<h2 class="section-title">账号管理</h2>
@ -396,7 +384,6 @@
</button>
</div>
</div>
</div>
<script>
// 权限数据

View File

@ -80,7 +80,7 @@
position: fixed;
left: 0;
top: 50px;
width: 220px;
width: 200px;
height: calc(100vh - 50px);
background-color: white;
border-right: 1px solid #e8e8e8;
@ -190,11 +190,11 @@
/* 主内容区域 */
.main-content {
margin-left: 220px;
margin-left: 200px;
margin-top: 50px;
height: calc(100vh - 50px);
background-color: white;
padding: 20px;
padding: 24px;
position: relative;
}

View File

@ -18,31 +18,31 @@
}
.container {
max-width: 1400px;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
.page-header {
background: white;
padding: 20px;
padding: 16px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.page-title {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20px;
color: #262626;
margin-bottom: 16px;
}
.search-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
margin-bottom: 20px;
margin-bottom: 16px;
}
.form-item {
@ -78,6 +78,14 @@
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 {
padding: 10px 20px;
border: none;
@ -219,7 +227,7 @@
.product-table th {
background-color: #fafafa;
padding: 12px;
padding: 12px 16px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #f0f0f0;
@ -227,7 +235,7 @@
}
.product-table td {
padding: 16px 12px;
padding: 16px 16px;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
vertical-align: middle;
@ -349,17 +357,19 @@
<body>
<div class="container">
<!-- 页面头部 -->
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">商品管理</h1>
</div>
<!-- 搜索表单 -->
<!-- 搜索区域 -->
<div class="search-section">
<div class="search-form">
<div class="form-item">
<label class="form-label">商品搜索</label>
<input type="text" class="form-input" placeholder="请输入商品名称">
</div>
<div class="form-item">
<label class="form-label">店铺</label>
<select class="form-select">
@ -368,7 +378,6 @@
</select>
</div>
<div class="form-item">
<label class="form-label">状态</label>
<select class="form-select">

View File

@ -20,17 +20,31 @@
}
.container {
max-width: 1400px;
max-width: 1600px;
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 {
background: #fff;
padding: 20px;
padding: 24px;
border-radius: 8px;
margin-bottom: 30px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@ -107,8 +121,8 @@
.product-overview {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@ -146,8 +160,8 @@
.ranking-section {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@ -220,6 +234,11 @@
</head>
<body>
<div class="container">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">商品分析</h1>
</div>
<!-- 筛选区域 -->
<div class="filter-section">
<div class="filter-row">

View File

@ -20,17 +20,31 @@
}
.container {
max-width: 1400px;
max-width: 1600px;
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 {
background: #fff;
padding: 20px;
padding: 24px;
border-radius: 8px;
margin-bottom: 30px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@ -107,8 +121,8 @@
.stats-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
gap: 16px;
margin-bottom: 16px;
}
.stats-card {
@ -203,7 +217,7 @@
.charts-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
gap: 16px;
}
.chart-section {
@ -319,6 +333,11 @@
</head>
<body>
<div class="container">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">客户分析</h1>
</div>
<!-- 筛选区域 -->
<div class="filter-section">
<div class="filter-row">

View File

@ -20,17 +20,31 @@
}
.container {
max-width: 1400px;
max-width: 1600px;
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 {
background: #fff;
padding: 20px;
padding: 24px;
border-radius: 8px;
margin-bottom: 30px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@ -103,20 +117,13 @@
transform: translateY(-2px);
}
/* 订单分析标题 */
.page-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 30px;
color: #333;
}
/* 订单统计概览 */
.order-overview {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@ -215,6 +222,11 @@
</head>
<body>
<div class="container">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">订单分析</h1>
</div>
<!-- 顶部筛选区域 -->
<div class="filter-section">
<div class="filter-row">
@ -242,9 +254,6 @@
</div>
</div>
<!-- 页面标题 -->
<h1 class="page-title">订单分析</h1>
<!-- 订单统计概览 -->
<div class="order-overview">
<!-- 第一行统计数据 -->

View File

@ -18,7 +18,7 @@
}
.container {
max-width: 1400px;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
@ -210,7 +210,7 @@
.order-table th {
background: #fafafa;
padding: 12px 8px;
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: #666;
@ -219,7 +219,7 @@
}
.order-table td {
padding: 12px 8px;
padding: 12px 16px;
border-bottom: 1px solid #f9f9f9;
vertical-align: top;
}
@ -418,7 +418,7 @@
<input type="text" class="form-input" placeholder="订单编号">
</div>
<div class="form-item">
<label class="form-label">订单状态</label>
<label class="form-label">结算单位订单状态</label>
<select class="form-input">
<option value="">全部</option>
<option value="pending_payment">待支付</option>
@ -532,7 +532,7 @@
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>店铺名称</th>
<th>订单状态</th>
<th></th>
</tr>
@ -558,7 +558,6 @@
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
@ -571,7 +570,6 @@
<td></td>
<td>2</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>
</tr>
</tbody>
@ -608,7 +606,7 @@
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>店铺名称</th>
<th>订单状态</th>
<th></th>
</tr>
@ -634,7 +632,6 @@
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
@ -647,7 +644,6 @@
<td></td>
<td>0.9</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>
</tr>
</tbody>
@ -684,7 +680,7 @@
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>店铺名称</th>
<th>订单状态</th>
<th></th>
</tr>
@ -710,7 +706,6 @@
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
@ -723,7 +718,6 @@
<td></td>
<td>金额</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>
</tr>
</tbody>
@ -760,7 +754,7 @@
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>店铺名称</th>
<th>订单状态</th>
<th></th>
</tr>
@ -786,7 +780,6 @@
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
@ -799,7 +792,6 @@
<td></td>
<td>金额</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>
</tr>
</tbody>
@ -836,7 +828,7 @@
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>店铺名称</th>
<th>订单状态</th>
<th></th>
</tr>
@ -862,7 +854,6 @@
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
@ -875,7 +866,6 @@
<td></td>
<td>金额</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>
</tr>
</tbody>