feat: подготовил дизайн (изменения из другого репозитория)

frontend/src/views/student/AchievementsView.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUserStore } from '@/stores/user'
+import GlassCard from '@/components/ui/GlassCard.vue'
+import AchievementBadge from '@/components/ui/AchievementBadge.vue'
+
+const userStore = useUserStore()
+const unlocked = computed(() => userStore.achievements.filter(a => a.unlocked))
+const locked = computed(() => userStore.achievements.filter(a => !a.unlocked))
+
+const rewards = [
+  { id: 'r1', title: 'Стикерпак UniVerse', price: 80, available: true },
+  { id: 'r2', title: 'Термокружка ЮФУ', price: 150, available: true },
+  { id: 'r3', title: 'Доп. консультация преподавателя', price: 220, available: false },
+  { id: 'r4', title: 'Цифровой бейдж «Research Explorer»', price: 60, available: true },
+]
+</script>
+
+<template>
+  <div class="achievements page-content">
+    <h1 class="page-title">Достижения и магазин наград</h1>
+
+    <section>
+      <h2 class="section-title">Полученные достижения</h2>
+      <div class="list">
+        <AchievementBadge
+          v-for="a in unlocked"
+          :key="a.id"
+          :icon="a.icon"
+          :title="a.title"
+          :description="a.description"
+          :unlocked="a.unlocked"
+          :unlockedAt="a.unlockedAt"
+          :coins="a.coins"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">Заблокированные</h2>
+      <div class="list">
+        <AchievementBadge
+          v-for="a in locked"
+          :key="a.id"
+          :icon="a.icon"
+          :title="a.title"
+          :description="a.description"
+          :unlocked="a.unlocked"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-title">Магазин наград</h2>
+      <div class="rewards">
+        <GlassCard v-for="r in rewards" :key="r.id" class="reward-card">
+          <div class="reward-title">{{ r.title }}</div>
+          <div class="reward-price">{{ r.price }} монет</div>
+          <button class="btn-primary" :disabled="!r.available">
+            {{ r.available ? 'Купить' : 'Недоступно' }}
+          </button>
+        </GlassCard>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.achievements { display: flex; flex-direction: column; gap: 20px; }
+.list { display: flex; flex-direction: column; gap: 12px; }
+.rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
+.reward-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
+.reward-title { font-weight: 700; }
+.reward-price { color: var(--color-text-secondary); font-size: 13px; }
+</style>