|
@@ -0,0 +1,57 @@
|
|
|
|
|
+'use client'
|
|
|
|
|
+import React from 'react';
|
|
|
|
|
+import {Carousel, Tabs, TabsProps} from "antd";
|
|
|
|
|
+import Image from "next/image";
|
|
|
|
|
+
|
|
|
|
|
+function Honor({honorList}: {honorList: HonorInfo[]}) {
|
|
|
|
|
+ const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
|
|
|
|
|
+ function CategoryCarousel({ images }: { images: Array<{ id: string; url: string;}> }) {
|
|
|
|
|
+ // 将图片按每页3个分组
|
|
|
|
|
+ const imageGroups = []
|
|
|
|
|
+ for (let i = 0; i < images.length; i += 3) {
|
|
|
|
|
+ imageGroups.push(images.slice(i, i + 3))
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className="relative">
|
|
|
|
|
+ <Carousel arrows dots={true} infinite={false}>
|
|
|
|
|
+ {imageGroups.map((group, groupIndex) => (
|
|
|
|
|
+ <div key={groupIndex}>
|
|
|
|
|
+ <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 p-4">
|
|
|
|
|
+ {group.map((image) => (
|
|
|
|
|
+ <div key={image.id} className="relative group">
|
|
|
|
|
+ <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
|
|
|
|
|
+ <Image
|
|
|
|
|
+ src={ BASE_URL + image.url || "/placeholder.svg"}
|
|
|
|
|
+ alt={"证书"}
|
|
|
|
|
+ width={400}
|
|
|
|
|
+ height={300}
|
|
|
|
|
+ className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
|
|
|
|
|
+ />
|
|
|
|
|
+ <div className="p-4">
|
|
|
|
|
+ <p className="text-sm text-gray-600 text-center">证书</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </Carousel>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const tabItems: TabsProps["items"] = honorList.map((honor,index) => ({
|
|
|
|
|
+ key: honor.id || index.toString(),
|
|
|
|
|
+ label: honor.certificateType || "未知",
|
|
|
|
|
+ children: <CategoryCarousel images={honor.fileList || []} />,
|
|
|
|
|
+ }))
|
|
|
|
|
+ return (
|
|
|
|
|
+ <>
|
|
|
|
|
+ <Tabs defaultActiveKey="honor" items={tabItems} className="w-full" centered/>
|
|
|
|
|
+ </>
|
|
|
|
|
+ );
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+export default Honor;
|