|
|
@ -225,6 +225,7 @@ function CarouselNext({
|
||||||
onClick={scrollNext}
|
onClick={scrollNext}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
|
|
||||||
<ArrowRight />
|
<ArrowRight />
|
||||||
<span className="sr-only">Next slide</span>
|
<span className="sr-only">Next slide</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
|
@ -1,17 +1,22 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import Content from "@/components/content/page";
|
import Content from '@/components/content/page';
|
||||||
import Footer from "@/components/footer/footer";
|
import Footer from '@/components/footer/footer';
|
||||||
import Header from "@/components/header/header";
|
import Header from '@/components/header/header';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
|
const product = 100;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="w-[1920px] h-[1080px] mx-auto">
|
<div className="w-[1920px] h-[1080px] mx-auto">
|
||||||
<Header />
|
<Header />
|
||||||
<Content />
|
<Content />
|
||||||
<Footer />
|
<Footer />
|
||||||
|
{/* <Link href="/upload">1111</Link>
|
||||||
|
<Link href={`/upload?product=${product}`} className="underline">
|
||||||
|
2222 {product}
|
||||||
|
</Link> */}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -69,6 +69,54 @@ const CulturePage: React.FC = () => {
|
||||||
title: '烽火文化活动5',
|
title: '烽火文化活动5',
|
||||||
relative_link: '/culture/5',
|
relative_link: '/culture/5',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动6',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动7',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动8',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动9',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动10',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动11',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动12',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
cover: '/x4.png',
|
||||||
|
title: '烽火文化活动13',
|
||||||
|
relative_link: '/culture/5',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// 模拟选项页面数据
|
// 模拟选项页面数据
|
||||||
|
|
@ -135,25 +183,38 @@ const CulturePage: React.FC = () => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Swiper
|
<Swiper
|
||||||
effect="coverflow"
|
|
||||||
grabCursor={true}
|
grabCursor={true}
|
||||||
centeredSlides={true}
|
centeredSlides={true}
|
||||||
slidesPerView={4}
|
slidesPerView={4}
|
||||||
spaceBetween={100}
|
spaceBetween={100}
|
||||||
loop={true}
|
loop={true}
|
||||||
coverflowEffect={{
|
loopAdditionalSlides={5}
|
||||||
rotate: 0,
|
speed={5000}
|
||||||
stretch: 0,
|
|
||||||
depth: 100,
|
|
||||||
modifier: 1,
|
|
||||||
slideShadows: false,
|
|
||||||
}}
|
|
||||||
autoplay={{
|
autoplay={{
|
||||||
delay: 3000,
|
delay: 0,
|
||||||
disableOnInteraction: false,
|
disableOnInteraction: false,
|
||||||
|
pauseOnMouseEnter: true,
|
||||||
|
// waitForTransition: false,
|
||||||
|
waitForTransition: true,
|
||||||
|
stopOnLastSlide: false,
|
||||||
|
reverseDirection: false,
|
||||||
}}
|
}}
|
||||||
modules={[EffectCoverflow, Pagination, Autoplay, Navigation]}
|
allowTouchMove={false}
|
||||||
className="mySwiper w-full h-full bg-cover bg-center "
|
resistance={false}
|
||||||
|
resistanceRatio={0}
|
||||||
|
watchSlidesProgress={true}
|
||||||
|
preventInteractionOnTransition={false}
|
||||||
|
runCallbacksOnInit={false}
|
||||||
|
modules={[Autoplay]}
|
||||||
|
className="mySwiper w-full h-full bg-cover bg-center"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
'--swiper-transition-timing-function': 'linear',
|
||||||
|
'--swiper-wrapper-transition-timing-function': 'linear',
|
||||||
|
'--swiper-pagination-color': 'transparent',
|
||||||
|
'--swiper-navigation-color': 'transparent',
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{displayItems.map((item) => (
|
{displayItems.map((item) => (
|
||||||
<SwiperSlide key={item.id}>
|
<SwiperSlide key={item.id}>
|
||||||
|
|
@ -161,15 +222,15 @@ const CulturePage: React.FC = () => {
|
||||||
href={item.relative_link}
|
href={item.relative_link}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="block transition-transform duration-300 hover:scale-105 "
|
className="block hover:scale-105"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
className="ml-15 mx-auto object-fill select-none "
|
className="ml-15 mx-auto object-fill select-none"
|
||||||
style={{ width: '395px', height: '515px' }}
|
style={{ width: '395px', height: '515px' }}
|
||||||
src={item.cover}
|
src={item.cover}
|
||||||
alt={item.title}
|
alt={item.title}
|
||||||
onError={(e) => {
|
onError={(e) => {
|
||||||
e.currentTarget.src = '/placeholder-image.jpg'; // 备用图片
|
e.currentTarget.src = '/placeholder-image.jpg';
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@ const CultureBgPage: React.FC = () => {
|
||||||
alt={logo.alt}
|
alt={logo.alt}
|
||||||
className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
|
className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
|
||||||
style={{
|
style={{
|
||||||
transformOrigin: 'center'
|
transformOrigin: 'center',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -130,7 +130,6 @@ const Navbar: React.FC = () => {
|
||||||
transition: 'left 0.3s ease, width 0.3s ease',
|
transition: 'left 0.3s ease, width 0.3s ease',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{list.map((item, index) => (
|
{list.map((item, index) => (
|
||||||
<a
|
<a
|
||||||
key={index}
|
key={index}
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 391 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 471 KiB After Width: | Height: | Size: 471 KiB |
|
Before Width: | Height: | Size: 6.5 MiB After Width: | Height: | Size: 6.5 MiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 35 KiB |