feat:new post

fashion-app/src/app/app.routes.ts

@@ -5,6 +5,10 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./send-post/send-post.component').then((m) => m.SendPostComponent),
   },
+  { path: 'post',
+    loadComponent: () =>
+      import('./post/post.component').then((m) => m.PostComponent),
+  },
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),

fashion-app/src/app/post/post.component.html

@@ -0,0 +1,46 @@
+<ion-content >
+  <div class="post">
+    <div class="post-header">
+      <div class="avatar">
+        <img src="../../assets/images/cxtouxiang.jpg" alt="User Avatar" class="avatar-image">
+      </div>
+      <div class="user-info">
+        <span class="username">用户名</span>
+        <ion-icon name="ellipsis-horizontal" class="more-icon"></ion-icon>
+      </div>
+    </div>
+    <h2 class="post-title">帖子标题</h2>
+<!--标签-->
+<div class="tag-container">
+  <div class="tag"><ion-icon name="bookmark-outline" class="tagpicture"></ion-icon>标签1</div>
+  <div class="tag"><ion-icon name="bookmark-outline" class="tagpicture"></ion-icon>标签2</div>
+  <div class="tag"><ion-icon name="bookmark-outline" class="tagpicture"></ion-icon>标签3</div>
+  <div class="tag"><ion-icon name="bookmark-outline" class="tagpicture"></ion-icon>标签4</div>
+</div>
+
+    <p class="post-content-text">这里是帖子内容，描述了帖子的详细信息和背景。</p>
+    <div class="image-gallery">
+      <img src="../../assets/images/touxiang.jpg" alt="Post Image" class="post-image">
+      <img src="../../assets/images/2.jpg" alt="Post Image" class="post-image">
+      <img src="../../assets/images/cxtouxiang.jpg" alt="Post Image" class="post-image">
+      <img src="../../assets/images/cxtouxiang.jpg" alt="Post Image" class="post-image">
+    </div>
+
+     <!-- 按钮区域 -->
+     <div class="button-container">
+      <ion-button fill="clear" class="action-button">
+        <ion-icon name="share-social-outline" class=""></ion-icon>
+        <span>分享</span>
+      </ion-button>
+      <ion-button fill="clear" class="action-button">
+        <ion-icon name="chatbubble-outline"></ion-icon>
+        <span>评论</span>
+      </ion-button>
+      <ion-button fill="clear" class="action-button">
+        <ion-icon name="heart-outline"></ion-icon>
+        <span>点赞</span>
+      </ion-button>
+    </div>
+
+  </div>
+</ion-content>

fashion-app/src/app/post/post.component.scss

@@ -0,0 +1,115 @@
+.post {
+    padding: 10px; /* 设置内边距 */
+    background-color: white; /* 背景色 */
+    border-radius: 8px; /* 圆角效果 */
+    margin-bottom: 20px; /* 帖子之间的间距 */
+  }
+  
+  .post-header {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中 */
+    margin-bottom: 10px; /* 标题与用户信息之间的间距 */
+  }
+  
+  .avatar {
+    width: 45px; /* 头像宽度 */
+    height: 45px; /* 头像高度 */
+    border-radius: 50%; /* 圆形头像 */
+    overflow: hidden; /* 隐藏超出部分 */
+    margin-right: 10px; /* 头像与用户名之间的间距 */
+    border: black 1px solid; /* 边框 */
+
+  }
+  
+  .avatar-image {
+    width: 100%; /* 头像宽度100% */
+    height: 100%; /* 头像高度100% */
+    object-fit: cover; /* 保持比例填充 */
+  }
+  
+  .user-info {
+    flex: 1; /* 让用户名部分占用剩余空间 */
+    display: flex;
+    justify-content: space-between; /* 用户名和三个点之间的间距 */
+    align-items: center; /* 垂直居中 */
+  }
+  
+  .username {
+    font-weight: bold; /* 加粗用户名 */
+    font-size: 22px; /* 用户名字体大小 */
+  }
+  
+  .more-icon {
+    font-size: 25px; /* 三个点图标大小 */
+    color: gray;
+    margin-right: 10px;
+  }
+  
+  .post-title {
+    font-size: 18px; /* 标题字体大小 */
+    margin: 10px 5px; /* 标题上下间距 */
+    font-weight: bold;
+  }
+  
+  //标签
+.tag-container {
+    display: flex;
+    justify-content: flex-start; /* 标签靠左对齐 */
+    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;
+  }
+  
+  .post-content-text {
+    font-size: 18px; /* 帖子内容字体大小 */
+    margin-bottom: 10px; /* 内容与图片之间的间距 */
+  }
+  
+  .image-gallery {
+    display: flex; /* 使用 Flexbox 布局 */
+    justify-content: space-between; /* 图片之间的间距 */
+    flex-wrap: wrap; /* 允许换行 */
+  }
+  
+  .post-image {
+    width: 32%; /* 每张图片占用32%的宽度 */
+    height: auto; /* 高度自适应 */
+    border-radius: 5px; /* 图片圆角 */
+    margin-bottom: 5px; /* 图片与下一张图片之间的间距 */
+    object-fit: cover; /* 保持比例填充 */
+    margin-right: 5px; /* 图片与下一张图片之间的间距 */
+
+  }
+
+  .button-container {
+    display: flex; /* 使用 Flexbox 布局 */
+    justify-content: space-between; /* 按钮之间的间距 */
+  }
+  
+  .action-button {
+    flex: 1; /* 每个按钮占用相同的空间 */
+    font-size: 17px; /* 按钮字体大小 */
+    align-items: center; // 垂直居中
+    color: black; // 字体颜色
+  }
+  
+  .action-button ion-icon {
+    font-size: 20px; /* 图标大小 */
+    margin-right: 5px; /* 图标与文本之间的间距 */
+  }
+
+

fashion-app/src/app/post/post.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PostComponent } from './post.component';
+
+describe('PostComponent', () => {
+  let component: PostComponent;
+  let fixture: ComponentFixture<PostComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

fashion-app/src/app/post/post.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { bookmarkOutline, chatbubbleOutline, ellipsisHorizontal, heartOutline, shareSocialOutline, } from 'ionicons/icons';
+
+addIcons({ellipsisHorizontal,bookmarkOutline,shareSocialOutline,chatbubbleOutline,heartOutline})
+
+@Component({
+  selector: 'app-post',
+  templateUrl: './post.component.html',
+  styleUrls: ['./post.component.scss'],
+  standalone: true,
+  imports: [IonContent,IonIcon,IonButton]
+
+})
+export class PostComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}