修改提示框样式、完成付费片单、推荐跳转
Change-Id: Ie84c53d4e306435144b1f26ceb39cc182e99d57a
diff --git a/src/components/AuthButton.jsx b/src/components/AuthButton.jsx
new file mode 100644
index 0000000..b5cc431
--- /dev/null
+++ b/src/components/AuthButton.jsx
@@ -0,0 +1,22 @@
+import {useContext} from "react";
+import { UserContext } from "../context/UserContext";
+import toast from "react-hot-toast";
+const AuthButton = ({children, roles,onClick, ...rest }) => {
+ const {user} = useContext(UserContext);
+ const {levelRole} = user;
+ let clickFunc = onClick
+ if(!roles || roles.length === 0 || roles.includes(levelRole)){
+ clickFunc = onClick;
+ }else{
+ clickFunc = () => {
+ toast.error("权限不足");
+ }
+ }
+
+ return (
+ <button onClick={clickFunc} {...rest}>
+ {children}
+ </button>
+ )
+}
+export default AuthButton;
\ No newline at end of file
diff --git a/src/components/Header.css b/src/components/Header.css
index 017ba1d..66fe1a0 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -3,9 +3,9 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 10px 20px; /* 增加左右间距，避免元素靠得太近 */
- background-color: #5F4437; /* 深棕色背景 */
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
+ padding: 10px 20px;
+ background-color: #6b4f3b; /* 深棕色背景 */
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Logo 和网站名称 */
@@ -20,9 +20,9 @@
}
.site-name {
- font-size:32px;
+ font-size: 32px;
font-weight: bold;
- color: #FBF2E3; /* 更加柔和的字体颜色 */
+ color: #fbf2e3; /* 柔和淡米色字体 */
}
/* 用户头像和消息中心 */
@@ -33,69 +33,68 @@
.user-avatar {
height: 50px;
- width: 50px; /* 确保头像是圆形 */
- border-radius: 50%; /* 圆形 */
+ width: 50px;
+ border-radius: 50%;
margin-right: 10px;
}
.message-center {
font-size: 24px;
- color: #FBF2E3; /* 统一字体颜色 */
+ color: #fbf2e3;
cursor: pointer;
- transition: color 0.3s ease; /* 平滑过渡 */
+ transition: color 0.3s ease;
}
.message-center:hover {
- color: #D8C0A1; /* 当鼠标悬停时字体颜色变亮 */
+ color: #eecfc1; /* 清透粉 hover */
}
/* 导航栏样式 */
.nav {
display: flex;
justify-content: center;
- background-color: #dab8c2;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影 */
- transition: background 0.3s ease;
+ background-color: #fffaf7; /* 粉米底 */
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+ border-bottom: 2px solid #e2cfc3;
}
/* 每个导航项 */
.nav-item {
padding: 14px 12px;
text-decoration: none;
- color: #FBF2E3;
+ color: #6b4f3b; /* 主文字棕色 */
font-size: 18px;
font-weight: 500;
text-align: center;
- border-radius: 8px; /* 圆角效果 */
- transition: background-color 0.3s, color 0.3s, transform 0.3s ease; /* 平滑过渡 */
- position: relative; /* 为阴影和动画提供定位 */
+ border-radius: 8px;
+ transition: background-color 0.3s, color 0.3s, transform 0.3s ease;
+ position: relative;
}
-/* 鼠标悬停时 */
.nav-item:hover {
- background-color: #5F4437; /* 背景色变深 */
- color: #FBF2E3; /* 字体颜色与背景形成对比 */
- transform: scale(1.05); /* 微微放大，增加互动感 */
+ background-color: #f3ded7; /* 柔粉 hover 背景 */
+ color: #4b3325;
+ transform: scale(1.05);
}
/* 选中状态 */
.nav-item.active {
- background-color: #5F4437; /* 活动状态时的背景色 */
- color: #FBF2E3; /* 活动状态时的字体颜色 */
+ background-color: #eecfc1;
+ color: #3c271b;
font-weight: bold;
- border-radius: 16px; /* 更圆的圆角效果 */
- padding: 4px 12px; /* 减小上下和左右的padding，框变小 */
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 增加阴影，带来浮动感 */
- transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s ease; /* 平滑过渡 */
- transform: scale(1.1); /* 选中项微微放大 */
- line-height: 40px; /* 调整line-height，使文字更居中 */
+ border-radius: 16px;
+ padding: 4px 12px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+ transform: scale(1.1);
+ line-height: 40px;
}
+
/* 新手指南按钮 */
.guide-button {
display: flex;
align-items: center;
- background-color: #a67c6a; /* 柔棕底色 */
- color: #fff;
+ background-color: #eecfc1; /* 清透粉底色 */
+ color: #4e342e; /* 深棕文字 */
border: none;
border-radius: 20px;
padding: 6px 12px;
@@ -106,12 +105,10 @@
}
.guide-button:hover {
- background-color: #8d6e63; /* 深一点 hover */
+ background-color: #f3ded7; /* 更柔和 hover */
transform: scale(1.05);
}
.guide-button span {
user-select: none;
}
-
-