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

starter 遮罩

Browse Source
This commit is contained in:
tangly1024
2024-10-31 21:22:10 +08:00
parent 9e85f4d1c2
commit de4d7cf896
3 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/LoadingCover.js
View File

@@ -13,7 +13,7 @@ export default function LoadingCover() {
if (onLoading) { if (onLoading) {
setIsVisible(true) setIsVisible(true)
} else { } else {
const timeout = setTimeout(() => setIsVisible(false), 1500) // 等待淡出动画结束 const timeout = setTimeout(() => setIsVisible(false), 1800) // 等待淡出动画结束
return () => clearTimeout(timeout) return () => clearTimeout(timeout)
} }
}, [onLoading]) }, [onLoading])
@@ -36,33 +36,39 @@ export default function LoadingCover() {
<div className='mx-auto'> <div className='mx-auto'>
<style global> <style global>
{` {`
.loader { .loader {
width: 20px; width: 20px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 50%; border-radius: 50%;
background: #000; background: #000;
box-shadow: 0 0 0 0 #0004; box-shadow: 0 0 0 0 #0004;
animation: l2 1.5s infinite linear; animation: l2 1.5s infinite linear;
position: relative; position: relative;
} }
.loader:before, .loader:before,
.loader:after { .loader:after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
box-shadow: 0 0 0 0 #0004; box-shadow: 0 0 0 0 #0004;
animation: inherit; animation: inherit;
animation-delay: -0.5s; animation-delay: -0.5s;
} }
.loader:after { .loader:after {
animation-delay: -1s; animation-delay: -1s;
} }
@keyframes l2 { /* 深色模式下的样式 */
100% { .dark .loader {
box-shadow: 0 0 0 40px #0000; background: #fff; /* 白色或灰色 */
} box-shadow: 0 0 0 0 #fff4; /* 使用白色阴影 */
}`} }
@keyframes l2 {
100% {
box-shadow: 0 0 0 40px #0000;
}
}
`}
</style> </style>
<div className='loader'></div> <div className='loader'></div>
</div> </div>

2
themes/starter/components/Testimonials.js
View File

@@ -87,7 +87,7 @@ export const Testimonials = () => {
<div className='swiper testimonial-carousel common-carousel p-5'> <div className='swiper testimonial-carousel common-carousel p-5'>
<div className='swiper-wrapper'> <div className='swiper-wrapper'>
{/* 用户评价卡牌 */} {/* 用户评价卡牌 */}
{STARTER_TESTIMONIALS_ITEMS.map((item, index) => { {STARTER_TESTIMONIALS_ITEMS?.map((item, index) => {
return ( return (
<div key={index} className='swiper-slide'> <div key={index} className='swiper-slide'>
<div className='rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]'> <div className='rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]'>

2
themes/starter/index.js
View File

@@ -25,6 +25,7 @@ import CONFIG from './config'
import { Style } from './style' import { Style } from './style'
// import { MadeWithButton } from './components/MadeWithButton' // import { MadeWithButton } from './components/MadeWithButton'
import Comment from '@/components/Comment' import Comment from '@/components/Comment'
import LoadingCover from '@/components/LoadingCover'
import ShareBar from '@/components/ShareBar' import ShareBar from '@/components/ShareBar'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import { loadWowJS } from '@/lib/plugins/wow' import { loadWowJS } from '@/lib/plugins/wow'
@@ -84,6 +85,7 @@ const LayoutIndex = props => {
const posts = props?.allNavPages ? props.allNavPages.slice(0, count) : [] const posts = props?.allNavPages ? props.allNavPages.slice(0, count) : []
return ( return (
<> <>
<LoadingCover />
{/* 英雄区 */} {/* 英雄区 */}
{siteConfig('STARTER_HERO_ENABLE') && <Hero />} {siteConfig('STARTER_HERO_ENABLE') && <Hero />}
{/* 合作伙伴 */} {/* 合作伙伴 */}