feature: 目录样式

This commit is contained in:
tangly1024
2022-01-13 14:45:11 +08:00
parent c98538e56f
commit 9112f16172
3 changed files with 9 additions and 9 deletions

View File

@@ -33,7 +33,7 @@ const Tabs = ({ children }) => {
{<div className='hidden lg:block mb-5 bg-white dark:bg-gray-800 duration-200'>
<ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
{children.map((item, index) => {
return <li key={index} className={currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer'} onClick={() => { tabClickHandle(index) }}>
return <li key={index} className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '} onClick={() => { tabClickHandle(index) }}>
{item?.key}
</li>
})}

View File

@@ -52,8 +52,8 @@ const Toc = ({ toc }) => {
setActiveSection(currentSectionId)
}, throttleMs))
return <>
<div className='w-full'>
return <div className='px-3'>
<div className='w-full pb-1'>
<Progress/>
</div>
<nav className='font-sans overflow-y-auto scroll-hidden'>
@@ -79,7 +79,7 @@ const Toc = ({ toc }) => {
)
})}
</nav>
</>
</div>
}
export default Toc

View File

@@ -22,17 +22,17 @@ const TocDrawer = ({ post, cRef }) => {
}
const { locale } = useGlobal()
return <>
<div className='fixed top-0 right-0 z-40'>
<div className='fixed top-0 right-0 z-40 '>
{/* 侧边菜单 */}
<div
className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
' shadow-card animate__animated animate__faster max-h-96 ' +
' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto'}>
' shadow-card animate__animated animate__faster max-h-96 ' +
' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto py-2 bg-white dark:bg-gray-600'}>
{post && <>
<div className='text-xl font-bold text-center text-black dark:text-white bg-white dark:bg-gray-600 py-2 px-6'>
<div className='font-bold pb-2 text-center text-black dark:text-white '>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<div className='p-6 dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800'>
<div className='dark:text-gray-400 text-gray-600 dark:bg-gray-800'>
<Toc toc={post.toc}/>
</div>
</>