style: block order
This commit is contained in:
skytek_xinliang
@@ -88,93 +88,6 @@
|
|||||||
|
|
||||||
<!-- 一週課表：仿 doc/課程表示意 的表格版型，星期為列、時段為欄 -->
|
<!-- 一週課表：仿 doc/課程表示意 的表格版型，星期為列、時段為欄 -->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<v-card class="rounded-lg elevation-1 mb-4 overflow-hidden">
|
|
||||||
<v-img :alt="`${store.groupMeta.label}課表示意圖`" :src="groupIllustration" />
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<v-card class="rounded-lg elevation-1 overflow-hidden">
|
|
||||||
<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-card>
|
|
||||||
|
|
||||||
<!-- 運動時間建議：對應 doc/運動時間建議.png -->
|
|
||||||
<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-timer-outline" size="20" />
|
|
||||||
運動時間建議
|
|
||||||
</v-card-title>
|
|
||||||
|
|
||||||
<v-divider />
|
|
||||||
|
|
||||||
<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-card>
|
|
||||||
|
|
||||||
<!-- 課程說明：對應 doc/課程說明.md -->
|
<!-- 課程說明：對應 doc/課程說明.md -->
|
||||||
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
<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-card-title class="text-title-medium font-weight-bold text-primary d-flex align-center">
|
||||||
@@ -244,6 +157,93 @@
|
|||||||
</v-expansion-panel>
|
</v-expansion-panel>
|
||||||
</v-expansion-panels>
|
</v-expansion-panels>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
||||||
|
<!-- 運動時間建議：對應 doc/運動時間建議.png -->
|
||||||
|
<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-timer-outline" size="20" />
|
||||||
|
運動時間建議
|
||||||
|
</v-card-title>
|
||||||
|
|
||||||
|
<v-divider />
|
||||||
|
|
||||||
|
<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-card>
|
||||||
|
|
||||||
|
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||||
|
<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-card>
|
||||||
|
|
||||||
|
<v-card class="rounded-lg elevation-1 mt-4 overflow-hidden">
|
||||||
|
<v-img :alt="`${store.groupMeta.label}課表示意圖`" :src="groupIllustration" />
|
||||||
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -14,17 +14,17 @@ import 'vuetify/styles'
|
|||||||
const HPTheme: ThemeDefinition = {
|
const HPTheme: ThemeDefinition = {
|
||||||
dark: false,
|
dark: false,
|
||||||
colors: {
|
colors: {
|
||||||
'background': '#def0de', // 頁面背景
|
background: '#F0F9F6', // 頁面背景
|
||||||
'surface': '#FFFFFF', // 卡片與白底區塊
|
surface: '#FFFFFF', // 卡片與白底區塊
|
||||||
'primary': '#18a442', // 主要品牌色
|
primary: '#1D7063', // 主要品牌色
|
||||||
'primary-darken-1': '#008828',
|
'primary-darken-1': '#145248',
|
||||||
'secondary': '#dc5349', // CTA 按鈕
|
secondary: '#dc5349', // CTA 按鈕
|
||||||
'secondary-darken-1': '#ab4c3d',
|
'secondary-darken-1': '#ab4c3d',
|
||||||
'accent': '#892894', // 標籤與強調
|
accent: '#47C2A6', // 標籤與強調
|
||||||
'error': '#B00020',
|
error: '#B00020',
|
||||||
'info': '#2196F3',
|
info: '#2196F3',
|
||||||
'success': '#4CAF50',
|
success: '#4CAF50',
|
||||||
'warning': '#FB8C00',
|
warning: '#FB8C00',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user