General-AI-Platform-Web/src/pages/Project/BusinessInfo/components/algorithmCard.tsx

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-08 16:57:30
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-05-09 09:54:36
 * @FilePath: \general-ai-manage\src\pages\Project\BusinessProject\components\businessCard.tsx
 * @Description: 企业项目卡片
 */
import { ProCard } from '@ant-design/pro-components';
import { Image, theme } from 'antd';
import icon1 from '/public/images/bussnessInfo/icon1.png';
import svg1 from '/public/images/bussnessInfo/model_1.png';

import icon2 from '/public/images/bussnessInfo/icon2.png';

type AlgorithmCardProps = {
  info: Record<string, any>;
};

const AlgorithmCard: React.FC<AlgorithmCardProps> = ({ info }) => {
  const { token } = theme.useToken();
  console.log(theme, 'AlgorithmCard_token', theme.useToken());
  return (
    <ProCard
      className="algorithmCard_box"
      style={{
        backgroundColor: '#F5F6FF',
        margin: 0,
        padding: 0,
        borderRadius: 4,
        boxShadow: 'inset 2px 2px 4px 0px #D8E8FF, inset -2px -2px 4px 0px #D8E8FF',
        border: '1px solid #FFFFFF',
      }}
      bodyStyle={{ margin: 0, padding: 0 }}
    >
      <div className="flex justify-between px-[16px] py-[20px]">
        <div>
          <div className="flex items-center mb-[12px] ">
            <span
              className="pr-[16px] head3 single_line w-[150px]"
              style={{
                color: token.colorPrimary,
              }}
            >
              {info.name}
            </span>
            <span
              className="tag_type"
              style={{
                background:
                  info.typeName === '深度学习'
                    ? 'linear-gradient( 180deg, #FFB21A 0%, #FF9B3E 100%)'
                    : 'linear-gradient(180deg, #21c7ff 0%, #428cff 100%)',
              }}
            >
              {info.typeName}
            </span>
          </div>
          <ul className="p1">
            <li className="flex items-center mb-[8px]">
              <Image width={16} className="flex items-center" preview={false} src={icon1} />
              <span className="pl-[8px]"> 版本：</span>
              <span className="text_color_1">{info.version}</span>
            </li>
            <li className="flex items-center">
              <Image width={16} className="flex items-center" preview={false} src={icon2} />
              <span className="pl-[8px]"> 适用行业：</span>
              <span className="text_color_1">{info.industryName}</span>
            </li>
          </ul>
        </div>
        <Image width={64} preview={false} src={svg1} />
      </div>
    </ProCard>
  );
};

export default AlgorithmCard;