update:qianduan

AIart-app/src/app/interest-test/interest-test.component.html

@@ -28,7 +28,7 @@
     }
 
     @if(isComplete){
-    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+    <fm-markdown-preview [content]="responseMsg"></fm-markdown-preview>
     }
 
 </ion-content>

AIart-app/src/app/interest-test/interest-test.component.scss

@@ -1,3 +0,0 @@
-.content-style {
-    margin: 50px;
-}

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

@@ -10,7 +10,7 @@
 
 <ion-content [fullscreen]="true">
   <div style="display: flex;align-items: center;justify-content: center;gap: 10px;height: 50px;">
-    <ion-searchbar placeholder="输入搜索内容" style="width: 60%"></ion-searchbar>
+    <ion-searchbar placeholder="输入搜索内容" style="width: 65%"></ion-searchbar>
     <ion-icon name="mail-outline" style="height: 30px;width: 30px;"></ion-icon>
     <div style="display: flex;align-items: center;">
       <ion-icon name="calendar-outline" style="height: 25px;width: 30px;"></ion-icon>
@@ -19,7 +19,7 @@
   </div>
   <div>
     <!-- 首部导航栏部分开始 -->
-    <ion-toolbar style="height: 40px;padding-left: 5px;">
+    <ion-toolbar style="height: 40px;">
       <ion-tabs>
         <ion-tab-bar slot="top">
           <ion-tab-button tab="home">
@@ -33,7 +33,6 @@
           </ion-tab-button>
           <ion-tab-button tab="test" class="rounded-rectangle" (click)="goToInterestTest()">
             <ion-label>兴趣探索</ion-label>
-            <ion-ripple-effect></ion-ripple-effect>
           </ion-tab-button>
           <ion-tab-button tab="ebook" class="rounded-rectangle" (click)="goToInterestPicture()">
             <ion-label>意境呈现</ion-label>
@@ -47,7 +46,7 @@
   <div>
     <ion-segment-view>
       <img alt="wu" src="../../assets/img/study.png" style="border-radius: 8px;position: relative;margin: 15px;display:flex ;align-items: center;
-    justify-content: center;height: 150px;width: 90%;" />
+    justify-content: center;height: 200px;width: 90%;" />
     </ion-segment-view>
   </div>
   <!-- 轮播图部分结束 -->

AIart-app/src/app/tab2/tab2.page.html

@@ -1,14 +1,28 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <div style="display: flex;align-items: center;justify-content: center;gap: 10px;">
+      <ion-searchbar placeholder="输入搜索内容" style="width: 70%;margin-top: 10px;"></ion-searchbar>
+      <ion-icon name="gift-outline" style="height: 25px;width: 25px;"></ion-icon>
+      <ion-icon name="mail-outline" style="height: 27px;width: 27px;margin-right: 5px;"></ion-icon>
+    </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <edit-tag></edit-tag>
-  <h1>星星打分组件演示：分值{{currentScore}}</h1>
-  <edit-rating-star [score]="currentScore" [scoreMax]="5" (onScoreChange)="handleScoreChange($event)">
-  </edit-rating-star>
-</ion-content>
+  <ion-toolbar>
+    <div style="display: flex;align-items: center;justify-content: center;gap: 25px;">
+      <div>学习</div>
+      <div>已购</div>
+      <div>计划</div>
+      <div>挑战赛</div>
+      <ion-icon name="calendar-outline" style="height: 25px;width: 25px;"></ion-icon>
+      <ion-icon name="options-outline" style="height: 25px;width: 25px;"></ion-icon>
+    </div>
+  </ion-toolbar>
+</ion-content>
+
+
+<!-- <edit-tag></edit-tag>
+<h1>星星打分组件演示：分值{{currentScore}}</h1>
+<edit-rating-star [score]="currentScore" [scoreMax]="5" (onScoreChange)="handleScoreChange($event)">
+</edit-rating-star> -->

AIart-app/src/app/tab2/tab2.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabs, IonLabel, IonTabButton, IonTabBar } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { EditTagComponent } from '../edit-tag/edit-tag.component'
 import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
