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

apps/web/app/page.tsx

@@ -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 (

apps/web/components/content/jcdt/page.tsx

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

apps/web/components/content/page.tsx

@@ -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 />

apps/web/components/content/qjsx/page.tsx

@@ -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">

apps/web/components/content/xxjxs/carouselDemo.tsx

@@ -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;

apps/web/components/content/xxjxs/page.tsx

@@ -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">
 								{/* 圆点 */}
@@ -59,7 +76,7 @@ const LearnPage = () => {
 					></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>
+						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
 					</div>
 				</div>
 			</div>

apps/web/package.json

@@ -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",

package.json

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

packages/ui/src/components/alert.tsx

@@ -1,66 +1,49 @@
-import * as React from "react"
+import * as React from 'react';
-import { cva, type VariantProps } from "class-variance-authority"
+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",
+	'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",
+				default: 'bg-card text-card-foreground',
 				destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+					'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
 			},
 		},
 		defaultVariants: {
-      variant: "default",
+			variant: 'default',
 		},
-  }
+	},
-)
+);
 
-function Alert({
+function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-  className,
+	return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
-  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">) {
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
 	return (
 		<div
 			data-slot="alert-title"
-      className={cn(
+			className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
 			{...props}
 		/>
-  )
+	);
 }
 
-function AlertDescription({
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  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",
+				'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

packages/ui/tsconfig.json

@@ -4,7 +4,9 @@
 		"baseUrl": ".",
 		"paths": {
 			"@repo/ui/*": ["./src/*"]
-    }
+		},
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
 	},
 	"include": ["."],
 	"exclude": ["node_modules", "dist"]