综述: 综合优化商家端用户界面和功能体验
- 优化页面布局和表格样式,提升视觉效果和数据可读性 - 统一页面头部样式设计,优化用户体验和视觉一致性 - 优化订单管理页面字段显示和搜索条件,提升操作便捷性 - 调整容器宽度、侧边栏布局和表格内边距,全面改善用户界面
This commit is contained in:
		
							parent
							
								
									2c51b65796
								
							
						
					
					
						commit
						12e094fafc
					
				|  | @ -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"> | ||||
|  | @ -488,14 +483,13 @@ | |||
|             </div> | ||||
| 
 | ||||
|             <!-- 操作按钮 --> | ||||
|             <div class="actions"> | ||||
|                 <button class="btn btn-warning"> | ||||
|                     <i class="fas fa-times"></i> 取消 | ||||
|                 </button> | ||||
|                 <button class="btn btn-success"> | ||||
|                     <i class="fas fa-save"></i> 提交 | ||||
|                 </button> | ||||
|             </div> | ||||
|         <div class="actions"> | ||||
|             <button class="btn btn-warning"> | ||||
|                 <i class="fas fa-times"></i> 取消 | ||||
|             </button> | ||||
|             <button class="btn btn-success"> | ||||
|                 <i class="fas fa-save"></i> 提交 | ||||
|             </button> | ||||
|         </div> | ||||
|     </div> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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> | ||||
|         <!-- 页面标题 --> | ||||
|         <div class="page-header"> | ||||
|             <h1 class="page-title">子经营者账号管理</h1> | ||||
|         </div> | ||||
| 
 | ||||
|         <!-- 内容区域 --> | ||||
|         <div class="content"> | ||||
|             <!-- 账号管理区域 --> | ||||
|             <div class="section"> | ||||
|                 <h2 class="section-title">账号管理</h2> | ||||
|  | @ -386,15 +374,14 @@ | |||
|                 </div> | ||||
|             </div> | ||||
| 
 | ||||
|             <!-- 操作按钮 --> | ||||
|             <div class="actions"> | ||||
|                 <button class="btn btn-warning" onclick="cancelOperation()"> | ||||
|                     <i class="fas fa-times"></i> 取消 | ||||
|                 </button> | ||||
|                 <button class="btn btn-success" onclick="saveOperation()"> | ||||
|                     <i class="fas fa-save"></i> 保存 | ||||
|                 </button> | ||||
|             </div> | ||||
|         <!-- 操作按钮 --> | ||||
|         <div class="actions"> | ||||
|             <button class="btn btn-warning" onclick="cancelOperation()"> | ||||
|                 <i class="fas fa-times"></i> 取消 | ||||
|             </button> | ||||
|             <button class="btn btn-success" onclick="saveOperation()"> | ||||
|                 <i class="fas fa-save"></i> 保存 | ||||
|             </button> | ||||
|         </div> | ||||
|     </div> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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; | ||||
|         } | ||||
|          | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -20,18 +20,32 @@ | |||
|         } | ||||
| 
 | ||||
|         .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; | ||||
|             box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||||
|             margin-bottom: 16px; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         } | ||||
| 
 | ||||
|         .filter-row { | ||||
|  | @ -107,9 +121,9 @@ | |||
|         .product-overview { | ||||
|             background: #fff; | ||||
|             border-radius: 8px; | ||||
|             padding: 20px; | ||||
|             margin-bottom: 30px; | ||||
|             box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||||
|             padding: 24px; | ||||
|             margin-bottom: 16px; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         } | ||||
| 
 | ||||
|         .overview-title { | ||||
|  | @ -146,9 +160,9 @@ | |||
|         .ranking-section { | ||||
|             background: #fff; | ||||
|             border-radius: 8px; | ||||
|             padding: 20px; | ||||
|             margin-bottom: 30px; | ||||
|             box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||||
|             padding: 24px; | ||||
|             margin-bottom: 16px; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         } | ||||
| 
 | ||||
|         .ranking-title { | ||||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -20,18 +20,32 @@ | |||
|         } | ||||
| 
 | ||||
|         .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; | ||||
|             box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||||
|             margin-bottom: 16px; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         } | ||||
| 
 | ||||
|         .filter-row { | ||||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -20,18 +20,32 @@ | |||
|         } | ||||
| 
 | ||||
|         .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; | ||||
|             box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||||
|             margin-bottom: 16px; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         } | ||||
| 
 | ||||
|         .filter-row { | ||||
|  | @ -103,21 +117,14 @@ | |||
|             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; | ||||
|             box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||||
|             padding: 24px; | ||||
|             margin-bottom: 16px; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         } | ||||
| 
 | ||||
|         .stats-grid { | ||||
|  | @ -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"> | ||||
|             <!-- 第一行统计数据 --> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue