@icedesign/algorithm-model-admin-scaffold/src/pages/ModelPerformance/components/Overview/index.jsx

该模板适用于数据模型类的管理类后台，内置通用的介绍页和丰富的区块，使用时需要根据需求进行删除和添加

import React from 'react';
import { Grid } from '@alifd/next';
import FoundationSymbol from '@icedesign/foundation-symbol';
import styles from './index.module.scss';

const { Row, Col } = Grid;

const mockData = [
  {
    symbolBgColor: '#ee706d',
    symbol: 'shezhi',
    count: '861',
    desc: '模型总数',
  },
  {
    symbolBgColor: '#f7da47',
    symbol: 'chart',
    count: '8495',
    desc: '近30天总调用量',
  },
  {
    symbolBgColor: '#58ca9a',
    symbol: 'cascades',
    count: '3065',
    desc: '近30天日均调用量',
  },
  {
    symbolBgColor: '#447eff',
    symbol: 'yonghu',
    count: '4451',
    desc: '用户总数',
  },
];

export default function Overview() {
  return (
    <Row gutter={20}>
      {mockData.map((item, index) => {
        return (
          <Col l="6" key={index}>
            <div className={styles.box}>
              <div
                className={styles.symbol}
                style={{
                  background: `${item.symbolBgColor}`,
                }}
              >
                <FoundationSymbol size="xl" type={item.symbol} />
              </div>
              <div className={styles.value}>
                <div className={styles.count}>{item.count}</div>
                <div className={styles.desc}>{item.desc}</div>
              </div>
            </div>
          </Col>
        );
      })}
    </Row>
  );
}