[v-cloak] { display: none !important; }
/* 经纪人特定样式 */
:root {
--role-color: var(--color-role-broker);
}
.role-broker {
--header-bg: linear-gradient(135deg, var(--color-success-50) 0%, white 100%);
--card-accent: var(--color-success-100);
--badge-bg: var(--color-success-50);
--badge-color: var(--color-success-700);
}
/* 页面布局 */
.dashboard-container {
min-height: 100vh;
background-color: var(--color-gray-50);
}
.dashboard-header {
background: var(--header-bg);
border-bottom: 1px solid var(--color-gray-200);
padding: var(--space-6) 0;
}
.dashboard-content {
padding: var(--space-6) 0;
}
/* 佣金显示 */
.commission-display {
background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-700) 100%);
color: white;
border-radius: var(--radius-2xl);
padding: var(--space-8);
margin-bottom: var(--space-8);
box-shadow: var(--shadow-xl);
}
.commission-label {
font-size: var(--font-size-lg);
opacity: 0.9;
margin-bottom: var(--space-2);
}
.commission-amount {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: 1;
margin-bottom: var(--space-4);
}
.commission-subtext {
font-size: var(--font-size-sm);
opacity: 0.8;
}
/* 统计卡片 */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.stat-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-md);
border-left: 4px solid var(--role-color);
transition: all var(--transition-normal);
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.stat-icon {
width: 48px;
height: 48px;
background: var(--badge-bg);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
color: var(--badge-color);
font-size: 1.5rem;
}
.stat-value {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
line-height: 1;
margin-bottom: var(--space-2);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-gray-600);
font-weight: var(--font-weight-medium);
}
.stat-change {
display: inline-block;
padding: var(--space-1) var(--space-2);
background: var(--color-success-50);
color: var(--color-success-700);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
margin-top: var(--space-2);
}
/* 客户列表 */
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.client-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
}
.client-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.client-header {
display: flex;
align-items: center;
margin-bottom: var(--space-4);
}
.client-avatar {
width: 48px;
height: 48px;
background: var(--badge-bg);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3);
color: var(--badge-color);
font-size: 1.25rem;
}
.client-info {
flex: 1;
}
.client-name {
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--space-1);
}
.client-type {
font-size: var(--font-size-sm);
color: var(--color-gray-600);
}
.client-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
margin-top: var(--space-4);
}
.client-stat {
text-align: center;
padding: var(--space-2);
background: var(--color-gray-50);
border-radius: var(--radius-lg);
}
.client-stat-value {
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--space-1);
}
.client-stat-label {
font-size: var(--font-size-xs);
color: var(--color-gray-600);
}
/* 业绩排名 */
.ranking-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-md);
margin-bottom: var(--space-8);
}
.ranking-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
}
.ranking-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
}
.ranking-list {
list-style: none;
}
.ranking-item {
display: flex;
align-items: center;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-gray-100);
}
.ranking-item:last-child {
border-bottom: none;
}
.ranking-position {
width: 32px;
height: 32px;
background: var(--badge-bg);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3);
font-weight: var(--font-weight-bold);
color: var(--badge-color);
}
.ranking-position.top-3 {
background: var(--color-warning-100);
color: var(--color-warning-700);
}
.ranking-info {
flex: 1;
}
.ranking-name {
font-weight: var(--font-weight-medium);
color: var(--color-gray-800);
margin-bottom: var(--space-1);
}
.ranking-performance {
font-size: var(--font-size-sm);
color: var(--color-gray-600);
}
.ranking-commission {
font-weight: var(--font-weight-bold);
color: var(--color-success-600);
}
/* 快速操作 */
.quick-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.quick-action {
display: inline-flex;
align-items: center;
padding: var(--space-3) var(--space-4);
background: white;
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
color: var(--color-gray-700);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
}
.quick-action:hover {
background: var(--color-success-50);
border-color: var(--role-color);
color: var(--role-color);
transform: translateY(-2px);
}
.quick-action-icon {
margin-right: var(--space-2);
}
/* 移动端适配 */
@media (max-width: 768px) {
.dashboard-header {
padding: var(--space-4) 0;
}
.dashboard-content {
padding: var(--space-4) 0;
}
.commission-display {
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.commission-amount {
font-size: var(--font-size-4xl);
}
.stats-grid {
grid-template-columns: 1fr;
}
.clients-grid {
grid-template-columns: 1fr;
}
.stat-card {
padding: var(--space-4);
}
.client-card {
padding: var(--space-4);
}
.ranking-card {
padding: var(--space-4);
}
}
/* 动画 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}