update: motto style

src/router/index.js

@@ -71,7 +71,7 @@ const routes = [
     meta: {
       keepAlive: true,
       showInNav: true,
-      navName: '每日名言佳句'
+      navName: '每日金句'
     }
   }
 ];

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>
-      <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
+      <div class="ts-box ts-content is-center-aligned">
-      <p class="ts-text">Powered By Cloudflare Workers AI</p>
+        <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
-      <VueHcaptcha
+        <div class="ts-header is-secondary is-center-aligned">Powered By Cloudflare Workers AI</div>
-        ref="hcaptchaRef"
+        <VueHcaptcha
-        :sitekey="$hcaptchaSitekey"
+          ref="hcaptchaRef"
-        @verify="handleHcaptchaVerify"
+          :sitekey="$hcaptchaSitekey"
-        @expired="handleHcaptchaExpired"
+          @verify="handleHcaptchaVerify"
-        @reset="handleHcaptchaExpired"
+          @expired="handleHcaptchaExpired"
-      />
+          @reset="handleHcaptchaExpired"
-      <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
+        />
-      <p class="ts-text">每日金句:</p>
+        <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
-      <div class="ts-loading" v-if="mottoLoading"></div>
+      </div>
-      <p class="ts-text">{{ motto }}</p>
+      <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>