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

heo mobile hero style

Browse Source
This commit is contained in:
tangly1024
2023-07-30 13:39:12 +08:00
parent 595a0bdee4
commit a9be55f4c1
2 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ const Hero = props => {
return (
<div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
<div id="hero" style={{ zIndex: 1 }} className={'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3'} >
<div id="hero" style={{ zIndex: 1 }} className={'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex xl:space-x-3 relative'} >
{/* 左侧banner组 */}
<BannerGroup {...props} />
@@ -116,22 +116,22 @@ function TagsGroupBar() {
*/
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">
<div className="h-[165px] select-none xl:h-20 flex flex-col justify-between xl:space-y-0 xl:flex-row w-28 lg:w-48 xl:w-full xl:flex-nowrap xl:space-x-3">
<Link href={CONFIG.HERO_CATEGORY_1?.url} 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">
<div className="font-bold lg:text-lg pl-5 relative -mt-2">
{CONFIG.HERO_CATEGORY_1?.title}
<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'>
<div className='hidden lg:block 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 className="fa-solid fa-star text-4xl"></i>
</div>
</Link>
<Link href={CONFIG.HERO_CATEGORY_2?.url} 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">
<div className="font-bold lg:text-lg pl-5 relative -mt-2">
{CONFIG.HERO_CATEGORY_2?.title}
<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'>
<div className='hidden lg:block 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 className="fa-solid fa-fire-flame-curved text-4xl"></i>
</div>
</Link>
@@ -176,7 +176,6 @@ function TopGroup(props) {
}
}
}
console.log('top', topPosts)
return (
<div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
{/* 置顶推荐文章 */}

10
themes/heo/index.js
View File

@@ -93,7 +93,7 @@ const LayoutIndex = (props) => {
const slotRight = <SideRight {...props} />
return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
<div id='post-outer-wrapper' className='px-5 lg:px-0'>
<div id='post-outer-wrapper' className='px-5 md:px-0'>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
@@ -115,7 +115,7 @@ const LayoutPostList = (props) => {
</header>
return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
<div id='post-outer-wrapper' className='px-5 lg:px-0'>
<div id='post-outer-wrapper' className='px-5 md:px-0'>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
@@ -155,7 +155,7 @@ const LayoutSearch = props => {
}, [])
return (
<LayoutBase {...props} currentSearch={currentSearch} headerSlot={headerSlot}>
<div id='post-outer-wrapper' className='px-5 lg:px-0'>
<div id='post-outer-wrapper' className='px-5 md:px-0'>
{!currentSearch
? <SearchNav {...props} />
: <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />} </div>}
@@ -348,7 +348,7 @@ const LayoutCategoryIndex = props => {
return (
<LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
<div id='category-outer-wrapper' className='px-5 lg:px-0'>
<div id='category-outer-wrapper' className='px-5 md:px-0'>
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.CATEGORY}
</div>
@@ -386,7 +386,7 @@ const LayoutTagIndex = props => {
</header>
return (
<LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
<div id='tag-outer-wrapper' className='px-5 lg:px-0'>
<div id='tag-outer-wrapper' className='px-5 md:px-0'>
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.TAGS}
</div>