fix: dashboard
This commit is contained in:
sajjadtalkhabi
@@ -1,69 +1,226 @@
|
||||
<template>
|
||||
<div class="student-dashboard">
|
||||
<div class="student-dashboard__welcome">
|
||||
<img :src="flower" alt="flower" class="student-dashboard__flower" />
|
||||
<div>
|
||||
<p class="student-dashboard__hi">سلام بر شما</p>
|
||||
<p class="student-dashboard__greeting">به سامانه موسسه بانو خوش آمدید.</p>
|
||||
</div>
|
||||
<div class="dashboard">
|
||||
<div class="dashboard__main">
|
||||
<!-- گزارش عملکرد -->
|
||||
<section class="dashboard__section">
|
||||
<BoxedIconTitleBlock title="گزارش عملکرد" desc="مروری بر شاخصهای آموزشی و فعالیتهای شما.">
|
||||
<template #icon>
|
||||
<SvgIcon name="heart" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<div class="dashboard__stats">
|
||||
<DashboardStatCard
|
||||
v-for="(stat, i) in performanceStats"
|
||||
:key="i"
|
||||
:icon="stat.icon"
|
||||
:label="stat.label"
|
||||
:value="stat.value"
|
||||
:unit="stat.unit"
|
||||
:subtitle="stat.subtitle"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- فعالیت های اخیر -->
|
||||
<section class="dashboard__section">
|
||||
<BoxedIconTitleBlock
|
||||
title="فعالیت های اخیر"
|
||||
desc="گزارشی از جدیدترین خریدها و دورههای تکمیلشده"
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="heart" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<div class="dashboard__activities">
|
||||
<div v-for="(act, i) in activities" :key="i" class="dashboard__activity">
|
||||
<div class="dashboard__pill">
|
||||
<SvgIcon :name="act.pillIcon" :size="'1.125rem'" class="dashboard__pill-icon" />
|
||||
<span class="dashboard__pill-label">{{ act.pillLabel }}</span>
|
||||
</div>
|
||||
<DashboardActivityCard :title="act.title" :meta="act.meta" :meta-icon="act.metaIcon" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<p class="student-dashboard__placeholder">این بخش در مراحل بعدی توسعه مییابد.</p>
|
||||
<aside class="dashboard__aside">
|
||||
<DashboardProfileCard
|
||||
:name="profile.name"
|
||||
:location="profile.location"
|
||||
:stats="profile.stats"
|
||||
/>
|
||||
<DashboardCalendar :month-label="calendar.month" :days="calendar.days" />
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { gallery } from '@/utils/gallery'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import DashboardStatCard from '@/features/student/pages/components/DashboardStatCard.vue'
|
||||
import DashboardCalendar from '@/features/student/pages/components/DashboardCalendar.vue'
|
||||
import DashboardProfileCard from '@/features/student/pages/components/DashboardProfileCard.vue'
|
||||
import DashboardActivityCard from '@/features/student/pages/components/DashboardActivityCard.vue'
|
||||
|
||||
const flower = gallery.registrationCompleteFlower
|
||||
const performanceStats = [
|
||||
{
|
||||
icon: 'clock',
|
||||
label: 'ساعات آموزشی سپریشده',
|
||||
value: '۲۵',
|
||||
unit: 'ساعت',
|
||||
subtitle: 'گذرانده شده',
|
||||
},
|
||||
{
|
||||
icon: 'video',
|
||||
label: 'دوره های خریداری شده',
|
||||
value: '۶',
|
||||
unit: 'دوره',
|
||||
subtitle: 'خریداری شده',
|
||||
},
|
||||
{
|
||||
icon: 'user-sound',
|
||||
label: 'تعداد جلسات اعزام شده',
|
||||
value: '۱۲',
|
||||
unit: 'جلسه',
|
||||
subtitle: 'اعزام شده است',
|
||||
},
|
||||
]
|
||||
|
||||
const activities = [
|
||||
{
|
||||
pillIcon: 'shopping-bag',
|
||||
pillLabel: 'آخرین دوره خریداری شده',
|
||||
title: 'دوره تاریخچه ایران قدیم',
|
||||
metaIcon: 'calendar',
|
||||
meta: [
|
||||
{ label: 'تاریخ شروع:', value: '۱۴۰۰/۷/۱۹, ۸:۳۰', numeric: true },
|
||||
{ label: 'استاد:', value: 'علیرضا حسنی' },
|
||||
{ label: 'تاریخ پایان:', value: '۱۴۰۰/۱۱/۱۰, ۸:۳۰', numeric: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
pillIcon: 'video',
|
||||
pillLabel: 'اخرین جلسه دیده شده',
|
||||
title: 'دوره تخصصی تربیت مبلغ بین الملل',
|
||||
metaIcon: 'video',
|
||||
meta: [
|
||||
{ label: 'جلسه:', value: 'بیستم و دوم' },
|
||||
{ label: 'استاد:', value: 'علیرضا حسنی' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const profile = {
|
||||
name: 'سید احمد علیزاده',
|
||||
location: 'قم، ایران',
|
||||
stats: [
|
||||
{ label: 'مدت عضویت', value: '۲۳', unit: 'روز' },
|
||||
{ label: 'دورههای تکمیلشده', value: '۱۲', unit: 'عدد' },
|
||||
{ label: 'دورههای فعال', value: '۵', unit: 'عدد' },
|
||||
],
|
||||
}
|
||||
|
||||
const calendar = {
|
||||
month: 'شهریور ماه',
|
||||
days: [
|
||||
{ weekday: 'شنبه', day: '۱۵' },
|
||||
{ weekday: 'یکشنبه', day: '۱۴' },
|
||||
{ weekday: 'دوشنبه', day: '۱۳', marker: true },
|
||||
{ weekday: 'سه شنبه', day: '۱۲' },
|
||||
{ weekday: 'چهارشنبه', day: '۱۱', selected: true },
|
||||
{ weekday: 'پنجشنبه', day: '۱۰' },
|
||||
{ weekday: 'جمعه', day: '۹' },
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-dashboard {
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
flex-direction: column-reverse;
|
||||
gap: 2rem;
|
||||
|
||||
&__welcome {
|
||||
display: flex;
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
&__flower {
|
||||
object-fit: contain;
|
||||
max-height: 2.75rem;
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
&__hi {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: var(--color-prim-gray);
|
||||
margin: 0;
|
||||
&__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
&__greeting {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
&__stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.875rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 1.5rem;
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
&__activities {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.25rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__activity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.9375rem;
|
||||
}
|
||||
|
||||
&__pill-icon {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
&__pill-label {
|
||||
order: 1;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-prim-gray);
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
background: #fff;
|
||||
border-radius: 1rem;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
&__aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: 19.625rem;
|
||||
flex-shrink: 0;
|
||||
border-inline-start: 1px solid #e6e6e6;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user