feat: 建議課程前需要分組
This commit is contained in:
skytek_xinliang
@@ -1,364 +1,402 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<template #main>
|
||||
<!-- 頁面標題：刻意縮小，把版面讓給下方的組別 -->
|
||||
<div class="d-flex align-center mb-3">
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
icon="mdi-calendar-week"
|
||||
size="18"
|
||||
/>
|
||||
|
||||
<span class="text-title-small font-weight-bold text-grey-darken-1"
|
||||
>課程建議</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 體適能組別：本頁所有內容都依它而定，因此獨立成一張顯眼的卡片 -->
|
||||
<v-card
|
||||
class="rounded-xl mb-6 overflow-hidden"
|
||||
elevation="1"
|
||||
variant="flat"
|
||||
>
|
||||
<v-card-item class="pa-4" :class="`bg-${store.groupMeta.color}`">
|
||||
<template #prepend>
|
||||
<v-avatar class="group-avatar" size="60">
|
||||
<v-icon color="white" :icon="store.groupMeta.icon" size="34" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<template #subtitle>
|
||||
<span class="text-title-small group-caption">你的體適能組別</span>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<span class="text-h5 font-weight-black text-white">{{
|
||||
store.groupMeta.label
|
||||
}}</span>
|
||||
</template>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-text class="text-body-medium text-grey-darken-2 pa-4">
|
||||
{{ store.groupMeta.description }}
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- 時段篩選尚未開放給使用者操作，先隱藏 -->
|
||||
<v-card v-if="SHOW_SLOT_FILTER" class="rounded-xl mb-6" variant="flat">
|
||||
<v-card-text>
|
||||
<div class="text-title-small text-grey mb-2">選擇要顯示的時段</div>
|
||||
|
||||
<v-btn-toggle
|
||||
v-model="selectedSlots"
|
||||
border
|
||||
class="d-flex"
|
||||
<template v-if="store.groupLoaded">
|
||||
<!-- 頁面標題：刻意縮小，把版面讓給下方的組別 -->
|
||||
<div class="d-flex align-center mb-3">
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
divided
|
||||
multiple
|
||||
variant="flat"
|
||||
>
|
||||
<v-btn
|
||||
v-for="slot in SLOTS"
|
||||
:key="slot.key"
|
||||
class="flex-grow-1"
|
||||
:prepend-icon="slot.icon"
|
||||
size="small"
|
||||
:value="slot.key"
|
||||
>
|
||||
{{ slot.label }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
icon="mdi-calendar-week"
|
||||
size="18"
|
||||
/>
|
||||
|
||||
<!-- 載入中 -->
|
||||
<template v-if="store.loading">
|
||||
<v-skeleton-loader
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
class="rounded-xl mb-4"
|
||||
type="article"
|
||||
/>
|
||||
<span class="text-title-small font-weight-bold text-grey-darken-1"
|
||||
>課程建議</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 體適能組別：本頁所有內容都依它而定，因此獨立成一張顯眼的卡片 -->
|
||||
<v-card
|
||||
class="rounded-xl mb-6 overflow-hidden"
|
||||
elevation="1"
|
||||
variant="flat"
|
||||
>
|
||||
<v-card-item class="pa-4" :class="`bg-${store.groupMeta.color}`">
|
||||
<template #prepend>
|
||||
<v-avatar class="group-avatar" size="60">
|
||||
<v-icon color="white" :icon="store.groupMeta.icon" size="34" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<template #subtitle>
|
||||
<span class="text-title-small group-caption">你的體適能組別</span>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<span class="text-h5 font-weight-black text-white">{{
|
||||
store.groupMeta.label
|
||||
}}</span>
|
||||
</template>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-text class="text-body-medium text-grey-darken-2 pa-4">
|
||||
{{ store.groupMeta.description }}
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- 時段篩選尚未開放給使用者操作，先隱藏 -->
|
||||
<v-card v-if="SHOW_SLOT_FILTER" class="rounded-xl mb-6" variant="flat">
|
||||
<v-card-text>
|
||||
<div class="text-title-small text-grey mb-2">選擇要顯示的時段</div>
|
||||
|
||||
<v-btn-toggle
|
||||
v-model="selectedSlots"
|
||||
border
|
||||
class="d-flex"
|
||||
color="primary"
|
||||
divided
|
||||
multiple
|
||||
variant="flat"
|
||||
>
|
||||
<v-btn
|
||||
v-for="slot in SLOTS"
|
||||
:key="slot.key"
|
||||
class="flex-grow-1"
|
||||
:prepend-icon="slot.icon"
|
||||
size="small"
|
||||
:value="slot.key"
|
||||
>
|
||||
{{ slot.label }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- 載入中 -->
|
||||
<template v-if="store.loading">
|
||||
<v-skeleton-loader
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
class="rounded-xl mb-4"
|
||||
type="article"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 載入失敗 -->
|
||||
<v-alert
|
||||
v-else-if="store.error"
|
||||
class="rounded-xl"
|
||||
icon="mdi-alert-circle-outline"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ store.error }}
|
||||
|
||||
<template #append>
|
||||
<v-btn size="small" variant="text" @click="store.loadAll()"
|
||||
>重試</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-alert>
|
||||
|
||||
<!-- 沒有選取任何時段 -->
|
||||
<v-alert
|
||||
v-else-if="!store.hasCourse"
|
||||
class="rounded-xl"
|
||||
icon="mdi-calendar-remove-outline"
|
||||
type="info"
|
||||
variant="tonal"
|
||||
>
|
||||
目前沒有可顯示的課程，請至少選擇一個時段。
|
||||
</v-alert>
|
||||
|
||||
<!-- 一週課表：仿 doc/課程表示意 的表格版型，星期為列、時段為欄 -->
|
||||
<template v-else>
|
||||
<!-- 課程說明：對應 doc/課程說明.md -->
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-card-title
|
||||
class="text-title-medium font-weight-bold text-primary d-flex align-center"
|
||||
>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
icon="mdi-book-open-variant"
|
||||
size="20"
|
||||
/>
|
||||
課程說明
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-expansion-panels
|
||||
v-model="openPanels"
|
||||
multiple
|
||||
variant="accordion"
|
||||
>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title class="font-weight-bold"
|
||||
>族群特徵</v-expansion-panel-title
|
||||
>
|
||||
|
||||
<v-expansion-panel-text>
|
||||
<p class="text-body-medium text-grey-darken-2 mb-3">
|
||||
{{ detail.profile.summary }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in detail.profile.items"
|
||||
:key="index"
|
||||
class="d-flex align-start ga-3 mb-2"
|
||||
>
|
||||
<v-icon
|
||||
color="secondary"
|
||||
:icon="`mdi-numeric-${index + 1}-circle`"
|
||||
size="20"
|
||||
/>
|
||||
<div class="text-body-medium">{{ item }}</div>
|
||||
</div>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title class="font-weight-bold">
|
||||
精準運動處方建議
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-expansion-panel-text>
|
||||
<div
|
||||
v-for="(item, index) in detail.prescription"
|
||||
:key="index"
|
||||
class="d-flex align-start ga-3 mb-4"
|
||||
>
|
||||
<v-icon
|
||||
color="secondary"
|
||||
:icon="`mdi-numeric-${index + 1}-circle`"
|
||||
size="20"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="font-weight-bold">{{ item.title }}</div>
|
||||
|
||||
<div class="text-body-medium text-grey-darken-2 mt-1">
|
||||
{{ item.detail }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title class="font-weight-bold">
|
||||
{{ detail.outcome.label }}
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-expansion-panel-text>
|
||||
<div
|
||||
v-for="(item, index) in detail.outcome.items"
|
||||
:key="index"
|
||||
class="d-flex align-start ga-3 mb-2"
|
||||
>
|
||||
<v-icon
|
||||
color="secondary"
|
||||
:icon="`mdi-numeric-${index + 1}-circle`"
|
||||
size="20"
|
||||
/>
|
||||
<div class="text-body-medium">{{ item }}</div>
|
||||
</div>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
|
||||
<!-- 運動時間建議：對應 doc/運動時間建議.png -->
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-expansion-panels
|
||||
v-model="durationTablePanel"
|
||||
flat
|
||||
variant="accordion"
|
||||
>
|
||||
<v-expansion-panel value="duration">
|
||||
<v-expansion-panel-title
|
||||
class="course-table-panel-title text-title-medium font-weight-bold text-primary"
|
||||
>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
icon="mdi-timer-outline"
|
||||
size="20"
|
||||
/>
|
||||
運動時間建議
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-expansion-panel-text class="pa-0">
|
||||
<v-table class="course-table" density="comfortable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="day-col bg-primary text-white text-center">
|
||||
星期
|
||||
</th>
|
||||
<th class="bg-primary text-white text-center">
|
||||
運動內容
|
||||
</th>
|
||||
<th class="time-col bg-primary text-white text-center">
|
||||
時間
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="row in detail.duration"
|
||||
:key="row.day"
|
||||
:class="{ 'bg-teal-lighten-5': row.day === todayDay }"
|
||||
>
|
||||
<td
|
||||
class="day-col text-center font-weight-bold text-primary"
|
||||
>
|
||||
{{ DAY_NAMES[row.day - 1] }}
|
||||
</td>
|
||||
|
||||
<td class="text-body-medium text-wrap">
|
||||
{{ row.content }}
|
||||
</td>
|
||||
|
||||
<td class="time-col text-center text-body-medium">
|
||||
{{ row.minutes === null ? "—" : `${row.minutes} 分` }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-expansion-panels
|
||||
v-model="scheduleTablePanel"
|
||||
flat
|
||||
variant="accordion"
|
||||
>
|
||||
<v-expansion-panel value="schedule">
|
||||
<v-expansion-panel-title
|
||||
class="course-table-panel-title text-title-medium font-weight-bold text-primary"
|
||||
>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
icon="mdi-timer-outline"
|
||||
size="20"
|
||||
/>
|
||||
運動課表
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-expansion-panel-text class="pa-0">
|
||||
<v-table class="course-table" density="comfortable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="day-col bg-primary text-white text-center">
|
||||
星期
|
||||
</th>
|
||||
|
||||
<th
|
||||
v-for="slot in visibleSlots"
|
||||
:key="slot.key"
|
||||
class="text-white text-center"
|
||||
:class="slot.headerClass"
|
||||
>
|
||||
<v-icon class="mr-1" :icon="slot.icon" size="16" />
|
||||
{{ slot.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="row in store.courseList"
|
||||
:key="row.day"
|
||||
:class="{ 'bg-teal-lighten-5': row.day === todayDay }"
|
||||
>
|
||||
<td
|
||||
class="day-col text-center font-weight-bold text-primary"
|
||||
>
|
||||
{{ DAY_NAMES[row.day - 1] }}
|
||||
</td>
|
||||
|
||||
<td
|
||||
v-for="slot in visibleSlots"
|
||||
:key="slot.key"
|
||||
class="slot-cell text-body-medium text-wrap"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row align-center ga-1 ga-md-3"
|
||||
>
|
||||
<v-avatar
|
||||
class="slot-avatar flex-shrink-0"
|
||||
rounded="lg"
|
||||
>
|
||||
<v-img
|
||||
:alt="`${DAY_NAMES[row.day - 1]}${slot.label}課表插圖`"
|
||||
:src="scheduleCardImage(row.day, slot.key)"
|
||||
/>
|
||||
</v-avatar>
|
||||
|
||||
<span>{{ row[slot.key] }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-img
|
||||
:alt="`${store.groupMeta.label}課表示意圖`"
|
||||
:src="groupIllustration"
|
||||
/>
|
||||
</v-card>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 載入失敗 -->
|
||||
<v-alert
|
||||
v-else-if="store.error"
|
||||
v-else-if="store.groupMissing"
|
||||
class="rounded-xl"
|
||||
icon="mdi-calendar-alert"
|
||||
type="info"
|
||||
variant="tonal"
|
||||
>
|
||||
尚未取得體適能分組，請先預約並完成現場普測。
|
||||
|
||||
<template #append>
|
||||
<v-btn to="/appointment" variant="text">前往預約</v-btn>
|
||||
</template>
|
||||
</v-alert>
|
||||
|
||||
<v-alert
|
||||
v-else-if="store.groupError"
|
||||
class="rounded-xl"
|
||||
icon="mdi-alert-circle-outline"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ store.error }}
|
||||
{{ store.groupError }}
|
||||
|
||||
<template #append>
|
||||
<v-btn size="small" variant="text" @click="store.loadAll()"
|
||||
<v-btn size="small" variant="text" @click="store.loadGroup(true)"
|
||||
>重試</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-alert>
|
||||
|
||||
<!-- 沒有選取任何時段 -->
|
||||
<v-alert
|
||||
v-else-if="!store.hasCourse"
|
||||
class="rounded-xl"
|
||||
icon="mdi-calendar-remove-outline"
|
||||
type="info"
|
||||
variant="tonal"
|
||||
>
|
||||
目前沒有可顯示的課程，請至少選擇一個時段。
|
||||
</v-alert>
|
||||
|
||||
<!-- 一週課表：仿 doc/課程表示意 的表格版型，星期為列、時段為欄 -->
|
||||
<template v-else>
|
||||
<!-- 課程說明：對應 doc/課程說明.md -->
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-card-title
|
||||
class="text-title-medium font-weight-bold text-primary d-flex align-center"
|
||||
>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
icon="mdi-book-open-variant"
|
||||
size="20"
|
||||
/>
|
||||
課程說明
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-expansion-panels v-model="openPanels" multiple variant="accordion">
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title class="font-weight-bold"
|
||||
>族群特徵</v-expansion-panel-title
|
||||
>
|
||||
|
||||
<v-expansion-panel-text>
|
||||
<p class="text-body-medium text-grey-darken-2 mb-3">
|
||||
{{ detail.profile.summary }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in detail.profile.items"
|
||||
:key="index"
|
||||
class="d-flex align-start ga-3 mb-2"
|
||||
>
|
||||
<v-icon
|
||||
color="secondary"
|
||||
:icon="`mdi-numeric-${index + 1}-circle`"
|
||||
size="20"
|
||||
/>
|
||||
<div class="text-body-medium">{{ item }}</div>
|
||||
</div>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title class="font-weight-bold">
|
||||
精準運動處方建議
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-expansion-panel-text>
|
||||
<div
|
||||
v-for="(item, index) in detail.prescription"
|
||||
:key="index"
|
||||
class="d-flex align-start ga-3 mb-4"
|
||||
>
|
||||
<v-icon
|
||||
color="secondary"
|
||||
:icon="`mdi-numeric-${index + 1}-circle`"
|
||||
size="20"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="font-weight-bold">{{ item.title }}</div>
|
||||
|
||||
<div class="text-body-medium text-grey-darken-2 mt-1">
|
||||
{{ item.detail }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title class="font-weight-bold">
|
||||
{{ detail.outcome.label }}
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-expansion-panel-text>
|
||||
<div
|
||||
v-for="(item, index) in detail.outcome.items"
|
||||
:key="index"
|
||||
class="d-flex align-start ga-3 mb-2"
|
||||
>
|
||||
<v-icon
|
||||
color="secondary"
|
||||
:icon="`mdi-numeric-${index + 1}-circle`"
|
||||
size="20"
|
||||
/>
|
||||
<div class="text-body-medium">{{ item }}</div>
|
||||
</div>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
|
||||
<!-- 運動時間建議：對應 doc/運動時間建議.png -->
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-expansion-panels
|
||||
v-model="durationTablePanel"
|
||||
flat
|
||||
variant="accordion"
|
||||
>
|
||||
<v-expansion-panel value="duration">
|
||||
<v-expansion-panel-title
|
||||
class="course-table-panel-title text-title-medium font-weight-bold text-primary"
|
||||
>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
icon="mdi-timer-outline"
|
||||
size="20"
|
||||
/>
|
||||
運動時間建議
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-expansion-panel-text class="pa-0">
|
||||
<v-table class="course-table" density="comfortable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="day-col bg-primary text-white text-center">
|
||||
星期
|
||||
</th>
|
||||
<th class="bg-primary text-white text-center">
|
||||
運動內容
|
||||
</th>
|
||||
<th class="time-col bg-primary text-white text-center">
|
||||
時間
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="row in detail.duration"
|
||||
:key="row.day"
|
||||
:class="{ 'bg-teal-lighten-5': row.day === todayDay }"
|
||||
>
|
||||
<td
|
||||
class="day-col text-center font-weight-bold text-primary"
|
||||
>
|
||||
{{ DAY_NAMES[row.day - 1] }}
|
||||
</td>
|
||||
|
||||
<td class="text-body-medium text-wrap">
|
||||
{{ row.content }}
|
||||
</td>
|
||||
|
||||
<td class="time-col text-center text-body-medium">
|
||||
{{ row.minutes === null ? "—" : `${row.minutes} 分` }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-expansion-panels
|
||||
v-model="scheduleTablePanel"
|
||||
flat
|
||||
variant="accordion"
|
||||
>
|
||||
<v-expansion-panel value="schedule">
|
||||
<v-expansion-panel-title
|
||||
class="course-table-panel-title text-title-medium font-weight-bold text-primary"
|
||||
>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
color="primary"
|
||||
icon="mdi-timer-outline"
|
||||
size="20"
|
||||
/>
|
||||
運動課表
|
||||
</v-expansion-panel-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-expansion-panel-text class="pa-0">
|
||||
<v-table class="course-table" density="comfortable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="day-col bg-primary text-white text-center">
|
||||
星期
|
||||
</th>
|
||||
|
||||
<th
|
||||
v-for="slot in visibleSlots"
|
||||
:key="slot.key"
|
||||
class="text-white text-center"
|
||||
:class="slot.headerClass"
|
||||
>
|
||||
<v-icon class="mr-1" :icon="slot.icon" size="16" />
|
||||
{{ slot.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="row in store.courseList"
|
||||
:key="row.day"
|
||||
:class="{ 'bg-teal-lighten-5': row.day === todayDay }"
|
||||
>
|
||||
<td
|
||||
class="day-col text-center font-weight-bold text-primary"
|
||||
>
|
||||
{{ DAY_NAMES[row.day - 1] }}
|
||||
</td>
|
||||
|
||||
<td
|
||||
v-for="slot in visibleSlots"
|
||||
:key="slot.key"
|
||||
class="slot-cell text-body-medium text-wrap"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row align-center ga-1 ga-md-3"
|
||||
>
|
||||
<v-avatar
|
||||
class="slot-avatar flex-shrink-0"
|
||||
rounded="lg"
|
||||
>
|
||||
<v-img
|
||||
:alt="`${DAY_NAMES[row.day - 1]}${slot.label}課表插圖`"
|
||||
:src="scheduleCardImage(row.day, slot.key)"
|
||||
/>
|
||||
</v-avatar>
|
||||
|
||||
<span>{{ row[slot.key] }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
|
||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||
<v-img
|
||||
:alt="`${store.groupMeta.label}課表示意圖`"
|
||||
:src="groupIllustration"
|
||||
/>
|
||||
</v-card>
|
||||
</template>
|
||||
<v-skeleton-loader v-else class="rounded-xl" type="article" />
|
||||
</template>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user