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/components/BrandAvatar.vue
+31
View File
@@ -0,0 +1,31 @@
<script setup lang="ts">
withDefaults(defineProps<{
size?: number | string
iconSize?: number | string
}>(), {
size: 80,
iconSize: 48,
})
</script>
<template>
<v-avatar class="brand-avatar-spin" color="primary" :size="size">
<v-icon color="red-accent-1" icon="mdi-heart-pulse" :size="iconSize" />
</v-avatar>
</template>
<style scoped>
.brand-avatar-spin {
animation: brand-avatar-spin 0.9s ease-out both;
}
@keyframes brand-avatar-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
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);
app/citizen-frontend/src/pages/login.vue
+2 -16
View File
@@ -5,9 +5,7 @@
<v-col class="text-center" cols="12" sm="6">
<!-- Logo 與品牌名稱 -->
<v-card class="bg-transparent" variant="flat">
<v-avatar class="logo-spin-on-load" color="primary" size="80">
<v-icon color="red-accent-1" icon="mdi-heart-pulse" size="48" />
</v-avatar>
<BrandAvatar />
<v-card-title class="text-primary font-weight-bold">運動玩轉健康力</v-card-title>
<v-card-subtitle class="text-primary">Taipei Masters Hub</v-card-subtitle>
@@ -110,6 +108,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import BrandAvatar from '@/components/BrandAvatar.vue'
import { useAppStore } from '@/stores/app'
const store = useAppStore()
@@ -141,10 +140,6 @@ function _handleLineLogin () {
</script>
<style scoped>
.logo-spin-on-load {
animation: logo-spin 0.9s ease-out both;
}
.glow-sweep-button {
overflow: hidden;
position: relative;
@@ -181,13 +176,4 @@ function _handleLineLogin () {
}
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>