美化生成结果界面

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

@@ -1,10 +1,62 @@
 <!--头部-->
 <app-custom-header [param]="['生成结果','    ']"></app-custom-header>
 <ion-content>
+    <img id="background" [src]="history?.get('image')" />
+    <img id="shade" />
+    <img id="share" src="https://s1.imagehub.cc/images/2025/01/11/e19a2422768dc1412e6dbf26a8aaf060.png">
     <ion-card>
         <img class="scan" [src]="history?.get('image')">
-        <img class="score" src="https://s1.imagehub.cc/images/2024/12/29/653a0b8df33d02e85b7b813bc8b2c972.png"/>
+        <div>
+            <h1>{{ jsonData['方案名'] }}</h1>
+            <h2>{{jsonData['区域风格']}} {{jsonData['功能']}} {{jsonData['设计理念']}} {{jsonData['艺术风格']}}</h2>
+            <ion-button>保存到我的风格</ion-button>
+        </div>
     </ion-card>
+
+    <ion-card id="score">
+        <div id="up">
+            <div id="left">
+                <div id="score-title">
+                    <ion-avatar>
+                        <img src="/assets/icon/favicon.png" />
+                    </ion-avatar>
+                    <p>衣靠评分</p>
+                </div>
+                <div id="score-content">
+                    <p>8.2</p>
+                    <img src="https://s1.imagehub.cc/images/2025/01/11/e8eb352cc826f7e4cfc858cd9a239ab6.png" />
+                </div>
+            </div>
+            <div id="right">
+                <div id="shape-title">
+                    <p>维度评分</p>
+                </div>
+                <div id="shape-content">
+                    <div class="shape-list">
+                        <p class="label">功能</p>
+                        <ion-progress-bar [value]="0.72"></ion-progress-bar>
+                        <p class="value">7.2</p>
+                    </div>
+                    <div class="shape-list">
+                        <p class="label">区域</p>
+                        <ion-progress-bar [value]="0.8"></ion-progress-bar>
+                        <p class="value">8.0</p>
+                    </div>
+                    <div class="shape-list">
+                        <p class="label">设计</p>
+                        <ion-progress-bar [value]="0.91"></ion-progress-bar>
+                        <p class="value">9.1</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="down">
+            <p>100人生成过</p>
+            <p>50人分享</p>
+        </div>
+    </ion-card>
+
+
     <ion-card id="show">
         <ion-label>{{jsonData['方案名']}}</ion-label>
         <ion-card *ngFor="let key of keys">

E-Cover-app/src/app/generate-result/generate-result.component.scss

@@ -1,29 +1,196 @@
 ion-content {
     --background: #f8f8f8;
-    --color: black;
-    z-index: -1;
+    position: relative;
+    z-index: 0;
     height: 100vh;
 
-    ion-card {
-        --background: #fef8ef;
-        height: 30%;
-        margin: 0;
+    #background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        object-fit: cover;
+        z-index: 1;
+        filter: blur(30px); // 添加模糊效果，数值越大模糊程度越高
+    }
+
+    #shade {
+        position: fixed;
+        top: 0;
+        left: 0;
         width: 100%;
+        height: 100vh;
+        object-fit: cover;
+        z-index: 2;
+        background-color: rgba(0, 0, 0, 0.4); // 设置半透明黑色遮罩效果
+    }
+
+    #share{
+        position: fixed;
+        bottom: 5vh;
+        right: 5vw;
+        height: 80px;
+        width: 80px;
+        object-fit: cover;
+        z-index: 9;
+        box-shadow :1px 1px 10px rgba(0, 0, 0, 0.5);
+        border-radius: 50%;
+    }
+
+    ion-card {
+        --background: none;
+        color: white;
+        box-shadow: none;
+        margin: 20px 10px;
         border-bottom-right-radius: 20px;
         border-bottom-left-radius: 20px;
+        z-index: 3;
 
-        img.scan{
-            width:60%;
+        img.scan {
+            width: 45%;
+            border-radius: 20px;
             float: left;
+            margin-right: 2%;
         }
-        img.score{
-            width: 35%;
+
+        div {
             float: left;
+
+            h1 {
+                margin: 10px 0;
+
+                @font-face {
+                    font-family: 'HandWritten';
+                    src: url(/assets/fonts/handWritten.woff);
+                }
+
+                font-size: 25px;
+                font-family: 'HandWritten';
+                font-weight: bolder;
+            }
+
+            h2 {
+                margin: 5px 0;
+                font-size: 15px;
+
+                @font-face {
+                    font-family: 'mainButton';
+                    src: url(/assets/fonts/mainButton.TTC);
+                }
+
+                font-family: 'mainButton';
+            }
+        }
+    }
+
+    #score {
+        --background: rgba(0, 0, 0, 0.4);
+        border-radius: 10px;
+
+        #up {
+            width: 100%;
+
+            #left {
+                width: 30%;
+                float: left;
+
+                #score-title {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    padding: 10px;
+
+                    ion-avatar {
+                        width: 20px;
+                        height: 20px;
+                    }
+
+                    p {
+                        margin: 0;
+                    }
+                }
+
+                #score-content {
+                    width: 100%;
+                    border-right: 1px solid rgb(94, 94, 94);
+                    text-align: center;
+
+                    p {
+                        text-align: center;
+                        margin: 5px;
+                        font-size: 35px;
+                    }
+
+                    img {
+                        height: 25px;
+                    }
+                }
+            }
+
+            #right {
+                width: 70%;
+                float: right;
+
+                #shape-title {
+                    width: 100%;
+                    padding: 10px 20px;
+
+                    p {
+                        margin: 0;
+                        color: rgb(150, 150, 150);
+                    }
+                }
+
+                #shape-content {
+                    width: 100%;
+                    padding: 0 20px;
+
+                    .shape-list {
+                        width: 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        margin-bottom: 10px;
+
+                        .label {
+                            margin: 0;
+                            color: white;
+                        }
+
+                        ion-progress-bar {
+                            width: 60%;
+                            height: 8px;
+                            --progress-background: orange;
+                            --background: rgba(28, 22, 22, 0.2);
+                            border-radius: 1000px;
+                        }
+
+                        .value {
+                            margin: 0;
+                            color: white;
+                        }
+                    }
+                }
+
+            }
+        }
+
+        #down {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            p {
+                margin: 0;
+                color: rgb(162, 162, 162);
+            }
         }
     }
 
     #show {
