微调，美化

poem-life-app/src/app/poem-detail/poem-detail.page.html

@@ -18,22 +18,26 @@
   <div *ngIf="error" class="error">
     <p>{{ error }}</p>
   </div>
-  <div *ngIf="poem" class="content-detail">
-    <div class="issue-time">
-      <span class="issue">{{ poem.get('title') }}</span>
-      <span class="time">{{ poem.get('theme') }}</span>
-    </div>
-    <h2 class="title">{{ poem.get('creation_time') }}</h2>
-    <h3 class="editor">{{ poem.get('autor') }}</h3>
-    <div class="content-text">
-      {{ poem.get('content') }}
-    </div>
-    <p>{{poem.get('emotion')}}</p>
-    <p>{{poem.get('background')}}</p>
-    <p>{{poem.get('sumary')}}</p>
-    <p>{{poem.get('tags')}}</p>
-    <p>{{poem.get('translation')}}</p>
-    <p>{{poem.get('language')}}</p>
-    <p>{{poem.get('emotion')}}</p>
-  </div>
+  <article *ngIf="poem" class="poem-detail">
+    <header class="poem-header">
+      <h1 class="poem-title">{{ poem.get('title') }}</h1>
+      <span class="poem-theme">{{ poem.get('theme') }}</span>
+      <p class="poem-creation-time">{{ poem.get('creation_time') }}</p>
+      <p class="poem-author">{{ poem.get('autor') }}</p>
+    </header>
+    <section class="poem-content">
+      <div class="poem-text">
+        <p [ngStyle]="{'white-space': 'pre-wrap'}">{{ poem.get('content') }}</p>
+      </div>
+      <hr>
+      <div class="poem-info">
+        <p><strong>情感:</strong> {{ poem.get('emotion') }}</p>
+        <p><strong>背景:</strong> {{ poem.get('background') }}</p>
+        <p><strong>摘要:</strong> {{ poem.get('sumary') }}</p>
+        <p><strong>标签:</strong> {{ poem.get('tags') }}</p>
+        <p><strong>翻译:</strong> {{ poem.get('translation') }}</p>
+        <p><strong>语言:</strong> {{ poem.get('language') }}</p>
+      </div>
+    </section>
+  </article>
 </ion-content>

poem-life-app/src/app/poem-detail/poem-detail.page.scss

@@ -12,7 +12,7 @@
 }
 
 .content-wrapper {
-    
+
     color: rgb(3, 3, 3); /* 设置文本颜色，确保在背景上可读 */
     text-align: center; /* 文本居中对齐 */
     align-items: center; // 垂直居中
@@ -25,6 +25,73 @@
     z-index: 1; /* 内容层位于背景图之上 */
 }
 
+.poem-text p {
+  white-space: pre-wrap; /* 保留空白符并自动换行 */
+  font-size: 1.1em;
+  line-height: 1.6;
+  color: #333;
+  text-align: center; /* 确保文本内容居中 */
+}
 ion-content {
     --background: transparent; /* 确保 ion-content 背景透明 */
 }
+.poem-detail {
+  position: relative;
+  z-index: 1;
+  padding: 40px;
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  .poem-header {
+    text-align: center;
+    margin-bottom: 20px;
+
+    .poem-title {
+      font-size: 2.5em;
+      margin-bottom: 10px;
+      color: #333;
+    }
+
+    .poem-theme {
+      font-size: 1.2em;
+      color: #666;
+      margin-bottom: 10px;
+    }
+
+    .poem-creation-time, .poem-author {
+      font-size: 1em;
+      color: #999;
+    }
+  }
+
+  .poem-content {
+    .poem-text {
+      font-size: 1.1em;
+      line-height: 1.6;
+      color: #333;
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid #ddd;
+      margin: 20px 0;
+    }
+
+    .poem-info {
+      p {
+        margin-bottom: 10px;
+        color: #555;
+        font-size: 1em;
+        line-height: 1.5;
+
+        strong {
+          color: #333;
+        }
+      }
+    }
+  }
+}

poem-life-app/src/app/tab1/card-detail/card-detail.page.html

@@ -22,8 +22,13 @@
     <h2 class="title">{{ content.get('title') }}</h2>
     <h3 class="editor">{{ content.get('editor') }}</h3>
     <img [src]="content.get('image')" class="content-image" />
+    <!-- 做if判断 -->
+    <div *ngIf="content.get('type')==='音频'" class="audio-container"><audio [src]="content.get('audio')" controls></audio></div>
+    <div *ngIf="content.get('type')==='视频'" class="video-container">
+      <video [src]="content.get('video')" controls class="responsive-video"></video>
+    </div>
     <div class="content-text">
-      {{ content.get('detail') }}
+      <span [ngStyle]="{'white-space': 'pre-wrap'}">{{ content.get('detail') }}</span>
     </div>
   </div>
 </ion-content>

