完成部分tab2页面设计

E-Cover-app/src/app/tab1/tab1.page.html

@@ -68,9 +68,9 @@
     <!--段展示-->
     <ion-segment-view>
         <ion-segment-content id="first">
-            <ion-content [scrollX]="true" class="segment-content">
+            <div class="segment-content">
                 First1231231231321231231231312312112312313123132123132132132
-            </ion-content>
+            </div>
         </ion-segment-content>
         <ion-segment-content id="second">Second</ion-segment-content>
     </ion-segment-view>

E-Cover-app/src/app/tab1/tab1.page.scss

@@ -121,11 +121,13 @@ ion-segment {
     --box-shadow: none;
 }
 
-ion-segment-view{
+#first{
     width: 200vw;
 }
 .segment-content{
+    width: 200vw;
     margin-left: 5%;
     height: 200px;
     --background:gray;
+    overflow-x: auto;
 }

E-Cover-app/src/app/tab2/tab2.page.html

@@ -1,8 +1,79 @@
-<!--头部，包括三个段-->
+<!--头部，包含一个段和发布按钮-->
+<ion-header>
+      <!--选段-->
+      <ion-segment value="second">
+            <ion-segment-button value="first" content-id="first">
+                  <ion-label>关注</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="second" content-id="second">
+                  <ion-label>推荐</ion-label>
+            </ion-segment-button>
+      </ion-segment>
+      <!--发布按钮-->
+      <ion-button (click)="goSendPost()" shape="round">
+            <ion-icon slot="start" name="add-outline"></ion-icon>
+            <ion-label><b>发布</b></ion-label>
+      </ion-button>
+</ion-header>
+<!--段展示-->
+<ion-content>
+      <ion-segment-view>
+            <ion-segment-content id="first">
+            </ion-segment-content>
+            <ion-segment-content id="second">
+                  <div id="rolling">
+                        <ion-card id="rolling-1">
+                              <div class="rolling-top">
+                                    <ion-img
+                                          src="https://s1.imagehub.cc/images/2024/12/24/c6c77e61dd002b2bcb941a608672d0d5.png" />
+                                    <ion-button shape="round" size="small">
+                                          <ion-label>更多</ion-label>
+                                          <ion-icon slot="end" name="chevron-forward-circle"></ion-icon>
+                                    </ion-button>
+                              </div>
 
-<ion-content [fullscreen]="true">
-      <ion-button size="large" (click)="goSendPost()">Tab 2</ion-button>
+                              <div style="clear: both;margin: 5px 0;">
+                                    <ion-img style="float: left;width:15px;margin: 5px;"
+                                          src="https://s1.imagehub.cc/images/2024/12/24/a369c70551f442aeec3718575b7eeffe.png" />
+                                    <div style="float: left;">
+                                          <p class="text">快乐圣诞派对</p>
+                                          <p class="intro">31.8k热度</p>
+                                    </div>
+                              </div>
+
+                              <div style="clear: both;margin: 15px 0;">
+                                    <ion-img style="float: left;width:15px;margin: 5px;"
+                                          src="https://s1.imagehub.cc/images/2024/12/24/a369c70551f442aeec3718575b7eeffe.png" />
+                                    <div style="float: left;">
+                                          <p class="text">快乐圣诞派对</p>
+                                          <p class="intro">31.8k热度</p>
+                                    </div>
+                              </div>
 
+                              <div style="clear: both;margin: 5px 0;">
+                                    <ion-img style="float: left;width:15px;margin: 5px;"
+                                          src="https://s1.imagehub.cc/images/2024/12/24/a369c70551f442aeec3718575b7eeffe.png" />
+                                    <div style="float: left;">
+                                          <p class="text">快乐圣诞派对</p>
+                                          <p class="intro">31.8k热度</p>
+                                    </div>
+                              </div>
+                        </ion-card>
+                        <ion-card id="rolling-2">
+                              <div class="rolling-top">
+                                    <ion-img
+                                          src="https://s1.imagehub.cc/images/2024/12/24/faa67f754580fc2e41e905a6a3476d85.png" />
+                                    <ion-button shape="round" size="small">
+                                          <ion-label>更多</ion-label>
+                                          <ion-icon slot="end" name="chevron-forward-circle"></ion-icon>
+                                    </ion-button>
+                              </div>
+                        </ion-card>
+                        <ion-card id="rolling-3">你卡上，到那时打开拉萨的那棵树的那是肯定</ion-card>
+                  </div>
+            </ion-segment-content>
+      </ion-segment-view>
+
+      <ion-button size="large" (click)="goSendPost()">Tab 2</ion-button>
 
-  
-</ion-content>
+</ion-content>

E-Cover-app/src/app/tab2/tab2.page.scss

