GZP 5 kuukautta sitten
vanhempi
commit
41388c0c1a
39 muutettua tiedostoa jossa 572 lisäystä ja 62 poistoa
  1. 11 1
      README.md
  2. 8 0
      src/app/app-routing.module.ts
  3. 0 15
      src/app/tab1/tab1.page.html
  4. 1 17
      src/app/tab3/tab3.page.html
  5. 4 0
      src/app/tab3/tab3.page.scss
  6. 2 2
      src/app/tabs/tabs-routing.module.ts
  7. 1 1
      src/app/tabs/tabs.page.html
  8. BIN
      src/assets/导航.png
  9. BIN
      src/assets/投诉举报.png
  10. BIN
      src/assets/旅游攻略.png
  11. BIN
      src/assets/旅游车.png
  12. BIN
      src/assets/旅游酒店.png
  13. BIN
      src/assets/美食.png
  14. BIN
      src/assets/门票.png
  15. 1 4
      src/global.scss
  16. 1 1
      src/index.html
  17. 14 0
      src/modules/contacts/contacts-routing.module.ts
  18. 14 0
      src/modules/contacts/contacts.module.ts
  19. 17 0
      src/modules/contacts/friends/friends-routing.module.ts
  20. 20 0
      src/modules/contacts/friends/friends.module.ts
  21. 51 0
      src/modules/contacts/friends/friends.page.html
  22. 12 0
      src/modules/contacts/friends/friends.page.scss
  23. 17 0
      src/modules/contacts/friends/friends.page.spec.ts
  24. 45 0
      src/modules/contacts/friends/friends.page.ts
  25. 56 8
      src/modules/function/boos/boos.page.html
  26. 4 0
      src/modules/function/boos/boos.page.scss
  27. 8 3
      src/modules/function/boos/boos.page.ts
  28. 37 9
      src/modules/function/employer/employer.page.html
  29. 15 0
      src/modules/function/employer/employer.page.scss
  30. 4 1
      src/modules/function/function-routing.module.ts
  31. 17 0
      src/modules/homepage/home-first/home-first-routing.module.ts
  32. 20 0
      src/modules/homepage/home-first/home-first.module.ts
  33. 87 0
      src/modules/homepage/home-first/home-first.page.html
  34. 37 0
      src/modules/homepage/home-first/home-first.page.scss
  35. 17 0
      src/modules/homepage/home-first/home-first.page.spec.ts
  36. 24 0
      src/modules/homepage/home-first/home-first.page.ts
  37. 12 0
      src/modules/homepage/homepage-routing.module.ts
  38. 14 0
      src/modules/homepage/homepage.module.ts
  39. 1 0
      src/modules/user/mine/mine.page.scss

+ 11 - 1
README.md

@@ -47,7 +47,17 @@
 ### 融资策略
 
 ## 产品结构
-
+- 项目概况:显示当前公司正在进行的项目概况,包括项目名称、进度、预算等信息。
+任务提醒:提醒用户当前需要完成的任务和工作安排。
+日历视图:展示项目计划、工作安排和重要事件的日历视图,方便用户查看和安排工作。
+人员管理:查看和管理公司员工的信息,包括联系方式、职位等。
+材料管理:记录和管理工地所需的材料信息,包括库存、采购记录等。
+设备管理:管理工地所需的设备信息,包括设备清单、维护记录等。
+费用管理:记录和管理项目费用、预算、支出等财务信息。
+实时通讯:提供内部员工之间的实时通讯功能,方便沟通和协作。
+报表统计:生成项目进度、费用、人员等方面的报表和统计数据,帮助管理者分析和决策。
+设置和个人资料:用户可以在首页进行个人信息设置和管理,包括修改密码、个人资料等。
+以上功能可以帮助工地公司管理APP的用户快速了解项目情况、安排工作、管理人员和资源,提高工作效率和管理水平。当然,根据具体的公司需求和业务流程,首页功能也可以根据实际情况进行定制和调整
 
 
 ## 产品优势和特点

+ 8 - 0
src/app/app-routing.module.ts

