fix scss

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

@@ -41,14 +41,14 @@
 
     <!-- 推荐影视剧列表 -->
     <section>
-      <ion-card>
+      <ion-card class="recommend">
         <ion-card-header>
           <ion-card-title>为您推荐</ion-card-title>
         </ion-card-header>
         <ion-card-content>
           <ion-button (click)="sendMessage()" expand="block">推荐生成</ion-button>
           <ion-list>
-            <ion-item *ngFor="let film of filmList">
+            <ion-item class="re" *ngFor="let film of filmList">
               <ion-label>
                 <h2>{{ film.get('title') }}</h2>
                 <p>题材: {{ film.get('genre') }}</p>
@@ -61,34 +61,3 @@
       </ion-card>
     </section>
 </ion-content>
-
-
-
-
-
-
-
-
-    <!-- 底部推荐区 -->
-    <!-- <section>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>您可能也喜欢</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <ion-list>
-            <ion-item *ngFor="let similarMovie of similarMovies">
-              <ion-thumbnail slot="start">
-                <img [src]="similarMovie.coverImage" alt="{{ similarMovie.title }} 封面">
-              </ion-thumbnail>
-              <ion-label>
-                <h2>{{ similarMovie.title }}</h2>
-                <p>评分: {{ similarMovie.rating }}</p>
-                <p>{{ similarMovie.description }}</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-card-content>
-      </ion-card>
-    </section> -->
-

FilmDraw-app/src/app/tab2/tab2.page.scss

@@ -1,13 +1,15 @@
 ion-title {
     flex: 1; // 使标题占据可用空间
     text-align: left; // 确保文字左对齐
-    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-left: 10px; // 左侧边距，可以根据需要调整
     margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 25px;
+    color: #003073;
   }
 
 ion-header {
-    background-color: #3880ff; // 设置头部背景色
-    color: white; // 设置头部文字颜色
+  background-color: #f5f6f9; // 设置头部背景色
   }
   
   /* 按钮样式 */
@@ -15,7 +17,7 @@ ion-button {
   --background: #036a99; /* 按钮背景色 */
   color: white; /* 按钮字体颜色 */
   --border-radius: 5px; /* 按钮圆角 */
-  font-size: 18px; /* 按钮字体大小 */
+  font-size: 20px; /* 按钮字体大小 */
   width: 100%;
 }
 
@@ -28,52 +30,44 @@ ion-icon {
     margin: 10px; // 设置卡片之间的间距
     border-radius: 10px; // 设置卡片圆角
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
+    
+  }
+
+ .recommend {
+    --ion-background-color: #f0f8ff;
   }
   
   ion-card-header {
-    background-color: #f0f0f0; // 设置卡片头部背景色
+    background-color: #f7e2e2; // 设置卡片头部背景色
   }
   
   ion-card-title {
-    font-size: 1.2em; // 设置卡片标题字体大小
+    font-size: 1.5em; // 设置卡片标题字体大小
     font-weight: bold; // 设置卡片标题字体加粗
   }
   
   ion-item {
     --ion-item-background: transparent; // 设置列表项背景透明
     margin: 5px 0; // 设置列表项上下间距
+
   }
-  
+
   ion-label {
     color: #333; // 设置标签文字颜色
+    margin-top: 0;
   }
   
-  h1 {
+  ion-label h1 {
     font-size: 1.6em; // 设置二级标题字体大小
     margin: 0; // 去掉默认外边距
     font-weight: bold;
   }
   
-  h3 {
+  ion-label h3 {
     font-size: 1.2em; // 设置段落字体大小
     color: #666; // 设置段落文字颜色
   }
-  
-  h2 {
-    font-size: 1em; // 设置二级标题字体大小
-    margin: 0; // 去掉默认外边距
-  }
-  
-  p {
-    font-size: 0.9em; // 设置段落字体大小
-    color: #666; // 设置段落文字颜色
-  }
-  
-  ion-thumbnail {
-    width: 100px; // 设置封面图宽度
-    height: 150px; // 设置封面图高度
-  }
-  
+
   ion-avatar {
     border-radius: 50%; // 设置头像圆形
     width: 80px; // 设置头像宽度
@@ -82,4 +76,28 @@ ion-icon {
   
   ion-card-content {
     padding: 10px; // 设置卡片内容内边距
-  }
+  }
+
+.re{
+    border-bottom: 1px solid #dee2e6; /* 分割线颜色 */
+}
+
+  /* 推荐影视剧列表样式 */
+ion-list {
+  margin-top: 8px;
+}
+ 
+ion-list ion-item {
+  padding: 12px 0;
+  border-bottom: none; /* 移除分割线 */
+}
+ 
+ion-list ion-label h2 {
+  font-size: 18px; /* 电影标题字体大小 */
+  color: #343a40; /* 深灰色 */
+}
+ 
+ion-list ion-label p {
+  color: #6c757d; /* 灰色 */
+  font-size: 14px; /* 描述信息字体大小 */
+}

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

@@ -1,18 +1,18 @@
 // 定义颜色变量
 $light-blue: #e0f7fa;
-$blue: #77a0cc;
+$blue: #93b8e0;
 $dark-blue: #587fb6;
 $text-color: #333;
 
 ion-title {
   flex: 1; // 使标题占据可用空间
-  text-align: center; // 确保文字左对齐
-  font-size: 30px;
-  margin-left: 16px; // 左侧边距，可以根据需要调整
+  text-align: left; // 确保文字左对齐
+  margin-left: 10px; // 左侧边距，可以根据需要调整
   margin-top: 5px;
-  // font-family: 楷体;
-  // font-style: italic;
-  }
+  margin-bottom: 5px;
+  font-size: 25px;
+  color: #003073;
+}
 
 ion-header {
   background-color: #f5f7fc; // 设置头部背景色

FilmDraw-app/src/app/tab4/tab4.page.scss

@@ -9,8 +9,11 @@
   ion-title {
     flex: 1; // 使标题占据可用空间
     text-align: left; // 确保文字左对齐
-    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-left: 10px; // 左侧边距，可以根据需要调整
     margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 25px;
+    color: #003073;
   }
   
   ion-header {