@@ -1,189 +1,117 @@
-//头部区域
-.head{
-    height:70px;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center; 
-
-}
+ion-header {
+  background: white;
+  box-shadow: none;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
 
-//发布按钮
-.publish-button {
-    height: 35px;
-    width: 70px;
-    background-color: rgb(236, 235, 233); /* 橙色背景 */
-    color: gray ; /* 强制设置文字颜色为白色 */
-    border-radius: 20px; /* 椭圆形 */
-    font-size: 16px; /* 调整字体大小 */
-
-  
-    &.active {
-      /* 当输入框有内容时的样式 */
-      background-color: white; /* 背景色变为黑色 */
-      color: black; /* 字体颜色变为白色 */
-    }
-  }
-  
-  .content {
+  ion-segment {
+    margin: 0;
+    padding-left: 0;
     display: flex;
-    flex-direction: column; /* 垂直排列子元素 */
-    height: 100%; /* 确保内容区域占满整个高度 */
+    justify-content: flex-start;
+
+    ion-segment-button {
+      --color: gray;
+      --color-checked: black;
+      --indicator-color: orange;
+      --indicator-height: 5px;
+
+      @font-face {
+        font-family: 'segment-title-font';
+        src: url(/assets/fonts/STFANGSO.TTF);
+      }
+
+      font-family: 'segment-title-font';
+      font-size: 25px;
+      font-weight: bolder;
+      --padding-start:0px;
+      --padding-end:0px;
+      --margin-start:0px;
+      --margin-end:0px;
+    }
   }
 
-  .input-area {
-    flex: 1; /* 让输入区域占用剩余空间 */
-    
-    padding: 10px; /* 设置内边距 */
+  ion-button {
+    --background: black;
+    --padding-start: 0;
+    --padding-end: 0;
     font-size: 18px;
+    width: 120px;
   }
-  
-  .title-input {
-    display: flex; /* 使用 flex 布局 */
-    justify-content: space-between; /* 左右对齐 */
-    align-items: center; /* 垂直居中对齐 */
-    margin-bottom: 10px; /* 标题输入框与文本区域之间的间距 */
-  }
-
-  
-  .title-input ion-input {
-    border: none; /* 移除默认边框 */
-    border-bottom: 1px solid #ccc; /* 添加下边框 */
-    flex: 1; /* 使输入框填满可用空间 */
-    margin-right: 10px; /* 输入框与字数计数器之间的间距 */
-  }
-
- 
-
-  
-  .char-counter {
-    color: gray; /* 字数计数器的颜色 */
-    font-size: 16px; /* 字数计数器的字体大小 */
-    white-space: nowrap; /* 防止换行 */
-  }
-  
-  .footer {
-    display: flex; /* 使用 flex 布局 */
-    justify-content: space-between; /* 左右对齐 */
-    align-items: center; /* 垂直居中对齐 */
-    padding-left: 10px;
-    height: 60px; /* 设置底部的高度 */
-    background-color:#f0f0f0; /* 设置背景色 */
-  }
-  
-  .left-icons {
-    display: flex; /* 使用 flex 布局 */
-    align-items: center; /* 垂直居中对齐 */
-  }
-  
-  .location-tag {
-    display: flex; /* 使用 flex 布局 */
-    justify-content: space-between; /* 左右对齐 */
-    align-items: center; /* 垂直居中对齐 */
-    background-color: white;
-    width: 110px;
-    height: 40px;
-    border-radius: 20px;
-    margin-right: 20px;
-    margin-top: 5px;
-    padding-right: 10px;
-  }
-
-  .footer-button{
-    color:black; 
-    font-size: 40px;
-    margin-right: 20px;
-    margin-top: 30px;
-    margin-bottom: 10px;
-  }
-
-
-  /* 表情选择器样式 */
-.emoji-picker {
-  --background: transparent; /* 去除默认样式 */
-  background-color:white; /* 背景颜色 */
-  padding: 10px;
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  overflow: hidden; /* 隐藏多余内容 */
-}
-
-/* 表情容器用于支持滚动 */
-.emoji-container {
-  display: flex;
-  flex-wrap: wrap; /* 允许换行 */
-  overflow-y: auto; /* 允许纵向滚动 */
-  max-height: 70vh; /* 最大高度，防止超出屏幕 */
-  width: 100%; /* 容器宽度 */
-}
-
-/* 表情按钮 */
-.emoji-button {
-  margin: 5px; /* 每个表情与顶部的间距 */
-  font-size: 28px; /* 字体大小 */
-  height: 40px; /* 按钮高度 */
-  width: 40px; /* 按钮宽度 */
-  display: flex; /* 使用 flexbox 对齐 */
-  align-items: center; /* 垂直居中 */
-  justify-content: center; /* 水平居中 */
-  --background: transparent; /* 背景透明 */
-  --box-shadow: none; /* 去掉阴影 */
-  --outline: none; /* 去掉轮廓 */
-  border: none; /* 去掉边框 */
-}
-//标签
-.tag-container {
-  display: flex;
-  justify-content: flex-start; /* 标签靠左对齐 */
-  padding: 10px; /* 标签容器内边距 */
-  margin-bottom: 10px; /* 将标签容器推到底部 */
-}
-
-.tag {
-  background-color: #f0f0f0; // 灰色背景
-  color: black; // 黑色字体
-  border-radius: 20px; // 椭圆形效果
-  padding: 5px 10px; // 标签内边距
-  margin-right: 17px; // 标签之间的间距
-  font-size: 14px; // 标签字体大小
-  display: inline-flex; // 让标签内容居中
-  align-items: center; // 垂直居中
-}
-
-.tagpicture{
-  margin-left: 5px;
-  margin-right: 5px;
 }
 
+ion-content {
+  --background: #f8f8f8;
+  color: black;
+
+  ion-segment-view {
+    #second {
+      color: black;
+
+      #rolling {
+        overflow-x: auto;
+        scrollbar-width: none;
+        width: 100%;
+        white-space: nowrap;
+
+        ion-card {
+          border-radius: 15px;
+          box-shadow: none;
+          white-space: normal;
+          display: inline-block;
+          margin: 10px;
+          width: 50%;
+          height: 50vw;
+          padding: 10px;
+
+          .rolling-top {
+            display: flex;
+            justify-content: space-between;
+
+            ion-img {
+              width: 50%;
+            }
+
+            ion-button {
+              --padding-start: 5px;
+              --padding-end: 5px;
+              --padding-top: 0;
+              --padding-bottom: 0;
+              --box-shadow: none;
+            }
+          }
+
+          .text {
+            font-size: 15px;
+            margin: 0;
+            color: black;
+          }
+
+          .intro {
+            font-size: 12px;
+            margin: 5px 0;
+            color: gray;
+          }
+        }
+
+        #rolling-1 {
+          background: linear-gradient(to bottom, rgb(250, 246, 216), rgb(255, 251, 239));
+          ion-button {
+            --background: orange;
+          }
+        }
+
+        #rolling-2 {
+          --background:linear-gradient(to bottom, rgb(242, 235, 247), rgb(246, 237, 254));
+          ion-button {
+            --background: rgb(163, 115, 201);
+          }
+        }
+      }
 
-.posts-container {
-  width: 100%; // 宽度占满父元素
-}
-
-.post {
-  background-color: #f9f9f9; // 背景色
-  border: 1px solid #ddd; // 边框
-  border-radius: 8px; // 圆角
-  padding: 10px;
-  margin-bottom: 10px; // 帖子之间的间距
-}
-
-.post h3 {
-  margin: 0; // 去掉默认的 margin
-}
 
-.post p {
-  margin: 5px 0; // 设置段落的 margin
-}
-
-.image-gallery {
-  display: flex; // 使用 flexbox 来排列图片
-  flex-wrap: wrap; // 允许换行
-}
+    }
 
-.post-image {
-  width: 100px; // 设置图片的宽度
-  height: 100px; // 设置图片的高度
-  object-fit: cover; // 保持图片的比例
-  margin-right: 5px; // 图片之间的间距
+  }
 }

