diff --git a/商家端web/index.html b/商家端web/index.html
index d06d7d0..2708173 100644
--- a/商家端web/index.html
+++ b/商家端web/index.html
@@ -437,6 +437,14 @@
                         <span class="submenu-icon"></span>
                         品牌市场订单
                     </a>
+                    <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销商管理.html', this)">
+                        <span class="submenu-icon"></span>
+                        分销商管理
+                    </a>
+                    <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销订单与佣金管理.html', this)">
+                        <span class="submenu-icon"></span>
+                        分销订单与佣金管理
+                    </a>
                 </div>
             </li>
         </ul>
diff --git a/商家端web/品牌管理/分销商审核和管理演示页面.html b/商家端web/品牌管理/分销商管理.html
similarity index 85%
rename from 商家端web/品牌管理/分销商审核和管理演示页面.html
rename to 商家端web/品牌管理/分销商管理.html
index 4a188c5..df1f1cf 100644
--- a/商家端web/品牌管理/分销商审核和管理演示页面.html
+++ b/商家端web/品牌管理/分销商管理.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>分销商审核和管理系统</title>
+    <title>分销商管理</title>
     <style>
         * {
             margin: 0;
@@ -14,104 +14,111 @@
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
                 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-            background: #f0f2f5;
+            background: #f5f5f5;
             padding: 20px;
         }
 
         .container {
-            max-width: 1400px;
+            max-width: 1600px;
             margin: 0 auto;
         }
 
         .header-card {
             background: white;
-            padding: 30px;
+            padding: 16px 24px;
             border-radius: 8px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            margin-bottom: 16px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         .page-title {
-            font-size: 28px;
-            font-weight: bold;
-            color: #303133;
-            margin-bottom: 10px;
+            font-size: 24px;
+            font-weight: 600;
+            color: #262626;
         }
 
         .page-desc {
             font-size: 14px;
-            color: #909399;
+            color: #666;
         }
 
         .main-card {
             background: white;
-            padding: 20px;
+            padding: 24px;
             border-radius: 8px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         .stat-cards {
             display: grid;
-            grid-template-columns: repeat(4, 1fr);
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 20px;
-            margin-bottom: 20px;
+            margin-bottom: 16px;
         }
 
         .stat-card {
-            background: white;
-            padding: 24px;
+            text-align: center;
+            padding: 20px;
+            border: 1px solid #f0f0f0;
             border-radius: 8px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            background: #fafafa;
         }
 
         .stat-content {
             display: flex;
+            flex-direction: column;
             align-items: center;
         }
 
         .stat-icon {
             font-size: 48px;
-            margin-right: 20px;
+            margin-bottom: 12px;
         }
 
-        .stat-icon.primary { color: #409EFF; }
-        .stat-icon.success { color: #67C23A; }
-        .stat-icon.danger { color: #F56C6C; }
-        .stat-icon.warning { color: #E6A23C; }
+        .stat-icon.primary { color: #1890ff; }
+        .stat-icon.success { color: #52c41a; }
+        .stat-icon.danger { color: #ff4d4f; }
+        .stat-icon.warning { color: #fa8c16; }
 
         .stat-info {
-            flex: 1;
+            width: 100%;
         }
 
         .stat-label {
             font-size: 14px;
-            color: #909399;
+            color: #666;
             margin-bottom: 8px;
         }
 
         .stat-value {
-            font-size: 32px;
-            font-weight: bold;
-            color: #303133;
+            font-size: 24px;
+            font-weight: 600;
+            color: #1890ff;
         }
 
         .tabs {
-            border-bottom: 2px solid #E4E7ED;
+            display: flex;
+            border-bottom: 1px solid #f0f0f0;
             margin-bottom: 20px;
         }
 
         .tab-item {
-            display: inline-block;
-            padding: 12px 20px;
+            padding: 16px 20px;
             cursor: pointer;
             border-bottom: 2px solid transparent;
-            margin-bottom: -2px;
-            color: #303133;
+            margin-bottom: -1px;
+            color: #666;
+            font-size: 14px;
+            transition: all 0.3s;
         }
 
         .tab-item.active {
-            color: #409EFF;
-            border-bottom-color: #409EFF;
+            color: #1890ff;
+            border-bottom-color: #1890ff;
+        }
+
+        .tab-item:hover {
+            color: #1890ff;
         }
 
         .tab-content {
@@ -125,121 +132,164 @@
         .search-form {
             margin: 20px 0;
             padding: 20px;
-            background: #f5f7fa;
-            border-radius: 4px;
+            background: #fafafa;
+            border-radius: 6px;
         }
 
         .form-item {
             display: inline-block;
-            margin-right: 20px;
+            margin-right: 16px;
             margin-bottom: 10px;
         }
 
         .form-item label {
             margin-right: 8px;
-            color: #606266;
+            color: #666;
+            font-weight: 500;
+            font-size: 14px;
         }
 
         .form-item input, .form-item select {
-            padding: 8px 12px;
-            border: 1px solid #DCDFE6;
-            border-radius: 4px;
+            height: 40px;
+            padding: 0 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
             font-size: 14px;
         }
 
+        .form-item input:focus, .form-item select:focus {
+            outline: none;
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+
         .btn {
-            padding: 9px 15px;
+            height: 40px;
+            padding: 0 16px;
             border: none;
-            border-radius: 4px;
+            border-radius: 6px;
             cursor: pointer;
             font-size: 14px;
-            margin-right: 10px;
+            margin-right: 12px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
         }
 
         .btn-primary {
-            background: #409EFF;
+            background: #1890ff;
             color: white;
         }
 
+        .btn-primary:hover {
+            background: #40a9ff;
+        }
+
         .btn-default {
             background: white;
-            color: #606266;
-            border: 1px solid #DCDFE6;
+            color: #666;
+            border: 1px solid #ddd;
+        }
+
+        .btn-default:hover {
+            border-color: #1890ff;
+            color: #1890ff;
         }
 
         .btn-success {
-            background: #67C23A;
+            background: #52c41a;
             color: white;
         }
 
+        .btn-success:hover {
+            background: #73d13d;
+        }
+
         .btn-danger {
-            background: #F56C6C;
+            background: #ff4d4f;
             color: white;
         }
 
+        .btn-danger:hover {
+            background: #ff7875;
+        }
+
         .btn-warning {
-            background: #E6A23C;
+            background: #fa8c16;
             color: white;
         }
 
+        .btn-warning:hover {
+            background: #ffa940;
+        }
+
         table {
             width: 100%;
             border-collapse: collapse;
             margin-top: 20px;
-        }
-
-        table th, table td {
-            border: 1px solid #EBEEF5;
-            padding: 12px 8px;
-            text-align: center;
             font-size: 14px;
         }
 
-        table th {
-            background: #F5F7FA;
-            color: #606266;
-            font-weight: bold;
+        table th, table td {
+            border: 1px solid #f0f0f0;
+            padding: 12px 16px;
+            text-align: center;
         }
 
-        table tr:hover {
-            background: #F5F7FA;
+        table th {
+            background: #fafafa;
+            color: #666;
+            font-weight: 600;
+        }
+
+        table td {
+            border-bottom: 1px solid #f9f9f9;
+        }
+
+        table tbody tr:hover {
+            background: #f8f9fa;
         }
 
         .tag {
             display: inline-block;
-            padding: 4px 12px;
+            padding: 4px 8px;
             border-radius: 4px;
             font-size: 12px;
+            font-weight: 500;
         }
 
         .tag-success {
-            background: #f0f9ff;
-            color: #67C23A;
-            border: 1px solid #c6f6d5;
+            background: #f6ffed;
+            color: #52c41a;
+            border: 1px solid #b7eb8f;
         }
 
         .tag-warning {
-            background: #fffbeb;
-            color: #E6A23C;
-            border: 1px solid #fef3c7;
+            background: #fff7e6;
+            color: #fa8c16;
+            border: 1px solid #ffd591;
         }
 
         .tag-danger {
-            background: #fef2f2;
-            color: #F56C6C;
-            border: 1px solid #fecaca;
+            background: #fff2f0;
+            color: #ff4d4f;
+            border: 1px solid #ffb3b3;
         }
 
         .tag-info {
             background: #f4f4f5;
-            color: #909399;
+            color: #666;
             border: 1px solid #e4e4e7;
         }
 
         .pagination {
             text-align: right;
             margin-top: 20px;
-            color: #606266;
+            padding-top: 20px;
+            border-top: 1px solid #f0f0f0;
+            color: #666;
+            font-size: 14px;
         }
 
         @media screen and (max-width: 1200px) {
@@ -259,8 +309,7 @@
     <div class="container">
         <!-- 页面标题 -->
         <div class="header-card">
-            <h1 class="page-title">分销商审核与管理系统</h1>
-            <p class="page-desc">管理分销商申请审核、查看分销商列表及相关统计数据</p>
+            <h1 class="page-title">分销商管理</h1>
         </div>
 
         <!-- 主内容 -->
diff --git a/商家端web/品牌管理/分销订单和佣金管理演示页面.html b/商家端web/品牌管理/分销订单与佣金管理.html
similarity index 86%
rename from 商家端web/品牌管理/分销订单和佣金管理演示页面.html
rename to 商家端web/品牌管理/分销订单与佣金管理.html
index 8e49eeb..72e9ff4 100644
--- a/商家端web/品牌管理/分销订单和佣金管理演示页面.html
+++ b/商家端web/品牌管理/分销订单与佣金管理.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>分销订单与佣金管理系统</title>
+    <title>分销订单与佣金管理</title>
     <style>
         * {
             margin: 0;
@@ -14,7 +14,7 @@
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
                 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-            background: #f0f2f5;
+            background: #f5f5f5;
             padding: 20px;
         }
 
@@ -25,93 +25,100 @@
 
         .header-card {
             background: white;
-            padding: 30px;
+            padding: 16px 24px;
             border-radius: 8px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            margin-bottom: 16px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         .page-title {
-            font-size: 28px;
-            font-weight: bold;
-            color: #303133;
-            margin-bottom: 10px;
+            font-size: 24px;
+            font-weight: 600;
+            color: #262626;
         }
 
         .page-desc {
             font-size: 14px;
-            color: #909399;
+            color: #666;
         }
 
         .stat-cards {
             display: grid;
-            grid-template-columns: repeat(4, 1fr);
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 20px;
-            margin-bottom: 20px;
+            margin-bottom: 16px;
         }
 
         .stat-card {
-            background: white;
-            padding: 24px;
+            text-align: center;
+            padding: 20px;
+            border: 1px solid #f0f0f0;
             border-radius: 8px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            background: #fafafa;
         }
 
         .stat-content {
             display: flex;
+            flex-direction: column;
             align-items: center;
         }
 
         .stat-icon {
             font-size: 48px;
-            margin-right: 20px;
+            margin-bottom: 12px;
         }
 
-        .stat-icon.primary { color: #409EFF; }
-        .stat-icon.success { color: #67C23A; }
-        .stat-icon.warning { color: #E6A23C; }
-        .stat-icon.info { color: #909399; }
+        .stat-icon.primary { color: #1890ff; }
+        .stat-icon.success { color: #52c41a; }
+        .stat-icon.warning { color: #fa8c16; }
+        .stat-icon.info { color: #666; }
 
         .stat-info {
-            flex: 1;
+            width: 100%;
         }
 
         .stat-label {
             font-size: 14px;
-            color: #909399;
+            color: #666;
             margin-bottom: 8px;
         }
 
         .stat-value {
-            font-size: 32px;
-            font-weight: bold;
-            color: #303133;
+            font-size: 24px;
+            font-weight: 600;
+            color: #1890ff;
         }
 
         .main-card {
             background: white;
-            padding: 20px;
+            padding: 24px;
             border-radius: 8px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         .tabs {
-            border-bottom: 2px solid #E4E7ED;
+            display: flex;
+            border-bottom: 1px solid #f0f0f0;
             margin-bottom: 20px;
         }
 
         .tab-item {
-            display: inline-block;
-            padding: 12px 20px;
+            padding: 16px 20px;
             cursor: pointer;
             border-bottom: 2px solid transparent;
-            margin-bottom: -2px;
-            color: #303133;
+            margin-bottom: -1px;
+            color: #666;
+            font-size: 14px;
+            transition: all 0.3s;
         }
 
         .tab-item.active {
-            color: #409EFF;
-            border-bottom-color: #409EFF;
+            color: #1890ff;
+            border-bottom-color: #1890ff;
+        }
+
+        .tab-item:hover {
+            color: #1890ff;
         }
 
         .tab-content {
@@ -125,115 +132,155 @@
         .search-form {
             margin: 20px 0;
             padding: 20px;
-            background: #f5f7fa;
-            border-radius: 4px;
+            background: #fafafa;
+            border-radius: 6px;
         }
 
         .form-item {
             display: inline-block;
-            margin-right: 20px;
+            margin-right: 16px;
             margin-bottom: 10px;
         }
 
         .form-item label {
             margin-right: 8px;
-            color: #606266;
+            color: #666;
+            font-weight: 500;
+            font-size: 14px;
         }
 
         .form-item input, .form-item select {
-            padding: 8px 12px;
-            border: 1px solid #DCDFE6;
-            border-radius: 4px;
+            height: 40px;
+            padding: 0 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
             font-size: 14px;
         }
 
+        .form-item input:focus, .form-item select:focus {
+            outline: none;
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+
         .btn {
-            padding: 9px 15px;
+            height: 40px;
+            padding: 0 16px;
             border: none;
-            border-radius: 4px;
+            border-radius: 6px;
             cursor: pointer;
             font-size: 14px;
-            margin-right: 10px;
+            margin-right: 12px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
         }
 
         .btn-primary {
-            background: #409EFF;
+            background: #1890ff;
             color: white;
         }
 
+        .btn-primary:hover {
+            background: #40a9ff;
+        }
+
         .btn-default {
             background: white;
-            color: #606266;
-            border: 1px solid #DCDFE6;
+            color: #666;
+            border: 1px solid #ddd;
+        }
+
+        .btn-default:hover {
+            border-color: #1890ff;
+            color: #1890ff;
         }
 
         .btn-success {
-            background: #67C23A;
+            background: #52c41a;
             color: white;
         }
 
+        .btn-success:hover {
+            background: #73d13d;
+        }
+
         table {
             width: 100%;
             border-collapse: collapse;
             margin-top: 20px;
-        }
-
-        table th, table td {
-            border: 1px solid #EBEEF5;
-            padding: 12px 8px;
-            text-align: center;
             font-size: 14px;
         }
 
-        table th {
-            background: #F5F7FA;
-            color: #606266;
-            font-weight: bold;
+        table th, table td {
+            border: 1px solid #f0f0f0;
+            padding: 12px 16px;
+            text-align: center;
         }
 
-        table tr:hover {
-            background: #F5F7FA;
+        table th {
+            background: #fafafa;
+            color: #666;
+            font-weight: 600;
+        }
+
+        table td {
+            border-bottom: 1px solid #f9f9f9;
+        }
+
+        table tbody tr:hover {
+            background: #f8f9fa;
+        }
+
+        table tfoot tr {
+            background: #fafafa;
+            font-weight: 600;
         }
 
         .tag {
             display: inline-block;
-            padding: 4px 12px;
+            padding: 4px 8px;
             border-radius: 4px;
             font-size: 12px;
+            font-weight: 500;
         }
 
         .tag-success {
-            background: #f0f9ff;
-            color: #67C23A;
-            border: 1px solid #c6f6d5;
+            background: #f6ffed;
+            color: #52c41a;
+            border: 1px solid #b7eb8f;
         }
 
         .tag-warning {
-            background: #fffbeb;
-            color: #E6A23C;
-            border: 1px solid #fef3c7;
+            background: #fff7e6;
+            color: #fa8c16;
+            border: 1px solid #ffd591;
         }
 
         .tag-info {
             background: #f4f4f5;
-            color: #909399;
+            color: #666;
             border: 1px solid #e4e4e7;
         }
 
         .money-text {
-            color: #E6A23C;
-            font-weight: bold;
+            color: #fa8c16;
+            font-weight: 600;
         }
 
         .commission-text {
-            color: #67C23A;
-            font-weight: bold;
+            color: #52c41a;
+            font-weight: 600;
         }
 
         .pagination {
             text-align: right;
             margin-top: 20px;
-            color: #606266;
+            padding-top: 20px;
+            border-top: 1px solid #f0f0f0;
+            color: #666;
+            font-size: 14px;
         }
 
         @media screen and (max-width: 1200px) {
@@ -253,8 +300,7 @@
     <div class="container">
         <!-- 页面标题 -->
         <div class="header-card">
-            <h1 class="page-title">分销订单与佣金管理系统</h1>
-            <p class="page-desc">查看分销订单明细、佣金统计及分销业绩数据</p>
+            <h1 class="page-title">分销订单与佣金管理</h1>
         </div>
 
         <!-- 统计卡片 -->
