mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
proxio细节图片调整
This commit is contained in:
tangly1024
@@ -9,6 +9,17 @@ import Link from 'next/link'
|
||||
* @returns
|
||||
*/
|
||||
export const Blog = ({ posts }) => {
|
||||
const enable = siteConfig('PROXIO_BLOG_ENABLE')
|
||||
if (!enable) {
|
||||
return null
|
||||
}
|
||||
|
||||
// 博客列表默认显示summary文字，当鼠标指向时显示文章封面。这里可选把summary文字替换成图片占位符。
|
||||
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_1 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_1')
|
||||
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_2 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_2')
|
||||
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_3 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_3')
|
||||
const PROXIO_BLOG_PLACEHOLDER_IMG_URL_4 = siteConfig('PROXIO_BLOG_PLACEHOLDER_IMG_URL_4')
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <!-- ====== Blog Section Start --> */}
|
||||
@@ -31,6 +42,17 @@ export const Blog = ({ posts }) => {
|
||||
{/* 博客列表 此处优先展示3片文章 */}
|
||||
<div className='-mx-4 grid md:grid-cols-2 grid-cols-1'>
|
||||
{posts?.map((item, index) => {
|
||||
// 文章封面图片，默认使用占位符 根据index 判断获取的时哪一张图片
|
||||
let coverImg = PROXIO_BLOG_PLACEHOLDER_IMG_URL_1
|
||||
if (index === 0) {
|
||||
coverImg = PROXIO_BLOG_PLACEHOLDER_IMG_URL_1
|
||||
} else if (index === 1) {
|
||||
coverImg = PROXIO_BLOG_PLACEHOLDER_IMG_URL_2
|
||||
} else if (index === 2) {
|
||||
coverImg = PROXIO_BLOG_PLACEHOLDER_IMG_URL_3
|
||||
} else if (index === 3) {
|
||||
coverImg = PROXIO_BLOG_PLACEHOLDER_IMG_URL_4
|
||||
}
|
||||
return (
|
||||
<div key={index} className='w-full px-4'>
|
||||
<div
|
||||
@@ -51,9 +73,11 @@ export const Blog = ({ posts }) => {
|
||||
<div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-all duration-500 group-hover:opacity-50 group-hover:bg-black' />
|
||||
{/* 鼠标悬停时显示的文字内容 */}
|
||||
<div className='absolute inset-0 flex items-center justify-center group-hover:scale-110 duration-200 group-hover:text-white'>
|
||||
<p className='max-w-[370px] text-base text-body-color dark:text-dark-6 flex items-center justify-center duration-200 group-hover:text-white '>
|
||||
{!coverImg && <p className='max-w-[370px] text-base text-body-color dark:text-dark-6 flex items-center justify-center duration-200 group-hover:text-white '>
|
||||
{item.summary}
|
||||
</p></div>
|
||||
</p>}
|
||||
<LazyImage src={coverImg} className='absolute' />
|
||||
</div>
|
||||
</div>
|
||||
{/* 内容部分 */}
|
||||
<div className='relative z-10 p-4'>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { SVGEssential } from './svg/SVGEssential'
|
||||
import { SVGGifts } from './svg/SVGGifts'
|
||||
import { SVGTemplate } from './svg/SVGTemplate'
|
||||
import Link from 'next/link'
|
||||
import LazyImage from '@/components/LazyImage'
|
||||
/**
|
||||
* 产品特性相关，将显示在首页中
|
||||
* @returns
|
||||
@@ -36,8 +37,9 @@ export const Features = () => {
|
||||
<div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
|
||||
<div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
|
||||
<div className='flex w-12 h-12'>
|
||||
<div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
|
||||
<i class={siteConfig('PROXIO_FEATURE_1_ICON_CLASS')}></i>
|
||||
<div className='overflow-hidden w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
|
||||
<i className={siteConfig('PROXIO_FEATURE_1_ICON_CLASS') + ' absolute'}></i>
|
||||
<LazyImage src={siteConfig('PROXIO_FEATURE_1_ICON_IMG_URL')} className='z-10' />
|
||||
</div>
|
||||
</div>
|
||||
<h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
|
||||
@@ -52,8 +54,9 @@ export const Features = () => {
|
||||
<div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
|
||||
<div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
|
||||
<div className='flex w-12 h-12'>
|
||||
<div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
|
||||
<div className='overflow-hidden w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
|
||||
<i class={siteConfig('PROXIO_FEATURE_2_ICON_CLASS')}></i>
|
||||
<LazyImage src={siteConfig('PROXIO_FEATURE_2_ICON_IMG_URL')} className='z-10' />
|
||||
</div>
|
||||
</div>
|
||||
<h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
|
||||
@@ -68,8 +71,9 @@ export const Features = () => {
|
||||
<div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
|
||||
<div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
|
||||
<div className='flex w-12 h-12'>
|
||||
<div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
|
||||
<div className='overflow-hidden w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
|
||||
<i class={siteConfig('PROXIO_FEATURE_3_ICON_CLASS')}></i>
|
||||
<LazyImage src={siteConfig('PROXIO_FEATURE_3_ICON_IMG_URL')} className='z-10' />
|
||||
</div>
|
||||
</div>
|
||||
<h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
|
||||
|
||||
@@ -26,7 +26,7 @@ const LoadingCover = ({ onFinishLoading }) => {
|
||||
document.body.appendChild(ripple);
|
||||
|
||||
// 添加页面缩放 + 模糊动画
|
||||
pageContainer.classList.add('page-clicked');
|
||||
pageContainer?.classList?.add('page-clicked');
|
||||
|
||||
// 模拟加载完成，调用回调函数
|
||||
setTimeout(() => {
|
||||
@@ -55,7 +55,7 @@ const LoadingCover = ({ onFinishLoading }) => {
|
||||
|
||||
return (
|
||||
<div className="welcome" id="pageContainer">
|
||||
<div className="welcome-text" id="welcomeText">
|
||||
<div className="welcome-text px-2" id="welcomeText">
|
||||
{welcomeText}
|
||||
</div>
|
||||
<style jsx>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { siteConfig } from '@/lib/config'
|
||||
import LazyImage from '@/components/LazyImage'
|
||||
import Link from 'next/link'
|
||||
/**
|
||||
* 作者团队
|
||||
* @returns
|
||||
*/
|
||||
export const Team = () => {
|
||||
const PROXIO_ABOUT_PHOTO_URL = siteConfig('PROXIO_ABOUT_PHOTO_URL')
|
||||
const AUTHOR = siteConfig('AUTHOR')
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <!-- ====== Team Section Start --> */}
|
||||
@@ -17,7 +20,7 @@ export const Team = () => {
|
||||
<div className='flex flex-col md:flex-row -mx-4 justify-between'>
|
||||
{/* 左边肖像图 */}
|
||||
<div className='mx-6 mb-6 max-w-96 border-gray-200 dark:border-[#333333] dark:bg-dark-1 border rounded-2xl overflow-hidden'>
|
||||
<LazyImage src={PROXIO_ABOUT_PHOTO_URL} className='object-cover h-full' />
|
||||
<LazyImage alt={AUTHOR} src={PROXIO_ABOUT_PHOTO_URL} className='object-cover h-full' />
|
||||
</div>
|
||||
{/* 右侧文字说明 */}
|
||||
<div className='flex flex-col px-4 space-y-4 mx-auto justify-between max-w-[485px]'>
|
||||
@@ -26,7 +29,7 @@ export const Team = () => {
|
||||
{siteConfig('PROXIO_ABOUT_TITLE')}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className='mb-3 text-2xl leading-[1.2] dark:text-white md:text-[40px]'>
|
||||
<h2 className='mb-3 text-xl md:text-3xl leading-[1.2] dark:text-white '>
|
||||
{siteConfig('PROXIO_ABOUT_TEXT_1')}
|
||||
</h2>
|
||||
<p
|
||||
@@ -41,6 +44,15 @@ export const Team = () => {
|
||||
<KeyVal k={siteConfig('PROXIO_ABOUT_KEY_3')} v={siteConfig('PROXIO_ABOUT_VAL_3')} />
|
||||
<KeyVal k={siteConfig('PROXIO_ABOUT_KEY_4')} v={siteConfig('PROXIO_ABOUT_VAL_4')} />
|
||||
</div>
|
||||
|
||||
<div className='mt-8 w-full flex justify-end py-2'>
|
||||
<Link
|
||||
href={siteConfig('PROXIO_ABOUT_BUTTON_URL', '')}
|
||||
className='px-4 py-2 rounded-3xl border dark:border-gray-200 border-[#333333] text-base font-medium text-dark hover:bg-gray-100 dark:text-white dark:hover:bg-white dark:hover:text-black duration-200'>
|
||||
{siteConfig('PROXIO_ABOUT_BUTTON_TEXT')}
|
||||
<i className="pl-4 fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,6 +28,13 @@ const CONFIG = {
|
||||
PROXIO_BLOG_COUNT: 4, // 首页博文区块展示前4篇文章
|
||||
PROXIO_BLOG_TEXT_1: '我的最新动态',
|
||||
|
||||
// 区块默认内容显示文章的summary文本，但也支持用自定义图片或logo德国替换掉占位显示内容
|
||||
PROXIO_BLOG_PLACEHOLDER_IMG_URL_1: '', // 填写要替换成的图片，支持图床或直接上传到项目中，示例 /images/feature-1.webp
|
||||
PROXIO_BLOG_PLACEHOLDER_IMG_URL_2: '',
|
||||
PROXIO_BLOG_PLACEHOLDER_IMG_URL_3: '',
|
||||
PROXIO_BLOG_PLACEHOLDER_IMG_URL_4: '',
|
||||
|
||||
|
||||
PROXIO_ANNOUNCEMENT_ENABLE: true, //公告文字区块
|
||||
|
||||
// 特性区块
|
||||
@@ -39,14 +46,17 @@ const CONFIG = {
|
||||
|
||||
// 特性1
|
||||
PROXIO_FEATURE_1_ICON_CLASS: 'fa-solid fa-stopwatch', // fas图标
|
||||
PROXIO_FEATURE_1_ICON_IMG_URL: '', // 图片图标选填，默认是fas图标，如果需要图片图标可以填写图片地址，示例/avatar.png
|
||||
PROXIO_FEATURE_1_TITLE_1: '高效工作流程',
|
||||
PROXIO_FEATURE_1_TEXT_1: '精简的设计流程确保快速交付，在紧迫的工期下仍能保证品质与细节不打折扣。',
|
||||
|
||||
PROXIO_FEATURE_2_ICON_CLASS: 'fa-solid fa-comments',
|
||||
PROXIO_FEATURE_2_ICON_IMG_URL: '',
|
||||
PROXIO_FEATURE_2_TITLE_1: '协作式流程',
|
||||
PROXIO_FEATURE_2_TEXT_1: '与你紧密合作，融合反馈意见，打造超越预期的设计',
|
||||
|
||||
PROXIO_FEATURE_3_ICON_CLASS: 'fa-solid fa-search',
|
||||
PROXIO_FEATURE_2_ICON_IMG_URL: '',
|
||||
PROXIO_FEATURE_3_TITLE_1: '细节把控',
|
||||
PROXIO_FEATURE_3_TEXT_1: '精益求精雕琢每个元素，确保成品精致统一，令人过目难忘',
|
||||
|
||||
@@ -160,8 +170,10 @@ const CONFIG = {
|
||||
PROXIO_ABOUT_KEY_3: '交付项目',
|
||||
PROXIO_ABOUT_VAL_3: '5000+',
|
||||
PROXIO_ABOUT_KEY_4: '累积创作时长（小时）',
|
||||
PROXIO_ABOUT_VAL_4: '10000+',
|
||||
PROXIO_ABOUT_VAL_4: '10000+',
|
||||
|
||||
PROXIO_ABOUT_BUTTON_URL: '/about',
|
||||
PROXIO_ABOUT_BUTTON_TEXT: '关于我',
|
||||
|
||||
// 横向滚动文字
|
||||
PROXIO_BRANDS_ENABLE: true, // 滚动文字
|
||||
|
||||
Reference in New Issue
Block a user