diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
new file mode 100644
index 0000000..e954852
--- /dev/null
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { useAppSelector } from "../../hooks/store";
+import "./style.css"
+
+const SelfStatus :React.FC = () => {
+
+    const userName = useAppSelector(state => state.user.userName)
+    const role = useAppSelector(state => state.user.role)
+    const uploadTraffic = useAppSelector(state => state.user.uploadTraffic)
+    const downloadTraffic = useAppSelector(state => state.user.downloadTraffic)
+    const downloadPoints = useAppSelector(state => state.user.downloadPoints)
+    const avatar = useAppSelector(state => state.user.avatar)
+    const islogin = useAppSelector(state => state.user.isLogin)
+    return <>
+            <div className="user">
+                <img className="avatar" src={avatar}></img>
+                <p className="userName">{userName},欢迎你</p>
+            </div>
+            <div className="info" >
+                <p className="uploadTraffic">上传量：{uploadTraffic}</p>
+                <p>下载量：{downloadTraffic}</p>
+                <p>下载积分：{downloadPoints}</p>
+            </div>
+
+    </>
+}
+
+export default SelfStatus
diff --git a/src/components/selfStatus/style.css b/src/components/selfStatus/style.css
new file mode 100644
index 0000000..afb50a0
--- /dev/null
+++ b/src/components/selfStatus/style.css
@@ -0,0 +1,19 @@
+
+.user{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+}
+.user img {
+    width:40%;
+    border-radius: 20px;
+    margin-top: 20px;
+}
+.info p{
+    font-size: 20px;
+    font-weight: bold;
+    margin-top: 20px;
+}
+