.

src/components/Bar/index.jsx

@@ -16,6 +16,7 @@ const labelOption = {
 export default (props) => {
   const { opt, title, h } = props
   const titleList = opt.map(item => { return { name: item.title } })
+  const colorList = opt.map(item => { return item.color })
   const seriesList = opt.map(item => {
     return {
       name: item.title,
@@ -30,7 +31,7 @@ export default (props) => {
   const defaultOpt = {
     title: {
       text: title,
-      left: 'center'
+      left: 'center',
     },
     tooltip: {
       trigger: 'axis',
@@ -39,6 +40,7 @@ export default (props) => {
       },
       extraCssText: 'height:100px;'
     },
+    color: colorList,
     legend: {
       top: 'bottom',
       data: titleList,

src/components/WelcomeCard/index.jsx

@@ -1,17 +1,23 @@
-import { Card, Image } from "antd"
 import up from '@/assets/welcome/up.png'
 import down from '@/assets/welcome/down.png'
 import './style.less'
 
+
+import { createFromIconfontCN } from '@ant-design/icons';
+
+
 const WCard = (props) => {
   const { value } = props
   //隔三位加一个逗号
   function toThousands(num) {
     return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
   }
+  const MyIcon = createFromIconfontCN({
+    scriptUrl: '//at.alicdn.com/t/font_2904679_h2r1om69sid.js', // 在 iconfont.cn 上生成
+  });
   return (
     <div className='wcard'>
-      <img src={value.icon} className='wImg' />
+      <MyIcon type={value.icon} className='wImg' style={{ color: value.color }} />
       <div className='wright'>
         <div className='title'>{value.title}</div>
         <div className='value'>{toThousands(value.value)}</div>

src/components/WelcomeCard/style.less

@@ -8,6 +8,10 @@
     width: 65px;
     height: 65px;
     margin-right: 64px;
+    svg{
+      width: 100%;
+      height:100%
+    }
   }
   .wright{
     text-align: right;

src/pages/Welcome.jsx

@@ -3,10 +3,6 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Row, Col } from 'antd';
 import { useIntl } from 'umi';
 import WCard from '@/components/WelcomeCard'
-import userImg from '@/assets/welcome/user.png'
-import cooperative from '@/assets/welcome/cooperative.png'
-import machinery from '@/assets/welcome/machinery.png'
-import order from '@/assets/welcome/order.png'
 import Bar from '@/components/Bar/index.jsx';
 import Pie from '@/components/Pie';
 import PieArea from '@/components/PieArea';
@@ -16,25 +12,29 @@ const Welcome = () => {
   const intl = useIntl();
   const topData = [
     {
-      icon: userImg,
+      icon: 'icon-icon',
+      color: '#1cbbb4',
       title: '注册用户',
       value: 580239,
       percentage: 32.6
     },
     {
-      icon: cooperative,
+      icon: 'icon-show_gongsiguanli_fill',
+      color: '#8dc63f',
       title: '合作社数',
       value: 2017,
       percentage: 5.6
     },
     {
-      icon: machinery,
+      icon: 'icon-tuolaji',
+      color: '#a5673f',
       title: '农用机数',
       value: 2000,
       percentage: 42.6
     },
     {
-      icon: order,
+      icon: 'icon-dingdanguanli',
+      color: '#8799a3',
       title: '订单数',
       value: 2075994,
       percentage: -1.6
@@ -43,11 +43,13 @@ const Welcome = () => {
   const centerData = [
     {
       title: '预约订单',
+      color: '#70d4d4',
       keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
       valueList: [320, 332, 301, 334, 390, 88, 320, 332, 301, 334, 390, 88]
     },
     {
       title: '完成订单',
+      color: '#c3b6e6',
       keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
       valueList: [220, 182, 191, 234, 290, 256, 220, 182, 191, 234, 290, 356]
     }
@@ -55,6 +57,7 @@ const Welcome = () => {
 
   const [machineryStatus, setMachineryStatus] = useState([
     {
+      color: '#70d4d4',
       keyList: ['预约', '作业', '闲置', '离线', '维修'],
       valueList: [350, 900, 650, 180, 380],
     }

src/pages/Welcome.less

@@ -1,4 +1,5 @@
 .welcome{
+  overflow: hidden;
   .apache{
     margin-top: 32px;
   }