@@ -13,6 +13,14 @@ const routes: Routes = [
   {
     path: 'user',
         loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
+  },
+  {
+    path: 'contacts',
+        loadChildren: () => import('../modules/contacts/contacts.module').then(m => m.ContactsModule)
+  },
+  {
+    path: 'homepage',
+        loadChildren: () => import('../modules/homepage/homepage.module').then(m => m.HomepageModule)
   }
 ];
 @NgModule({

+ 0 - 15
src/app/tab1/tab1.page.html

@@ -1,15 +0,0 @@
-<ion-card style="background-image: url(assets/mypage.png);">
-  <ion-card-header>
-    <ion-item>
-      <ion-avatar slot="start">
-        <img src='{{"https://ionicframework.com/docs/img/demos/avatar.svg"}}' />
-      </ion-avatar>
-      <ion-label>
-        <ion-card-content>
-          <p>{{'请登入~'}}</p>
-          <p>登入查看更多哦</p>
-      </ion-card-content>
-      </ion-label>
-    </ion-item>
-  </ion-card-header>
-</ion-card>

+ 1 - 17
src/app/tab3/tab3.page.html

@@ -1,17 +1 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </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>
-
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+<!-- <div class="page-color"></div> -->

+ 4 - 0
src/app/tab3/tab3.page.scss

@@ -0,0 +1,4 @@
+.page-color{
+    background: linear-gradient(220.55deg, #B7DCFF 0%, #ffffff 100%);
+    height: 100vh;
+}

+ 2 - 2
src/app/tabs/tabs-routing.module.ts

@@ -9,11 +9,11 @@ const routes: Routes = [
     children: [
       {
         path: 'tab1',
-        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
+        loadChildren: () => import('../../modules/homepage/home-first/home-first.module').then(m => m.HomeFirstPageModule)
       },
       {
         path: 'tab2',
-        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
+        loadChildren: () => import('../../modules/contacts/friends/friends.module').then(m => m.FriendsPageModule)
       },
       {
         path: 'tab3',

+ 1 - 1
src/app/tabs/tabs.page.html

@@ -8,7 +8,7 @@
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
       <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-label>签到</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">

BIN
src/assets/导航.png


BIN
src/assets/投诉举报.png


BIN
src/assets/旅游攻略.png


BIN
src/assets/旅游车.png


BIN
src/assets/旅游酒店.png


BIN
src/assets/美食.png


BIN
src/assets/门票.png


+ 1 - 4
src/global.scss

@@ -34,7 +34,4 @@
 
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
-@import "@ionic/angular/css/palettes/dark.system.css";
-
-$background: linear-gradient(220.55deg, #B7DCFF 0%, #ffffff 100%);
-
+@import "@ionic/angular/css/palettes/dark.system.css";

+ 1 - 1
src/index.html

@@ -20,7 +20,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
-<body style="background: linear-gradient(220.55deg, #DDE4FF 0%, #8DA2EE 100%);">
+<body>
   <app-root></app-root>
 </body>
 

+ 14 - 0
src/modules/contacts/contacts-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {path: 'friends', loadChildren: () => import('./friends/friends.module').then(mod => mod.FriendsPageModule)},
+  // {path: 'ai-chat-page', loadChildren: () => import('./ai-chat-page/ai-chat-page.component').then(mod => mod.AiChatPageComponent)},
+  // {path: 'chat-page', loadChildren: () => import('./chat-page/chat-page.component').then(mod => mod.ChatPageComponent)},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ContactsRoutingModule { }

+ 14 - 0
src/modules/contacts/contacts.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContactsRoutingModule } from './contacts-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    ContactsRoutingModule
+  ]
+})
+export class ContactsModule { }

+ 17 - 0
src/modules/contacts/friends/friends-routing.module.ts

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

+ 20 - 0
src/modules/contacts/friends/friends.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 { FriendsPageRoutingModule } from './friends-routing.module';
+
+import { FriendsPage } from './friends.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FriendsPageRoutingModule
+  ],
+  declarations: [FriendsPage]
+})
+export class FriendsPageModule {}

+ 51 - 0
src/modules/contacts/friends/friends.page.html

