修改了点

src/app/comments/comments.page.html

@@ -18,7 +18,7 @@
   <!-- 作者发布的内容 -->
   <div class="post">
     <p>
-      作者发布的内容：太阳似乎不想归去，念念不舍地在云后露出淡淡的脸庞。
+      太阳似乎不想归去，念念不舍地在云后露出淡淡的脸庞。
       阴云越凝越厚，到后来，就连那淡淡的脸庞也消失了。
       风吹起来了，带着几分凌人的傲慢，冷森森的，把将要收拢的花朵打落一地，无精打采地躺在那里，像一个个重病号；
       电线被吹得呜呜作响，得意忘形地在空中摇来摆去:枝头的叶子本来不想离开那充满希望的枝干，却硬被拽了下来，丢落在地.
@@ -30,11 +30,24 @@
     </p>
   </div>
 
+  <ion-toolbar>
+    <div class="user-info">
+      <img
+        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QGUz1-tWsQhwsa3F6i9nGAHaHa?w=268&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7"
+        class="avatar">
+      <span class="username">我</span>
+    </div>
+    <ion-input placeholder="说点什么..." clearInput></ion-input>
+    <ion-button slot="end" color="primary">发送</ion-button>
+  </ion-toolbar>
+
   <!-- 其他用户发送的评论 -->
   <div class="comments">
     <div class="comment">
       <div class="user-info">
-        <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QGUz1-tWsQhwsa3F6i9nGAHaHa?w=268&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="avatar">
+        <img
+          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QGUz1-tWsQhwsa3F6i9nGAHaHa?w=268&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7"
+          class="avatar">
         <span class="username">评论者1</span>
       </div>
       <div class="content">
@@ -56,8 +69,18 @@
 </ion-content>
 
 <ion-footer>
-  <ion-toolbar>
-    <ion-input placeholder="输入评论..." clearInput></ion-input>
-    <ion-button slot="end" color="primary">发送</ion-button>
-  </ion-toolbar>
+  <ion-button (click)="like()">
+    <ion-icon name="thumbs-up"></ion-icon>
+    点赞
+  </ion-button>
+
+  <ion-button (click)="favorite()">
+    <ion-icon name="heart"></ion-icon>
+    收藏
+  </ion-button>
+
+  <ion-button (click)="comment()">
+    <ion-icon name="chatbox"></ion-icon>
+    评论
+  </ion-button>
 </ion-footer>

src/app/comments/comments.page.scss

@@ -31,4 +31,55 @@
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid #ccc;
+}
+
+ion-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    ion-input {
+        flex: 1;
+        /* 输入框占据剩余空间 */
+        margin: 0 10px;
+        /* 设置输入框左右间距 */
+    }
+
+    ion-button {
+        --background: transparent;
+        /* 设置按钮背景为透明 */
+        --color: var(--ion-color-medium);
+        /* 设置按钮文字颜色为淡色 */
+        font-size: 14px;
+        /* 设置按钮文字大小 */
+        padding: 5px 10px;
+        /* 设置按钮内边距 */
+    }
+
+}
+
+
+
+ion-footer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #f4f4f4;
+
+    /* 设置底部背景色 */
+    ion-button {
+        flex: 1;
+        /* 平均分配宽度 */
+        margin: 5px;
+        /* 按钮间距 */
+        --background: transparent;
+        /* 设置按钮背景为透明 */
+        --color: inherit;
+        /* 继承按钮文字颜色 */
+        --border-radius: 0;
+        /* 可选：设置按钮边框圆角为0 */
+    }
 }

src/app/comments/comments.page.ts

@@ -19,6 +19,18 @@ export class CommentsPage implements OnInit {
     });
     return await popover.present();
   }
+
+  like() {
+    // 处理点赞逻辑
+  }
+
+  favorite() {
+    // 处理收藏逻辑
+  }
+
+  comment() {
+    // 处理评论逻辑
+  }
   ngOnInit() { }