From 9ac3339557ff0dfc81d33f95244dfa8bccdc5f59 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Tue, 15 Apr 2025 15:28:00 +0800
Subject: [PATCH] update: motto style

---
 src/router/index.js          |  2 +-
 src/views/DailyMottoView.vue | 34 ++++++++++++++++++++--------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 9b1f30a..5611dd4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -71,7 +71,7 @@ const routes = [
     meta: {
       keepAlive: true,
       showInNav: true,
-      navName: '每日名言佳句'
+      navName: '每日金句'
     }
   }
 ];
diff --git a/src/views/DailyMottoView.vue b/src/views/DailyMottoView.vue
index 404ff18..ac0ef62 100644
--- a/src/views/DailyMottoView.vue
+++ b/src/views/DailyMottoView.vue
@@ -38,20 +38,26 @@ const generateMotto = async () => {
 
 <template>
   <div class="ts-app-center">
-    <div class="ts-box ts-content is-center-aligned">
-      <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
-      <p class="ts-text">Powered By Cloudflare Workers AI</p>
-      <VueHcaptcha
-        ref="hcaptchaRef"
-        :sitekey="$hcaptchaSitekey"
-        @verify="handleHcaptchaVerify"
-        @expired="handleHcaptchaExpired"
-        @reset="handleHcaptchaExpired"
-      />
-      <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
-      <p class="ts-text">每日金句:</p>
-      <div class="ts-loading" v-if="mottoLoading"></div>
-      <p class="ts-text">{{ motto }}</p>
+    <div>
+      <div class="ts-box ts-content is-center-aligned">
+        <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
+        <div class="ts-header is-secondary is-center-aligned">Powered By Cloudflare Workers AI</div>
+        <VueHcaptcha
+          ref="hcaptchaRef"
+          :sitekey="$hcaptchaSitekey"
+          @verify="handleHcaptchaVerify"
+          @expired="handleHcaptchaExpired"
+          @reset="handleHcaptchaExpired"
+        />
+        <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
+      </div>
+      <div class="ts-content is-center-aligned">
+        <p class="ts-text">每日金句:</p>
+        <div class="ts-loading" v-if="mottoLoading"></div>
+        <div class="ts-quote" v-if="motto">
+          <p class="ts-text">{{ motto }}</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>