fix:community

FilmDraw-app/src/app/tab1/tab1.page.html

@@ -10,86 +10,68 @@
     </ion-item>
   </ion-toolbar>
 </ion-header>
+ <ion-content [fullscreen]="true">
 
-<ion-content [fullscreen]="true">
-  <!-- 热门话题区 -->
-  <section>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>热门话题</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list>
-          <ion-item *ngFor="let topic of topics">
-            <ion-label>
-              <h2>{{ topic.title }}</h2>
-              <p>参与人数: {{ topic.participants }} | 热度: {{ topic.popularity }}</p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
-    </ion-card>
-  </section>
+<!-- 包含热门话题区和讨论区的父容器 -->
 
-  <!-- 话题讨论区 -->
-  <section>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>讨论区</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list>
-          <ion-item *ngFor="let post of posts">
-            <ion-label>
-              <h2>{{ post.title }}</h2>
-              <p>作者: {{ post.author }} | 评论数: {{ post.comments }} | 热度: {{ post.popularity }}</p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
-    </ion-card>
-  </section>
+  <div class="content-container">
+    <!-- 热门话题区 -->
+    <section class="card-section">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>热门话题</ion-card-title>
+        </ion-card-header>
+        <ion-card-content class="scrollable-content">
+          <ion-list>
+            <ion-item *ngFor="let topic of topics">
+              <ion-label>
+                <h2>{{ topic.title }}</h2>
+                <p>参与人数: {{ topic.participants }} | 热度: {{ topic.popularity }}</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+    </section>
 
-  <!-- 发帖区 -->
-  <section>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>发帖</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-item>
-          <ion-label position="floating">发帖标题</ion-label>
-          <ion-input [(ngModel)]="newPost.title"></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-label position="floating">发帖内容</ion-label>
-          <ion-textarea [(ngModel)]="newPost.content"></ion-textarea>
-        </ion-item>
-        <ion-button expand="full" (click)="submitPost()">发布</ion-button>
-      </ion-card-content>
-    </ion-card>
-  </section>
+    <!-- 话题讨论区 -->
+    <section class="card-section">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>讨论区</ion-card-title>
+        </ion-card-header>
+        <ion-card-content class="scrollable-content">
+          <ion-list>
+            <ion-item *ngFor="let post of posts">
+              <ion-label>
+                <h2>{{ post.title }}</h2>
+                <p>作者: {{ post.author }} | 评论数: {{ post.comments }} | 热度: {{ post.popularity }}</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+    </section>
+  </div>
+
+
+    <!-- 热门话题区 -->
+    <!-- <section class="card-section">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>热门话题</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-list>
+            <ion-item *ngFor="let topic of topics">
+              <ion-label>
+                <h2>{{ topic.title }}</h2>
+                <p>参与人数: {{ topic.participants }} | 热度: {{ topic.popularity }}</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+    </section> -->
 
-  <!-- 评论区 -->
-  <section>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>评论区</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-list>
-          <ion-item *ngFor="let comment of comments">
-            <ion-avatar slot="start">
-              <img [src]="comment.userAvatar">
-            </ion-avatar>
-            <ion-label>
-              <h2>{{ comment.username }}</h2>
-              <p>{{ comment.content }}</p>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </ion-card-content>
-    </ion-card>
-  </section>
-   <!-- <app-explore-container name="Tab 1 page"></app-explore-container> -->
 </ion-content>

FilmDraw-app/src/app/tab1/tab1.page.scss

@@ -3,84 +3,131 @@
 //   justify-content: space-between; // 使内容在两侧分开
 //   align-items: center; // 垂直居中对齐
 // }
+.content-container {
+  display: flex;
+  justify-content: space-between; /* 在主轴上均匀分配空间 */
+  padding: 16px; /* 内边距 */
+}
+
+.card-section {
+  flex: 1; /* 让每个卡片占据相同的空间 */
+  margin: 0 8px; /* 卡片之间的水平间距 */
+  min-width: 300px; /* 设置最小宽度，以确保在小屏幕上不会过于拥挤 */
+  display: flex;
+  flex-direction: column; /* 使卡片内容垂直排列 */
+  height: 100%; /* 确保卡片高度相同 */
+}
+
+ion-card {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  border-radius: 8px; /* 圆角 */
+  overflow: hidden; /* 隐藏溢出内容 */
+}
+
+.scrollable-content {
+  max-height: 300px; /* 设置最大高度，可以根据需要调整 */
+  overflow-y: auto; /* 添加垂直滚动条 */
+}
+
+ion-card-header {
+  background-color: #f8f8f8; /* 卡片头部背景色 */
+  border-top-left-radius: 8px; /* 圆角 */
+  border-top-right-radius: 8px; /* 圆角 */
+}
 
