MIDNIGHT/enlight-lms
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

TEST UPD

Browse Source 
- front works
This commit is contained in:
Alexandrina-Kuzeleva
2025-11-20 15:53:36 +03:00
parent 826828ba30
commit cb06cc53c2
1 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/pages/MyPoints.vue
View File

@@ -3,13 +3,13 @@
<NoPermission />
</div>
<div v-else class="min-h-screen bg-gray-50">
<div v-else class="min-h-screen bg-50">
<header class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-5 py-3">
<Breadcrumbs :items="breadcrumbs" />
</header>
<div class="mx-auto max-w-4xl px-5 py-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8">Мои баллы</h2>
<div class="p-5 pb-10">
<h2 class="text-lg text-ink-gray-9 font-semibold">Мои баллы</h2>
<!-- Загрузка -->
<div v-if="energyPoints.loading" class="text-center py-16 text-gray-600">
@@ -22,44 +22,52 @@
<p class="text-sm text-gray-500 mt-2">Участвуйте в активностях — баллы появятся!</p>
</div>
<!-- Есть баллы -->
<div v-else>
<div class="bg-white rounded-xl shadow overflow-hidden mb-8">
<ul class="divide-y divide-gray-200">
<li v-for="item in energyPoints.data.slice(0, 20)" :key="item.name" class="p-6 hover:bg-gray-50">
<div class="flex items-center justify-between">
<div class="flex items-center gap-5">
<div class="text-2xl font-bold"
:class="item.points > 0 ? 'text-green-600' : 'text-red-600'">
{{ item.points > 0 ? '+' : '' }}{{ item.points }}
</div>
<div>
<p class="font-medium text-gray-900">
{{ item.rule || 'Начисление баллов' }}
</p>
<p class="text-sm text-gray-500">
{{ dayjs(item.creation).format('DD MMMM YYYY в HH:mm') }}
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Есть баллы -->
<div v-else>
<!-- Итоги -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="text-5xl font-bold mt-3 text-gray-900">
<p class="text-lg opacity-90">Всего баллов</p>
<p class="text-5xl font-bold mt-3">{{ totalPoints }}</p>
</div>
<div class="text-5xl font-bold mt-3 text-gray-900">
<p class="text-lg opacity-90">Дополнительно при поступлении в МПГУ</p>
<p class="text-5xl font-bold mt-3">+{{ additionalPoints }}</p>
<p class="text-sm opacity-80 mt-3">максимум 10 баллов</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- ЛЕВАЯ КОЛОНКА — список баллов -->
<div class="bg-white rounded-xl shadow overflow-hidden mt-4">
<ul class="divide-y divide-gray-200">
<li v-for="item in energyPoints.data.slice(0, 20)" :key="item.name" class="p-6 hover:bg-gray-50">
<div class="flex items-center justify-between">
<div class="flex items-center gap-5">
<div class="text-2xl font-bold"
:class="item.points > 0 ? 'text-green-600' : 'text-red-600'">
{{ item.points > 0 ? '+' : '' }}{{ item.points }}
</div>
<div>
<p class="font-medium text-gray-900">
{{ item.rule || 'Начисление баллов' }}
</p>
<p class="text-sm text-gray-500">
{{ dayjs(item.creation).format('DD MMMM YYYY в HH:mm') }}
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- ПРАВАЯ КОЛОНКА — итоги -->
<div class="space-y-6">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-7 text-white shadow-xl">
<p class="text-lg opacity-90">Всего баллов</p>
<p class="text-5xl font-bold mt-3">{{ totalPoints }}</p>
</div>
<div class="bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl p-7 text-white shadow-xl">
<p class="text-lg opacity-90">Дополнительно при поступлении в МПГУ</p>
<p class="text-5xl font-bold mt-3">+{{ additionalPoints }}</p>
<p class="text-sm opacity-80 mt-3">максимум 10 баллов</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>