调整文件目录结构
This commit is contained in:
parent
7b8c9fc1c7
commit
5c33b0c22c
|
|
@ -0,0 +1,59 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react"
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils"
|
||||
import { Button } from "@repo/ui/components/button"
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1]
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||
type CarouselOptions = UseCarouselParameters[0]
|
||||
type CarouselPlugin = UseCarouselParameters[1]
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions
|
||||
plugins?: CarouselPlugin
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: boolean
|
||||
canScrollNext: boolean
|
||||
} & CarouselProps
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function Carousel({
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||
const [carouselRef, api] = useEmblaCarousel(
|
||||
{
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins
|
||||
)
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||
|
||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||
if (!api) return
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) return
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) return
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
}
|
||||
}, [api, onSelect])
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
data-slot="carousel"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={carouselRef}
|
||||
className="overflow-hidden"
|
||||
data-slot="carousel-content"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
data-slot="carousel-item"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselPrevious({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-previous"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute size-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "top-1/2 -left-12 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
<ArrowLeft />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselNext({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-next"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute size-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "top-1/2 -right-12 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
<ArrowRight />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
}
|
||||
|
|
@ -1,6 +1,23 @@
|
|||
import React from 'react';
|
||||
|
||||
import JtCarousel from '../fhjt/jtCarousel';
|
||||
const BqrxPage = () => {
|
||||
const carouselData = [
|
||||
{
|
||||
id: 1,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||
{/* 左侧图片容器 */}
|
||||
|
|
@ -8,16 +25,10 @@ const BqrxPage = () => {
|
|||
className="w-[1043px] h-full bg-cover bg-center relative"
|
||||
style={{
|
||||
clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
|
||||
backgroundImage: 'url(/header.png)',
|
||||
}}
|
||||
>
|
||||
<div className="absolute bottom-6 left-6 flex space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
<JtCarousel carouselData={carouselData} />
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火讲堂容器 */}
|
||||
<div className="w-[471px] h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
|
|
@ -35,7 +46,6 @@ const BqrxPage = () => {
|
|||
<span className=" px-1 py-1 text-4xl font-bold ">首长信箱</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 奖项2 */}
|
||||
|
|
@ -44,14 +54,13 @@ const BqrxPage = () => {
|
|||
<span className=" px-1 py-1 text-4xl font-bold ">有问必答</span>
|
||||
<span className="w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 奖项3 */}
|
||||
<div className="">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-4xl font-bold">心灵树洞</span>
|
||||
<span className="w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
<span className="w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
const FhjtPage = () => {
|
||||
return (
|
||||
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||
{/* 左侧图片容器 */}
|
||||
<div
|
||||
className="w-[1043px] h-full bg-red-500 bg-cover bg-center relative"
|
||||
style={{
|
||||
clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
|
||||
backgroundImage: 'url(/header.png)',
|
||||
}}
|
||||
>
|
||||
<div className="absolute bottom-6 left-6 flex space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火讲堂容器 */}
|
||||
<div className="w-[471px] h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right text-[32px] font-bold text-[#005d93] mb-2">烽火讲堂</h2>
|
||||
{/* 蓝色装饰线 */}
|
||||
<div className="h-3 bg-[#005d93]"></div>
|
||||
</div>
|
||||
|
||||
{/* 奖项列表 */}
|
||||
<div className="mt-4 pr-8">
|
||||
{/* 奖项1 */}
|
||||
<div className="mb-5">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 奖项2 */}
|
||||
<div className="mb-5">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 奖项3 */}
|
||||
<div className="mb-1">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更多授课按钮 */}
|
||||
<div className="absolute bottom-8 right-0 mr-10">
|
||||
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-2xl font-bold hover:bg-[#357ABD] transition-colors">
|
||||
更多授课
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FhjtPage;
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import React from 'react';
|
||||
import JtCarousel from './jtCarousel';
|
||||
|
||||
const FhjtPage = () => {
|
||||
const carouselData = [
|
||||
{
|
||||
id: 1,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||
{/* 左侧图片容器 */}
|
||||
<div
|
||||
className="w-[1043px] h-full bg-cover bg-center relative"
|
||||
style={{
|
||||
clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
|
||||
}}
|
||||
>
|
||||
<JtCarousel carouselData={carouselData} />
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火讲堂容器 */}
|
||||
<div className="w-[471px] h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right text-[32px] font-bold text-[#005d93] mb-2">烽火讲堂</h2>
|
||||
{/* 蓝色装饰线 */}
|
||||
<div className="h-3 bg-[#005d93]"></div>
|
||||
</div>
|
||||
|
||||
{/* 奖项列表 */}
|
||||
<div className="mt-4 pr-8">
|
||||
{/* 奖项1 */}
|
||||
<div className="mb-5">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 奖项2 */}
|
||||
<div className="mb-5">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 奖项3 */}
|
||||
<div className="mb-1">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更多授课按钮 */}
|
||||
<div className="absolute bottom-8 right-0 mr-10">
|
||||
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-2xl font-bold hover:bg-[#357ABD] transition-colors">
|
||||
更多授课
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FhjtPage;
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import Autoplay from 'embla-carousel-autoplay';
|
||||
import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '@repo/ui/components/carousel';
|
||||
|
||||
interface CarouselComponentProps {
|
||||
carouselData: { id: number; image: string; title: string }[];
|
||||
}
|
||||
|
||||
const JtCarousel: React.FC<CarouselComponentProps> = ({ carouselData }) => {
|
||||
const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
|
||||
|
||||
// 监听轮播图变化
|
||||
useEffect(() => {
|
||||
if (!carouselAPI) return;
|
||||
|
||||
const updateCurrentIndex = () => {
|
||||
setCurrentIndex(carouselAPI.selectedScrollSnap());
|
||||
};
|
||||
|
||||
carouselAPI.on('select', updateCurrentIndex);
|
||||
|
||||
return () => {
|
||||
carouselAPI.off('select', updateCurrentIndex);
|
||||
};
|
||||
}, [carouselAPI]);
|
||||
|
||||
// 滚动到指定索引
|
||||
const scrollToIndex = (index: number) => {
|
||||
if (carouselAPI) {
|
||||
carouselAPI.scrollTo(index);
|
||||
setCurrentIndex(index);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<Carousel
|
||||
className="h-full w-full"
|
||||
setApi={setCarouselAPI}
|
||||
plugins={[plugin.current, Autoplay({ delay: 2000, stopOnInteraction: true })]}
|
||||
onMouseEnter={plugin.current.stop}
|
||||
onMouseLeave={plugin.current.reset}
|
||||
>
|
||||
<CarouselContent>
|
||||
{carouselData.map((item) => (
|
||||
<CarouselItem key={item.id}>
|
||||
<div className="h-full w-full relative">
|
||||
{/* 设置为100%宽高 */}
|
||||
<img src={item.image} alt={item.title} className="w-full h-full object-cover " />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
{/* 圆点指示器 */}
|
||||
<div className="absolute bottom-5 left-10 flex justify-center ">
|
||||
{carouselData.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`w-3 h-3 rounded-full mx-1 ${currentIndex === index ? 'bg-blue-500' : 'bg-white'}`}
|
||||
onClick={() => scrollToIndex(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JtCarousel;
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { EffectCoverflow, Pagination, Autoplay, Navigation } from 'swiper/modules';
|
||||
|
||||
// 导入 Swiper 样式
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/effect-coverflow';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/navigation';
|
||||
|
||||
// 模拟数据接口
|
||||
interface Article {
|
||||
id: number;
|
||||
cover: string;
|
||||
title: string;
|
||||
relative_link: string;
|
||||
}
|
||||
|
||||
interface OptionPage {
|
||||
model_bg: {
|
||||
url: string;
|
||||
};
|
||||
}
|
||||
|
||||
const CulturePage: React.FC = () => {
|
||||
const [posts, setPosts] = useState<Article[]>([]);
|
||||
const [isPostsFetching, setIsPostsFetching] = useState(true);
|
||||
const [optionPage, setOptionPage] = useState<OptionPage | null>(null);
|
||||
const [displayItems, setDisplayItems] = useState<Article[]>([]);
|
||||
|
||||
// 模拟数据获取
|
||||
useEffect(() => {
|
||||
// 模拟异步数据加载
|
||||
const fetchData = async () => {
|
||||
setIsPostsFetching(true);
|
||||
|
||||
// 模拟API延迟
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
// 模拟获取文章数据
|
||||
const mockPosts: Article[] = [
|
||||
{
|
||||
id: 1,
|
||||
cover: '/x4.png',
|
||||
title: '烽火文化活动1',
|
||||
relative_link: '/culture/1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
cover: '/x4.png',
|
||||
title: '烽火文化活动2',
|
||||
relative_link: '/culture/2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
cover: '/x4.png',
|
||||
title: '烽火文化活动3',
|
||||
relative_link: '/culture/3',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
cover: '/x4.png',
|
||||
title: '烽火文化活动4',
|
||||
relative_link: '/culture/4',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
cover: '/x4.png',
|
||||
title: '烽火文化活动5',
|
||||
relative_link: '/culture/5',
|
||||
},
|
||||
];
|
||||
|
||||
// 模拟选项页面数据
|
||||
const mockOptionPage: OptionPage = {
|
||||
model_bg: {
|
||||
url: '/culture-bg.jpg',
|
||||
},
|
||||
};
|
||||
|
||||
setPosts(mockPosts);
|
||||
setOptionPage(mockOptionPage);
|
||||
setIsPostsFetching(false);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// 监听posts变化，过滤有封面的文章
|
||||
useEffect(() => {
|
||||
if (posts.length > 0) {
|
||||
const filteredItems = posts.filter((post: Article) => post.cover);
|
||||
setDisplayItems(filteredItems);
|
||||
}
|
||||
}, [posts]);
|
||||
|
||||
// 空状态组件
|
||||
const EmptyState = () => (
|
||||
<div className="bg-white p-6 rounded-xl h-full flex items-center justify-center">
|
||||
<div className="text-center text-gray-400">
|
||||
<div className="text-6xl mb-4">📝</div>
|
||||
<p className="text-lg">期待您的投稿！</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-[80px] w-[1514px] mt-10 flex mx-auto relative">
|
||||
<h1 className="pt-12 text-4xl font-bold absolute right-15 text-white italic">烽火文化</h1>
|
||||
</div>
|
||||
<div className="h-[610px] w-[1920px] mt-5 mx-auto relative">
|
||||
{/* 加载状态 */}
|
||||
{isPostsFetching && (
|
||||
<div className="absolute inset-0 flex items-center justify-center rounded-xl">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 空状态 */}
|
||||
{!isPostsFetching && displayItems.length === 0 && <EmptyState />}
|
||||
|
||||
{/* 轮播图 */}
|
||||
{!isPostsFetching && displayItems.length > 0 && (
|
||||
<div
|
||||
className="flex justify-center rounded items-center w-full py-5 h-full"
|
||||
style={{
|
||||
backgroundImage: optionPage?.model_bg.url ? `url(${optionPage.model_bg.url})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
<Swiper
|
||||
effect="coverflow"
|
||||
grabCursor={true}
|
||||
centeredSlides={true}
|
||||
slidesPerView={4}
|
||||
spaceBetween={100}
|
||||
loop={true}
|
||||
coverflowEffect={{
|
||||
rotate: 0,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
modifier: 1,
|
||||
slideShadows: false,
|
||||
}}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
modules={[EffectCoverflow, Pagination, Autoplay, Navigation]}
|
||||
className="mySwiper w-full h-full bg-cover bg-center "
|
||||
>
|
||||
{displayItems.map((item) => (
|
||||
<SwiperSlide key={item.id}>
|
||||
<a
|
||||
href={item.relative_link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block transition-transform duration-300 hover:scale-105 "
|
||||
>
|
||||
<img
|
||||
className="ml-15 mx-auto object-fill select-none "
|
||||
style={{ width: '395px', height: '515px' }}
|
||||
src={item.cover}
|
||||
alt={item.title}
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = '/placeholder-image.jpg'; // 备用图片
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CulturePage;
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import React from 'react';
|
||||
|
||||
const CultureBgPage: React.FC = () => {
|
||||
// 定义logo数据
|
||||
const logos = [
|
||||
{ id: 1, src: '/logo/1.png', alt: 'Logo 1' },
|
||||
{ id: 2, src: '/logo/2.png', alt: 'Logo 2' },
|
||||
{ id: 3, src: '/logo/3.png', alt: 'Logo 3' },
|
||||
{ id: 4, src: '/logo/4.png', alt: 'Logo 4' },
|
||||
{ id: 5, src: '/logo/5.png', alt: 'Logo 5' },
|
||||
{ id: 6, src: '/logo/6.png', alt: 'Logo 6' },
|
||||
{ id: 7, src: '/logo/7.png', alt: 'Logo 7' },
|
||||
{ id: 8, src: '/logo/8.png', alt: 'Logo 8' },
|
||||
{ id: 9, src: '/logo/9.png', alt: 'Logo 9' },
|
||||
{ id: 10, src: '/logo/10.png', alt: 'Logo 10' },
|
||||
{ id: 11, src: '/logo/11.png', alt: 'Logo 11' },
|
||||
{ id: 12, src: '/logo/12.png', alt: 'Logo 12' },
|
||||
{ id: 13, src: '/logo/13.png', alt: 'Logo 13' },
|
||||
{ id: 14, src: '/logo/14.png', alt: 'Logo 14' },
|
||||
{ id: 15, src: '/logo/15.png', alt: 'Logo 15' },
|
||||
{ id: 16, src: '/logo/16.png', alt: 'Logo 16' },
|
||||
];
|
||||
|
||||
// 分组：上排8个，下排8个
|
||||
const topRowLogos = logos.slice(0, 8);
|
||||
const bottomRowLogos = logos.slice(8, 16);
|
||||
|
||||
return (
|
||||
<div className="h-[700px] w-[1550px] mx-auto relative">
|
||||
<div
|
||||
className="h-[200px] w-full bg-cover"
|
||||
style={{
|
||||
backgroundImage: 'url(/culture.png)',
|
||||
backgroundSize: '100% 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div className="h-[500px] w-full absolute top-30 flex items-center justify-center p-8">
|
||||
<div className="w-full h-full flex flex-col justify-center space-y-16 mb-10">
|
||||
|
||||
{/* 上排logo */}
|
||||
<div className="flex justify-center items-center space-x-15">
|
||||
{topRowLogos.map((logo) => (
|
||||
<img
|
||||
key={logo.id}
|
||||
src={logo.src}
|
||||
alt={logo.alt}
|
||||
className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
|
||||
style={{
|
||||
transformOrigin: 'center'
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 下排logo */}
|
||||
<div className="flex justify-center items-center space-x-15">
|
||||
{bottomRowLogos.map((logo) => (
|
||||
<img
|
||||
key={logo.id}
|
||||
src={logo.src}
|
||||
alt={logo.alt}
|
||||
className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
|
||||
style={{
|
||||
transformOrigin: 'center'
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CultureBgPage;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
type CarouselApi
|
||||
} from "@repo/ui/components/carousel";
|
||||
|
||||
interface CarouselComponentProps {
|
||||
carouselData: { id: number; image: string; title: string }[];
|
||||
}
|
||||
|
||||
const WsCarousel: React.FC<CarouselComponentProps> = ({ carouselData }) => {
|
||||
const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const plugin = useRef(Autoplay({ delay: 3000, stopOnInteraction: true }));
|
||||
|
||||
// 监听轮播图变化
|
||||
useEffect(() => {
|
||||
if (!carouselAPI) return;
|
||||
|
||||
const updateCurrentIndex = () => {
|
||||
setCurrentIndex(carouselAPI.selectedScrollSnap());
|
||||
};
|
||||
|
||||
carouselAPI.on("select", updateCurrentIndex);
|
||||
|
||||
return () => {
|
||||
carouselAPI.off("select", updateCurrentIndex);
|
||||
};
|
||||
}, [carouselAPI]);
|
||||
|
||||
// 滚动到指定索引
|
||||
const scrollToIndex = (index: number) => {
|
||||
if (carouselAPI) {
|
||||
carouselAPI.scrollTo(index);
|
||||
setCurrentIndex(index);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<Carousel
|
||||
className="h-full w-full"
|
||||
setApi={setCarouselAPI}
|
||||
plugins={[plugin.current, Autoplay({ delay: 2000, stopOnInteraction: true })]}
|
||||
onMouseEnter={plugin.current.stop}
|
||||
onMouseLeave={plugin.current.reset}
|
||||
>
|
||||
<CarouselContent>
|
||||
{carouselData.map((item) => (
|
||||
<CarouselItem key={item.id}>
|
||||
<div className="h-full w-full relative"> {/* 设置为100%宽高 */}
|
||||
<img src={item.image} alt={item.title} className="w-full h-full object-cover rounded-lg" />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
{/* 圆点指示器 */}
|
||||
<div className="absolute bottom-2 right-2 flex justify-center">
|
||||
{carouselData.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`w-3 h-3 rounded-full mx-1 ${currentIndex === index ? 'bg-blue-500' : 'bg-white'}`}
|
||||
onClick={() => scrollToIndex(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WsCarousel;
|
||||
|
|
@ -1,6 +1,24 @@
|
|||
import React from 'react';
|
||||
|
||||
import WsCarousel from './WsCarousel';
|
||||
const FhwsPage = () => {
|
||||
const carouselData = [
|
||||
{
|
||||
id: 1,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
|
||||
];
|
||||
return (
|
||||
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||
{/* 右侧烽火微视容器 */}
|
||||
|
|
@ -16,25 +34,25 @@ const FhwsPage = () => {
|
|||
<div className="mt-8 pl-8 ">
|
||||
{/* 视频项1 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<span className="w-0 h-0 border-l-8 border-l-yellow-500 border-t-8 border-t-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">岗位尖兵比武视频</p>
|
||||
</div>
|
||||
|
||||
{/* 视频项2 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<span className="w-0 h-0 border-l-8 border-l-yellow-500 border-t-8 border-t-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">晚会视频</p>
|
||||
</div>
|
||||
|
||||
{/* 视频项3 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<span className="w-0 h-0 border-l-8 border-l-yellow-500 border-t-8 border-t-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">退伍视频</p>
|
||||
</div>
|
||||
|
||||
{/* 视频项4 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<span className="w-0 h-0 border-l-8 border-l-yellow-500 border-t-8 border-t-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">共同科目尖兵比武视频</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,19 +67,13 @@ const FhwsPage = () => {
|
|||
|
||||
{/* 左侧图片/视频容器 */}
|
||||
<div
|
||||
className="w-[1043px] h-full bg-red-500 bg-cover bg-center relative"
|
||||
className="w-[1043px] h-full bg-cover bg-center relative"
|
||||
style={{
|
||||
clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)',
|
||||
backgroundImage: 'url(/header.png)',
|
||||
}}
|
||||
>
|
||||
{/* 右下角圆点指示器 */}
|
||||
<div className="absolute bottom-6 right-6 flex space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
<WsCarousel carouselData={carouselData} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
type CarouselApi
|
||||
} from "@repo/ui/components/carousel";
|
||||
|
||||
interface CarouselComponentProps {
|
||||
carouselData: { id: number; image: string; title: string }[];
|
||||
}
|
||||
|
||||
const CarouselComponent: React.FC<CarouselComponentProps> = ({ carouselData }) => {
|
||||
const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
|
||||
|
||||
// 监听轮播图变化
|
||||
useEffect(() => {
|
||||
if (!carouselAPI) return;
|
||||
|
||||
const updateCurrentIndex = () => {
|
||||
setCurrentIndex(carouselAPI.selectedScrollSnap());
|
||||
};
|
||||
|
||||
carouselAPI.on("select", updateCurrentIndex);
|
||||
|
||||
return () => {
|
||||
carouselAPI.off("select", updateCurrentIndex);
|
||||
};
|
||||
}, [carouselAPI]);
|
||||
|
||||
// 滚动到指定索引
|
||||
const scrollToIndex = (index: number) => {
|
||||
if (carouselAPI) {
|
||||
carouselAPI.scrollTo(index);
|
||||
setCurrentIndex(index);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative"> {/* 添加相对定位 */}
|
||||
<Carousel
|
||||
className="h-[255px] w-[400px]"
|
||||
setApi={setCarouselAPI}
|
||||
plugins={[plugin.current, Autoplay({ delay: 2000, stopOnInteraction: true })]}
|
||||
onMouseEnter={plugin.current.stop}
|
||||
onMouseLeave={plugin.current.reset}
|
||||
>
|
||||
<CarouselContent>
|
||||
{carouselData.map((item) => (
|
||||
<CarouselItem key={item.id}>
|
||||
<div className="h-[255px] w-[400px] relative">
|
||||
<img src={item.image} alt={item.title} className="w-full h-full object-cover rounded-lg" />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
{/* 圆点指示器 */}
|
||||
<div className="absolute bottom-2 right-2 flex justify-center mb-[20px]"> {/* 添加绝对定位 */}
|
||||
{carouselData.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`w-3 h-3 rounded-full mx-1 ${currentIndex === index ? 'bg-red-500' : 'bg-white'}`}
|
||||
onClick={() => scrollToIndex(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CarouselComponent;
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import Autoplay from 'embla-carousel-autoplay';
|
||||
import {
|
||||
Carousel,
|
||||
CarouselApi,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from '@repo/ui/components/carousel';
|
||||
import CarouselComponent from './CarouselComponent';
|
||||
|
||||
|
||||
const LbbzPage: React.FC = () => {
|
||||
// const plugin = useRef(Autoplay({ delay: 1000, stopOnInteraction: true }));
|
||||
// const [currentIndex, setCurrentIndex] = useState(0);
|
||||
// const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
|
||||
// 模拟舆情数据
|
||||
const mockYuqingData = [
|
||||
{ id: 1, title: '开源舆情2025第2期', date: '20250113' },
|
||||
{ id: 2, title: '开源舆情2025第1期', date: '20250107' },
|
||||
{ id: 3, title: '开源舆情2024第52期', date: '20241220' },
|
||||
{ id: 4, title: '开源舆情2024第51期', date: '20241211' },
|
||||
{ id: 5, title: '开源舆情2024第50期', date: '20241127' },
|
||||
{ id: 6, title: '开源舆情2024第49期', date: '20241116' },
|
||||
{ id: 7, title: '开源舆情2024第48期', date: '20241020' },
|
||||
{ id: 8, title: '开源舆情2024第47期', date: '20241016' },
|
||||
{ id: 9, title: '开源舆情2025第2期', date: '20250113' },
|
||||
{ id: 10, title: '开源舆情2025第1期', date: '20250107' },
|
||||
{ id: 11, title: '开源舆情2024第52期', date: '20241220' },
|
||||
{ id: 12, title: '开源舆情2024第51期', date: '20241211' },
|
||||
{ id: 13, title: '开源舆情2024第50期', date: '20241127' },
|
||||
{ id: 14, title: '开源舆情2024第49期', date: '20241116' },
|
||||
{ id: 15, title: '开源舆情2024第48期', date: '20241020' },
|
||||
{ id: 16, title: '开源舆情2024第47期', date: '20241016' },
|
||||
];
|
||||
const carouselData1= [
|
||||
{
|
||||
id: 1,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/book1.png',
|
||||
title: '军事风云第二期 ',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/book2.png',
|
||||
title: '军事风云第三期',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: '/x1.png',
|
||||
title: '军事风云第三期',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: '/x2.png',
|
||||
title: '军事风云第三期',
|
||||
},
|
||||
];
|
||||
|
||||
// // 监听幻灯片变化
|
||||
// useEffect(() => {
|
||||
// if (!carouselAPI) return;
|
||||
|
||||
// const updateCurrentIndex = () => {
|
||||
// setCurrentIndex(carouselAPI.selectedScrollSnap());
|
||||
// };
|
||||
|
||||
// carouselAPI.on('select', updateCurrentIndex);
|
||||
|
||||
// return () => {
|
||||
// carouselAPI.off('select', updateCurrentIndex);
|
||||
// };
|
||||
// }, [carouselAPI]);
|
||||
|
||||
// 滚动到指定索引
|
||||
// const scrollToIndex = (index: number) => {
|
||||
// if (carouselAPI) {
|
||||
// carouselAPI.scrollTo(index);
|
||||
// setCurrentIndex(index); // 更新当前索引
|
||||
// }
|
||||
// };
|
||||
|
||||
// 将数据分成两列
|
||||
const leftColumnData = mockYuqingData.slice(0, 8);
|
||||
const rightColumnData = mockYuqingData.slice(8, 16);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-[677px] w-[1514px] mx-auto relative">
|
||||
{/* 上部容器 */}
|
||||
<div className="h-[60px] w-full relative">
|
||||
<p className="h-full w-full text-4xl font-bold text-[#005d93] italic absolute left-0 mt-2">练兵备战</p>
|
||||
</div>
|
||||
|
||||
{/* 下部容器 */}
|
||||
<div className="h-[607px] w-[1300px] bg-[#082b69] flex flex-col">
|
||||
{/* 上半部分 - 三个并排的容器 */}
|
||||
<div className="flex">
|
||||
<div className="h-[305px] w-[400px] ml-5 mt-5">
|
||||
<CarouselComponent carouselData={carouselData1} />
|
||||
|
||||
<div className="h-[50px] w-[400px] text-white font-medium flex items-center justify-center text-3xl mt-3">
|
||||
军事风云
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[305px] w-[400px] ml-5 mt-5">
|
||||
<CarouselComponent carouselData={carouselData1} />
|
||||
<div className="h-[50px] w-[400px] text-white font-medium flex items-center justify-center text-3xl mt-3">
|
||||
演训聚焦
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[305px] w-[400px] ml-5 mt-5">
|
||||
<div className="h-[255px] w-[400px] ">1</div>
|
||||
<div className="h-[50px] w-[400px] text-white font-medium flex items-center justify-center text-3xl mt-3">
|
||||
开源舆情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 下方新增的容器 */}
|
||||
<div className="h-[280px] w-[1280px] ml-5 mt-8 flex">
|
||||
{/* 左侧 */}
|
||||
<div className="flex-1 mr-[-80px] ">
|
||||
{/* 环球IOS标题 */}
|
||||
<div className="text-white text-3xl flex items-center ml-[10px]">
|
||||
<span
|
||||
style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
|
||||
className="text-white text-3xl mb-35"
|
||||
>
|
||||
环球70S
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 中间 - */}
|
||||
<div className=" flex space-x-1 mb-8 ml-[100px]">
|
||||
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
|
||||
<div
|
||||
className="h-[130px] w-[262px] bg-cover bg-center"
|
||||
style={{ backgroundImage: 'url(/header.png)' }}
|
||||
></div>
|
||||
<div className="p-3 text-center relative">
|
||||
<div className="absolute top-1 left-0 bg-red-500 text-white px-2 py-1 text-sm rounded-sm">
|
||||
2024年40期
|
||||
</div>
|
||||
<p className=" font-medium mt-8 ">巴格多格拉空军基地</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 宣布亚空军基地 */}
|
||||
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
|
||||
<div
|
||||
className="h-[130px] w-[262px] bg-gray-400 bg-cover bg-center"
|
||||
style={{ backgroundImage: 'url(/header.png)' }}
|
||||
></div>
|
||||
<div className="p-3 text-center relative">
|
||||
<div className="absolute top-1 left-0 bg-blue-500 text-white px-2 py-1 text-sm rounded-sm">
|
||||
2024年39期
|
||||
</div>
|
||||
<p className="font-medium mt-8">宣布亚空军基地</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧 - 形势战备 */}
|
||||
<div className="flex-1">
|
||||
{/* 形势战备标题 */}
|
||||
<div className="text-white text-3xl ml-[10px] h-full flex items-center">
|
||||
<span
|
||||
style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
|
||||
className="text-white text-3xl mb-35"
|
||||
>
|
||||
形势战备
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧卡片区域 */}
|
||||
<div className="flex space-x-1 mb-8 mr-[100px] ml-[10px]">
|
||||
{/* 形势战备教育2024年第13期 */}
|
||||
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
|
||||
<div
|
||||
className="h-[130px] w-[262px] bg-cover bg-center"
|
||||
style={{ backgroundImage: 'url(/header.png)' }}
|
||||
></div>
|
||||
<div className="p-3 text-center relative">
|
||||
<div className="absolute top-1 left-0 bg-orange-500 text-white px-2 py-1 text-sm rounded-sm">
|
||||
2024年第13期
|
||||
</div>
|
||||
<p className="text-gray-800 font-medium mt-8">形势战备教育2024年第13期</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 形势战备教育2024年第12期 */}
|
||||
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1 mr-[20px]">
|
||||
<div
|
||||
className="h-[130px] w-[262px] bg-cover bg-center"
|
||||
style={{ backgroundImage: 'url(/header.png)' }}
|
||||
></div>
|
||||
<div className="p-3 text-center relative">
|
||||
<div className="absolute top-1 left-0 bg-green-600 text-white px-2 py-1 text-sm rounded-sm">
|
||||
2024年第12期
|
||||
</div>
|
||||
<p className="text-gray-800 font-medium mt-8">形势战备教育2024年第12期</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 舆情区域 - 两列布局 */}
|
||||
<div className="h-[335px] w-[705px] bg-[#ffffff] absolute right-35 transform translate-y-[-677px] p-6">
|
||||
<div className="flex h-full">
|
||||
{/* 左列 */}
|
||||
<div className="flex-1 pr-4">
|
||||
{leftColumnData.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between py-1 mt-1">
|
||||
{/* 左侧钻石图标和标题 */}
|
||||
<div className="flex items-center flex-1">
|
||||
<div
|
||||
className="w-3 h-3 bg-black mr-2 flex-shrink-0"
|
||||
style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
|
||||
></div>
|
||||
<p className="text-[16px] flex-1">{item.title}</p>
|
||||
</div>
|
||||
{/* 右侧日期 */}
|
||||
<span className="text-[14px] ml-2">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 右列 */}
|
||||
<div className="flex-1 pl-4 ">
|
||||
{rightColumnData.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between py-1 mt-1">
|
||||
{/* 左侧钻石图标和标题 */}
|
||||
<div className="flex items-center flex-1">
|
||||
<div
|
||||
className="w-3 h-3 bg-black mr-2 flex-shrink-0"
|
||||
style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
|
||||
></div>
|
||||
<p className="text-[16px] flex-1">{item.title}</p>
|
||||
</div>
|
||||
{/* 右侧日期 */}
|
||||
<span className="text-[14px] ml-2">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LbbzPage;
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
import JcdtList from './jcdtlist';
|
||||
import FhjtPage from './fhjt';
|
||||
import FhwsPage from './fhws';
|
||||
import BqrxPage from './bqrx';
|
||||
import Integrated from '../integ/Integrated';
|
||||
import FhjtPage from './fhjt/fhjt';
|
||||
import FhwsPage from './fhws/fhws';
|
||||
import BqrxPage from './bqrx/bqrx';
|
||||
import Integrated from '../zhfw/Integrated';
|
||||
import CulturePage from './fhwh/culture';
|
||||
import CultureBgPage from './fhwh/culturebg';
|
||||
import LbbzPage from './lbbz/lbbz';
|
||||
const JcdtContainer = () => {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -21,13 +24,18 @@ const JcdtContainer = () => {
|
|||
></div>
|
||||
</div>
|
||||
<div
|
||||
className="bg-cover bg-center w-[1920px] h-[6000px] ml-1 pt-10"
|
||||
style={{ backgroundImage: 'url(/jcdt.png)' ,backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}}
|
||||
className="bg-cover bg-center w-[1920px] h-[5000px] ml-1 pt-10"
|
||||
style={{ backgroundImage: 'url(/jcdt.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
|
||||
>
|
||||
<JcdtList />
|
||||
<FhjtPage />
|
||||
<FhwsPage />
|
||||
<BqrxPage />
|
||||
<div className="w-[1920px] h-[650px] mt-10">
|
||||
<CulturePage />
|
||||
</div>
|
||||
<CultureBgPage />
|
||||
<LbbzPage />
|
||||
<Integrated />
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { log } from 'console';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import './scroll.css';
|
||||
import JtCarousel from '../jcdt/fhjt/jtCarousel';
|
||||
|
||||
const Navbar: React.FC = () => {
|
||||
const [activeIndex, setActiveIndex] = useState(1); // 当前选中的导航项索引
|
||||
|
|
@ -83,8 +84,26 @@ const Navbar: React.FC = () => {
|
|||
}
|
||||
}, [activeIndex]);
|
||||
|
||||
const carouselData = [
|
||||
{
|
||||
id: 1,
|
||||
image: '/header.png',
|
||||
title: '军事风云第一期',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/header.png',
|
||||
title: '军事风云第二期',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/lanmu.png',
|
||||
title: '军事风云第三期',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className=" w-[1514px] h-[956px] relative " style={{ backgroundColor: '#1f79bf' }}>
|
||||
<div className=" w-[1514px] h-[960px] relative " style={{ backgroundColor: '#1f79bf' }}>
|
||||
{/* 顶部导航栏区域 */}
|
||||
<div className="h-[80px] bg-white flex items-center px-6 relative overflow-hidden border-t-16 border-b-16 border-[#1f79bf]">
|
||||
{/* 左侧搜索框区域 */}
|
||||
|
|
@ -131,55 +150,48 @@ const Navbar: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* 主要内容区域 */}
|
||||
<div className="flex h-[870px] bg-cover bg-center " style={{ backgroundImage: 'url(/lanmu.png)' }}>
|
||||
{/* 左侧内容 */}
|
||||
<div className="flex-1 p-8 text-white">
|
||||
<p></p>
|
||||
<div className="flex bg-cover bg-center relative ">
|
||||
<JtCarousel carouselData={carouselData} />
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火要闻容器 */}
|
||||
<div className="w-[460px] h-[872px] bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1 absolute right-0 top-20">
|
||||
{/* 标题栏 */}
|
||||
<div className="flex justify-between items-center mb-6 border-b-3 border-white">
|
||||
<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2>
|
||||
<button className="">
|
||||
<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
|
||||
查看更多
|
||||
<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火要闻容器 */}
|
||||
<div className="w-[460px] h-[870px] bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1">
|
||||
{/* 标题栏 */}
|
||||
<div className="flex justify-between items-center mb-6 border-b-3 border-white" >
|
||||
<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2>
|
||||
<button className="">
|
||||
<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
|
||||
查看更多
|
||||
<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 文章列表 */}
|
||||
<div className="space-y-2 max-h-[780px] overflow-hidden hover:overflow-auto scroll-container">
|
||||
{articles.map((article, index) => (
|
||||
<div key={index} className="flex items-center space-x-3 pb-4">
|
||||
{/* 左侧竖线和日期 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-[0.7px] h-13 bg-white ml-3"></div>
|
||||
<div className="text-center">
|
||||
<div className="text-white text-3xl font-bold">{article.date.month}</div>
|
||||
<div className="text-gray-300 text-sm">{article.date.day}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 右侧文章内容 */}
|
||||
<div className="flex-1">
|
||||
<p className="text-[13px] text-white ">{article.title}<a href="#" className="text-red-600 text-sm hover:font-bold">【MORE】</a></p>
|
||||
|
||||
{/* 文章列表 */}
|
||||
<div className="space-y-1 h-[750px] overflow-hidden hover:overflow-auto scroll-container">
|
||||
{articles.map((article, index) => (
|
||||
<div key={index} className="flex items-center space-x-3 pb-4">
|
||||
{/* 左侧竖线和日期 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-[0.7px] h-13 bg-white ml-3"></div>
|
||||
<div className="text-center">
|
||||
<div className="text-white text-3xl font-bold">{article.date.month}</div>
|
||||
<div className="text-gray-300 text-sm">{article.date.day}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
{/* 右侧文章内容 */}
|
||||
<div className="flex-1">
|
||||
<p className="text-[13px] text-white ">
|
||||
{article.title}
|
||||
<a href="#" className="text-red-600 text-sm hover:font-bold">
|
||||
【MORE】
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex justify-center space-x-2 absolute bottom-4 left-4">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const NewPage = () => {
|
|||
</div>
|
||||
{/* 查看更多标签 */}
|
||||
<div className="absolute right-0 mt-2 mr-2">
|
||||
<button className="text-[18px] hover:font-bold" style={{ color: '#6c6c6a' }} >
|
||||
<button className="text-[18px] text-[#6c6c6a] hover:text-[#005d93]">
|
||||
【查看更多】
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -44,8 +44,8 @@ const NewPage = () => {
|
|||
<div key={index} className="flex items-center justify-between py-3">
|
||||
{/* 左侧圆点和标题 */}
|
||||
<div className="flex items-center flex-1">
|
||||
<div className="w-3 h-3 bg-gray-400 mr-3 flex-shrink-0" style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}></div>
|
||||
<p className="text-[20px] flex-1">{item.title}</p>
|
||||
<div className="w-3 h-3 bg-gray-400 mr-3 flex-shrink-0 " style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}></div>
|
||||
<a href="#" className="text-[20px] flex-1 hover:text-[#005d93]">{item.title}</a>
|
||||
</div>
|
||||
{/* 右侧日期 */}
|
||||
<span className="text-[18px] text-gray-500 ml-4 ">{item.date}</span>
|
||||
|
|
@ -60,7 +60,7 @@ const NewPage = () => {
|
|||
</div>
|
||||
{/* 查看更多标签 */}
|
||||
<div className="absolute right-0 mt-2 mr-2">
|
||||
<button className="text-[18px] hover:font-bold" style={{ color: '#6c6c6a' }} >
|
||||
<button className="text-[18px] text-[#6c6c6a] hover:text-[#005d93] " >
|
||||
【查看更多】
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,7 @@ const NewPage = () => {
|
|||
{/* 左侧圆点和标题 */}
|
||||
<div className="flex items-center flex-1">
|
||||
<div className="w-3 h-3 bg-gray-400 mr-3 flex-shrink-0" style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}></div>
|
||||
<p className="text-[20px] flex-1">{item.title}</p>
|
||||
<a href="#" className="text-[20px] flex-1 hover:text-[#005d93]">{item.title}</a>
|
||||
</div>
|
||||
{/* 右侧日期 */}
|
||||
<span className="text-[18px] text-gray-500 ml-4">{item.date}</span>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
'use client';
|
||||
import React from 'react';
|
||||
import { Carousel } from 'antd';
|
||||
// ... existing code ...
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import Autoplay from 'embla-carousel-autoplay';
|
||||
import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '@repo/ui/components/carousel';
|
||||
|
||||
const CarouselDemo: React.FC = () => {
|
||||
const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
|
||||
|
||||
// 轮播图数据
|
||||
const slides = [
|
||||
{
|
||||
|
|
@ -22,20 +27,64 @@ const CarouselDemo: React.FC = () => {
|
|||
},
|
||||
];
|
||||
|
||||
// 监听轮播图变化
|
||||
useEffect(() => {
|
||||
if (!carouselAPI) return;
|
||||
|
||||
const updateCurrentIndex = () => {
|
||||
setCurrentIndex(carouselAPI.selectedScrollSnap());
|
||||
};
|
||||
|
||||
carouselAPI.on('select', updateCurrentIndex);
|
||||
|
||||
return () => {
|
||||
carouselAPI.off('select', updateCurrentIndex);
|
||||
};
|
||||
}, [carouselAPI]);
|
||||
|
||||
// 滚动到指定索引
|
||||
const scrollToIndex = (index: number) => {
|
||||
if (carouselAPI) {
|
||||
carouselAPI.scrollTo(index);
|
||||
setCurrentIndex(index);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Carousel autoplay style={{ height: '100%' }} className="h-full">
|
||||
{slides.map((slide) => (
|
||||
<div key={slide.id}>
|
||||
<img
|
||||
className="bg-cover bg-center"
|
||||
src={slide.image}
|
||||
alt={slide.content}
|
||||
style={{ height: '540px', width: '100%', objectFit: 'fill' }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="relative w-full h-full">
|
||||
<Carousel
|
||||
className="h-full w-full"
|
||||
setApi={setCarouselAPI}
|
||||
plugins={[plugin.current, Autoplay({ delay: 2000, stopOnInteraction: true })]}
|
||||
onMouseEnter={plugin.current.stop}
|
||||
onMouseLeave={plugin.current.reset}
|
||||
>
|
||||
<CarouselContent className="h-[540px]">
|
||||
{slides.map((slide) => (
|
||||
<CarouselItem key={slide.id}>
|
||||
<div className="h-full w-full relative">
|
||||
<img
|
||||
src={slide.image}
|
||||
alt={slide.content}
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectFit: 'fill', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
|
||||
/>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
{/* 圆点指示器 */}
|
||||
<div className="absolute bottom-5 right-5 flex justify-center space-x-2 ">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`w-8 h-1 rounded-full mx-1 ${currentIndex === index ? 'bg-white' : 'bg-white opacity-50'}`}
|
||||
onClick={() => scrollToIndex(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,19 +14,19 @@ const LearnPage = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="w-[1514px] h-[1086px] bg-white mt-10 mb-10">
|
||||
<div className="w-[1514px] h-[1086px] mt-10 mb-10">
|
||||
{/* 学习进行时图片 */}
|
||||
<div className="w-[282px] h-[80px] bg-cover bg-center" style={{ backgroundImage: 'url(/learn.png)' }}></div>
|
||||
{/* 轮播图 */}
|
||||
<div className="w-[1514px] h-[700px] bg-black mt-5 flex ">
|
||||
<div className="w-[1514px] h-[700px] mt-5 flex ">
|
||||
{/* 左边容器 */}
|
||||
<div className="w-[1031px] h-full bg-blue-500 ">
|
||||
<div className="w-full h-[540px] bg-red-500 flex">
|
||||
<div className="w-[1031px] h-full ">
|
||||
<div className="w-full h-[540px] flex">
|
||||
<div
|
||||
className="w-[344px] h-[540px] bg-gray-500 bg-cover bg-center"
|
||||
style={{ backgroundImage: 'url(/x4.png)' }}
|
||||
></div>
|
||||
<div className="w-[687px] h-[540px] bg-purple-500">
|
||||
<div className="w-[687px] h-[540px] bg-cover bg-center">
|
||||
<CarouselDemo/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,10 @@
|
|||
"@trpc/tanstack-react-query": "11.1.2",
|
||||
"antd": "^5.25.4",
|
||||
"axios": "^1.7.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"dayjs": "^1.11.12",
|
||||
"embla-carousel-autoplay": "^8.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"lucide-react": "0.511.0",
|
||||
"next": "15.3.2",
|
||||
"next-themes": "^0.4.6",
|
||||
|
|
@ -32,6 +35,7 @@
|
|||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"superjson": "^2.2.2",
|
||||
"swiper": "^11.2.8",
|
||||
"tus-js-client": "^4.3.1",
|
||||
"valibot": "^1.1.0"
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 471 KiB After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
|
|
@ -95,7 +95,7 @@ importers:
|
|||
devDependencies:
|
||||
'@types/bun':
|
||||
specifier: latest
|
||||
version: 1.2.15
|
||||
version: 1.2.16
|
||||
'@types/node':
|
||||
specifier: ^22.15.21
|
||||
version: 22.15.21
|
||||
|
|
@ -153,9 +153,18 @@ importers:
|
|||
axios:
|
||||
specifier: ^1.7.2
|
||||
version: 1.7.7
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
dayjs:
|
||||
specifier: ^1.11.12
|
||||
version: 1.11.13
|
||||
embla-carousel-autoplay:
|
||||
specifier: ^8.6.0
|
||||
version: 8.6.0(embla-carousel@8.6.0)
|
||||
embla-carousel-react:
|
||||
specifier: ^8.6.0
|
||||
version: 8.6.0(react@19.1.0)
|
||||
lucide-react:
|
||||
specifier: 0.511.0
|
||||
version: 0.511.0(react@19.1.0)
|
||||
|
|
@ -177,6 +186,9 @@ importers:
|
|||
superjson:
|
||||
specifier: ^2.2.2
|
||||
version: 2.2.2
|
||||
swiper:
|
||||
specifier: ^11.2.8
|
||||
version: 11.2.8
|
||||
tus-js-client:
|
||||
specifier: ^4.3.1
|
||||
version: 4.3.1
|
||||
|
|
@ -2597,8 +2609,8 @@ packages:
|
|||
'@types/body-parser@1.19.5':
|
||||
resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
|
||||
|
||||
'@types/bun@1.2.15':
|
||||
resolution: {integrity: sha512-U1ljPdBEphF0nw1MIk0hI7kPg7dFdPyM7EenHsp6W5loNHl7zqy6JQf/RKCgnUn2KDzUpkBwHPnEJEjII594bA==}
|
||||
'@types/bun@1.2.16':
|
||||
resolution: {integrity: sha512-1aCZJ/6nSiViw339RsaNhkNoEloLaPzZhxMOYEa7OzRzO41IGg5n/7I43/ZIAW/c+Q6cT12Vf7fOZOoVIzb5BQ==}
|
||||
|
||||
'@types/command-line-args@5.2.3':
|
||||
resolution: {integrity: sha512-uv0aG6R0Y8WHZLTamZwtfsDLVRnOa+n+n5rEvFWL5Na5gZ8V2Teab/duDPFzIIIhs9qizDpcavCusCLJZu62Kw==}
|
||||
|
|
@ -2998,8 +3010,8 @@ packages:
|
|||
buffer@5.7.1:
|
||||
resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
|
||||
|
||||
bun-types@1.2.15:
|
||||
resolution: {integrity: sha512-NarRIaS+iOaQU1JPfyKhZm4AsUOrwUOqRNHY0XxI8GI8jYxiLXLcdjYMG9UKS+fwWasc1uw1htV9AX24dD+p4w==}
|
||||
bun-types@1.2.16:
|
||||
resolution: {integrity: sha512-ciXLrHV4PXax9vHvUrkvun9VPVGOVwbbbBF/Ev1cXz12lyEZMoJpIJABOfPcN9gDJRaiKF9MVbSygLg4NXu3/A==}
|
||||
|
||||
bundle-require@4.2.1:
|
||||
resolution: {integrity: sha512-7Q/6vkyYAwOmQNRw75x+4yRtZCZJXUDmHHlFdkiV0wgv/reNjtJwpu1jPJ0w2kbEpIM0uoKI3S4/f39dU7AjSA==}
|
||||
|
|
@ -3449,6 +3461,24 @@ packages:
|
|||
electron-to-chromium@1.5.157:
|
||||
resolution: {integrity: sha512-/0ybgsQd1muo8QlnuTpKwtl0oX5YMlUGbm8xyqgDU00motRkKFFbUJySAQBWcY79rVqNLWIWa87BGVGClwAB2w==}
|
||||
|
||||
embla-carousel-autoplay@8.6.0:
|
||||
resolution: {integrity: sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==}
|
||||
peerDependencies:
|
||||
embla-carousel: 8.6.0
|
||||
|
||||
embla-carousel-react@8.6.0:
|
||||
resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
|
||||
embla-carousel-reactive-utils@8.6.0:
|
||||
resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
|
||||
peerDependencies:
|
||||
embla-carousel: 8.6.0
|
||||
|
||||
embla-carousel@8.6.0:
|
||||
resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
|
||||
|
||||
emoji-regex@8.0.0:
|
||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||
|
||||
|
|
@ -5633,6 +5663,10 @@ packages:
|
|||
swap-case@1.1.2:
|
||||
resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
|
||||
|
||||
swiper@11.2.8:
|
||||
resolution: {integrity: sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==}
|
||||
engines: {node: '>= 4.7.0'}
|
||||
|
||||
table-layout@4.1.1:
|
||||
resolution: {integrity: sha512-iK5/YhZxq5GO5z8wb0bY1317uDF3Zjpha0QFFLA8/trAoiLbQD0HUbMesEaxyzUgDxi2QlcbM8IvqOlEjgoXBA==}
|
||||
engines: {node: '>=12.17'}
|
||||
|
|
@ -8446,9 +8480,9 @@ snapshots:
|
|||
'@types/connect': 3.4.38
|
||||
'@types/node': 20.17.50
|
||||
|
||||
'@types/bun@1.2.15':
|
||||
'@types/bun@1.2.16':
|
||||
dependencies:
|
||||
bun-types: 1.2.15
|
||||
bun-types: 1.2.16
|
||||
|
||||
'@types/command-line-args@5.2.3': {}
|
||||
|
||||
|
|
@ -8993,7 +9027,7 @@ snapshots:
|
|||
base64-js: 1.5.1
|
||||
ieee754: 1.2.1
|
||||
|
||||
bun-types@1.2.15:
|
||||
bun-types@1.2.16:
|
||||
dependencies:
|
||||
'@types/node': 20.17.50
|
||||
|
||||
|
|
@ -9454,6 +9488,22 @@ snapshots:
|
|||
|
||||
electron-to-chromium@1.5.157: {}
|
||||
|
||||
embla-carousel-autoplay@8.6.0(embla-carousel@8.6.0):
|
||||
dependencies:
|
||||
embla-carousel: 8.6.0
|
||||
|
||||
embla-carousel-react@8.6.0(react@19.1.0):
|
||||
dependencies:
|
||||
embla-carousel: 8.6.0
|
||||
embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
|
||||
react: 19.1.0
|
||||
|
||||
embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
|
||||
dependencies:
|
||||
embla-carousel: 8.6.0
|
||||
|
||||
embla-carousel@8.6.0: {}
|
||||
|
||||
emoji-regex@8.0.0: {}
|
||||
|
||||
emoji-regex@9.2.2: {}
|
||||
|
|
@ -12047,6 +12097,8 @@ snapshots:
|
|||
lower-case: 1.1.4
|
||||
upper-case: 1.1.3
|
||||
|
||||
swiper@11.2.8: {}
|
||||
|
||||
table-layout@4.1.1:
|
||||
dependencies:
|
||||
array-back: 6.2.2
|
||||
|
|
|
|||
Loading…
Reference in New Issue