- front works
This commit is contained in:
Alexandrina-Kuzeleva
2025-11-28 10:27:03 +03:00
parent 34f1d02803
commit e76858121f

View File

@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen bg-gray-50 p-6">
<div class="min-h-screen p-6">
<!-- Заголовок -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2">Таблица лидеров</h1>
@@ -7,9 +7,9 @@
</div>
<!-- Карточка текущего пользователя и лучшего в группе -->
<div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Карточка текущего пользователя -->
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500">
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-teal-800">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Ваша позиция</h3>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
@@ -104,7 +104,7 @@
</div>
<!-- Таблица лидеров -->
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<div class="max-w-5xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<!-- Заголовок таблицы -->
<div :class="['px-6 py-4 bg-gradient-to-r', getGroupGradientClass(activeGroup)]">
<h2 class="text-xl font-bold text-white">
@@ -185,7 +185,7 @@
</div>
<!-- Статистика -->
<div class="max-w-4xl mx-auto mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<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"
@@ -336,27 +336,27 @@ const nextPositionPoints = computed(() => {
// Классы для групп
function getGroupButtonClass(role) {
const classes = {
'LMS Student': 'bg-blue-500 text-white shadow-md',
'Course Creator': 'bg-green-500 text-white shadow-md',
'LMS Schoolchild': 'bg-purple-500 text-white shadow-md'
'LMS Student': 'bg-teal-400 text-white shadow-md',
'Course Creator': 'bg-teal-600 text-white shadow-md',
'LMS Schoolchild': 'bg-teal-200 text-white shadow-md'
}
return classes[role] || 'bg-blue-500 text-white shadow-md'
}
function getGroupGradientClass(role) {
const classes = {
'LMS Student': 'from-blue-500 to-blue-600',
'Course Creator': 'from-green-500 to-green-600',
'LMS Schoolchild': 'from-purple-500 to-purple-600'
'LMS Student': 'from-teal-300 to-teal-400',
'Course Creator': 'from-teal-500 to-teal-600',
'LMS Schoolchild': 'from-teal-100 to-teal-200'
}
return classes[role] || 'from-blue-500 to-blue-600'
}
function getGroupBorderClass(role) {
const classes = {
'LMS Student': 'border-blue-400',
'Course Creator': 'border-green-400',
'LMS Schoolchild': 'border-purple-400'
'LMS Student': 'border-teal-400',
'Course Creator': 'border-teal-600',
'LMS Schoolchild': 'border-teal-200'
}
return classes[role] || 'border-blue-400'
}