d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

group-category-button-icon

Browse Source
This commit is contained in:
tangly1024.com
2023-07-14 17:12:56 +08:00
parent 7b526ec6e1
commit 4bcc7f0b0c
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
themes/heo/components/Hero.js
View File

@@ -108,30 +108,40 @@ function TagsGroupBar() {
}
/**
* 英雄区左下角3个分类
* 英雄区左下角3个分类按钮
* @returns
*/
function GroupMenu() {
return (
<div className="h-[165px] select-none xl:h-20 flex flex-col w-48 justify-between xl:space-y-0 xl:flex-row xl:w-full xl:flex-nowrap xl:space-x-3">
<Link href="/tag/必看精选" className="bg-blue-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
<div className="font-bold text-lg pl-5 relative">
<Link href="/tag/必看精选" className="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
<div className="font-bold text-lg pl-5 relative -mt-2">
必看精选
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
</div>
<div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
<i class="fa-solid fa-star text-4xl"></i>
</div>
</Link>
<Link href="/tag/热门文章" className="bg-orange-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
<div className="font-bold text-lg pl-5 relative">
<Link href="/tag/热门文章" className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
<div className="font-bold text-lg pl-5 relative -mt-2">
热门文章
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
</div>
<div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
<i class="fa-solid fa-fire-flame-curved text-4xl"></i>
</div>
</Link>
{/* 第三个标签在小屏上不显示 */}
<Link href="/tag/实用教程" className="bg-emerald-500 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
<div className="font-bold text-lg pl-5 relative">
<Link href="/tag/实用教程" className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
<div className="font-bold text-lg pl-5 relative -mt-2">
实用教程
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
</div>
<div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
<i class="fa-solid fa-book-bookmark text-4xl "></i>
</div>
</Link>
</div>
)
@@ -176,8 +186,8 @@ function TodayCard({ cRef }) {
const [isCoverUp, setIsCoverUp] = useState(true)
/**
* 外部可以调用此方法
*/
* 外部可以调用此方法
*/
useImperativeHandle(cRef, () => {
return {
coverUp: () => {
@@ -187,18 +197,18 @@ function TodayCard({ cRef }) {
})
/**
* 点击更多
* @param {*} e
*/
* 点击更多
* @param {*} e
*/
function handleClickMore(e) {
e.stopPropagation()
setIsCoverUp(false)
}
/**
* 点击卡片跳转的链接
* @param {*} e
*/
* 点击卡片跳转的链接
* @param {*} e
*/
function handleCardClick(e) {
router.push('https://tangly1024.com')
}
@@ -210,7 +220,7 @@ function TodayCard({ cRef }) {
<div className='text-xs font-light'>新版上线</div>
<div className='text-3xl font-bold'>NotionNext4.0 轻松定制主题</div>
</div>
<div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} cursor-zoom-in flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
<div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
<PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
<div id='more' className='select-none'>更多推荐</div>
</div>