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