import React from 'react';
import Footer from '../../Home/footer';

import '../less/homeStyle.less';
// @ts-ignore
import { enquireScreen } from 'enquire-js';
import Nav from '@/pages/homeX/Nav';
import styles from './index.less';
import { ArticleListDataSource } from '../data.source';
import { useRequest } from '@@/plugin-request/request';
import { articleList } from '@/services/cms';

const CaseList: React.FC = () => {
  const { data: list } = useRequest(() => {
    return articleList(1, 1, 100);
  });
  return (
    <>
      <div className={styles.container}>
        <Nav title={'经典案例'} />
        <div className={styles.content}>
          <div className={styles.articleList}>
            {list?.records?.map((item, index) => {
              return (
                <a
                  href={`/articleDetail/${item.id}.html`}
                  key={item.id || index}
                >
                  <div className={styles.articleItem}>
                    <img className={styles.articleImg} src={item?.cover} />

                    <div className={styles.articleText}>
                      <div className={styles.articleTitle}>{item?.title}</div>
                      <div className={styles.articleContent}>
                        {item?.digest}
                      </div>
                    </div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
        <Footer />
      </div>
    </>
  );
};
export default CaseList;
