mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-07 07:26:46 +00:00
@@ -66,7 +66,7 @@ const Hero = props => {
|
|||||||
<div className='text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full '>
|
<div className='text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full '>
|
||||||
{/* 站点标题 */}
|
{/* 站点标题 */}
|
||||||
<div className='font-black text-4xl md:text-5xl shadow-text'>
|
<div className='font-black text-4xl md:text-5xl shadow-text'>
|
||||||
{siteConfig('TITLE')}
|
{siteInfo?.title || siteConfig('TITLE')}
|
||||||
</div>
|
</div>
|
||||||
{/* 站点欢迎语 */}
|
{/* 站点欢迎语 */}
|
||||||
<div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
|
<div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
|
||||||
|
|||||||
@@ -1,11 +1,20 @@
|
|||||||
import { siteConfig } from '@/lib/config'
|
import { siteConfig } from '@/lib/config'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
/**
|
||||||
|
* Logo
|
||||||
|
* 实际值支持文字
|
||||||
|
* @param {*} props
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
const Logo = props => {
|
const Logo = props => {
|
||||||
|
const { siteInfo } = props
|
||||||
return (
|
return (
|
||||||
<Link href='/' passHref legacyBehavior>
|
<Link href='/' passHref legacyBehavior>
|
||||||
<div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
|
<div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
|
||||||
<div className='font-medium text-lg p-1.5 rounded dark:border-white dark:text-white menu-link transform duration-200'> {siteConfig('TITLE') }</div>
|
<div className='font-medium text-lg p-1.5 rounded dark:border-white dark:text-white menu-link transform duration-200'>
|
||||||
|
{' '}
|
||||||
|
{siteInfo?.title || siteConfig('TITLE')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -29,13 +29,13 @@ export const MenuItemCollapse = props => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray'
|
className='w-full px-8 py-3 dark:hover:bg-indigo-500 hover:bg-indigo-500 hover:text-white text-left dark:bg-hexo-black-gray'
|
||||||
onClick={toggleShow}>
|
onClick={toggleShow}>
|
||||||
{!hasSubMenu && (
|
{!hasSubMenu && (
|
||||||
<Link
|
<Link
|
||||||
href={link?.to}
|
href={link?.to}
|
||||||
target={link?.target}
|
target={link?.target}
|
||||||
className='font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
|
className=' font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
|
||||||
<span className=' transition-all items-center duration-200'>
|
<span className=' transition-all items-center duration-200'>
|
||||||
{link?.icon && <i className={link.icon + ' mr-4'} />}
|
{link?.icon && <i className={link.icon + ' mr-4'} />}
|
||||||
{link?.name}
|
{link?.name}
|
||||||
@@ -63,7 +63,7 @@ export const MenuItemCollapse = props => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
|
className='dark:hover:bg-indigo-500 hover:bg-indigo-500 hover:text-white dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 tracking-widest transition-all duration-200 py-3 pr-6'>
|
||||||
<Link href={sLink.to} target={link?.target}>
|
<Link href={sLink.to} target={link?.target}>
|
||||||
<span className='text-sm ml-4 whitespace-nowrap'>
|
<span className='text-sm ml-4 whitespace-nowrap'>
|
||||||
{link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
|
{link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
/**
|
||||||
|
* 支持二级展开的菜单
|
||||||
|
* @param {*} param0
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
export const MenuItemDrop = ({ link }) => {
|
export const MenuItemDrop = ({ link }) => {
|
||||||
const [show, changeShow] = useState(false)
|
const [show, changeShow] = useState(false)
|
||||||
const hasSubMenu = link?.subMenus?.length > 0
|
const hasSubMenu = link?.subMenus?.length > 0
|
||||||
@@ -25,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
|
|||||||
|
|
||||||
{hasSubMenu && (
|
{hasSubMenu && (
|
||||||
<>
|
<>
|
||||||
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
|
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
|
||||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||||
<i
|
<i
|
||||||
className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
|
className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
|
||||||
@@ -42,7 +46,7 @@ export const MenuItemDrop = ({ link }) => {
|
|||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className='cursor-pointer hover:bg-indigo-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
|
className='cursor-pointer hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
|
||||||
<Link href={sLink.to} target={link?.target}>
|
<Link href={sLink.to} target={link?.target}>
|
||||||
<span className='text-sm text-nowrap font-extralight'>
|
<span className='text-sm text-nowrap font-extralight'>
|
||||||
{link?.icon && <i className={sLink?.icon}> </i>}
|
{link?.icon && <i className={sLink?.icon}> </i>}
|
||||||
|
|||||||
@@ -1,17 +1,41 @@
|
|||||||
import { useGlobal } from '@/lib/global'
|
|
||||||
import { siteConfig } from '@/lib/config'
|
import { siteConfig } from '@/lib/config'
|
||||||
import { MenuItemCollapse } from './MenuItemCollapse'
|
import { useGlobal } from '@/lib/global'
|
||||||
import CONFIG from '../config'
|
import CONFIG from '../config'
|
||||||
|
import { MenuItemCollapse } from './MenuItemCollapse'
|
||||||
export const MenuListSide = (props) => {
|
/**
|
||||||
|
* 侧拉抽屉菜单
|
||||||
|
* @param {*} props
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const MenuListSide = props => {
|
||||||
const { customNav, customMenu } = props
|
const { customNav, customMenu } = props
|
||||||
const { locale } = useGlobal()
|
const { locale } = useGlobal()
|
||||||
|
|
||||||
let links = [
|
let links = [
|
||||||
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) },
|
{
|
||||||
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
|
icon: 'fas fa-archive',
|
||||||
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG) },
|
name: locale.NAV.ARCHIVE,
|
||||||
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEXO_MENU_TAG', null, CONFIG) }
|
to: '/archive',
|
||||||
|
show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-search',
|
||||||
|
name: locale.NAV.SEARCH,
|
||||||
|
to: '/search',
|
||||||
|
show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-folder',
|
||||||
|
name: locale.COMMON.CATEGORY,
|
||||||
|
to: '/category',
|
||||||
|
show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-tag',
|
||||||
|
name: locale.COMMON.TAGS,
|
||||||
|
to: '/tag',
|
||||||
|
show: siteConfig('HEXO_MENU_TAG', null, CONFIG)
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
if (customNav) {
|
if (customNav) {
|
||||||
@@ -34,8 +58,10 @@ export const MenuListSide = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav>
|
<nav>
|
||||||
{links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
|
{links?.map((link, index) => (
|
||||||
</nav>
|
<MenuItemCollapse key={index} link={link} />
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { siteConfig } from '@/lib/config'
|
|
||||||
import LazyImage from '@/components/LazyImage'
|
import LazyImage from '@/components/LazyImage'
|
||||||
|
import { siteConfig } from '@/lib/config'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import MenuGroupCard from './MenuGroupCard'
|
import MenuGroupCard from './MenuGroupCard'
|
||||||
import { MenuListSide } from './MenuListSide'
|
import { MenuListSide } from './MenuListSide'
|
||||||
@@ -11,22 +11,33 @@ import { MenuListSide } from './MenuListSide'
|
|||||||
* @returns {JSX.Element}
|
* @returns {JSX.Element}
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
const SideBar = (props) => {
|
const SideBar = props => {
|
||||||
const { siteInfo } = props
|
const { siteInfo } = props
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
return (
|
return (
|
||||||
<div id='side-bar'>
|
<div id='side-bar'>
|
||||||
<div className="h-52 w-full flex justify-center">
|
<div className='h-52 w-full flex justify-center'>
|
||||||
<div>
|
<div>
|
||||||
<div onClick={() => { router.push('/') }}
|
<div
|
||||||
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
|
onClick={() => {
|
||||||
<LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={siteConfig('AUTHOR')} />
|
router.push('/')
|
||||||
</div>
|
}}
|
||||||
<MenuGroupCard {...props} />
|
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
|
||||||
</div>
|
{/* 头像 */}
|
||||||
</div>
|
<LazyImage
|
||||||
<MenuListSide {...props} />
|
src={siteInfo?.icon}
|
||||||
|
className='rounded-full'
|
||||||
|
width={80}
|
||||||
|
alt={siteConfig('AUTHOR')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* 总览 */}
|
||||||
|
<MenuGroupCard {...props} />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 侧拉抽屉的菜单 */}
|
||||||
|
<MenuListSide {...props} />
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,8 @@ import CONFIG from '../config'
|
|||||||
let wrapperTop = 0
|
let wrapperTop = 0
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
* 首页英雄区
|
||||||
|
* 是一张大图,带个居中按钮
|
||||||
* @returns 头图
|
* @returns 头图
|
||||||
*/
|
*/
|
||||||
const Hero = props => {
|
const Hero = props => {
|
||||||
@@ -17,7 +18,6 @@ const Hero = props => {
|
|||||||
const { siteInfo } = props
|
const { siteInfo } = props
|
||||||
const { locale } = useGlobal()
|
const { locale } = useGlobal()
|
||||||
const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
|
const GREETING_WORDS = siteConfig('GREETING_WORDS').split(',')
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
updateHeaderHeight()
|
updateHeaderHeight()
|
||||||
if (!typed && window && document.getElementById('typed')) {
|
if (!typed && window && document.getElementById('typed')) {
|
||||||
@@ -61,7 +61,7 @@ const Hero = props => {
|
|||||||
<div className='text-white absolute flex flex-col h-full items-center justify-center w-full '>
|
<div className='text-white absolute flex flex-col h-full items-center justify-center w-full '>
|
||||||
{/* 站点标题 */}
|
{/* 站点标题 */}
|
||||||
<div className='text-4xl md:text-5xl shadow-text'>
|
<div className='text-4xl md:text-5xl shadow-text'>
|
||||||
{siteConfig('TITLE')}
|
{siteInfo?.title || siteConfig('TITLE')}
|
||||||
</div>
|
</div>
|
||||||
{/* 站点欢迎语 */}
|
{/* 站点欢迎语 */}
|
||||||
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
|
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
|
||||||
|
|||||||
@@ -1,11 +1,20 @@
|
|||||||
import { siteConfig } from '@/lib/config'
|
import { siteConfig } from '@/lib/config'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
/**
|
||||||
|
* 站点logo
|
||||||
|
* 这里默认只支持纯文字
|
||||||
|
* @param {*} props
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
const Logo = props => {
|
const Logo = props => {
|
||||||
|
const { siteInfo } = props
|
||||||
return (
|
return (
|
||||||
<Link href='/' passHref legacyBehavior>
|
<Link href='/' passHref legacyBehavior>
|
||||||
<div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
|
<div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
|
||||||
<div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteConfig('TITLE') }</div>
|
<div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'>
|
||||||
|
{' '}
|
||||||
|
{siteInfo?.title || siteConfig('TITLE')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ export const MenuItemCollapse = ({ link }) => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className='cursor-pointer whitespace-nowrap dark:text-gray-200 w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100 hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
|
className='cursor-pointer whitespace-nowrap dark:text-gray-200 w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100 hover:bg-indigo-500 dark:hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
|
||||||
<Link href={sLink.to} target={link?.target}>
|
<Link href={sLink.to} target={link?.target}>
|
||||||
<span className='text-sm'>
|
<span className='text-sm'>
|
||||||
<i className={`${sLink.icon} w-4 mr-3 text-center`} />
|
<i className={`${sLink.icon} w-4 mr-3 text-center`} />
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
/**
|
||||||
|
* 菜单
|
||||||
|
* 支持二级展开的菜单
|
||||||
|
*/
|
||||||
export const MenuItemDrop = ({ link }) => {
|
export const MenuItemDrop = ({ link }) => {
|
||||||
const [show, changeShow] = useState(false)
|
const [show, changeShow] = useState(false)
|
||||||
const hasSubMenu = link?.subMenus?.length > 0
|
const hasSubMenu = link?.subMenus?.length > 0
|
||||||
@@ -42,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
|
|||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
|
className='cursor-pointer hover:bg-indigo-500 text-gray-900 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
|
||||||
<Link href={sLink.to} target={link?.target}>
|
<Link href={sLink.to} target={link?.target}>
|
||||||
<span className='text-sm text-nowrap font-extralight'>
|
<span className='text-sm text-nowrap font-extralight'>
|
||||||
{link?.icon && <i className={sLink?.icon}> </i>}
|
{link?.icon && <i className={sLink?.icon}> </i>}
|
||||||
|
|||||||
@@ -1,17 +1,42 @@
|
|||||||
|
import { siteConfig } from '@/lib/config'
|
||||||
import { useGlobal } from '@/lib/global'
|
import { useGlobal } from '@/lib/global'
|
||||||
import CONFIG from '../config'
|
import CONFIG from '../config'
|
||||||
import { MenuItemDrop } from './MenuItemDrop'
|
import { MenuItemDrop } from './MenuItemDrop'
|
||||||
import { siteConfig } from '@/lib/config'
|
/**
|
||||||
|
* 菜单列表
|
||||||
export const MenuListTop = (props) => {
|
* 顶部导航栏用
|
||||||
|
* @param {*} props
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const MenuListTop = props => {
|
||||||
const { customNav, customMenu } = props
|
const { customNav, customMenu } = props
|
||||||
const { locale } = useGlobal()
|
const { locale } = useGlobal()
|
||||||
|
|
||||||
let links = [
|
let links = [
|
||||||
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
|
{
|
||||||
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) },
|
icon: 'fas fa-archive',
|
||||||
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
|
name: locale.NAV.ARCHIVE,
|
||||||
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
|
to: '/archive',
|
||||||
|
show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-search',
|
||||||
|
name: locale.NAV.SEARCH,
|
||||||
|
to: '/search',
|
||||||
|
show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-folder',
|
||||||
|
name: locale.COMMON.CATEGORY,
|
||||||
|
to: '/category',
|
||||||
|
show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'fas fa-tag',
|
||||||
|
name: locale.COMMON.TAGS,
|
||||||
|
to: '/tag',
|
||||||
|
show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
if (customNav) {
|
if (customNav) {
|
||||||
@@ -29,7 +54,9 @@ export const MenuListTop = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
|
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
|
||||||
{links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
|
{links?.map((link, index) => (
|
||||||
|
<MenuItemDrop key={index} link={link} />
|
||||||
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,27 +5,54 @@
|
|||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
const Style = () => {
|
const Style = () => {
|
||||||
return <style jsx global>{`
|
return (
|
||||||
// 底色
|
<style jsx global>{`
|
||||||
body{
|
// 底色
|
||||||
background-color: #f5f5f5
|
body {
|
||||||
}
|
background-color: #f5f5f5;
|
||||||
.dark body{
|
}
|
||||||
|
.dark body {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 设置了从上到下的渐变黑色 */
|
/* 设置了从上到下的渐变黑色 */
|
||||||
#theme-matery .header-cover::before {
|
#theme-matery .header-cover::before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
|
background: linear-gradient(
|
||||||
}
|
to bottom,
|
||||||
|
rgba(0, 0, 0, 0.5) 0%,
|
||||||
`}</style>
|
rgba(0, 0, 0, 0.2) 10%,
|
||||||
|
rgba(0, 0, 0, 0) 25%,
|
||||||
|
rgba(0, 0, 0, 0.2) 75%,
|
||||||
|
rgba(0, 0, 0, 0.5) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 自定义滚动条
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #4338ca;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #4338ca transparent;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Style }
|
export { Style }
|
||||||
|
|||||||
Reference in New Issue
Block a user