skytek/sports-empower-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling: appointment

Browse Source
This commit is contained in:
skytek_xinliang
2026-06-23 11:20:53 +08:00
parent e58e9d40d7
commit c9c308d9cf
1 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/pages/appointment.vue
+16 -18
View File
@@ -10,7 +10,7 @@
</v-card>
<!-- 活動分類選擇 -->
<v-tabs v-model="filterTab" class="mb-4 bg-white rounded-lg elevation-1" color="primary" grow>
<v-tabs v-model="filterTab" class="mb-4 bg-white rounded-xl elevation-1" color="primary" grow>
<v-tab value="all">全部活動</v-tab>
<v-tab value="registered">我的報名</v-tab>
</v-tabs>
@@ -18,22 +18,22 @@
<!-- 活動列表 -->
<div v-if="filteredAppointments.length === 0" class="text-center py-12">
<v-icon class="mb-3" color="grey-lighten-1" icon="mdi-calendar-blank" size="64" />
<div class="text-subtitle-1 text-grey font-weight-bold">目前沒有相關活動</div>
<div class="text-title-small text-grey font-weight-bold">目前沒有相關活動</div>
</div>
<v-row v-else>
<v-col v-for="apt in filteredAppointments" :key="apt.id" class="mb-4" cols="12">
<v-card class="rounded-xl elevation-3 border-accent-light" color="surface">
<v-card class="rounded-xl elevation-3" color="surface">
<!-- 卡片頂部狀態條 -->
<v-card-item class="bg-teal-lighten-5 py-2">
<v-card-item class="bg-teal-lighten-5 py-4">
<div class="d-flex justify-space-between align-center">
<span class="text-caption font-weight-bold text-primary">
<span class="text-title-medium font-weight-bold text-primary">
<v-icon class="mr-1" icon="mdi-office-building" size="14" />
{{ apt.organizer }}
</span>
<v-chip
class="font-weight-black text-caption"
class="font-weight-black text-title-small"
:color="getStatusColor(apt.status)"
size="small"
variant="flat"
@@ -43,27 +43,27 @@
</div>
</v-card-item>
<v-card-text class="pt-4 px-4 pb-2">
<h2 class="text-subtitle-1 font-weight-bold text-grey-darken-4 mb-3">
<v-card-text>
<h2 class="text-title-large font-weight-bold text-grey-darken-4 mb-4">
{{ apt.title }}
</h2>
<div class="d-flex align-start mb-2">
<v-icon class="mr-2 mt-0.5" color="primary" icon="mdi-calendar-clock" size="18" />
<v-icon class="mr-2" color="primary" icon="mdi-calendar-clock" size="18" />
<div class="text-body-2 text-grey-darken-3">
<span class="font-weight-bold">{{ apt.date }}</span>
<span class="ml-2 text-grey">{{ apt.time }}</span>
<span class="ml-4 text-grey-darken-1">{{ apt.time }}</span>
</div>
</div>
<div class="d-flex align-start mb-2">
<!-- <div class="d-flex align-start mb-2">
<v-icon class="mr-2 mt-0.5" color="primary" icon="mdi-map-marker" size="18" />
<div class="text-body-2 text-grey-darken-3">{{ apt.location }}</div>
</div>
</div> -->
<div class="d-flex align-start mb-3">
<v-icon class="mr-2 mt-0.5" color="primary" icon="mdi-human-capacity" size="18" />
<v-icon class="mr-2" color="primary" icon="mdi-human-queue" size="18" />
<div class="text-body-2 text-grey-darken-3">
剩餘名額：<span
@@ -77,7 +77,7 @@
<v-divider class="my-2" />
<!-- 量測項目標籤 -->
<div class="mb-2">
<!-- <div class="mb-2">
<div class="text-caption font-weight-bold text-grey mb-1">量測項目：</div>
<div class="d-flex flex-wrap gap-1">
@@ -92,7 +92,7 @@
{{ item }}
</v-chip>
</div>
</div>
</div> -->
</v-card-text>
<!-- 卡片按鈕操作 -->
@@ -119,7 +119,6 @@
block
class="rounded-lg text-white font-weight-bold"
color="primary"
prepend-icon="mdi-qrcode"
variant="flat"
@click="showCheckinQRCode(apt)"
>
@@ -191,7 +190,7 @@
variant="tonal"
@click="simulateOnSiteCheckin"
>
模擬現場人員掃描 (立刻報到)
已由現場人員掃描報到
</v-btn>
</v-card-text>
@@ -292,5 +291,4 @@ function simulateOnSiteCheckin () {
height: 244px;
overflow: hidden;
}
</style>