yintai-company-home/src/components/layout/AnimateTopCard/index.tsx

25 lines
892 B
TypeScript

import styles from './index.module.css';
import { Link } from 'react-router-dom';
type Data = {
title: string;
content: string;
backgroundImage: string;
path: string;
moreText: string;
}
export default function AnimateTopCard({ data }: { data: Data }) {
return (
<div className={styles.card} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
<div className={styles.cardMask}></div>
<div className={styles.cardInner}>
<div className={styles.cardTitle}><span>{data.title}</span></div>
<div className={styles.cardTitleUnderline}></div>
<div className={styles.cardContent}>
<div>{data.content}</div>
<Link to={data.path} className={styles.cardMore}>{data.moreText}</Link>
</div>
</div>
</div>
);
}