-ion-title {
-  flex: 1; // 使标题占据可用空间
-  text-align: left; // 确保文字左对齐
-  margin-left: 16px; // 左侧边距，可以根据需要调整
-  margin-top: 5px;
+ion-card-title {
+  font-size: 1.2em; /* 标题字体大小 */
+  font-weight: bold; /* 加粗 */
 }
 
-/* 设置搜索框的样式 */
-   ion-searchbar {
-     padding: 10px; /* 内边距 */
-     border-radius: 6px; /* 圆角 */
-     font-size: 16px; /* 字体大小 */
-    }
+ion-label h2 {
+  margin: 0; /* 去掉默认外边距 */
+  font-size: 1.1em; /* 话题标题字体大小 */
+}
 
-ion-buttons {
-  margin-right: 16px; // 右侧边距，可以根据需要调整
-  margin-top: 10px; // 设置按钮与上方内容的间距
-  border-radius: 5px; // 设置按钮圆角
+ion-label p {
+  color: #666; /* 文字颜色 */
+  font-size: 0.9em; /* 字体大小 */
 }
 
 
-ion-header {
-    background-color: #ffffff; // 设置头部背景色
-    color: white; // 设置头部文字颜色
-  }
+// ion-title {
+//   flex: 1; // 使标题占据可用空间
+//   text-align: left; // 确保文字左对齐
+//   margin-left: 16px; // 左侧边距，可以根据需要调整
+//   margin-top: 5px;
+// }
+
+// /* 设置搜索框的样式 */
+//    ion-searchbar {
+//      padding: 10px; /* 内边距 */
+//      border-radius: 6px; /* 圆角 */
+//      font-size: 16px; /* 字体大小 */
+//     }
+
+// ion-buttons {
+//   margin-right: 16px; // 右侧边距，可以根据需要调整
+//   margin-top: 10px; // 设置按钮与上方内容的间距
+//   border-radius: 5px; // 设置按钮圆角
+// }
+
+
+// ion-header {
+//     background-color: #ffffff; // 设置头部背景色
+//     color: white; // 设置头部文字颜色
+//   }
   
-  ion-card {
-    margin: 10px; // 设置卡片之间的间距
-    border-radius: 10px; // 设置卡片圆角
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
-  }
+//   ion-card {
+//     margin: 10px; // 设置卡片之间的间距
+//     border-radius: 10px; // 设置卡片圆角
+//     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
+//   }
   
-  ion-card-header {
-    background-color: #d8e5fa; // 设置头部背景色
-    color: white; // 设置头部文字颜色
-  }
+//   ion-card-header {
+//     background-color: #d8e5fa; // 设置头部背景色
+//     color: white; // 设置头部文字颜色
+//   }
   
-  ion-card-title {
-    font-size: 1.2em; // 设置卡片标题字体大小
-    font-weight: bold; // 设置卡片标题字体加粗
-  }
+//   ion-card-title {
+//     font-size: 1.2em; // 设置卡片标题字体大小
+//     font-weight: bold; // 设置卡片标题字体加粗
+//   }
   
-  ion-item {
-    --ion-item-background: transparent; // 设置列表项背景透明
-  }
+//   ion-item {
+//     --ion-item-background: transparent; // 设置列表项背景透明
+//   }
   
-  ion-label {
-    color: #333; // 设置标签文字颜色
-  }
+//   ion-label {
+//     color: #333; // 设置标签文字颜色
+//   }
   
-  ion-button {
-    --background: #3880ff; // 设置按钮背景色
-    --color: white; // 设置按钮文字颜色
-    margin-top: 10px; // 设置按钮与上方内容的间距
-    border-radius: 5px; // 设置按钮圆角
-  }
+//   ion-button {
+//     --background: #3880ff; // 设置按钮背景色
+//     --color: white; // 设置按钮文字颜色
+//     margin-top: 10px; // 设置按钮与上方内容的间距
+//     border-radius: 5px; // 设置按钮圆角
+//   }
   
-  ion-avatar {
-    border-radius: 50%; // 设置头像圆形
-    width: 50px; // 设置头像宽度
-    height: 50px; // 设置头像高度
-  }
+//   ion-avatar {
+//     border-radius: 50%; // 设置头像圆形
+//     width: 50px; // 设置头像宽度
+//     height: 50px; // 设置头像高度
+//   }
   
-  h2 {
-    font-size: 1em; // 设置二级标题字体大小
-    margin: 0; // 去掉默认外边距
-  }
+//   h2 {
+//     font-size: 1em; // 设置二级标题字体大小
+//     margin: 0; // 去掉默认外边距
+//   }
   
-  p {
-    font-size: 0.9em; // 设置段落字体大小
-    color: #666; // 设置段落文字颜色
-  }
+//   p {
+//     font-size: 0.9em; // 设置段落字体大小
+//     color: #666; // 设置段落文字颜色
+//   }
   
-  ion-list {
-    padding: 0; // 去掉列表内边距
-  }
+//   ion-list {
+//     padding: 0; // 去掉列表内边距
+//   }
   
-  ion-card-content {
-    padding: 10px; // 设置卡片内容内边距
-  }
+//   ion-card-content {
+//     padding: 10px; // 设置卡片内容内边距
+//   }