diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index e954852..40d3ac3 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,28 +1,36 @@
 import React from "react";
 import { useAppSelector } from "../../hooks/store";
-import "./style.css"
+import style from "./style.module.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>
+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);
+    console.log(avatar)
+
+    return (
+        <div className={style.container}>
+            <div className={style.left}>
+                <img className={style.avatar} src={avatar} alt="User Avatar" />
             </div>
-            <div className="info" >
-                <p className="uploadTraffic">上传量：{uploadTraffic}</p>
-                <p>下载量：{downloadTraffic}</p>
-                <p>下载积分：{downloadPoints}</p>
+            <div className={style.right}>
+                <div className={style.info}>
+                    <p className={style.userName}>{userName}</p>
+                    <p className={style.role}>角色: {role}</p>
+                    <p className={style.uploadTraffic}>上传量: {uploadTraffic}</p>
+                    <p className={style.downloadTraffic}>下载量: {downloadTraffic}</p>
+                    <p className={style.shareRatio}>
+                        分享率: {uploadTraffic && downloadTraffic ? (uploadTraffic / downloadTraffic).toFixed(2) : "N/A"}
+                    </p>
+                </div>
+                <button className={style.signInButton}>签到</button>
             </div>
+        </div>
+    );
+};
 
-    </>
-}
-
-export default SelfStatus
+export default SelfStatus;