style: block order
This commit is contained in:
skytek_xinliang
@@ -88,93 +88,6 @@
|
||||
|
||||
<!-- 一週課表：仿 doc/課程表示意 的表格版型，星期為列、時段為欄 -->
|
||||
<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 -->
|
||||
<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">
|
||||
@@ -244,6 +157,93 @@
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</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>
|
||||
</Layout>
|
||||
|
||||
@@ -14,17 +14,17 @@ import 'vuetify/styles'
|
||||
const HPTheme: ThemeDefinition = {
|
||||
dark: false,
|
||||
colors: {
|
||||
'background': '#def0de', // 頁面背景
|
||||
'surface': '#FFFFFF', // 卡片與白底區塊
|
||||
'primary': '#18a442', // 主要品牌色
|
||||
'primary-darken-1': '#008828',
|
||||
'secondary': '#dc5349', // CTA 按鈕
|
||||
background: '#F0F9F6', // 頁面背景
|
||||
surface: '#FFFFFF', // 卡片與白底區塊
|
||||
primary: '#1D7063', // 主要品牌色
|
||||
'primary-darken-1': '#145248',
|
||||
secondary: '#dc5349', // CTA 按鈕
|
||||
'secondary-darken-1': '#ab4c3d',
|
||||
'accent': '#892894', // 標籤與強調
|
||||
'error': '#B00020',
|
||||
'info': '#2196F3',
|
||||
'success': '#4CAF50',
|
||||
'warning': '#FB8C00',
|
||||
accent: '#47C2A6', // 標籤與強調
|
||||
error: '#B00020',
|
||||
info: '#2196F3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FB8C00',
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user