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-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="all">全部活動</v-tab>
<v-tab value="registered">我的報名</v-tab> <v-tab value="registered">我的報名</v-tab>
</v-tabs> </v-tabs>
@@ -18,22 +18,22 @@
<!-- 活動列表 --> <!-- 活動列表 -->
<div v-if="filteredAppointments.length === 0" class="text-center py-12"> <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" /> <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> </div>
<v-row v-else> <v-row v-else>
<v-col v-for="apt in filteredAppointments" :key="apt.id" class="mb-4" cols="12"> <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"> <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" /> <v-icon class="mr-1" icon="mdi-office-building" size="14" />
{{ apt.organizer }} {{ apt.organizer }}
</span> </span>
<v-chip <v-chip
class="font-weight-black text-caption" class="font-weight-black text-title-small"
:color="getStatusColor(apt.status)" :color="getStatusColor(apt.status)"
size="small" size="small"
variant="flat" variant="flat"
@@ -43,27 +43,27 @@
</div> </div>
</v-card-item> </v-card-item>
<v-card-text class="pt-4 px-4 pb-2"> <v-card-text>
<h2 class="text-subtitle-1 font-weight-bold text-grey-darken-4 mb-3"> <h2 class="text-title-large font-weight-bold text-grey-darken-4 mb-4">
{{ apt.title }} {{ apt.title }}
</h2> </h2>
<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-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"> <div class="text-body-2 text-grey-darken-3">
<span class="font-weight-bold">{{ apt.date }}</span> <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> </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" /> <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 class="text-body-2 text-grey-darken-3">{{ apt.location }}</div>
</div> </div> -->
<div class="d-flex align-start mb-3"> <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"> <div class="text-body-2 text-grey-darken-3">
剩餘名額：<span 剩餘名額：<span
@@ -77,7 +77,7 @@
<v-divider class="my-2" /> <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="text-caption font-weight-bold text-grey mb-1">量測項目：</div>
<div class="d-flex flex-wrap gap-1"> <div class="d-flex flex-wrap gap-1">
@@ -92,7 +92,7 @@
{{ item }} {{ item }}
</v-chip> </v-chip>
</div> </div>
</div> </div> -->
</v-card-text> </v-card-text>
<!-- 卡片按鈕操作 --> <!-- 卡片按鈕操作 -->
@@ -119,7 +119,6 @@
block block
class="rounded-lg text-white font-weight-bold" class="rounded-lg text-white font-weight-bold"
color="primary" color="primary"
prepend-icon="mdi-qrcode"
variant="flat" variant="flat"
@click="showCheckinQRCode(apt)" @click="showCheckinQRCode(apt)"
> >
@@ -191,7 +190,7 @@
variant="tonal" variant="tonal"
@click="simulateOnSiteCheckin" @click="simulateOnSiteCheckin"
> >
模擬現場人員掃描 (立刻報到) 已由現場人員掃描報到
</v-btn> </v-btn>
</v-card-text> </v-card-text>
@@ -292,5 +291,4 @@ function simulateOnSiteCheckin () {
height: 244px; height: 244px;
overflow: hidden; overflow: hidden;
} }
</style> </style>