@@ -0,0 +1,51 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-grid>
+      <ion-row>
+        <ion-col style="display: flex; justify-content: flex-start;">
+          <ion-icon name="chevron-back-outline"></ion-icon>
+        </ion-col>
+        <ion-col style="display: flex; justify-content: center;">
+          通讯录
+        </ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">
+          <ion-icon name="notifications-circle-outline"></ion-icon>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-toolbar>
+</ion-header>
+
+<div class="page-color">
+  <ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
+    <ion-item *ngFor="let result of results">
+      <ion-item-sliding (click)="goChatPage()">
+        <ion-item [button]="true">
+          <ion-avatar aria-hidden="true" slot="start">
+            <img class="" src="assets/mychat.png"/>
+          </ion-avatar>
+          <ion-grid>
+            <ion-row>
+              <h4>客服</h4>
+            </ion-row>
+            <ion-row>
+              <ion-label>您好,有什么可以帮到您的。</ion-label>
+            </ion-row>
+          </ion-grid>
+        </ion-item>
+        <ion-item-options slot="end">
+          <ion-item-option color="warning">
+            <ion-icon slot="icon-only" name="pin"></ion-icon>
+          </ion-item-option>
+          <ion-item-option color="tertiary">
+            <ion-icon slot="icon-only" name="share"></ion-icon>
+          </ion-item-option>
+          <ion-item-option color="danger" expandable="true">
+            <ion-icon slot="icon-only" name="trash"></ion-icon>
+          </ion-item-option>
+        </ion-item-options>
+      </ion-item-sliding>
+    </ion-item>
+
+
+

+ 12 - 0
src/modules/contacts/friends/friends.page.scss

@@ -0,0 +1,12 @@
+.page-color{
+    background: linear-gradient(220.55deg, #B7DCFF 0%, #ffffff 100%);
+    height: 100vh;
+    overflow: auto;
+}
+.item {
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  

+ 17 - 0
src/modules/contacts/friends/friends.page.spec.ts

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

+ 45 - 0
src/modules/contacts/friends/friends.page.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'app-friends',
+  templateUrl: './friends.page.html',
+  styleUrls: ['./friends.page.scss'],
+})
+export class FriendsPage implements OnInit {
+
+
+  ngOnInit() {
+  }
+  constructor(private router:Router) {
+    
+  }
+
+  goChatPage(){
+    this.router.navigate(["..//chat-page"],{
+    })
+  }
+  goAiChatPage(){
+    this.router.navigate(["..//ai-chat-page"],{
+    })
+  }
+  public data = [
+    'Amsterdam',
+    'Buenos Aires',
+    'Cairo',
+    'Geneva',
+    'Hong Kong',
+    'Istanbul',
+    'London',
+    'Madrid',
+    'New York',
+    'Panama City',
+  ];
+  public results = [...this.data];
+
+  handleInput(event:any) {
+    const query = event.target.value.toLowerCase();
+    this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+  }
+}

+ 56 - 8
src/modules/function/boos/boos.page.html

@@ -1,13 +1,61 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>boos</ion-title>
+    <ion-grid>
+      <ion-row>
+        <ion-col style="display: flex; justify-content: flex-start;">
+          <ion-icon name="chevron-back-outline" (click)="back()"></ion-icon>
+        </ion-col>
+        <ion-col style="display: flex; justify-content: center;">
+          boos
+        </ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">
+          <ion-icon name="notifications-circle-outline"></ion-icon>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">boos</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
+<div class="page-color">
+  <ion-card>
+    <ion-card-header style="font-size: large; font-weight: bold;">项目信息</ion-card-header>
+      <ion-card-content style="margin-bottom: 10px;">
+        <ion-row style="margin-bottom: 10px;">
+          <ion-col style="display: flex; justify-content: flex-start;">项目名称: 新产品开发</ion-col>
+          <ion-col style="display: flex; justify-content: flex-end;">进度 45%</ion-col>
+        </ion-row>
+        <ion-progress-bar [value]="0.45" style="height: 20px; margin-bottom: 10px;"></ion-progress-bar>
+        <ion-button>查看详情</ion-button>
+      </ion-card-content>
+  </ion-card>
+  <ion-card>
+    <ion-card-header style="font-size: large; font-weight: bold;">员工工资信息</ion-card-header>
+    <ion-list style="margin-inline: 15px;">
+      <ion-row style="margin-bottom: 10px;">
+        <ion-col style="display: flex; justify-content: flex-start;">张三</ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">工资:¥7500</ion-col>
+      </ion-row>
+      <ion-row style="margin-bottom: 10px;">
+        <ion-col style="display: flex; justify-content: flex-start;">李四</ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">工资:¥7500</ion-col>
+      </ion-row>
+    </ion-list>
+    <ion-button style="margin-left: 15px;">查看详情</ion-button>
+  </ion-card>
+  <ion-card>
+    <ion-card-header style="font-size: large; font-weight: bold;">员工完成度</ion-card-header>
+    <ion-list style="margin-inline: 15px;">
+      <ion-row style="margin-bottom: 10px;">
+        <ion-col style="display: flex; justify-content: flex-start;">张三</ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">完成度:30%</ion-col>
+        <ion-progress-bar [value]="0.30" style="height: 20px; margin-bottom: 10px;"></ion-progress-bar>
+      </ion-row>
+      <ion-row style="margin-bottom: 10px;">
+        <ion-col style="display: flex; justify-content: flex-start;">李四</ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">完成度:50%</ion-col>
+        <ion-progress-bar [value]="0.50" style="height: 20px; margin-bottom: 10px;"></ion-progress-bar>
+      </ion-row>
+    </ion-list>
+    <ion-button style="margin-left: 15px;">查看详情</ion-button>
+  </ion-card>
+</div>

