AMAZEHOME/cook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles: optimize faq styles

Browse Source
This commit is contained in:
YunYouJun
2023-07-30 14:14:21 +08:00
parent 358714e126
commit 033d6adbe6
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/FAQItem.vue
View File

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

2
components/FeedbackActions.vue
View File

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

12
pages/help.vue
View File

@@ -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>精准匹配：展示所有含当前选中所有食材的菜谱</li>
<li>生存模式：展示当前选中食材即可制作的所有菜谱</li>
<li><b>模糊匹配</b>：展示所有含当前选中任意食材的菜谱</li>
<li><b>精准匹配</b>：展示所有含当前选中所有食材的菜谱</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="页面无法点击、资源加载失败？">