poem-life-app/src/app/tab1/card-detail/card-detail.page.scss

@@ -42,6 +42,36 @@
   border-radius: 8px;
   margin-bottom: 16px;
 }
+.video-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.responsive-video {
+  width: 100%;
+  max-width: 600px; /* 设置最大宽度 */
+  height: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.audio-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+audio {
+  width: 100%;
+  max-width: 600px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
 
 .content-text {
   font-size: 16px;

poem-life-app/src/app/tab2/tab2.page.html

@@ -16,12 +16,18 @@
       <ion-segment-button value="五言绝句">
         <ion-label>五言绝句</ion-label>
       </ion-segment-button>
-      <ion-segment-button value="六言绝句">
-        <ion-label>六言绝句</ion-label>
-      </ion-segment-button>
       <ion-segment-button value="七言绝句">
         <ion-label>七言绝句</ion-label>
       </ion-segment-button>
+      <ion-segment-button value="五言古诗">
+        <ion-label>五言古诗</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="七言古诗">
+        <ion-label>七言古诗</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="乐府">
+        <ion-label>乐府</ion-label>
+      </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
 </ion-header>
@@ -40,31 +46,30 @@
           <ion-item button (click)="onGenreSelect('五言绝句')">
             <ion-label>五言绝句</ion-label>
           </ion-item>
-          <ion-item button (click)="onGenreSelect('六言绝句')">
-            <ion-label>六言绝句</ion-label>
-          </ion-item>
           <ion-item button (click)="onGenreSelect('七言绝句')">
             <ion-label>七言绝句</ion-label>
           </ion-item>
+          <ion-item button (click)="onGenreSelect('五言古诗')">
+            <ion-label>五言古诗</ion-label>
+          </ion-item>
+          <ion-item button (click)="onGenreSelect('七言古诗')">
+            <ion-label>七言古诗</ion-label>
+          </ion-item>
+          <ion-item button (click)="onGenreSelect('乐府')">
+            <ion-label>乐府</ion-label>
+          </ion-item>
         </ion-list>
       </ion-col>
       <ion-col size="10" class="scrollable-content">
         <div class="book-cards-container">
-          <div class="card" *ngFor="let book of filteredPoemsList" (click)="goToPoemDetail(book)">
-            <h1 style="text-align: left;">{{ book.get('title') }}</h1>
-
-            <h4 style="text-align: left;">{{ book.get('creation_time') }}</h4>
-
-
-          </div>
-          <!-- <ion-card class="bookcard" *ngFor="let book of filteredPoemsList"  (click)="goToPoemDetail(book)">
+          <ion-card class="bookcard" *ngFor="let book of filteredPoemsList"  (click)="goToPoemDetail(book)">
             <ion-card-header>
               <ion-card-title>{{ book.get('title') }}</ion-card-title>
             </ion-card-header>
             <ion-card-content>
               <p>{{ book.get('creation_time') }}</p>
             </ion-card-content>
-          </ion-card> -->
+          </ion-card>
         </div>
       </ion-col>
     </ion-grid>

poem-life-app/src/app/tab4/tab4.page.html

@@ -1,6 +1,6 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>tab4</ion-title>
+    <ion-title style="text-align: center;">创意坊</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -12,19 +12,26 @@
           <div class="card" (click)="goToCreate()">
             <div class="card-image" style="background-image: url('../../assets/image/05/shipian.jpg');"></div>
             <div class="card-content">
-              <h4>AI创作</h4>
-              <p>点击进入AI创作页面</p>
+              <h4>文生文</h4>
+              <p>文字的魔法，探索无限的创作可能性。</p>
             </div>
           </div>
           <div class="card" (click)="goToCreatePic()">
             <div class="card-image" style="background-image: url('../../assets/image/05/huihua.jpg');"></div>
             <div class="card-content">
-              <h4>AI绘图</h4>
-              <p>点击进入AI绘图页面</p>
+              <h4>文生图</h4>
+              <p>通过自然语言描述生成逼真的艺术作品。</p>
+            </div>
+          </div>
+          <div class="card" (click)="goToCreatePicLiter()">
+            <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1734389481041-fa26afc1267c?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');" loading="lazy"></div>
+            <div class="card-content">
+              <h4>图生文</h4>
+              <p>让图片讲述故事，为您创作独特的文字内容</p>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</ion-content>
+</ion-content>

poem-life-app/src/app/tab4/tab4.page.ts

@@ -24,6 +24,9 @@ export class Tab4Page implements OnInit {
   goToCreatePic() {
     this.router.navigateByUrl('/tabs/createpic');
   }
-
+  goToCreatePicLiter(){
+    // this.router.navigateByUrl(' https://55998b894a188d6213.gradio.live');
+    window.location.href=' https://20d10041887954993f.gradio.live';
+  }
   ngOnInit() {}
 }