import React from "react"
import { Button, Card } from "antd"
// 使用 CSS-in-JS 方式
import styled, { keyframes } from 'styled-components'
const rotate = keyframes`
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
`
const breathe = keyframes`
0% {
box-shadow: 0 0 5px rgba(37, 231, 232, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(37, 231, 232, 0.8);
}
100% {
box-shadow: 0 0 5px rgba(37, 231, 232, 0.3);
}
`
const CircleElement = styled.div<{ delay: number }>`
position: absolute;
width: 300px;
height: 160px;
background: #3b82f6; // blue-500
opacity: 0.2;
border-radius: 50%;
top: 55%;
left: 50%;
animation: ${rotate} 6s linear infinite, ${breathe} 2s infinite alternate;
animation-delay: ${props => props.delay}s;
`
const SuccessIcon = () => {
return (
)
}
const LoadingIcon = () => {
return (
)
}
const SearchIcon = () => {
return (
)
}
export const PlaygroundIodRelevant: React.FC = () => {
const data = [
{
title: 已在29个科学数据中心的50万个科学数据集中进行搜索
,
description: 已发现 4个 数据集
,
status: "success"
},
{
title: 已在100万篇论文、2800个科创场景中进行搜索
,
description: "已发现4个数据集",
status: "success"
},
{
title: 正在1000位智库专家、12万个创新机构中进行搜索
,
status: "loading"
}
]
for (let i = 0; i < 10; i++) {
data.push({
title: 正在1000位智库专家、12万个创新机构中进行搜索{i}
,
description: "已发现4个数据集",
status: "success"
})
}
return (
{/* 花瓣效果 */}
{/* Header */}
数联网搜索相关内容
下面是在数联网上进行深度搜索的相关内容
{/* Content */}
{data.map((item, index) => (
{item.status === "success" ? (
) : (
)}
{item.title}
{item.description && (
{item.description}
)}
))}