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

style: home

Browse Source
This commit is contained in:
skytek_xinliang
2026-06-23 09:16:49 +08:00
parent bef99de4c0
commit eb952d31cb
4 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/pages/index.vue
+20 -20
View File
@@ -130,7 +130,9 @@
<v-icon color="secondary" icon="mdi-numeric-1-circle" size="24" />
</template>
<v-list-item-title class="font-weight-bold">下肢肌力：坐站起立訓練</v-list-item-title>
<v-list-item-title class="font-weight-bold"
>下肢肌力：坐站起立訓練</v-list-item-title
>
<v-list-item-subtitle class="text-caption mt-1">
每週 2 次，每次 3 組，每組 10-12 次。<br />
@@ -143,7 +145,9 @@
<v-icon color="secondary" icon="mdi-numeric-2-circle" size="24" />
</template>
<v-list-item-title class="font-weight-bold">靜態平衡：扶椅單腳站立</v-list-item-title>
<v-list-item-title class="font-weight-bold"
>靜態平衡：扶椅單腳站立</v-list-item-title
>
<v-list-item-subtitle class="text-caption mt-1">
每週 3 次，左右腳各 30 秒，重複 3 次。<br />
@@ -172,7 +176,8 @@
color="primary"
variant="flat"
@click="prescriptionDialog = false"
>確認關閉</v-btn>
>確認關閉</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
@@ -180,25 +185,23 @@
<template v-else>
<div class="text-center mb-6">
<v-avatar class="elevation-3 mb-4 border-accent-light" color="primary" size="72">
<v-icon color="red-accent-1" icon="mdi-heart-pulse" size="42" />
</v-avatar>
<BrandAvatar class="elevation-3 mb-4" :icon-size="42" :size="72" />
<p class="text-body-medium text-grey-darken-1 mb-0">
不登入也可以先完成線上健康自評，<br />登入後可預約普測與查看量測紀錄。
</p>
</div>
<v-card class="rounded-xl elevation-2 border-accent-light mb-4" color="surface">
<v-card-text class="pa-5">
<v-card class="rounded-xl elevation-2 mb-4" color="surface">
<v-card-text>
<div class="d-flex align-center mb-4">
<v-avatar class="mr-3 text-white" color="secondary" size="48">
<v-avatar class="mr-3 text-white" color="accent" size="36">
<v-icon icon="mdi-clipboard-text-outline" />
</v-avatar>
<div class="text-left">
<div class="text-subtitle-1 font-weight-black text-primary">先做線上健康自評</div>
<div class="text-caption text-grey">約 3 分鐘完成，取得初步健康風險分級。</div>
<div class="text-title-medium font-weight-bold text-primary">先做線上健康自評</div>
<div class="text-title-small text-grey">約 3 分鐘完成，取得初步健康風險分級。</div>
</div>
</div>
@@ -226,14 +229,14 @@
</v-card-text>
</v-card>
<v-card class="rounded-xl elevation-1 border-accent-light" color="surface">
<v-card color="surface" variant="flat">
<v-card-text class="pa-4 d-flex align-center text-left">
<v-icon class="mr-3" color="primary" icon="mdi-lock-outline" size="28" />
<div>
<div class="font-weight-bold text-grey-darken-4">登入後可使用完整功能</div>
<div class="text-caption text-grey">
<div class="text-title-small text-grey">
普測預約、現場報到、量測紀錄與運動處方需要登入狀態。
</div>
</div>
@@ -246,6 +249,7 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import BrandAvatar from '@/components/BrandAvatar.vue'
import HealthRadarChart from '@/components/HealthRadarChart.vue'
import Layout from '@/components/layout/DefaultLayout.vue'
import ModuleRouterCard from '@/components/ModuleRouterCard.vue'
@@ -256,7 +260,7 @@ const prescriptionDialog = ref(false)
const displayedHealthScore = ref(1)
let healthScoreTimer: number | undefined
function animateHealthScore (targetScore: number) {
function animateHealthScore(targetScore: number) {
if (healthScoreTimer !== undefined) {
window.clearInterval(healthScoreTimer)
}
@@ -294,9 +298,9 @@ onBeforeUnmount(() => {
watch(
() => store.healthScore,
score => {
(score) => {
animateHealthScore(score)
},
}
)
const todayTimeString = computed(() => {
@@ -395,10 +399,6 @@ const currentWeeklyPrescription = computed(() => {
color: rgba(255, 255, 255, 0.8);
}
.border-accent-light {
border: 1px solid rgba(71, 194, 166, 0.2) !important;
}
.transition-card {
transition: all 0.25s ease;
border: 1px solid rgba(0, 0, 0, 0.08);