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

2026-05-08 01:06:22 +03:00
parent 655ab1b5c5
commit 047611fd24
54 changed files with 4497 additions and 28 deletions
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { Lecture } from '@/types'
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{
+  lecture: Lecture
+  registered?: boolean
+}>()
+const emit = defineEmits<{ register: [id: string] }>()
+const router = useRouter()
+
+function formatDate(d: string) {
+  const date = new Date(d)
+  return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
+}
+
+function starsHtml(rating: number) {
+  const full = Math.floor(rating)
+  return '★'.repeat(full) + '☆'.repeat(5 - full)
+}
+
+function goDetail() {
+  router.push(`/lecture/${props.lecture.id}`)
+}
+</script>
+
+<template>
+  <div class="lecture-card" @click="goDetail">
+    <div class="card-header">
+      <span class="badge" :class="lecture.format === 'online' ? 'badge-blue' : 'badge-green'">
+        {{ lecture.format === 'online' ? '🌐 Онлайн' : '📍 Офлайн' }}
+      </span>
+      <span
+        class="seats"
+        :class="{
+          'seats-low': lecture.freeSeats <= 3 && lecture.freeSeats > 0,
+          'seats-zero': lecture.freeSeats === 0 || lecture.registrationClosed
+        }"
+      >
+        <template v-if="lecture.registrationClosed">Запись закрыта</template>
+        <template v-else>
+          {{ lecture.freeSeats === 0 ? 'Мест нет' : `${lecture.freeSeats}/${lecture.totalSeats} мест` }}
+        </template>
+      </span>
+    </div>
+
+    <h3 class="card-title">{{ lecture.title }}</h3>
+
+    <div class="card-teacher">
+      <span>👤</span>
+      <span>{{ lecture.teacher }}</span>
+      <span class="text-secondary">· {{ lecture.institute }}</span>
+    </div>
+
+    <div class="card-meta">
+      <span>📅 {{ formatDate(lecture.date) }}</span>
+      <span>⏰ {{ lecture.time }}</span>
+      <span v-if="lecture.room">🏛 {{ lecture.building }}, ауд. {{ lecture.room }}</span>
+      <span v-else>🏛 {{ lecture.building }}</span>
+    </div>
+
+    <div class="card-tags">
+      <span class="tag-chip" v-for="tag in lecture.tags.slice(0, 3)" :key="tag">{{ tag }}</span>
+    </div>
+
+    <div class="card-footer">
+      <div class="rating">
+        <span class="stars">{{ starsHtml(lecture.rating) }}</span>
+        <span class="rating-value">{{ lecture.rating }}</span>
+        <span class="text-secondary text-sm">({{ lecture.reviewCount }})</span>
+      </div>
+      <button
+        v-if="registered"
+        class="btn-registered"
+        disabled
+        @click.stop
+      >
+        ✓ Записан
+      </button>
+      <button
+        v-else-if="lecture.freeSeats > 0 && !lecture.registrationClosed"
+        class="btn-primary btn-sm"
+        @click.stop="emit('register', lecture.id)"
+      >
+        Записаться
+      </button>
+      <button v-else class="btn-disabled" disabled @click.stop>
+        {{ lecture.registrationClosed ? 'Запись закрыта' : 'Мест нет' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lecture-card {
+  background: var(--color-white-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border-glass);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card);
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  min-width: 0;
+}
+.lecture-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(34,197,94,0.2);
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.seats {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-primary-dark);
+}
+.seats-low { color: #EA580C; }
+.seats-zero { color: #DC2626; }
+.card-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.card-teacher {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+.card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+.rating {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+}
+.rating-value {
+  font-weight: 700;
+  color: var(--color-text);
+}
+.btn-sm {
+  padding: 7px 14px;
+  font-size: 13px;
+}
+.btn-registered {
+  background: rgba(34,197,94,0.12);
+  border: 1px solid rgba(34,197,94,0.3);
+  border-radius: var(--radius-sm);
+  color: var(--color-primary-dark);
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: default;
+}
+.btn-disabled {
+  background: rgba(100,116,139,0.1);
+  border: 1px solid rgba(100,116,139,0.2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: not-allowed;
+}
+</style>