add css module compile rule and a login guard
Change-Id: I5c99e236f92d3b6c6d0060b36cf90a252df93a95
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;
diff --git a/src/components/selfStatus/style.css b/src/components/selfStatus/style.css
deleted file mode 100644
index afb50a0..0000000
--- a/src/components/selfStatus/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-.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;
-}
-
diff --git a/src/components/selfStatus/style.module.css b/src/components/selfStatus/style.module.css
new file mode 100644
index 0000000..4e80ece
--- /dev/null
+++ b/src/components/selfStatus/style.module.css
@@ -0,0 +1,71 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ background-color: #f9f9f9;
+ width: 100%;
+ height: 200px; /* Adjust height as needed */
+ box-sizing: border-box;
+}
+
+.left {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ width: 20%; /* Adjust width for avatar section */
+}
+
+.avatar {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ object-fit: cover;
+ margin-bottom: 10px;
+}
+.right {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ width: 75%; /* Adjust width for info and button section */
+}
+
+.info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 10px;
+}
+
+.userName {
+ font-size: 18px;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+.role,
+.uploadTraffic,
+.downloadTraffic,
+.shareRatio {
+ font-size: 14px;
+ margin-bottom: 5px;
+}
+
+.signInButton {
+ align-self: flex-end;
+ padding: 10px 20px;
+ font-size: 14px;
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.signInButton:hover {
+ background-color: #45a049;
+}
\ No newline at end of file