+ 4 - 0
src/modules/function/boos/boos.page.scss

@@ -0,0 +1,4 @@
+.page-color{
+    background: linear-gradient(220.55deg, #B7DCFF 0%, #ffffff 100%);
+    height: 100vh;
+}

+ 8 - 3
src/modules/function/boos/boos.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-boos',
@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BoosPage implements OnInit {
 
-  constructor() { }
+  constructor(private navCtrl:NavController,) {
+    
+   }
 
   ngOnInit() {
   }
-
-}
+  back(){
+    this.navCtrl.back()
+  }
+}

+ 37 - 9
src/modules/function/employer/employer.page.html

@@ -1,13 +1,41 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>employer</ion-title>
+    <ion-grid>
+      <ion-row>
+        <ion-col style="display: flex; justify-content: flex-start;">
+          <ion-icon name="chevron-back-outline"></ion-icon>
+        </ion-col>
+        <ion-col style="display: flex; justify-content: center;">
+          签到打卡
+        </ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">
+          <ion-icon name="notifications-circle-outline"></ion-icon>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </ion-toolbar>
 </ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">employer</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
+<div class="page-color">
+  <ion-card>
+    <ion-card-header style="font-size: large; font-weight: bold;">签到打卡</ion-card-header>
+    <ion-row>
+      <ion-col></ion-col>
+      <ion-col style="display: flex; justify-content: center;" size="8"><img class="sign-img" src="https://docs-demo.ionic.io/assets/madison.jpg"></ion-col>
+      <ion-col></ion-col>
+    </ion-row>
+    <ion-card-content style="display: flex; justify-content: center;">当前时间:2024年XX月XX日XX时XX分XX秒</ion-card-content>
+    <ion-button class="function-button">签到</ion-button>
+    <ion-button class="function-button">签退</ion-button>
+  </ion-card>
+  <ion-card>
+    <ion-card-header style="font-size: large; font-weight: bold;">打卡记录</ion-card-header>
+    <ion-list>
+      <ion-row>
+        <ion-col size="1"></ion-col>
+        <ion-col size="9">2024年XX月XX日XX时XX分XX秒</ion-col>
+        <ion-col>签到</ion-col>
+      </ion-row>
+    </ion-list>
+  </ion-card>
+  <ion-button routerLink="/function/boos">boos</ion-button>
+</div>

+ 15 - 0
src/modules/function/employer/employer.page.scss

@@ -0,0 +1,15 @@
+.page-color{
+    background: linear-gradient(220.55deg, #B7DCFF 0%, #ffffff 100%);
+    height: 100vh;
+}
+.sign-img{
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+}
+.function-button{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

+ 4 - 1
src/modules/function/function-routing.module.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: 'boos', loadChildren: () => import('./boos/boos.module').then(mod => mod.BoosPageModule)},
+  {path: 'employer', loadChildren: () => import('./employer/employer.module').then(mod => mod.EmployerPageModule)},
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

+ 17 - 0
src/modules/homepage/home-first/home-first-routing.module.ts

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

+ 20 - 0
src/modules/homepage/home-first/home-first.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 { HomeFirstPageRoutingModule } from './home-first-routing.module';
+
+import { HomeFirstPage } from './home-first.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    HomeFirstPageRoutingModule
+  ],
+  declarations: [HomeFirstPage]
+})
+export class HomeFirstPageModule {}

+ 87 - 0
src/modules/homepage/home-first/home-first.page.html

