综述: 综合优化商家端用户界面和功能体验
- 优化页面布局和表格样式,提升视觉效果和数据可读性 - 统一页面头部样式设计,优化用户体验和视觉一致性 - 优化订单管理页面字段显示和搜索条件,提升操作便捷性 - 调整容器宽度、侧边栏布局和表格内边距,全面改善用户界面
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"> | ||||||
|  | @ -497,7 +492,6 @@ | ||||||
|             </button> |             </button> | ||||||
|         </div> |         </div> | ||||||
|     </div> |     </div> | ||||||
|     </div> |  | ||||||
| 
 | 
 | ||||||
|     <script> |     <script> | ||||||
|         document.addEventListener('DOMContentLoaded', () => { |         document.addEventListener('DOMContentLoaded', () => { | ||||||
|  |  | ||||||
|  | @ -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> | ||||||
|  | @ -396,7 +384,6 @@ | ||||||
|             </button> |             </button> | ||||||
|         </div> |         </div> | ||||||
|     </div> |     </div> | ||||||
|     </div> |  | ||||||
| 
 | 
 | ||||||
|     <script> |     <script> | ||||||
|         // 权限数据 |         // 权限数据 | ||||||
|  |  | ||||||
|  | @ -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,17 +20,31 @@ | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|         .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); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  | @ -107,8 +121,8 @@ | ||||||
|         .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); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  | @ -146,8 +160,8 @@ | ||||||
|         .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); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  | @ -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,17 +20,31 @@ | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|         .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); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  | @ -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,17 +20,31 @@ | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|         .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); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  | @ -103,20 +117,13 @@ | ||||||
|             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); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  | @ -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