add:new page

Ecover-app/src/app/generate-option/generate-option.component.html

@@ -0,0 +1,3 @@
+<p style="color: red;">
+  generate-option works!
+</p>

Ecover-app/src/app/generate-option/generate-option.component.spec.ts

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

Ecover-app/src/app/generate-option/generate-option.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-generate-option',
+  templateUrl: './generate-option.component.html',
+  styleUrls: ['./generate-option.component.scss'],
+  standalone: true,
+})
+export class GenerateOptionComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

Ecover-app/src/app/tab1/tab1.page.html

@@ -1,17 +1,57 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
+<div id="banner">
+    <div id="header">
+        <div id="header-left">
+            <ion-icon name="location-outline" size="large" aria-hidden="true"></ion-icon>
+            位置信息
+        </div>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+        <div id="header-right">
+            <ion-icon name="notifications-outline" size="large" aria-label="Favorite"></ion-icon>
+        </div>
+    </div>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content>
+    <div style="background:none;">
+        <ion-card>
+            <ion-button fill="clear">
+                <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+                    alt="button tab">
+            </ion-button>
+            <p>
+                测试
+            </p>
+        </ion-card>
+
+        <ion-card>
+            <ion-button fill="clear">
+                <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+                    alt="button tab">
+            </ion-button>
+            <p>
+                未设置
+            </p>
+        </ion-card>
+
+        <ion-card>
+            <ion-button fill="clear">
+                <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+                    alt="button tab">
+            </ion-button>
+            <p>
+                未设置
+            </p>
+        </ion-card>
+
+        <ion-card>
+            <ion-button fill="clear">
+                <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+                    alt="button tab">
+            </ion-button>
+            <p>
+                未设置
+            </p>
+        </ion-card>
+
+    </div>
+</div>
+<ion-content>
+</ion-content>

Ecover-app/src/app/tab1/tab1.page.scss

@@ -0,0 +1,57 @@
+#banner {
+    height: 300px;
+    background-color: #f8f8f8;
+    background-image: url(style-img/banner1.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+#header {
+    height: 50px;
+    background-color: rgba(255, 255, 255, 0);
+    color: white;
+    padding: 10px;
+}
+
+#header-left {
+    float: left;
+    display: flex;
+    align-items: center;
+}
+
+#header-right {
+    float: right;
+}
+
+
+ion-card {
+    height: 140px;
+    width: 100px;
+    margin: 10px 0px 10px 0px;
+    background: none;
+    outline: none;
+    box-shadow: none !important;
+    float: left;
+    ion-button {
+        width: 100px;
+        height: 100px;
+        img{
+            display: block;
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+        }
+    }
+    p {
+        text-align: center;
+        font-size: 20px;
+        margin: 0;
+        padding: 0;
+        color: white;
+    }
+}
+
+ion-content {
+    --background: #f8f8f8;
+    --color: #000;
+}

Ecover-app/src/app/tabs/tabs-routing.module.ts

@@ -19,6 +19,10 @@ const routes: Routes = [
         path: 'tab3',
         loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
       },
+      {
+        path: 'generate-option',
+        loadChildren: () => import('../generate-option/generate-option.component').then(m => m.GenerateOptionComponent)
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

Ecover-app/src/app/tabs/tabs.page.html

@@ -2,7 +2,9 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <img src="style-img/tab1-logo.png" alt="tab1">
+      <img src="https://s1.imagehub.cc/images/2024/11/28/335f5fde21b940a0caf8d8a5a12f6156.png"
+       alt="tab1 logo"
+       style="height: 50px; width: 50px; ">
       <ion-label>首页</ion-label>
     </ion-tab-button>
 

Ecover-app/src/app/tabs/tabs.page.scss

@@ -1,10 +1,26 @@
 ion-tab-bar {
-    background-image: url(style-img/footer-bg.png);
-    background-size:cover;
-    background-repeat: no-repeat;
-    border: 0;
-    height: 15%;
-    ion-tab-button {
-      background-color: hsla(0, 0, 0, 0);
+  background-image: url(style-img/footer-bg.png);
+  background-color: #f8f8f8;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border: 0;
+  height: 13%;
+
+  ion-tab-button {
+    background-color: hsla(0, 0, 0, 0);
+
+    ion-label {
+      color: white;
+      font-size: 15px;
+      -webkit-text-stroke: 0.5px black;
+
+      @font-face {
+        font-family: "footer-font";
+        src: url("style-img/footer-font.otf");
+      }
+
+      font-family: "footer-font";
+      font-weight: 1000;
     }
-}   
+  }
+}