tab1界面基本完成

E-Cover-app/src/app/generate-option/generate-option.component.html

@@ -1,10 +1,5 @@
 <!--头部内容，包含标题和返回按钮-->
-<ion-header>
-  <div class="header-container">
-    <ion-icon name="arrow-back-outline" size="large" class="back-icon" (click)="goBack()"></ion-icon>
-    <p class="header-title">个性化生成</p>
-  </div>
-</ion-header>
+<app-custom-header [param]="['个性化生成','text','    ',]"></app-custom-header>
 <!--正文部分-->
 <ion-content>
   <!--性别选择，包含两个卡片-->

E-Cover-app/src/app/generate-option/generate-option.component.ts

@@ -10,15 +10,15 @@ import { TaskGenerateUserValiate } from 'src/agent/tasks/generate/generate-user-
 import { TaskExecutor } from 'src/agent/agent.start';
 import { TaskGeneratePrompt } from 'src/agent/tasks/generate/generate-prompt';
 import { TaskGeneratePicture } from 'src/agent/tasks/generate/generate-picture';
-import { FmodeChat, ChatPanelOptions, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
 import { CloudUser } from 'src/lib/ncloud';
+import { CustomHeaderComponent } from 'src/lib/component/custom-header/custom-header.component';
 addIcons({ 'arrow-back-outline': arrowBackOutline, radioButtonOffOutline, closeCircleOutline, checkmarkCircleOutline, reloadOutline });
 @Component({
   selector: 'app-generate-option',
   templateUrl: './generate-option.component.html',
   styleUrls: ['./generate-option.component.scss'],
   standalone: true,
-  imports: [IonicModule, CommonModule, FormsModule],
+  imports: [CustomHeaderComponent,IonicModule, CommonModule, FormsModule],
 })
 export class GenerateOptionComponent implements OnInit {
   /**

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

@@ -1,3 +1,4 @@
+<!--页头-->
 <ion-header collapse="fade" mode="ios">
     <ion-toolbar>
         <ion-button slot="start">南昌
@@ -6,8 +7,9 @@
         <ion-searchbar></ion-searchbar>
     </ion-toolbar>
 </ion-header>
-
+<!--内容-->
 <ion-content [fullscreen]="true">
+    <!--主页宣传轮播图-->
     <div id="banner">
         <swiper-container autoplay-delay="2000" loop="true">
             <swiper-slide><ion-img
@@ -16,50 +18,60 @@
                     src="https://s1.imagehub.cc/images/2024/12/23/0e8a11de31ce876d4491003574b43ce3.jpeg" /></swiper-slide>
         </swiper-container>
     </div>
-
+    <!--主页的卡片，包含四个按钮-->
     <ion-card>
-        <div class="main-button">
-            <ion-img src="https://s1.imagehub.cc/images/2024/12/23/e3a6e359ba4ad7745017c4b116cbfed4.png" />
+        <div style="width: 100%;display:flex;margin: 0 0;">
+            <div class="main-button" (click)="goGenerateOption()">
+                <ion-img src="https://s1.imagehub.cc/images/2024/12/23/e3a6e359ba4ad7745017c4b116cbfed4.png" />
                 <p>个性搭配</p>
-        </div>
-        <div class="main-button">
-            <ion-img src="https://s1.imagehub.cc/images/2024/12/23/6c4cba617f748bd770195fa1d02ac473.png" />
+            </div>
+            <div class="main-button">
+                <ion-img src="https://s1.imagehub.cc/images/2024/12/23/6c4cba617f748bd770195fa1d02ac473.png" />
                 <p>趋势分析</p>
-        </div>
-        <div class="main-button">
-            <ion-img src="https://s1.imagehub.cc/images/2024/12/23/4b30d81d915b24113540c7585809c689.png" />
+            </div>
+            <div class="main-button">
+                <ion-img src="https://s1.imagehub.cc/images/2024/12/23/4b30d81d915b24113540c7585809c689.png" />
                 <p>搭配贴士</p>
-        </div>
-        <div class="main-button">
-            <ion-img src="https://s1.imagehub.cc/images/2024/12/24/027b63214e367d15647408d3c9322177.png" />
+            </div>
+            <div class="main-button">
+                <ion-img src="https://s1.imagehub.cc/images/2024/12/24/027b63214e367d15647408d3c9322177.png" />
                 <p>绿色时尚</p>
+            </div>
+        </div>
+        <!--号外通知模块-->
+        <div
+            style="width: 90%;margin:20px 5%;display: flex;justify-content: space-between;align-items: center;height:16px;">
+            <div style="display: flex;align-items: center;margin: 0;">
+                <ion-img class="remind"
+                    src="https://s1.imagehub.cc/images/2024/12/24/8ebe6c9d6a62a1f21182a7ce75ee49b9.png" />
+                <ion-text>我们的APP上线咯！</ion-text>
+            </div>
+            <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
     </ion-card>
+    <!--人气推荐段设置-->
+    <div style="display: flex;justify-content: space-between;width: 90%;margin:0 5%;">
+        <ion-segment [swipe-gesture]="false">
+            <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>
 
-
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    v
-    v
-    v
-    v
-    vv
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3>数据库渲染测试</h3>
-    <h3 *ngFor="let user of userInfoList">{{ user.get('name')}}</h3>
+        <ion-button class="all" shape="round">
+            <ion-text>全部</ion-text>
+            <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+        </ion-button>
+    </div>
+    <!--段展示-->
+    <ion-segment-view>
+        <ion-segment-content id="first">
+            <ion-content [scrollX]="true" class="segment-content">
+                First1231231231321231231231312312112312313123132123132132132
+            </ion-content>
+        </ion-segment-content>
+        <ion-segment-content id="second">Second</ion-segment-content>
+    </ion-segment-view>
 </ion-content>

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

@@ -38,12 +38,11 @@ ion-card {
     margin: 0;
     top: -15px;
     z-index: 1;
-    box-shadow:none;
+    box-shadow: none;
 
     .main-button {
         width: 21%;
         margin: 20px 2%;
-        float: left;
     }
 
     ion-img {
@@ -54,19 +53,79 @@ ion-card {
     p {
         text-align: center;
         font-size: 16px;
+
         @font-face {
             font-family: 'main-button-font';
             src: url(/assets/fonts/mainButton.TTC);
         }
+
         font-family: 'main-button-font';
-        margin: 10px 0;
+        margin: 5px 0;
         padding: 0;
         color: black;
     }
+
+    .remind {
+        height: 40px;
+        width: 60px;
+        padding: 0;
+        margin-right: 10px;
+    }
+
+    ion-text {
+        font: 100 20px 'main-button-font';
+        color: #000;
+        padding: 0;
+    }
 }
 
 ion-content {
     --background: #f8f8f8;
     --color: #000;
-    height: 200vh;
+}
+
+ion-segment {
+    margin: 0;
+    padding-left: 0;
+    display: flex;
+    justify-content: flex-start;
+
+    ion-segment-button {
+        --color: gray;
+        --color-checked: black;
+
+        @font-face {
+            font-family: 'segment-title-font';
+            src: url(/assets/fonts/STFANGSO.TTF);
+        }
+
+        font-family: 'segment-title-font';
+        font-size: 25px;
+        font-weight: bolder;
+        --indicator-color:none;
+        --padding-start:0px;
+        --padding-end:0px;
+        --margin-start:0px;
+        --margin-end:0px;
+    }
+}
+
+.all {
+    color: gray;
+    --background: none;
+    --padding-start: 0;
+    --padding-end: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    width: 120px;
+    --box-shadow: none;
+}
+
+ion-segment-view{
+    width: 200vw;
+}
+.segment-content{
+    margin-left: 5%;
+    height: 200px;
+    --background:gray;
 }

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

@@ -1,38 +1,30 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-import { IonicModule } from '@ionic/angular';
 import { addIcons } from 'ionicons';
-import { notificationsOutline, locationOutline, caretDownOutline } from 'ionicons/icons';
+import { caretDownOutline, chevronForwardOutline } from 'ionicons/icons';
 import { Router } from '@angular/router';
 import { register } from 'swiper/element/bundle';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { CommonModule } from '@angular/common';
-addIcons({ caretDownOutline});
+import { IonButton, IonCard, IonContent, IonImg, IonLabel, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonText } from '@ionic/angular/standalone';
+addIcons({ caretDownOutline,chevronForwardOutline});
 register();
-
-addIcons({ 'location-outline': locationOutline, 'notifications-outline': notificationsOutline })
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [ExploreContainerComponent, IonicModule, CommonModule],
+  imports: [ExploreContainerComponent, CommonModule,IonButton,IonImg,IonContent,IonCard,
+    IonSegment,IonSegmentButton,IonSegmentContent,IonLabel,IonSegmentView,IonText,IonSearchbar
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 
 export class Tab1Page {
   constructor(private router: Router) { }
-  ngOnInit() {
-    this.loadUserInfoList();
-  }
+  ngOnInit() {}
   //转到GenerateOption页面
   goGenerateOption() {
     this.router.navigate(['generateOption']);
   }
-
-  userInfoList: Array<CloudObject> = [];
-  async loadUserInfoList() {
-    let query = new CloudQuery("_User");
-    this.userInfoList = await query.find();
-  }
 }

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

@@ -1,10 +1,4 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
+<!--头部，包括三个段-->
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">

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

@@ -1,10 +1,8 @@
+<!--工具栏-->
 <ion-tabs>
-
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <img src="https://s3.bmp.ovh/imgs/2024/11/30/446e2578ecf6ce17.png"
-       alt="tab1 logo"
-       style="height: 50px; width: 50px; ">
+      <img src="https://s3.bmp.ovh/imgs/2024/11/30/446e2578ecf6ce17.png" style="height: 50px; width: 50px; ">
       <ion-label>首页</ion-label>
     </ion-tab-button>
 
@@ -19,4 +17,4 @@
     </ion-tab-button>
   </ion-tab-bar>
 
-</ion-tabs>
+</ion-tabs>

E-Cover-app/src/lib/component/custom-header/custom-header.component.html

@@ -0,0 +1,8 @@
+<!--头部内容，包含标题和返回按钮-->
+<ion-header>
+  <div class="header-container">
+    <ion-icon name="chevron-back-outline" size="large" (click)="goBack()"></ion-icon>
+    <p class="header-title">{{ param[0] }}</p>
+    <p class="right-text">{{param[2]}}</p>
+  </div>
+</ion-header>

E-Cover-app/src/lib/component/custom-header/custom-header.component.scss

@@ -0,0 +1,36 @@
+ion-header {
+    background-color: #f8f8f8;
+    color: black;
+    box-shadow: none;
+    height: 70px;
+
+    .header-container {
+        padding:0 10px;
+        height: 70px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+}
+
+.header-title {
+    position: absolute;
+    font-size: 22px;
+
+    @font-face {
+        font-family: 'header-font';
+        src: url(/assets/fonts/header.TTF);
+    }
+
+    font-family: 'header-font';
+    top: 24px;
+    width: 100%;
+    text-align: center;
+    margin:0 0;
+}
+
+.right-text {
+    font-family: 'header-font';
+    font-size: 18px;
+}

E-Cover-app/src/lib/component/custom-header/custom-header.component.spec.ts

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

E-Cover-app/src/lib/component/custom-header/custom-header.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { IonButton, IonHeader, IonIcon, NavController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBackOutline } from 'ionicons/icons';
+addIcons({ chevronBackOutline });
+@Component({
+  selector: 'app-custom-header',
+  templateUrl: './custom-header.component.html',
+  styleUrls: ['./custom-header.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonIcon, IonButton]
+})
+export class CustomHeaderComponent implements OnInit {
+  @Input() param: Array<any> | any;
+  constructor(private navCtrl: NavController) { }
+  ngOnInit() { }
+  goBack() {
+    window.history.back();
+  }
+}