styles: optimize faq styles

components/FAQItem.vue

@@ -9,16 +9,16 @@ defineProps<{
 <template>
   <Disclosure v-slot="{ open }" as="div" class="mt-2">
     <DisclosureButton
-      class="w-full flex justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
+      class="w-full flex justify-between rounded-lg bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75"
     >
       <span>{{ title }}</span>
       <div
         i-ri-arrow-drop-up-line
         :class="open ? 'rotate-180 transform' : ''"
-        class="h-5 w-5 text-purple-500"
+        class="h-5 w-5 text-blue-500"
       />
     </DisclosureButton>
-    <DisclosurePanel class="px-2 pb-2 pt-4 text-sm text-gray-500">
+    <DisclosurePanel class="px-2 pb-2 pt-4 text-sm">
       <slot />
     </DisclosurePanel>
   </Disclosure>

components/FeedbackActions.vue

@@ -26,6 +26,6 @@ import { links } from '~/constants'
 
 <style>
 .feedback-button {
-  @apply border-none inline-flex justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
+  @apply border-none inline-flex justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600;
 }
 </style>

pages/help.vue

@@ -8,12 +8,12 @@
 
     <FeedbackActions />
 
-    <div class="mx-auto max-w-md w-full rounded-2xl bg-white p-2" text-left>
+    <div class="mx-auto max-w-md w-full rounded-2xl p-2" text-left>
       <FAQItem title="什么是模式？">
         <ul>
-          <li>模糊匹配：展示所有含当前选中任意食材的菜谱</li>
+          <li><b>模糊匹配</b>：展示所有含当前选中任意食材的菜谱</li>
-          <li>精准匹配：展示所有含当前选中所有食材的菜谱</li>
+          <li><b>精准匹配</b>：展示所有含当前选中所有食材的菜谱</li>
-          <li>生存模式：展示当前选中食材即可制作的所有菜谱</li>
+          <li><b>生存模式</b>：展示当前选中食材即可制作的所有菜谱</li>
         </ul>
       </FAQItem>
 
@@ -31,9 +31,9 @@
       <FAQItem title="是否有 APP?">
         <b>暂时没有开发 APP 的计划。</b>
         <br>
-        但我们正在优化 PWA 的体验，以便您可以直接将本站添加到桌面，并享受类似 APP 的体验。
+        但我们正在优化 <b>PWA</b> 的体验，以便您可以直接将本站添加到桌面，并享受<b>类似 APP 的体验</b>。
         <br>
-        你可以使用浏览器打开，点击上方的「安装到桌面」或在菜单中点击「添加到主屏幕」。
+        你可以使用浏览器打开，点击上方的<b>「安装到桌面」</b>或在菜单中点击<b>「添加到主屏幕」</b>。
       </FAQItem>
 
       <FAQItem title="页面无法点击、资源加载失败？">