d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-03 23:16:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

搜索功能手机端页面自适应

Browse Source
This commit is contained in:
Bhwa233
2024-03-05 17:59:33 +08:00
parent fd08ce9bb8
commit e95b1581fe
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/AlgoliaSearchModal.js
View File

@@ -177,12 +177,12 @@ export default function AlgoliaSearchModal({ cRef }) {
<div <div
id="search-wrapper" id="search-wrapper"
className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none' className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'
} z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`} } z-30 fixed h-screen w-screen left-0 top-0 sm:mt-12 flex items-start justify-center mt-0`}
> >
{/* 模态框 */} {/* 模态框 */}
<div <div
className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10' className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
} flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `} } flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray h-full dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}
> >
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="text-2xl text-blue-600 dark:text-yellow-600 font-bold">搜索</div> <div className="text-2xl text-blue-600 dark:text-yellow-600 font-bold">搜索</div>
@@ -209,14 +209,14 @@ export default function AlgoliaSearchModal({ cRef }) {
{ {
searchResults.length === 0 && keyword && !isLoading && ( searchResults.length === 0 && keyword && !isLoading && (
<div> <div>
<p className=" text-slate-600 text-center my-4 text-base"> 无法找到相关结果 <p className=" text-slate-600 text-center my-4 text-base"> 无法找到相关结果
<span <span
className='font-semibold' className='font-semibold'
>&quot;{keyword}&quot;</span></p> >&quot;{keyword}&quot;</span></p>
</div> </div>
) )
} }
<ul> <ul className='flex-1 overflow-auto'>
{searchResults.map((result, index) => ( {searchResults.map((result, index) => (
<li key={result.objectID} <li key={result.objectID}
onMouseEnter={() => setActiveIndex(index)} onMouseEnter={() => setActiveIndex(index)}
@@ -233,7 +233,7 @@ export default function AlgoliaSearchModal({ cRef }) {
))} ))}
</ul> </ul>
<Pagination totalPage={totalPage} page={page} switchPage={switchPage} /> <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
<div className='flex items-center justify-between mt-2 text-sm dark:text-gray-300'> <div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
<div> <div>
{totalHit > 0 && ( {totalHit > 0 && (
<p> <p>