feat(团队管理): 添加团队整体分析按钮并优化布局

在secondTop和seniorManager页面添加团队整体分析按钮
调整seniorManager页面的团队详情头部布局,使其更灵活
为按钮添加悬停和点击效果
This commit is contained in:
2025-11-10 17:40:09 +08:00
parent 5ff42dbbad
commit 8e5f7335d8
2 changed files with 44 additions and 2 deletions

View File

@@ -112,6 +112,9 @@
<span class="value">{{ selectedGroup.conversionRate }}%</span> <span class="value">{{ selectedGroup.conversionRate }}%</span>
</div> </div>
</div> </div>
<div class="group-performance">
<button>团队整体分析</button>
</div>
</div> </div>
<div class="members-grid"> <div class="members-grid">

View File

@@ -108,6 +108,7 @@
<!-- 团队详情内容 --> <!-- 团队详情内容 -->
<div v-else> <div v-else>
<div class="team-detail-header"> <div class="team-detail-header">
<div>
<h2>{{ selectedGroup.name }} - 团队成员详情</h2> <h2>{{ selectedGroup.name }} - 团队成员详情</h2>
<div class="team-summary"> <div class="team-summary">
<div class="summary-item"> <div class="summary-item">
@@ -127,6 +128,11 @@
<span class="value">{{ selectedGroup.conversionRate }}%</span> <span class="value">{{ selectedGroup.conversionRate }}%</span>
</div> </div>
</div> </div>
</div>
<div class="group-performance">
<button>团队整体分析</button>
</div>
</div> </div>
<div class="members-grid"> <div class="members-grid">
@@ -1142,12 +1148,19 @@ const hideTooltip = () => {
.team-detail-header { .team-detail-header {
margin-bottom: 2rem; margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 1rem;
h2 { h2 {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
color: #1e293b; color: #1e293b;
margin: 0 0 1rem 0; margin: 0;
flex: 1;
min-width: 300px;
} }
.team-summary { .team-summary {
@@ -1173,6 +1186,32 @@ const hideTooltip = () => {
} }
} }
} }
.group-performance {
button {
background-color: #3b82f6;
color: white;
border: none;
border-radius: 6px;
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
height: fit-content;
&:hover {
background-color: #2563eb;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
&:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
}
}
} }
.members-grid { .members-grid {