E-Cover-app/src/app/tab2/tab2.page.ts

@@ -1,14 +1,20 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonIcon, IonText, IonLabel, IonCard, IonImg } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { Router } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { addOutline, chevronForwardCircle } from 'ionicons/icons';
+addIcons({ addOutline,chevronForwardCircle})
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonButton]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonButton,
+    IonSegment,IonSegmentButton,IonSegmentContent,IonSegmentView,IonIcon,IonText,IonLabel,
+    IonCard,IonImg
+  ]
 })
 export class Tab2Page {
   constructor(private router:Router) {}

E-Cover-app/src/app/tab3/tab3.page.html

@@ -46,7 +46,8 @@
     </div>
   </div>
   <!--统计版图-->
-  <ion-card style="--background:white;box-shadow: none;">
+  <ion-card style="--background:white;box-shadow: none;border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;">
     <div class="card">
       <p>赞过帖子</p>
       <p>11</p>

E-Cover-app/src/app/tab3/tab3.page.scss

@@ -177,7 +177,9 @@ ion-content {
     }
 
     p {
-        clear: both;
+        display: inline-block;
+        margin: 0;
+        width: 100%;
         color: gray;
         font-size: 15px;
         text-align: center;

E-Cover-app/src/lib/ncloud.ts

@@ -92,6 +92,9 @@ export class CloudQuery {
         this.className = className;
     }
 
+    include(...fileds:string[]) {
+        this.whereOptions["include"] = fileds;
+    }
     greaterThan(key: string, value: any) {
         if (!this.whereOptions[key]) this.whereOptions[key] = {};
         this.whereOptions[key]["$gt"] = value;