@@ -0,0 +1,87 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-grid>
+      <ion-row>
+        <ion-col style="display: flex; justify-content: flex-start;">
+          <ion-icon name="chevron-back-outline"></ion-icon>
+        </ion-col>
+        <ion-col style="display: flex; justify-content: center;">
+          首页
+        </ion-col>
+        <ion-col style="display: flex; justify-content: flex-end;">
+          <ion-icon name="notifications-circle-outline"></ion-icon>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</ion-header>
+
+<div class="page-color">
+
+   <!-- 功能栏 -->
+   <ion-card>
+    <ion-row class="bar-icon">
+      <div class="project-bar-container">
+        <ion-col size="2" class="project-item" *ngFor="let icon of icons">
+          <img src="{{ icon.imageUrl }}" alt="{{ icon.name }}" class="project-icon" />
+          <div class="project-name">{{ icon.name }}</div>
+        </ion-col>
+      </div>    
+    </ion-row>
+   </ion-card>
+    
+  <ion-card>
+    <ion-list>
+      <ion-list-header>
+        <ion-label>项目列表</ion-label>
+      </ion-list-header>
+      <ion-card>
+          <ion-row style="margin-bottom: 10px;" class="ion-align-items-center">
+            <ion-col style="display: flex; justify-content: flex-start;">
+              项目名称
+              <br>
+              项目描述
+            </ion-col>
+            <ion-col style="display: flex; justify-content: flex-end;">
+              <ion-button fill="clear">查看更多</ion-button>
+            </ion-col>
+          </ion-row>
+      </ion-card>
+    </ion-list>
+  </ion-card>
+  
+  <ion-card>
+    <ion-grid>
+        <ion-row>
+          <ion-list-header>
+            <ion-label>日历视图</ion-label>
+          </ion-list-header>
+      </ion-row>
+      <ion-row style="display: flex; justify-content: center;"><ion-datetime></ion-datetime></ion-row>
+    </ion-grid>
+  </ion-card>
+
+  <ion-card>
+    <ion-list>
+      <ion-list-header>
+        <ion-label>任务提醒</ion-label>
+        <ion-button>查看更多</ion-button>
+      </ion-list-header>
+      <ion-item>
+        <span class="red-dot"></span>
+        <ion-label>任务1</ion-label>
+      </ion-item>
+      <ion-item>
+        <span class="red-dot"></span>
+        <ion-label>任务2</ion-label>
+      </ion-item>
+      <ion-item>
+        <span class="red-dot"></span>
+        <ion-label>任务3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-card>
+</div>

+ 37 - 0
src/modules/homepage/home-first/home-first.page.scss

@@ -0,0 +1,37 @@
+.page-color{
+    background: linear-gradient(220.55deg, #B7DCFF 0%, #ffffff 100%);
+    height: 100vh;
+    overflow: auto;
+}
+.red-dot {
+    margin: 10px;
+    width: 15px;
+    height: 15px;
+    background-color: red;
+    border-radius: 50%;
+    display: inline-block;
+}
+.bar-icon{
+    padding-inline: 25px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+  .project-bar-container {
+    display: flex;
+    overflow-x: scroll;
+    width: 100%;
+  }
+  
+  .project-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 5px;
+    padding: 10px;
+    border-radius: 20px;
+    background-color: #ffffff;
+    color: #000000;
+  }
+  .project-name {
+    margin-top: 5px;
+  }

+ 17 - 0
src/modules/homepage/home-first/home-first.page.spec.ts

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

+ 24 - 0
src/modules/homepage/home-first/home-first.page.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home-first',
+  templateUrl: './home-first.page.html',
+  styleUrls: ['./home-first.page.scss'],
+})
+export class HomeFirstPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+  icons = [
+    { name: '门票', imageUrl: 'assets/门票.png' },
+    { name: '住宿', imageUrl: 'assets/旅游酒店.png' },
+    { name: '公交', imageUrl: 'assets/旅游车.png' },
+    { name: '美食', imageUrl: 'assets/美食.png' },
+    { name: '导航', imageUrl: 'assets/导航.png' },
+    { name: '推荐', imageUrl: 'assets/旅游攻略.png' },
+    { name: '投诉', imageUrl: 'assets/投诉举报.png' },
+    // Add more icons as needed
+  ];
+}

+ 12 - 0
src/modules/homepage/homepage-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {path: 'homeFirst', loadChildren: () => import('./home-first/home-first.module').then(mod => mod.HomeFirstPageModule)},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomepageRoutingModule { }

+ 14 - 0
src/modules/homepage/homepage.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HomepageRoutingModule } from './homepage-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    HomepageRoutingModule
+  ]
+})
+export class HomepageModule { }

+ 1 - 0
src/modules/user/mine/mine.page.scss

@@ -1,3 +1,4 @@
 .page-color{
     background: linear-gradient(220.55deg, #B7DCFF 0%, #ffffff 100%);
+    height: 100vh;
 }