liaohui
/
fenghuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

jcdt的梯形和学习进行时布局完善

This commit is contained in:
Li1304553726 2025-06-10 15:12:33 +08:00
parent 5fdea3a1fd
commit 1fdcc1f72c
15 changed files with 1035 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/app/page.tsx
View File

@ -3,7 +3,7 @@
import Content from "@/components/content/page";
import Footer from "@/components/footer/footer";
import Header from "@/components/header/header";
import JcdtContainer from "@/components/content/jcdt/page";
export default function HomePage() {
return (

27
apps/web/components/content/jcdt/page.tsx
View File

@ -1,15 +1,20 @@
const JcdtContainer = () => {
return (
<>
<div className=" bg-[#0082e9] w-[1514px] h-[60px] ml-1">
</div>
<div className="bg-cover bg-center w-[1920px] h-[7250px] ml-1" style={{ backgroundImage: 'url(/jcdt.png)' }}>
</div>
</>
);
return (
<>
<div
className="bg-[#0082e9] w-[1514px] h-[60px] ml-1 "
style={{
clipPath: 'polygon(0 0, calc(100% - 150px)1%, calc(100% - 30px) 100%, 0 100%)',
}}
>
{/* 内容 */}
</div>
<div
className="bg-cover bg-center w-[1920px] h-[7250px] ml-1"
style={{ backgroundImage: 'url(/jcdt.png)' }}
></div>
</>
);
};
export default JcdtContainer;

2
apps/web/components/content/page.tsx
View File

@ -8,7 +8,7 @@ const Content: React.FC = () => {
// style={{ backgroundColor: '#e0dbdb' }}
<div
className="w-[1920px] min-h-[calc(100vh-704px-758px)] relative left-1/2 transform -translate-x-1/2 bg-center flex justify-center items-center"
style={{ backgroundColor: '#e0dbdb' }}
>
<div className="w-[1514px] h-[10000px]">
<Navbar />

2
apps/web/components/content/qjsx/page.tsx
View File

@ -56,7 +56,7 @@ const NewPage = () => {
<div className="w-[750px] h-[568px] bg-white relative shadow-xl">
{/* 标题栏 */}
<div className="w-[228px] h-[62px] absolute top-[-30px] left-[0px]" style={{ backgroundColor: '#1c6cab' }}>
<p className="text-white text-[38px] font-bold text-center justify-center">强军思想</p>
<p className="text-white text-[38px] font-bold text-center justify-center">强X思想</p>
</div>
{/* 查看更多标签 */}
<div className="absolute right-0 mt-2 mr-2">

47
apps/web/components/content/xxjxs/carouselDemo.tsx Normal file
View File

@ -0,0 +1,47 @@
'use client';
import React from 'react';
import { Carousel } from 'antd';
const CarouselDemo: React.FC = () => {
// 轮播图数据
const slides = [
{
id: 1,
image: '/header.png',
content: '两会闭幕 从春天出发',
},
{
id: 2,
image: '/header.png',
content: '习近平主席重要讲话',
},
{
id: 3,
image: '/header.png',
content: '全国人大代表步出人民大会堂',
},
];
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>
))}
</Carousel>
</div>
);
};
export default CarouselDemo;

27
apps/web/components/content/xxjxs/page.tsx
View File

@ -1,3 +1,5 @@
import CarouselDemo from './carouselDemo';
const LearnPage = () => {
const newsList = [
{ title: '中华人民共和国监察法', id: 1 },
@ -18,11 +20,26 @@ const LearnPage = () => {
{/* 轮播图 */}
<div className="w-[1514px] h-[700px] bg-black mt-5 flex ">
{/* 左边容器 */}
<div className="w-[1000px] h-[647px] bg-blue-500 ml-20">{/* 左边容器内容 */}</div>
<div className="w-[1031px] h-full bg-blue-500 ">
<div className="w-full h-[540px] bg-red-500 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">
<CarouselDemo/>
</div>
</div>
<div className="w-full h-[160px] bg-black flex">
<div className="flex-1 bg-red-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x1.png)' }}></div>
<div className="flex-1 bg-green-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x2.png)' }}></div>
<div className="flex-1 bg-blue-500 bg-cover bg-center" style={{ backgroundImage: 'url(/x3.png)' }}></div>
</div>
</div>
{/* 新闻容器 */}
<div className="w-[483px] h-[647px] px-6 py-8" style={{ backgroundColor: '#F8F8F6' }}>
<div className="w-[483px] h-full px-6 py-8" style={{ backgroundColor: '#F8F8F6' }}>
{/* 新闻列表 */}
<div className="space-y-10 mt-5">
<div className="space-y-11 mt-5">
{newsList.map((news, index) => (
<div key={news.id} className="flex items-start">
{/* 圆点 */}
@ -58,8 +75,8 @@ const LearnPage = () => {
style={{ backgroundImage: 'url(/book2.png)' }}
></div>
{/* 右边容器内容 */}
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">习近平著作选读</p>
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
</div>
</div>
</div>

1
apps/web/package.json
View File

@ -22,6 +22,7 @@
"@trpc/react-query": "11.1.2",
"@trpc/server": "11.1.2",
"@trpc/tanstack-react-query": "11.1.2",
"antd": "^5.25.4",
"axios": "^1.7.2",
"dayjs": "^1.11.12",
"lucide-react": "0.511.0",

BIN
apps/web/public/x1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
apps/web/public/x2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
apps/web/public/x3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
apps/web/public/x4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

1
package.json
View File

@ -22,3 +22,4 @@
"node": ">=20"
}
}

95
packages/ui/src/components/alert.tsx
View File

@ -1,66 +1,49 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "@repo/ui/lib/utils"
import { cn } from '@repo/ui/lib/utils';
const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
{
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
},
},
defaultVariants: {
variant: "default",
},
}
)
'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
{
variants: {
variant: {
default: 'bg-card text-card-foreground',
destructive:
'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
},
},
defaultVariants: {
variant: 'default',
},
},
);
function Alert({
className,
variant,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
)
function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
}
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-title"
className={cn(
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
className
)}
{...props}
/>
)
function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-title"
className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
{...props}
/>
);
}
function AlertDescription({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-description"
className={cn(
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
className
)}
{...props}
/>
)
function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-description"
className={cn(
'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
className,
)}
{...props}
/>
);
}
export { Alert, AlertTitle, AlertDescription }
export { Alert, AlertTitle, AlertDescription };

20
packages/ui/tsconfig.json
View File

@ -1,11 +1,13 @@
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@repo/ui/*": ["./src/*"]
}
},
"include": ["."],
"exclude": ["node_modules", "dist"]
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@repo/ui/*": ["./src/*"]
},
"module": "NodeNext",
"moduleResolution": "NodeNext"
},
"include": ["."],
"exclude": ["node_modules", "dist"]
}

894
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff