style: home

app/citizen-frontend/src/components/BrandAvatar.vue

@@ -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

@@ -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">
+          <BrandAvatar class="elevation-3 mb-4" :icon-size="42" :size="72" />
-            <v-icon color="red-accent-1" icon="mdi-heart-pulse" size="42" />
-          </v-avatar>
 
           <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 class="rounded-xl elevation-2 mb-4" color="surface">
-          <v-card-text class="pa-5">
+          <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-title-medium font-weight-bold text-primary">先做線上健康自評</div>
-                <div class="text-caption text-grey">約 3 分鐘完成，取得初步健康風險分級。</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'
@@ -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

@@ -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">
+            <BrandAvatar />
-              <v-icon color="red-accent-1" icon="mdi-heart-pulse" size="48" />
-            </v-avatar>
 
             <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>