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

commerce 样式处理

Browse Source
This commit is contained in:
tangly1024.com
2023-11-03 18:54:11 +08:00
parent 8425de5bad
commit 62c7e1c0df
9 changed files with 88 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
themes/commerce/components/ProductCenter.js
View File

@@ -1,5 +1,6 @@
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
import ProductCard from './ProductCard'
/**
* 产品中心
@@ -7,17 +8,19 @@ import Link from 'next/link'
* @returns
*/
export default function ProductCenter(props) {
const { categoryOptions } = props
const { categoryOptions, allNavPages } = props
const posts = allNavPages.slice(0, parseInt(siteConfig('COMMERCE_HOME_POSTS_COUNT', 9)))
return <div className='w-full my-4 mx-4'>
<div className='w-full text-center text-4xl font-bold'>{siteConfig('TEXT_HOME_PRODUCT_CENTER', 'Product Center')}</div>
<div className='w-full text-center text-4xl font-bold'>{siteConfig('COMMERCE_TEXT_CENTER_TITLE', 'Product Center')}</div>
{siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION') && <div className='w-full text-center text-lg my-3 text-gray-500'>{siteConfig('COMMERCE_TEXT_CENTER_DESCRIPTION')}</div>}
<div className='flex'>
<div className='hidden md:block w-72 bg-white p-4 mx-2'>
<div className='hidden md:block w-72 mx-2'>
{/* 分类菜单 */}
<div>
<div className='font-bold mb-4 border-b-2 p-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Center')}</div>
<div className='bg-white p-4'>
<div className='font-bold text-lg mb-4 border-b-2 py-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Categories')}</div>
<nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
{categoryOptions.map(category => {
return (
@@ -35,7 +38,15 @@ export default function ProductCenter(props) {
</div>
</div>
<div className='w-full border'>右侧产品列表</div>
<div className='w-full p-4 mx-2'>
{/* 文章列表 */}
<div className="grid md:grid-cols-3 grid-cols-2 gap-5">
{posts?.map(post => (
<ProductCard index={posts.indexOf(post)} key={post.id} post={post} />
))}
</div>
</div>
</div>
</div>
}