-        background: white;
+        background: none;
         border-radius: 20px;
         margin-top: 20px;
         box-shadow: none;
@@ -36,7 +203,7 @@ ion-content {
             color: black;
         }
 
-        ion-card{
+        ion-card {
             --background: #fef8ef;
             margin: 0;
             border-radius: 20px;
@@ -45,11 +212,11 @@ ion-content {
             height: auto;
             margin: 2%;
 
-            .name{
+            .name {
                 margin: 15px;
             }
 
-            .desc{
+            .desc {
                 text-align: start;
                 text-indent: 40px;
             }

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

@@ -1,10 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { IonCard, IonContent, IonLabel, NavController } from '@ionic/angular/standalone';
+import { IonAvatar, IonButton, IonCard, IonContent, IonLabel, IonProgressBar, NavController } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { arrowBackOutline } from 'ionicons/icons';
-import { result } from 'lodash';
 import { map, switchMap } from 'rxjs';
 import { CustomHeaderComponent } from 'src/lib/component/custom-header/custom-header.component';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
@@ -14,7 +13,9 @@ addIcons({ arrowBackOutline });
   templateUrl: './generate-result.component.html',
   styleUrls: ['./generate-result.component.scss'],
   standalone: true,
-  imports: [IonContent, CustomHeaderComponent, IonCard, IonLabel, CommonModule],
+  imports: [IonContent, CustomHeaderComponent, IonCard, IonLabel, CommonModule,IonButton,IonAvatar,
+    IonProgressBar
+  ],
 })
 
 export class GenerateResultComponent implements OnInit {

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

@@ -53,24 +53,28 @@
   <ion-card style="--background:white;box-shadow: none;border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;top:-20px;">
     <div class="card">
-      <img class="img-background" [src]="(postList[0]?.get('postID')?.image[0]!='') ? (postList[0]?.get('postID')?.image[0]) : ('/assets/icon/favicon.png')">
+      <img class="img-background"
+        [src]="(likedPostsImage!='') ? (likedPostsImage) : ('/assets/icon/favicon.png')">
       <img class="img-shade" />
-      <p>赞过帖子<br/>{{postList.length}}</p>
+      <p>赞过帖子<br />{{likedPostsNumber}}</p>
     </div>
     <div class="card">
-      <img class="img-background" [src]="(postList[0]?.get('postID')?.image[0]!='') ? (postList[0]?.get('postID')?.image[0]) : ('/assets/icon/favicon.png')">
+      <img class="img-background"
+        [src]="(likedPostsImage!='') ? (likedPostsImage) : ('/assets/icon/favicon.png')">
       <img class="img-shade" />
-      <p>我的风格<br/>{{postList.length}}</p>
+      <p>我的风格<br />{{likedPostsNumber}}</p>
     </div>
     <div class="card">
-      <img class="img-background" [src]="(postList[0]?.get('postID')?.image[0]!='') ? (postList[0]?.get('postID')?.image[0]) : ('/assets/icon/favicon.png')">
+      <img class="img-background"
+        [src]="(likedPostsImage!='') ? (likedPostsImage) : ('/assets/icon/favicon.png')">
       <img class="img-shade" />
-      <p>收藏帖子<br/>{{postList.length}}</p>
+      <p>收藏帖子<br />{{likedPostsNumber}}</p>
     </div>
     <div class="card" (click)="goGenerateHistory()">
-      <img class="img-background" [src]="(postList[0]?.get('postID')?.image[0]!='') ? (postList[0]?.get('postID')?.image[0]) : ('/assets/icon/favicon.png')">
+      <img class="img-background"
+        [src]="(generateHistoryImage!='') ? (generateHistoryImage) : ('/assets/icon/favicon.png')">
       <img class="img-shade" />
-      <p>生成历史<br/>{{postList.length}}</p>
+      <p>生成历史<br />{{generateHistoryCount}}</p>
     </div>
 
     <ion-segment value="myPost" swipeGesture="true">

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

@@ -18,15 +18,13 @@ addIcons({ personAddOutline, cardOutline, flameOutline, chevronForwardOutline })
 })
 export class Tab3Page {
   currentUser: CloudUser | undefined;
-  attentionList: CloudObject[] = [];
-  fanList: CloudObject[] = [];
-  postList: CloudObject[] = [];
   constructor(private modalCtrl: ModalController, private router: Router) { }
   async ngOnInit() {
+    this.currentUser = new CloudUser();
     await this.loadAttentionList();
     await this.loadFanList();
     await this.loadPostList();
-    this.getBackgroundImageStyle();
+    await this.getHistoryCount();
   }
   async ionViewWillEnter() {
     console.warn("-------------------------\n" + "进入tab3界面，执行ionViewWillEnter\n" + "验证用户是否登录")
@@ -88,39 +86,52 @@ export class Tab3Page {
     console.log(this.posts);
     this.posts = this.posts.reverse();
   }
-  //加载关注列表
+  /**
+   * @读取个人信息卡片数据
+   */
+  /*加载关注列表*/
+  attentionList: CloudObject[] = [];
   async loadAttentionList() {
     const query = new CloudQuery('attention');
-    const user = new CloudUser().toPointer();
-    query.equalTo('UserID', user);
+    query.equalTo('UserID', this.currentUser?.toPointer());
     this.attentionList = await query.find();
     console.log(this.attentionList);
   }
-  //加载粉丝列表
+  /*加载粉丝列表*/
+  fanList: CloudObject[] = [];
   async loadFanList() {
     const query = new CloudQuery('attention');
-    const user = new CloudUser().toPointer();
-    query.equalTo('attentionID', user);
+    query.equalTo('attentionID', this.currentUser?.toPointer());
     this.fanList = await query.find();
     //console.log(this.fanList);
   }
+  /**
+   * @读取统计卡片数据
+   */
   /*加载点赞帖子列表*/
+  likedPostsNumber: number = 0;
+  likedPostsImage: string = "";
   async loadPostList() {
     const query = new CloudQuery('postLikesRecord');
-    const user = new CloudUser().toPointer();
-    query.equalTo('UserID', user);
+    query.equalTo('UserID', this.currentUser?.toPointer());
     query.include('postID');
-    this.postList = await query.find();
-    this.postList = this.postList.reverse();
-    console.log(this.postList);
+    let postList = await query.find();
+    postList = postList.reverse();
+    this.likedPostsNumber = postList.length;
+    this.likedPostsImage = postList[0]?.get('postID')?.image[0];
+    console.log("获取到点赞帖子个数：" + this.likedPostsNumber + "\n" + "获取到点赞帖子图像：" + this.likedPostsImage);
   }
-  /*返回赞过图片*/
-  getBackgroundImageStyle() {
-    const imageUrl = this.postList[0]?.get('postID')?.image[0];
-    console.log("检测背景url：" + imageUrl);
-    let element = document.getElementById('liked');
-    if(element)
-      element.style.background = `url(${imageUrl})`
+  /*返回生成历史个数和图像*/
+  generateHistoryCount: number = 0;
+  generateHistoryImage: string = "";
+  async getHistoryCount() {
+    let query = new CloudQuery('GenerateResult');
+    query.equalTo('UserID', this.currentUser?.toPointer());
+    let result = await query.find();
+    result = result.reverse();
+    this.generateHistoryImage = result[0]?.get('image');
+    this.generateHistoryCount = result.length;
+    console.log("获取到生成历史个数：" + this.generateHistoryCount + "\n" + "获取到生成历史图像：" + this.generateHistoryImage);
   }
 }
 

E-Cover-app/src/lib/component/post-detail/post-detail.component.scss

@@ -277,7 +277,6 @@
   .comment-buttons {
     display: flex; /* 使用 Flexbox 布局 */
     align-items: center; /* 垂直居中 */
-   
   }
   
   .comment-button {
@@ -285,6 +284,7 @@
     color: black; /* 按钮字体颜色 */
     --background: #f9f9f9;
     --background-activated: #f9f9f9;
+    --box-shadow: none;
   }
   
   .like-button {