|
@@ -1,4 +1,4 @@
|
|
|
-import {Button} from "antd"
|
|
|
|
|
|
|
+import Link from "next/link"
|
|
|
import {ArrowRightOutlined} from "@ant-design/icons"
|
|
import {ArrowRightOutlined} from "@ant-design/icons"
|
|
|
import MainTitle from "@/components/MainTitle"
|
|
import MainTitle from "@/components/MainTitle"
|
|
|
import Image from "next/image"
|
|
import Image from "next/image"
|
|
@@ -26,7 +26,6 @@ export default async function SolutionsPage({
|
|
|
cache: "force-cache"
|
|
cache: "force-cache"
|
|
|
})
|
|
})
|
|
|
const solutionsData = res.data.records
|
|
const solutionsData = res.data.records
|
|
|
-
|
|
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
<AnimatedSection effect="slide" direction="left">
|
|
<AnimatedSection effect="slide" direction="left">
|
|
@@ -44,64 +43,66 @@ export default async function SolutionsPage({
|
|
|
<div className="w-9/10 sm:w-7/10 mx-auto px-3 sm:px-4 py-4 sm:py-8">
|
|
<div className="w-9/10 sm:w-7/10 mx-auto px-3 sm:px-4 py-4 sm:py-8">
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6 mb-4 sm:mb-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6 mb-4 sm:mb-8">
|
|
|
{solutionsData.map((solution, index) => (
|
|
{solutionsData.map((solution, index) => (
|
|
|
- <div
|
|
|
|
|
|
|
+ <Link
|
|
|
key={solution.id}
|
|
key={solution.id}
|
|
|
- className="h-full shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 rounded-xl overflow-hidden bg-white relative"
|
|
|
|
|
- style={{
|
|
|
|
|
- backgroundImage: `url("/assets/solutions/2.png")`,
|
|
|
|
|
- backgroundSize: "cover",
|
|
|
|
|
- }}
|
|
|
|
|
|
|
+ href={`/solutions/${solution.id}`}
|
|
|
|
|
+ className="block h-full cursor-pointer group"
|
|
|
>
|
|
>
|
|
|
- {/* 内容容器 */}
|
|
|
|
|
- <div className="p-4 sm:p-6 h-full flex flex-col relative z-10">
|
|
|
|
|
- <div className="mb-2 sm:mb-3">
|
|
|
|
|
- <h3
|
|
|
|
|
- className="text-base sm:text-lg font-semibold text-black mb-1 sm:mb-2 line-clamp-2 leading-tight sm:leading-normal drop-shadow-sm">
|
|
|
|
|
- {solution.programName}
|
|
|
|
|
- </h3>
|
|
|
|
|
- <p className="text-xs sm:text-sm text-black/80 mb-2 sm:mb-3 drop-shadow-sm">
|
|
|
|
|
- {solution.releaseTime}
|
|
|
|
|
- </p>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ className="h-full shadow-md hover:shadow-lg transition-all duration-300 transform group-hover:-translate-y-1 rounded-xl overflow-hidden bg-white relative"
|
|
|
|
|
+ style={{
|
|
|
|
|
+ backgroundImage: `url("/assets/solutions/2.png")`,
|
|
|
|
|
+ backgroundSize: "cover",
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {/* 内容容器 */}
|
|
|
|
|
+ <div className="p-4 sm:p-6 h-full flex flex-col relative z-10">
|
|
|
|
|
+ <div className="mb-2 sm:mb-3">
|
|
|
|
|
+ <h3
|
|
|
|
|
+ className="text-base sm:text-lg font-semibold text-black mb-1 sm:mb-2 line-clamp-2 leading-tight sm:leading-normal drop-shadow-sm">
|
|
|
|
|
+ {solution.programName}
|
|
|
|
|
+ </h3>
|
|
|
|
|
+ <p className="text-xs sm:text-sm text-black/80 mb-2 sm:mb-3 drop-shadow-sm">
|
|
|
|
|
+ {solution.releaseTime}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div className="flex-1 mb-4">
|
|
|
|
|
- <p
|
|
|
|
|
- className="text-black/90 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-4 drop-shadow-sm">
|
|
|
|
|
- {removeHTMLTags(solution.programDetails)}
|
|
|
|
|
- </p>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div className="flex-1 mb-4">
|
|
|
|
|
+ <p
|
|
|
|
|
+ className="text-black/90 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-4 drop-shadow-sm">
|
|
|
|
|
+ {removeHTMLTags(solution.programDetails)}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- {/* 按钮区域 */}
|
|
|
|
|
- <div className="mt-auto pt-3 border-t border-white/20">
|
|
|
|
|
- <Button
|
|
|
|
|
- href={`/solutions/${solution.id}`}
|
|
|
|
|
- type="link"
|
|
|
|
|
- icon={<ArrowRightOutlined/>}
|
|
|
|
|
- className="text-white hover:text-white/80 p-0 h-auto font-medium transition-colors duration-200"
|
|
|
|
|
- style={{
|
|
|
|
|
- color: "black",
|
|
|
|
|
- textShadow: "0 1px 2px rgba(0,0,0,0.3)",
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- 了解更多
|
|
|
|
|
- </Button>
|
|
|
|
|
|
|
+ {/* 按钮区域 */}
|
|
|
|
|
+ <div className="mt-auto pt-3 border-t border-white/20">
|
|
|
|
|
+ <div
|
|
|
|
|
+ className="flex items-center gap-2 text-black font-medium transition-colors duration-200"
|
|
|
|
|
+ style={{
|
|
|
|
|
+ textShadow: "0 1px 2px rgba(0,0,0,0.3)",
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ 了解更多
|
|
|
|
|
+ <ArrowRightOutlined />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
|
|
|
- {/* 装饰性元素 */}
|
|
|
|
|
- <div
|
|
|
|
|
- className="absolute top-0 right-0 w-20 h-20 opacity-10"
|
|
|
|
|
- style={{
|
|
|
|
|
- background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)",
|
|
|
|
|
- transform: "translate(25%, -25%)",
|
|
|
|
|
- }}
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ {/* 装饰性元素 */}
|
|
|
|
|
+ <div
|
|
|
|
|
+ className="absolute top-0 right-0 w-20 h-20 opacity-10"
|
|
|
|
|
+ style={{
|
|
|
|
|
+ background: "radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)",
|
|
|
|
|
+ transform: "translate(25%, -25%)",
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </Link>
|
|
|
))}
|
|
))}
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div className="flex justify-center">
|
|
<div className="flex justify-center">
|
|
|
- <PaginationClient current={pageNum} total={solutionsData.length} pageSize={pageSize}/>
|
|
|
|
|
|
|
+ <PaginationClient current={pageNum} total={res.data.total} pageSize={pageSize}/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|