Update Test.vue

This commit is contained in:
Alexandrina-Kuzeleva
2025-11-28 10:57:54 +03:00
parent c6ad6b495c
commit eb4cf6e2db

View File

@@ -71,9 +71,9 @@
>
{{ topUserInGroup.full_name }}
</a>
<p class="text-sm text-opacity-80" v-if="topUserInGroup">
<!--<p class="text-sm text-opacity-80" v-if="topUserInGroup">
{{ topUserInGroup.username }}
</p>
</p>-->
</div>
</div>
<div class="text-right">
@@ -103,6 +103,23 @@
</div>
</div>
<!-- Статистика -->
<div class="max-w-5xl mx-auto mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div
v-for="group in roleGroups"
:key="group.role"
class="bg-white rounded-lg shadow-sm p-4 border-l-4 cursor-pointer hover:shadow-md transition-shadow"
:class="getGroupBorderClass(group.role)"
@click="activeGroup = group.role"
>
<h3 class="font-semibold text-gray-700 mb-2">{{ group.label }}</h3>
<p class="text-2xl font-bold text-gray-800">
{{ getGroupStats(group.role).count }}
</p>
<p class="text-sm text-gray-500">участников</p>
</div>
</div>
<!-- Таблица лидеров -->
<div class="max-w-5xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<!-- Заголовок таблицы -->
@@ -152,7 +169,7 @@
>
{{ user.full_name }}
</a>
<p class="text-sm text-gray-500">{{ user.username }}</p>
<!--<p class="text-sm text-gray-500">{{ user.username }}</p>-->
</div>
</div>
</div>
@@ -188,22 +205,6 @@
</div>
</div>
<!-- Статистика -->
<div class="max-w-5xl mx-auto mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div
v-for="group in roleGroups"
:key="group.role"
class="bg-white rounded-lg shadow-sm p-4 border-l-4 cursor-pointer hover:shadow-md transition-shadow"
:class="getGroupBorderClass(group.role)"
@click="activeGroup = group.role"
>
<h3 class="font-semibold text-gray-700 mb-2">{{ group.label }}</h3>
<p class="text-2xl font-bold text-gray-800">
{{ getGroupStats(group.role).count }}
</p>
<p class="text-sm text-gray-500">участников</p>
</div>
</div>
</div>
</template>
@@ -351,7 +352,7 @@ function getGroupGradientClass(role) {
const classes = {
'LMS Student': 'from-teal-400 to-teal-500',
'Course Creator': 'from-teal-600 to-teal-700',
'LMS Schoolchild': 'from-teal-200 to-teal-300'
'LMS Schoolchild': 'from-teal-300 to-teal-400'
}
return classes[role] || 'from-blue-500 to-blue-600'
}
@@ -360,7 +361,7 @@ function getGroupBorderClass(role) {
const classes = {
'LMS Student': 'border-teal-400',
'Course Creator': 'border-teal-600',
'LMS Schoolchild': 'border-teal-200'
'LMS Schoolchild': 'border-teal-300'
}
return classes[role] || 'border-blue-400'
}