init
Change-Id: I62d8e17fdc3103133b9ddaff22c27ddd9ea9f6ac
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;
+}
+