@@ -10,7 +10,7 @@ import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.co
   styleUrls: ['tab2.page.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    EditTagComponent, EditRatingStarComponent]
+    EditTagComponent, EditRatingStarComponent, IonSearchbar, IonIcon, IonTabs, IonLabel, IonTabButton, IonTabBar]
 })
 export class Tab2Page {
 

AIart-app/src/app/tab3/tab3.page.html

@@ -1,17 +1,119 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <div style="display: flex;align-items: center;justify-content: space-between;">
+      <div style="margin-left: 10px;">
+        <ion-icon name="menu-outline" style="height: 30px;width: 30px;"></ion-icon>
+      </div>
+      <div style="display: flex;gap: 30px;">
+        <span (click)="red_underline('关注')" data-id="关注">关注</span>
+        <span (click)="red_underline('发现')" data-id="发现">发现</span>
+        <span (click)="red_underline('附近')" data-id="附近">附近</span>
+      </div>
+      <div style="margin-right: 10px;">
+        <ion-icon name="search-outline" style="height: 25px;width: 25px;"></ion-icon>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
+  <!-- 首部导航栏部分开始 -->
+  <div>
+    <ion-toolbar style="height: 40px;">
+      <ion-tabs>
+        <ion-tab-bar slot="top">
+          <ion-tab-button tab="home">
+            <ion-label>推荐</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="psychology">
+            <ion-label>视频</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="course">
+            <ion-label>绘画</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="test">
+            <ion-label>穿搭</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="ebook">
+            <ion-label>舞蹈</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
     </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  </div>
+  <!-- 首部导航栏部分结束 -->
+  <!-- 推荐内容部分1开始 -->
+  <div style="display: flex;align-items: center;">
+    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
+      <div style="margin: 5px;">
+        <img src="../../assets/img/xingkong.png" alt="星空-梵高" style="height: 200px;">
+        <span style="font-size: 15px;">梵高-星空高清画作#致敬梵高 #艺术品 #星空</span>
+        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
+          <img src="../../assets/img/book1.png" alt="tou`xi`ang1"
+            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
+          <div style="display: grid;align-items: center;font-size: 12px;">
+            <span>霸王别姬</span>
+            <span>11-27</span>
+          </div>
+          <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
+          <span>1687</span>
+        </div>
+      </div>
+    </div>
+    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
+      <div style="margin: 5px;">
+        <img src="../../assets/img/xiangrikui.png" alt="星空-梵高" style="height: 200px;">
+        <span style="font-size: 15px;">梵高《向日葵》，经典中的经典，笔触很牛！#花</span>
+        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
+          <img src="../../assets/img/book2.png" alt="tou`xi`ang1"
+            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
+          <div style="display: grid;align-items: center;font-size: 12px;">
+            <span>HestLF艺术</span>
+            <span>11-07</span>
+          </div>
+          <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
+          <span>310</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 推荐内容部分1结束 -->
+  <!-- 推荐内容部分2开始 -->
+  <div style="display: flex;align-items: center;">
+    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
+      <div style="margin: 5px;">
+        <img src="../../assets/img/fangao.png" alt="星空-梵高" style="height: 200px;">
+        <span style="font-size: 15px;">梵高生平自画像之其中🔟副👩‍🎨#艺术欣赏 #美</span>
+        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
+          <img src="../../assets/img/book3.png" alt="tou`xi`ang1"
+            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
+          <div style="display: grid;align-items: center;font-size: 12px;">
+            <span>小梅同学</span>
+            <span>10-5</span>
+          </div>
+          <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
+          <span>1.5万</span>
+        </div>
+      </div>
+    </div>
+    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
+      <div style="margin: 5px;">
+        <img src="../../assets/img/cunzhuang.png" alt="星空-梵高" style="height: 200px;">
+        <span style="font-size: 15px;">走吧，梵高，去你最爱的阿尔看看，《阿尔小镇》</span>
+        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
+          <img src="../../assets/img/book4.png" alt="tou`xi`ang1"
+            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
+          <div style="display: grid;align-items: center;font-size: 12px;">
+            <span>玛丽的名画</span>
+            <span>11-19</span>
+          </div>
+          <div>
+            <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
+            <span>180</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 推荐内容部分2结束 -->
 </ion-content>

AIart-app/src/app/tab3/tab3.page.scss

@@ -0,0 +1,6 @@
+span[underline="true"] {
+    text-decoration: underline;
+    text-decoration-color: red;
+    text-decoration-thickness: 10px;
+    text-underline-offset: 7px;
+}

AIart-app/src/app/tab3/tab3.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
@@ -7,8 +7,25 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,],
 })
 export class Tab3Page {
-  constructor() {}
+  ngOnInit() {
+    this.red_underline('发现');
+  }
+  constructor() { }
+  red_underline(text: string) {
+    const prevUnderlined = document.querySelectorAll('span[underline="true"]') as NodeListOf<HTMLElement>;
+    prevUnderlined.forEach((el: HTMLElement) => {
+      el.style.textDecoration = 'none';
+      el.removeAttribute('underline');
+    });
+    const target = document.querySelector(`span[data-id="${text}"]`) as HTMLElement;
+    if (target) {
+      target.style.textDecoration = 'underline';
+      target.style.textDecorationColor = 'red';
+      target.setAttribute('underline', 'true');
+    }
+  }
 }

