修改个人中心、发布种子、兴趣小组
Change-Id: I73caa8ef511ad9ae12a0cc49fc0edb5ccb0b2a74
diff --git a/src/pages/InterestGroup/InterestGroup.css b/src/pages/InterestGroup/InterestGroup.css
index a52ba5f..1de6510 100644
--- a/src/pages/InterestGroup/InterestGroup.css
+++ b/src/pages/InterestGroup/InterestGroup.css
@@ -1,158 +1,207 @@
/* 设置整个兴趣小组页面的背景色和布局 */
.interest-group-container {
- background-color: #f8f1f1; /* 粉色背景 */
+ background-color: #5F4437;
+ width: 100%;
+ height: 2000px;
+}
+
+/* 页面标题样式 */
+h1 {
+ text-align: center;
+ color: #5F4437; /* 深棕色 */
+ font-size: 2rem;
+ margin-bottom: 30px;
+}
+
+/* 筛选、搜索和排序容器样式 */
+.filter-search-sort-container {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ margin-bottom: 20px;
+}
+
+/* 筛选部分样式 */
+.filter, .sort {
+ margin-bottom: 0;
+ /* 文字在左边，下拉框在右边 */
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 5px;
+}
+
+.search input {
+ padding: 10px;
+ width: 200px;
+ margin-left: 100px;
+ border-radius: 6px;
+ border: 1px solid #e0c4a1; /* 浅棕色 */
+ background-color: #fff5f5; /* 浅粉色 */
+ color: #5F4437;
+ font-size: 1rem;
+}
+
+.filter select,
+.sort select {
+ padding: 10px;
+ width: 200px;
+ border-radius: 6px;
+ border: 1px solid #e0c4a1; /* 浅棕色 */
+ background-color: #fff5f5; /* 浅粉色 */
+ color: #5F4437;
+ font-size: 1rem;
+}
+
+/* 激活时的输入框样式 */
+.filter select:focus,
+.search input:focus,
+.sort select:focus {
+ border-color: #b38867; /* 较深的棕色 */
+ outline: none;
+}
+
+.group-list {
+ margin-top: 5%;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px; /* 控制 item 之间的间距 */
+ justify-content: flex-start; /* 让不足三项时左对齐 */
+}
+
+.group-item {
+ flex: 0 0 calc(33.333% - 20px); /* 每个占1/3减去间距 */
+ box-sizing: border-box;
+ border: 1px solid #e0c4a1;
+ border-radius: 8px;
+ overflow: hidden;
+ background-color: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease-in-out;
+ padding: 15px;
+}
+
+
+.group-item:hover {
+ transform: translateY(-5px); /* 鼠标悬停时小组项上升效果 */
+}
+
+.group-content {
+ display: flex;
+ gap: 15px;
+}
+
+.group-info-right {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+}
+
+/* 小组描述样式 */
+.group-description {
+ color: #333;
+ font-size: 1rem;
+ line-height: 1.4;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+/* 小组标签样式 */
+.group-tags {
+ display: flex;
+ gap: 10px;
+}
+
+.tag {
+ background-color: #f0f0f0;
+ color: #5F4437;
+ padding: 5px 10px;
+ border-radius: 4px;
+ font-size: 0.9rem;
+}
+
+/* 分页按钮 */
+.pagination {
+ text-align: center;
+ margin-top: 30px;
+}
+
+button {
+ padding: 10px 20px;
+ margin: 0 10px;
+ background-color: #5F4437; /* 深棕色 */
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background-color 0.3s ease;
+}
+
+button:disabled {
+ background-color: #d6d6d6;
+ cursor: not-allowed;
+}
+
+button:hover {
+ background-color: #b38867; /* 深棕色的 hover 效果 */
+}
+
+/* 错误信息的样式 */
+.error {
+ color: #ff6f61; /* 红色 */
+ text-align: center;
+ margin-top: 20px;
+}
+
+/* 加载中的提示 */
+.loading {
+ color: #5F4437;
+ text-align: center;
+ margin-top: 20px;
+ font-size: 1.2rem;
+}
+
+/* 响应式设计: 确保在小屏幕下布局能适应 */
+@media (max-width: 768px) {
+ .group-item {
+ width: 48%;
+ }
+
+ .filter-search-sort-container {
+ flex-direction: column;
+ }
+
+ .filter select,
+ .search input,
+ .sort select {
width: 100%;
- }
-
- /* 页面标题样式 */
- h1 {
- text-align: center;
- color: #5c3f31; /* 深棕色 */
- font-size: 2rem;
- margin-bottom: 30px;
- }
-
- /* 筛选部分样式 */
- .filter, .search, .sort {
- margin-bottom: 20px;
- text-align: center;
- }
-
- .filter select,
- .search input,
- .sort select {
- padding: 10px;
- width: 200px;
- border-radius: 6px;
- border: 1px solid #e0c4a1; /* 浅棕色 */
- background-color: #fff5f5; /* 浅粉色 */
- color: #5c3f31;
- font-size: 1rem;
- }
-
- /* 激活时的输入框样式 */
- .filter select:focus,
- .search input:focus,
- .sort select:focus {
- border-color: #b38867; /* 较深的棕色 */
- outline: none;
- }
-
- /* 小组列表样式 */
- .group-list {
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- justify-content: space-between;
- }
-
- /* 每个小组的容器 */
- .group-item {
- width: 30%;
- border: 1px solid #e0c4a1; /* 浅棕色边框 */
- border-radius: 8px;
- overflow: hidden;
- background-color: #fff;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- transition: transform 0.3s ease-in-out;
- }
-
- .group-item:hover {
- transform: translateY(-5px); /* 鼠标悬停时小组项上升效果 */
- }
-
- /* 小组封面图样式 */
- .group-cover {
- width: 100%;
- height: 180px;
- object-fit: cover;
- transition: opacity 0.3s ease;
- }
-
- /* 小组信息区域 */
- .group-info {
- padding: 15px;
- background-color: #f8f1f1; /* 浅粉色背景 */
- }
-
- .group-info h2 {
- font-size: 1.2em;
- color: #5c3f31;
margin-bottom: 10px;
}
-
- /* 小组描述部分 */
- .group-info p {
- font-size: 1rem;
- color: #5c3f31;
+}
+
+@media (max-width: 480px) {
+ .group-item {
+ width: 100%;
}
-
- /* 分页按钮 */
- .pagination {
- text-align: center;
- margin-top: 30px;
+
+ .filter select,
+ .search input,
+ .sort select {
+ width: 100%;
+ font-size: 0.9rem;
}
-
- button {
- padding: 10px 20px;
- margin: 0 10px;
- background-color: #5c3f31; /* 深棕色 */
- color: white;
- border: none;
- border-radius: 6px;
- cursor: pointer;
- font-size: 1rem;
- transition: background-color 0.3s ease;
- }
-
- button:disabled {
- background-color: #d6d6d6;
- cursor: not-allowed;
- }
-
- button:hover {
- background-color: #b38867; /* 深棕色的 hover 效果 */
- }
-
- /* 错误信息的样式 */
- .error {
- color: #ff6f61; /* 红色 */
- text-align: center;
- margin-top: 20px;
- }
-
- /* 加载中的提示 */
- .loading {
- color: #5c3f31;
- text-align: center;
- margin-top: 20px;
- font-size: 1.2rem;
- }
-
- /* 响应式设计: 确保在小屏幕下布局能适应 */
- @media (max-width: 768px) {
- .group-item {
- width: 48%;
- }
-
- .filter select,
- .search input,
- .sort select {
- width: 100%;
- margin-bottom: 10px;
- }
- }
-
- @media (max-width: 480px) {
- .group-item {
- width: 100%;
- }
-
- .filter select,
- .search input,
- .sort select {
- width: 100%;
- font-size: 0.9rem;
- }
- }
-
\ No newline at end of file
+}
+
+.interest-group-card {
+ background-color: #e9ded2;
+ border-radius: 16px;
+ max-width: 70%;
+ max-height: 100%;
+ /* 卡片居中 */
+ margin: 0 auto;
+ margin-top: 40px;
+ /* padding: 24px 32px; */
+ padding: 3% 3%
+}
\ No newline at end of file