import { Button } from 'antd';
import styles from './index.less';

function WorkspaceIntro() {
  return (
    <div className={styles['workspace-intro']}>
      <div className={styles['workspace-intro__left']}>
        <div className={styles['workspace-intro__title']}>自主实验平台</div>
        <div className={styles['workspace-intro__content']}>
          材料领域的自主实验系统是一种用于材料研究和开发的技术平台，它旨在提供实验数据收集、分析和可视化等功能，
          以支持材料工程师、科学家和研究人员在材料设计、性能评估和工艺优化方面的工作
        </div>
        <div className={styles['workspace-intro__buttons']}>
          <Button
            type="primary"
            style={{ marginRight: '20px' }}
            icon={
              <img src={require('@/assets/img/functional-material.png')} width={19} height={19} />
            }
          >
            功能材料自主实验系统
          </Button>
          <Button
            type="default"
            icon={
              <img src={require('@/assets/img/molecular-material.png')} width={19} height={19} />
            }
          >
            分子材料自主实验系统
          </Button>
        </div>
      </div>
      <div className={styles['workspace-intro__right']}>
        <img
          className={styles['workspace-intro__icon']}
          src={require('@/assets/img/workspace-intro-icon.png')}
        />
      </div>
    </div>
  );
}

export default WorkspaceIntro;