feat: qr code

app/citizen-frontend/src/pages/index.vue

@@ -180,23 +180,24 @@
 
       <template v-else>
         <div class="text-center mb-6">
-          <BrandAvatar class="elevation-3 mb-4" :icon-size="42" :size="72" />
-
-          <p class="text-body-medium text-grey-darken-1 mb-0">
-            不登入也可以先完成線上健康自評，<br />登入後可預約普測與查看量測紀錄。
-          </p>
+          <BrandAvatar class="elevation-2" :icon-size="42" :size="72" />
         </div>
 
-        <v-card class="rounded-xl elevation-2 mb-4" color="surface">
+        <v-card class="rounded-xl elevation-2 mb-12 py-4" color="surface">
           <v-card-text>
             <div class="d-flex align-center mb-4">
-              <v-avatar class="mr-3 text-white" color="accent" size="36">
+              <v-avatar class="mr-4 text-white" color="accent" size="36">
                 <v-icon icon="mdi-clipboard-text-outline" />
               </v-avatar>
 
               <div class="text-left">
-                <div class="text-title-medium font-weight-bold text-primary">先做線上健康自評</div>
-                <div class="text-title-small text-grey">約 3 分鐘完成，取得初步健康風險分級。</div>
+                <div class="text-title-medium font-weight-bold text-primary">
+                  無須登入，先做線上健康自評
+                </div>
+
+                <div class="text-title-small text-grey mt-2">
+                  約 3 分鐘完成，取得初步健康風險分級。
+                </div>
               </div>
             </div>
 
@@ -231,9 +232,7 @@
             <div>
               <div class="font-weight-bold text-grey-darken-4">登入後可使用完整功能</div>
 
-              <div class="text-title-small text-grey">
-                普測預約、現場報到、量測紀錄與運動處方需要登入狀態。
-              </div>
+              <div class="text-title-small text-grey">普測預約、現場報到、量測紀錄與運動處方。</div>
             </div>
           </v-card-text>
         </v-card>