feat: update

src/app/app-routing.module.ts

@@ -27,24 +27,18 @@ const routes: Routes = [
       {
         path: 'login',
         loadChildren: () => import('../modules/user/edit-info/edit-info.module').then(m => m.EditInfoPageModule)
-      }
+      },
+      {
+        path: 'tab3-create',
+        loadChildren: () => import('../modules/page/tab3-create/tab3-create.module').then(m => m.Tab3CreatePageModule)
+      },
     ]
   },
   {
     path: 'user',
     loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
   }
-  // {
-  //   path: 'tab3',
-  //   children: [
-  //     {
-  //       path: 'login',
-  //       loadChildren: () => import('../modules/user/edit-info/edit-info.module').then(m => m.EditInfoPageModule)
-  //     }
-  //   ]
-  // },
 
-  
 
 ];
 @NgModule({

src/app/contact/contact.page.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
+import Parse from "parse";
+Parse.initialize("dev"); // 设置applicationId
+Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
+
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.page.html',
@@ -20,6 +24,7 @@ export class ContactPage implements OnInit {
   constructor() { }
 
   ngOnInit() {
-  }
 
+  }
+ 
 }

src/app/tab1/tab1.page.html

@@ -18,6 +18,7 @@
           </div>
         <div class="swiper-button-next"></div>
         <div class="swiper-button-prev"></div>
+        
       </div>
       <!-- 图标卡片 -->
       <div class="middle-section">

src/app/tab1/tab1.page.scss

@@ -1,16 +1,15 @@
 .middle-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    overflow-x: auto;
-    white-space: nowrap;
-    margin-top: 4px; /* 添加顶部间距 */
-
-    .row{
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-    }
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  overflow-x: auto;
+  white-space: nowrap;
+  margin-top: 4px; /* 添加顶部间距 */
+  .row{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+  }
     .order-card {
       width: 60px;
       height: 60px;
@@ -21,33 +20,39 @@
       justify-content: center;
       align-items: center;
     }
-    .large-icon {
-        font-size: 30px; /* 设置图标大小为30像素 */
-        margin-bottom: 5px; /* 调整图标与文字之间的间距 */
-      
-    }
-    .centered-header {
+      .centered-header {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column; /* 设置为垂直方向布局 */
-        // height: 100%; /* 设置容器高度为100% */
-    }
-    ion-card-subtitle {
-        font-size: 12px;
-    }
-    .swiper-container {
-        width: 100%;
-        height: 100%;
-      }
-      
-      .swiper-slide {
-        text-align: center;
+        // height: 100%; /* 设置容器高度为100% */  
       }
-      
-      .swiper-button-next,
-      .swiper-button-prev {
-        color: #fff;
+      .large-icon {
+        font-size: 30px; /* 设置图标大小为30像素 */
+        margin-bottom: 5px; /* 调整图标与文字之间的间距 */  
+      } 
+      .ion-card-subtitle {
+        font-size: 12px;
       }
+        
+}
+  
+
+
+.swiper-container {
+width: 100%;
+height: 160px;
+
+.swiper-wrapper {
+  height: 140px; // 调整swiper-wrapper的高度
 
-}
+  .swiper-slide {
+    text-align: center;
+    height: 100%; // 调整swiper-slide的高度
+  }
+}  
+.swiper-button-next,
+.swiper-button-prev {
+  display: none; // 隐藏轮播箭头
+}
+}

src/app/tab1/tab1.page.ts

@@ -5,16 +5,19 @@ import { Router } from '@angular/router';
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss']
+  styleUrls: ['tab1.page.scss'],
+ 
 })
 export class Tab1Page {
   // 上方轮播图
+
   public attractions = [
     { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点1' },
-    { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点2' },
-    { image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点3' }
+    { image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.4sCrXFdufaW6NLTTeTJFdQHaEq?w=229&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7", name: '景点2' },
+    { image: "https://ts1.cn.mm.bing.net/th/id/R-C.90139666f8943b728df6af35d9e0f82a?rik=V2B9Csf%2be9hAdA&riu=http%3a%2f%2fi.52desktop.cn%3a81%2fupimg%2fallimg%2f20141231%2f2014123116175167177807.jpg&ehk=AryhWxX8LTLpPs4rb31XISqXKyw0zFPNtxRenGZli8M%3d&risl=&pid=ImgRaw&r=0", name: '景点3' }
   ];
 
+
   //多图标卡片
   cards = [
     { icon: 'map-outline', title: '找攻略' },
@@ -31,6 +34,7 @@ export class Tab1Page {
 
   chunkedCards: any[] = [];
 
+  
   constructor(private router: Router) {
     this.chunkSize(this.cards);
   }
@@ -48,6 +52,8 @@ export class Tab1Page {
       this.chunkedCards.push(cards.slice(i, i + chunkSize));
     }
   }
+ 
+
 
   ngOnInit() {
     const swiper = new Swiper('.swiper-container', {
@@ -55,6 +61,13 @@ export class Tab1Page {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
       },
+      
+      autoplay: {
+        delay: 3000, // 自动播放间隔时间为3秒
+      },  
+
     });
+
   }
+  
 }

src/app/tab3/tab3.page.html

@@ -23,13 +23,13 @@
       <ion-row class="user-info-row">
         <ion-col size="auto" class="enlarge-col">
           <ion-avatar (click)="fileInput.click()">
-            <ion-img [src]="userImage" ></ion-img>
+            <ion-img [src]="userImage" style="width: 80px; height: 80px;"></ion-img>
           </ion-avatar>
           <input type="file" #fileInput (change)="onFileSelected($event)" style="display: none">
 
         </ion-col> 
         <ion-col size="auto" class="info-col">
-          <ion-label><h1>用户名：{{user?.get('username') || '未登录'}}</h1></ion-label>
+          <ion-label><h1>{{user?.get('username') || '未登录'}}</h1></ion-label>
           <ion-label>ID: {{user?.id || '-'}}</ion-label>
           &nbsp;
           <ion-label>IP属地: 南昌</ion-label>
@@ -79,20 +79,34 @@
     </ion-segment>
   
     <div *ngIf="currentTab === 'unpublished'">
-      <p>未发布内容</p>
+      <img src="https://gd-hbimg.huaban.com/068da346d1fbca8edd952fb7e77b0eb0468ac03512a0f-Rm3mAD_fw658webp" class="img-center" style="width: 300px; height: 300px;">
+      <div class="center-text">
+        <h1>暂无内容</h1>
+      </div>
     </div>
   
     <div *ngIf="currentTab === 'published'">
-      <p>已发布内容</p>
+      <img src="https://gd-hbimg.huaban.com/068da346d1fbca8edd952fb7e77b0eb0468ac03512a0f-Rm3mAD_fw658webp" class="img-center" style="width: 300px; height: 300px;">
+      <div class="center-text">
+        <h1>暂无内容</h1>
+      </div>
     </div>
   
     <div *ngIf="currentTab === 'liked'">
-      <p>点赞内容</p>
+      <div class="center-text">
+        <h1>点赞内容</h1>
+      </div>
     </div>
   
     <div *ngIf="currentTab === 'favorited'">
-      <p>收藏内容</p>
+      <div class="center-text">
+        <h1>收藏内容</h1>
+      </div>
     </div>
   </ion-content>
 
+  <div class="footer">
+    <button class="create-button" (click)="navigateToCreatePage()">创建内容</button>
+  </div>
+
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -1,52 +1,89 @@
 .middle-section {
+  display: flex;
+  justify-content: space-around;
+  overflow-x: auto;
+  white-space: nowrap;
+  margin-top: 0px; /* 添加顶部间距 */
+
+   //卡片：关注、粉丝、获赞
+   .order-card {   
+    width: 110px;
+    height: 80px;
+    margin: 5px;
     display: flex;
-    justify-content: space-around;
-    overflow-x: auto;
-    white-space: nowrap;
-    margin-top: 0px; /* 添加顶部间距 */
- 
-    .user-info-row {
-      display: flex;
-      align-items: center;
-    }
-  
-    .info-col {
-      margin-left: 10px; // 设置头像和信息之间的间距
-      text-align: right;
-
-    }
-    .enlarge-col {
-      width: 100px; // 设置宽度为200px（根据需要调整）
-      height: 100px; // 设置高度为200px（根据需要调整）
-    }
-
-    .ion-avatar {
-      border-radius: 50%; // 将头像设置为圆形
-    }
-
-    .order-card {   //卡片
-      width: 110px;
-      height: 80px;
-      margin: 5px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.user-info-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .info-col {
+    margin-right: 40px; // 设置头像和信息之间的间距
+    align-items: center;
+    // text-align: right;
+  }
+  .enlarge-col {
    
+    width: 50px; // 设置宽度为200px（根据需要调整）
+    height: 80px; // 设置高度为200px（根据需要调整）
+    size: auto;
+  }
+}
 
-    .middle-section {
-      ion-card {
-        margin-bottom: 10px;
-        display: none; /* 默认隐藏所有内容部分 */
-      }
+ 
 
-      ion-card.active {
-        display: block; /* 显示选中的内容部分 */
-      }
-    }
+  // .ion-avatar {
+  //   border-radius: 50%; // 将头像设置为圆形
+  // }
+ 
+ 
+  //选择卡
+  // .middle-section {
+  //   ion-card {
+  //     margin-bottom: 10px;
+  //     display: none; /* 默认隐藏所有内容部分 */
+  //   }
 
+  //   ion-card.active {
+  //     display: block; /* 显示选中的内容部分 */
+  //   }
+  // }
 
-  }
+  
+
+.center-text {
+  text-align: center; //字体居中
+}
+.img-center{
+  display: block;
+  margin: 0 auto;
+  margin-top: 20px; /* 调整这里的数值来控制图片向下移动的距离 */
+}
+.container {
+  text-align: center;
+}
+.create-button {
+  background-color: #007bff; /* 设置背景色为蓝色，可以根据需要调整 */
+  color: #fff; /* 设置文字颜色为白色 */
+  padding: 10px 20px; /* 设置内边距，调整按钮大小 */
+  border: none; /* 去除按钮边框 */
+  border-radius: 5px; /* 设置按钮圆角 */
+  cursor: pointer; /* 鼠标移上去显示手型光标 */
+}
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #f0f0f0; /* 设置底部容器背景色 */
+  padding: 10px 0; /* 设置底部容器内边距 */
+}
 
+ 
 

src/app/tab3/tab3.page.ts

@@ -49,5 +49,8 @@ export class Tab3Page implements OnInit{
   GoToLoginPage(){
     this.router.navigate(['/user/login'])
   }
-
+ //跳转到新页面
+ navigateToCreatePage() {
+  this.router.navigate(['/tab3/tab3-create']);
+  }
 }

src/modules/page/tab3-create/tab3-create-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { Tab3CreatePage } from './tab3-create.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Tab3CreatePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class Tab3CreatePageRoutingModule {}

src/modules/page/tab3-create/tab3-create.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { Tab3CreatePageRoutingModule } from './tab3-create-routing.module';
+
+import { Tab3CreatePage } from './tab3-create.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    Tab3CreatePageRoutingModule
+  ],
+  declarations: [Tab3CreatePage]
+})
+export class Tab3CreatePageModule {}

src/modules/page/tab3-create/tab3-create.page.html

@@ -0,0 +1,27 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <button (click)="navigateBackToTab3()">Back</button>
+    </ion-buttons>
+    <ion-title>tab3-create</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">记录一下</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div>
+    <ion-textarea placeholder="填写标题更容易被推荐哦" rows="6"></ion-textarea>
+    <ion-textarea placeholder="来记录你的旅途吧" rows="20"></ion-textarea>
+    
+    <ion-button (click)="saveDraft()" expand="full">存草稿</ion-button>
+    <ion-button (click)="publish()" expand="full">发布</ion-button>
+  </div>
+   
+</ion-content>
+
+

src/modules/page/tab3-create/tab3-create.page.scss

@@ -0,0 +1 @@
+

src/modules/page/tab3-create/tab3-create.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Tab3CreatePage } from './tab3-create.page';
+
+describe('Tab3CreatePage', () => {
+  let component: Tab3CreatePage;
+  let fixture: ComponentFixture<Tab3CreatePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Tab3CreatePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/modules/page/tab3-create/tab3-create.page.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-tab3-create',
+  templateUrl: './tab3-create.page.html',
+  styleUrls: ['./tab3-create.page.scss'],
+})
+export class Tab3CreatePage implements OnInit {
+
+  constructor(private router: Router,private toastController: ToastController) { }
+
+  navigateBackToTab3() {
+    this.router.navigate(['/tabs/tab3']);
+  }
+  saveDraft() {
+    this.presentToast('草稿已保存');
+  }
+
+  publish() {
+    this.presentToast('内容已发布');
+  }
+
+  async presentToast(message: string) {
+    const toast = await this.toastController.create({
+      message: message,
+      duration: 2000
+    });
+    toast.present();
+  }
+  ngOnInit() {
+  }
+
+}