diff --git a/src/assets/icons/aliyun.svg b/src/assets/icons/aliyun.svg
new file mode 100644
index 0000000..5097517
--- /dev/null
+++ b/src/assets/icons/aliyun.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/icons/bucket.svg b/src/assets/icons/bucket.svg
new file mode 100644
index 0000000..47e1eae
--- /dev/null
+++ b/src/assets/icons/bucket.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/icons/eye-outline.svg b/src/assets/icons/eye-outline.svg
new file mode 100644
index 0000000..caa0f2c
--- /dev/null
+++ b/src/assets/icons/eye-outline.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/file.svg b/src/assets/icons/file.svg
new file mode 100644
index 0000000..fe9d94c
--- /dev/null
+++ b/src/assets/icons/file.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/icons/flux.svg b/src/assets/icons/flux.svg
new file mode 100644
index 0000000..7b303ea
--- /dev/null
+++ b/src/assets/icons/flux.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg
new file mode 100644
index 0000000..24d11ba
--- /dev/null
+++ b/src/assets/icons/share.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/icons/standard_directory.svg b/src/assets/icons/standard_directory.svg
new file mode 100644
index 0000000..b690349
--- /dev/null
+++ b/src/assets/icons/standard_directory.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/icons/storage.svg b/src/assets/icons/storage.svg
new file mode 100644
index 0000000..ab0bc64
--- /dev/null
+++ b/src/assets/icons/storage.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg
new file mode 100644
index 0000000..7a0a1be
--- /dev/null
+++ b/src/assets/icons/user.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/icons/userInfo.svg b/src/assets/icons/userInfo.svg
new file mode 100644
index 0000000..f8ec561
--- /dev/null
+++ b/src/assets/icons/userInfo.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less
deleted file mode 100644
index 06fdb67..0000000
--- a/src/pages/Home/index.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.container {
- padding-top: 80px;
-}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 327578a..b330610 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -4,7 +4,6 @@ import { Avatar, Card, Skeleton, Space, Tag } from 'antd';
import Meta from 'antd/es/card/Meta';
import ReactECharts from 'echarts-for-react';
import { FunctionComponent, useEffect, useState } from 'react';
-import styles from './index.module.less';
import aliyun from '@/assets/icons/aliyun.svg';
import eye from '@/assets/icons/eye-outline.svg';
@@ -12,8 +11,8 @@ import share from '@/assets/icons/share.svg';
import standard_directory from '@/assets/icons/standard_directory.svg';
import userInfo from '@/assets/icons/userInfo.svg';
// import * as echarts from "echarts/core";
-
import 'react-calendar-heatmap/dist/styles.css';
+
const defaultData = [
{
id: '1',
@@ -196,9 +195,34 @@ const MainHome: FunctionComponent = () => {
}, []);
return (
<>
-
-
-
+
+
+
{
+ const [loading, setLoading] = useState(true);
+ const [responsive, setResponsive] = useState(false);
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ legend: {
+ color: ['#F58080', '#47D8BE', '#F9A589'],
+ data: ['新增用户数量', '新增分享圈数量'],
+ left: 'center',
+ bottom: 'bottom',
+ },
+ grid: {
+ top: 'middle',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ height: '80%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ data: [
+ '2024-02-01',
+ '2024-03-01',
+ '2024-04-01',
+ '2024-05-01',
+ '2024-06-01',
+ '2024-07-01',
+ ],
+ axisLine: {
+ lineStyle: {
+ color: '#999',
+ },
+ },
+ },
+ yAxis: {
+ type: 'value',
+
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#DDD',
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#333',
+ },
+ },
+ nameTextStyle: {
+ color: '#999',
+ },
+ splitArea: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ name: '新增用户数量',
+ type: 'line',
+ data: [58, 90, 22, 13, 66, 28],
+ color: '#F58080',
+ lineStyle: {
+ width: 5,
+ color: {
+ type: 'linear',
+
+ colorStops: [
+ {
+ offset: 0,
+ color: '#FFCAD4', // 0% 处的颜色
+ },
+ {
+ offset: 0.4,
+ color: '#F58080', // 100% 处的颜色
+ },
+ {
+ offset: 1,
+ color: '#F58080', // 100% 处的颜色
+ },
+ ],
+ globalCoord: false, // 缺省为 false
+ },
+ shadowColor: 'rgba(245,128,128, 0.5)',
+ shadowBlur: 10,
+ shadowOffsetY: 7,
+ },
+ itemStyle: {
+ color: '#F58080',
+ borderWidth: 10,
+ /*shadowColor: 'rgba(72,216,191, 0.3)',
+ shadowBlur: 100,*/
+ borderColor: '#F58080',
+ },
+ smooth: true,
+ },
+ {
+ name: '新增分享圈数量',
+ type: 'line',
+ data: [12, 56, 11, 22, 52, 13],
+ lineStyle: {
+ width: 5,
+ color: {
+ type: 'linear',
+
+ colorStops: [
+ {
+ offset: 0,
+ color: '#AAF487', // 0% 处的颜色
+ },
+ {
+ offset: 0.4,
+ color: '#47D8BE', // 100% 处的颜色
+ },
+ {
+ offset: 1,
+ color: '#47D8BE', // 100% 处的颜色
+ },
+ ],
+ globalCoord: false, // 缺省为 false
+ },
+ shadowColor: 'rgba(71,216,190, 0.5)',
+ shadowBlur: 10,
+ shadowOffsetY: 7,
+ },
+ itemStyle: {
+ color: '#AAF487',
+ borderWidth: 10,
+ /*shadowColor: 'rgba(72,216,191, 0.3)',
+ shadowBlur: 100,*/
+ borderColor: '#AAF487',
+ },
+ smooth: true,
+ },
+ ],
+ };
+
+ useEffect(() => {
+ setTimeout(() => {
+ setLoading(false);
+ }, 2000);
+ }, []);
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ setResponsive(offset.width < 596);
+ }}
+ >
+
+
+
+
+
+ ),
+ }}
+ />
+
+ ),
+ }}
+ />
+
+
+
+
+
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+