添加兴趣小组页面
Change-Id: Ia76dfe732bb60b0f93534706a5deedb4de3eaf05
diff --git a/src/pages/InterestGroup/InterestGroup.css b/src/pages/InterestGroup/InterestGroup.css
new file mode 100644
index 0000000..a52ba5f
--- /dev/null
+++ b/src/pages/InterestGroup/InterestGroup.css
@@ -0,0 +1,158 @@
+/* 设置整个兴趣小组页面的背景色和布局 */
+.interest-group-container {
+ background-color: #f8f1f1; /* 粉色背景 */
+ 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;
+ }
+
+ /* 分页按钮 */
+ .pagination {
+ text-align: center;
+ margin-top: 30px;
+ }
+
+ 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