AIart-app/src/app/tab5/tab5.page.html

@@ -1,12 +1,12 @@
 <ion-header [translucent]="true">
-  <div style="display: flex;align-items: center;justify-content: center;gap: 10px;height: 50px;">
-    <ion-searchbar placeholder="输入搜索内容" style="width: 60%"></ion-searchbar>
-    <ion-icon name="gift-outline" style="height: 30px;width: 30px;"></ion-icon>
-    <ion-icon name="scan-outline" style="height: 30px;width: 30px;"></ion-icon>
-    <div style="display: flex;align-items: center;">
-      <ion-icon name="settings-outline" style="height: 30px;width: 30px;"></ion-icon>
+  <ion-toolbar>
+    <div style="display: flex;align-items: center;justify-content: center;gap: 10px;">
+      <ion-searchbar placeholder="输入搜索内容" style="width: 70%;margin-top: 10px;"></ion-searchbar>
+      <ion-icon name="gift-outline" style="height: 25px;width: 25px;"></ion-icon>
+      <ion-icon name="scan-outline" style="height: 25px;width: 25px;"></ion-icon>
+      <ion-icon name="settings-outline" style="height: 25px;width: 25px;"></ion-icon>
     </div>
-  </div>
+  </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">

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

@@ -10,14 +10,14 @@
       <ion-label>学习计划</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon name="book-outline"></ion-icon>
-      <ion-label>知识城邦</ion-label>
+    <ion-tab-button tab="tab4" href="/tabs/tab4">
+      <ion-icon name="add-outline"
+        style="color: white;background-color: red;border-radius: 10px;width: 45px;height: 35px;"></ion-icon>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab4" href="/tabs/tab5">
-      <ion-icon name="storefront-outline"></ion-icon>
-      <ion-label>已购课程</ion-label>
+    <ion-tab-button tab="tab3" href="/tabs/tab3">
+      <ion-icon name="book-outline"></ion-icon>
+      <ion-label>社区分享</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab5" href="/tabs/tab5">

AIart-app/src/app/tabs/tabs.page.ts

@@ -8,7 +8,8 @@ import {
   rocketOutline, sparklesOutline, medalOutline, listOutline, giftOutline,
   scanOutline, settingsOutline, heartCircleOutline, walletOutline, bagRemoveOutline,
   folderOutline, readerOutline, cartOutline, thumbsUpOutline, ticketOutline, documentTextOutline,
-  timeOutline, cloudDownloadOutline, bagCheckOutline, cardOutline
+  timeOutline, cloudDownloadOutline, bagCheckOutline, cardOutline, searchOutline, menuOutline,
+  addCircleOutline, addOutline, optionsOutline
 } from 'ionicons/icons';
 
 @Component({
@@ -30,7 +31,7 @@ export class TabsPage {
       giftOutline, scanOutline, settingsOutline, heartCircleOutline, walletOutline,
       bagRemoveOutline, folderOutline, readerOutline, cartOutline, thumbsUpOutline,
       ticketOutline, documentTextOutline, timeOutline, cloudDownloadOutline, bagCheckOutline,
-      cardOutline
+      cardOutline, searchOutline, menuOutline, addCircleOutline, addOutline, optionsOutline
     });
   }
 }