改图片路径

myapp/angular.json

@@ -39,13 +39,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "20mb",
+                  "maximumError": "10mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "4mb"
                 }
               ],
               "fileReplacements": [

myapp/src/app/tab1/page-detail/page-detail.page.html

@@ -22,10 +22,6 @@
          [alt]="recipe?.get('title')" 
          class="recipe-image">
     <div class="image-overlay">
-      <ion-chip color="success" outline>
-        <ion-icon name="pricetag-outline" slot="start"></ion-icon>
-        {{ recipe?.get('category') || '未分类' }}
-      </ion-chip>
       <ion-chip color="warning" outline>
         <ion-icon name="time-outline" slot="start"></ion-icon>
         {{ recipe?.get('cookTime') || '30分钟' }}

myapp/src/app/tab1/page-detail/page-detail.page.scss

@@ -1,128 +1,72 @@
-.recipe-image-container {
-    position: relative;
-    width: 100%;
-    height: 250px;
-    overflow: hidden;
-    
-    .recipe-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    .image-overlay {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
-  }
+/* 头部样式 */
+.recipe-header {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  margin-bottom: 16px;
   
-  .recipe-header {
-    padding: 16px;
+  ion-toolbar {
+    --background: white;
+    --border-width: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     
-    .recipe-title {
-      font-size: 1.8rem;
-      font-weight: bold;
-      margin-bottom: 8px;
+    .header-title {
+      font-size: 1.2rem;
+      font-weight: 600;
       color: var(--ion-color-dark);
     }
-    
-    .recipe-meta {
-      display: flex;
-      gap: 16px;
-      margin-top: 8px;
-      
-      .meta-item {
-        display: flex;
-        align-items: center;
-        font-size: 0.9rem;
-        color: var(--ion-color-medium);
-        
-        ion-icon {
-          margin-right: 4px;
-          font-size: 1rem;
-        }
-      }
-    }
   }
   
-  .section-card {
-    margin: 16px;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    ion-card-header {
-      padding-bottom: 0;
-      
-      ion-card-title {
-        display: flex;
-        align-items: center;
-        font-size: 1.2rem;
-        color: var(--ion-color-dark);
-        
-        ion-icon {
-          margin-right: 8px;
-          color: var(--ion-color-primary);
-        }
-      }
-    }
+  .recipe-title {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: var(--ion-color-dark);
+    margin: 0;
+    flex: 1;
   }
   
-  .step-item {
-    --padding-start: 0;
-    --inner-padding-end: 0;
-    align-items: flex-start;
+  .recipe-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
     
-    .step-number {
-      width: 28px;
-      height: 28px;
-      background: var(--ion-color-primary);
-      color: white;
+    .meta-item {
       display: flex;
       align-items: center;
-      justify-content: center;
       font-size: 0.9rem;
-      font-weight: bold;
-      margin-right: 12px;
-    }
-    
-    ion-label {
-      margin-top: 4px;
-      margin-bottom: 4px;
+      color: var(--ion-color-medium);
+      --padding-start: 0;
+      --inner-padding-end: 0;
+      --min-height: 32px;
+      flex: 1 0 calc(33.333% - 8px);
+      
+      ion-icon {
+        margin-right: 4px;
+        font-size: 1rem;
+      }
       
-      p {
-        margin: 0;
-        color: var(--ion-color-dark);
-        line-height: 1.5;
+      ion-label {
+        font-size: 0.85rem;
       }
     }
   }
   
-  @media (min-width: 768px) {
-    .recipe-image-container {
-      height: 350px;
-    }
+  .recipe-rating {
+    display: flex;
+    align-items: center;
     
-    .section-card {
-      margin: 20px auto;
-      max-width: 800px;
+    ion-icon {
+      font-size: 1.2rem;
+      margin-right: 2px;
     }
-  }
-
-  /* 头部样式 */
-.recipe-header {
-  ion-toolbar {
-    --background: white;
-    --border-width: 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     
-    .header-title {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: var(--ion-color-dark);
+    .rating-text {
+      font-size: 0.9rem;
+      color: var(--ion-color-medium);
+      margin-left: 4px;
     }
   }
 }
@@ -149,11 +93,13 @@
   .image-overlay {
     position: absolute;
     bottom: 16px;
-    left: 240px;
+    left: 16px;
     right: 16px;
     display: flex;
-    gap: 8px;
-    width: 150px;
+    flex-direction: column;
+    gap: 5px;
+    width: 80px;
+    
     ion-chip {
       --background: rgba(255, 255, 255, 0.9);
       backdrop-filter: blur(5px);
@@ -168,60 +114,6 @@
   margin-bottom: 16px;
 }
 
-.recipe-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  
-  .recipe-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: var(--ion-color-dark);
-    margin: 0;
-    flex: 1;
-  }
-  
-  .recipe-rating {
-    display: flex;
-    align-items: center;
-    
-    ion-icon {
-      font-size: 1.2rem;
-      margin-right: 2px;
-    }
-    
-    .rating-text {
-      font-size: 0.9rem;
-      color: var(--ion-color-medium);
-      margin-left: 4px;
-    }
-  }
-}
-
-.recipe-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 16px;
-  
-  .meta-item {
-    --padding-start: 0;
-    --inner-padding-end: 0;
-    --min-height: 32px;
-    flex: 1 0 calc(33.333% - 8px);
-    
-    ion-icon {
-      font-size: 1.2rem;
-    }
-    
-    ion-label {
-      font-size: 0.85rem;
-      color: var(--ion-color-medium);
-    }
-  }
-}
-
 .recipe-description {
   font-size: 0.95rem;
   color: var(--ion-color-medium);
@@ -233,21 +125,24 @@
 .section-card {
   margin: 16px;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   
+  ion-card-header,
   .section-header {
     padding-bottom: 0;
+  }
+  
+  ion-card-title,
+  .section-title {
+    display: flex;
+    align-items: center;
+    font-size: 1.2rem;
+    color: var(--ion-color-dark);
     
-    .section-title {
-      font-size: 1.1rem;
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      
-      .section-icon {
-        margin-right: 8px;
-        color: var(--ion-color-primary);
-      }
+    ion-icon,
+    .section-icon {
+      margin-right: 8px;
+      color: var(--ion-color-primary);
     }
   }
 }
@@ -301,11 +196,13 @@
       margin-right: 12px;
     }
     
-    .step-text {
+    .step-text,
+    ion-label p {
       font-size: 0.95rem;
       color: var(--ion-color-medium);
       line-height: 1.6;
       white-space: normal;
+      margin: 0;
     }
   }
 }
@@ -338,7 +235,8 @@
   }
   
   .section-card {
-    margin: 24px;
+    margin: 24px auto;
+    max-width: 800px;
   }
   
   .action-buttons {

myapp/src/app/tab1/page-selectlist/page-selectlist-detail/page-selectlist-detail.page.html

@@ -22,10 +22,6 @@
          [alt]="recipe?.get('title')" 
          class="recipe-image">
     <div class="image-overlay">
-      <ion-chip color="success" outline>
-        <ion-icon name="pricetag-outline" slot="start"></ion-icon>
-        {{ recipe?.get('category') || '未分类' }}
-      </ion-chip>
       <ion-chip color="warning" outline>
         <ion-icon name="time-outline" slot="start"></ion-icon>
         {{ recipe?.get('cookTime') || '30分钟' }}

myapp/src/app/tab1/page-selectlist/page-selectlist-detail/page-selectlist-detail.page.scss

@@ -1,140 +1,4 @@
 .recipe-image-container {
-    position: relative;
-    width: 100%;
-    height: 250px;
-    overflow: hidden;
-    
-    .recipe-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    .image-overlay {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
-  }
-  
-  .recipe-header {
-    padding: 16px;
-    
-    .recipe-title {
-      font-size: 1.8rem;
-      font-weight: bold;
-      margin-bottom: 8px;
-      color: var(--ion-color-dark);
-    }
-    
-    .recipe-meta {
-      display: flex;
-      gap: 16px;
-      margin-top: 8px;
-      
-      .meta-item {
-        display: flex;
-        align-items: center;
-        font-size: 0.9rem;
-        color: var(--ion-color-medium);
-        
-        ion-icon {
-          margin-right: 4px;
-          font-size: 1rem;
-        }
-      }
-    }
-  }
-  
-  .section-card {
-    margin: 16px;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    ion-card-header {
-      padding-bottom: 0;
-      
-      ion-card-title {
-        display: flex;
-        align-items: center;
-        font-size: 1.2rem;
-        color: var(--ion-color-dark);
-        
-        ion-icon {
-          margin-right: 8px;
-          color: var(--ion-color-primary);
-        }
-      }
-    }
-  }
-  
-  .step-item {
-    --padding-start: 0;
-    --inner-padding-end: 0;
-    align-items: flex-start;
-    
-    .step-number {
-      width: 28px;
-      height: 28px;
-      background: var(--ion-color-primary);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.9rem;
-      font-weight: bold;
-      margin-right: 12px;
-    }
-    
-    ion-label {
-      margin-top: 4px;
-      margin-bottom: 4px;
-      
-      p {
-        margin: 0;
-        color: var(--ion-color-dark);
-        line-height: 1.5;
-      }
-    }
-  }
-  
-  @media (min-width: 768px) {
-    .recipe-image-container {
-      height: 350px;
-    }
-    
-    .section-card {
-      margin: 20px auto;
-      max-width: 800px;
-    }
-  }
-  
-  /* 头部样式 */
-  .recipe-header {
-  ion-toolbar {
-    --background: white;
-    --border-width: 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    .header-title {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: var(--ion-color-dark);
-    }
-  }
-  }
-  
-  /* 内容区域 */
-  .recipe-content {
-  --background: #f8f9fa;
-  padding-bottom: 80px;
-  }
-  
-  /* 菜品图片 */
-  .recipe-image-container {
   position: relative;
   width: 100%;
   height: 250px;
@@ -149,30 +13,26 @@
   .image-overlay {
     position: absolute;
     bottom: 16px;
-    left: 240px;
+    left: 300px;
     right: 16px;
     display: flex;
     gap: 8px;
-    width: 150px;
+    width: 100px;
+    
     ion-chip {
       --background: rgba(255, 255, 255, 0.9);
       backdrop-filter: blur(5px);
     }
   }
-  }
-  
-  /* 菜品信息部分 */
-  .recipe-info-section {
+}
+
+.recipe-header {
   padding: 16px;
   background: white;
   margin-bottom: 16px;
-  }
-  
-  .recipe-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
   
   .recipe-title {
     font-size: 1.5rem;
@@ -197,63 +57,58 @@
       margin-left: 4px;
     }
   }
-  }
   
   .recipe-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 16px;
-  
-  .meta-item {
-    --padding-start: 0;
-    --inner-padding-end: 0;
-    --min-height: 32px;
-    flex: 1 0 calc(33.333% - 8px);
-    
-    ion-icon {
-      font-size: 1.2rem;
-    }
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 16px;
     
-    ion-label {
-      font-size: 0.85rem;
-      color: var(--ion-color-medium);
+    .meta-item {
+      --padding-start: 0;
+      --inner-padding-end: 0;
+      --min-height: 32px;
+      flex: 1 0 calc(33.333% - 8px);
+      display: flex;
+      align-items: center;
+      
+      ion-icon {
+        font-size: 1.2rem;
+        margin-right: 4px;
+      }
+      
+      ion-label {
+        font-size: 0.85rem;
+        color: var(--ion-color-medium);
+      }
     }
   }
-  }
-  
-  .recipe-description {
-  font-size: 0.95rem;
-  color: var(--ion-color-medium);
-  line-height: 1.6;
-  margin: 0;
-  }
-  
-  /* 卡片部分 */
-  .section-card {
+}
+
+.section-card {
   margin: 16px;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   
-  .section-header {
+  ion-card-header {
     padding-bottom: 0;
     
-    .section-title {
-      font-size: 1.1rem;
-      font-weight: 600;
+    ion-card-title {
       display: flex;
       align-items: center;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--ion-color-dark);
       
-      .section-icon {
+      ion-icon {
         margin-right: 8px;
         color: var(--ion-color-primary);
       }
     }
   }
-  }
-  
-  /* 食材列表 */
-  .ingredient-list {
+}
+
+.ingredient-list {
   .ingredient-item {
     --padding-start: 0;
     --inner-padding-end: 0;
@@ -277,10 +132,9 @@
       font-weight: 500;
     }
   }
-  }
-  
-  /* 步骤列表 */
-  .step-list {
+}
+
+.step-list {
   .step-item {
     --padding-start: 0;
     --inner-padding-end: 0;
@@ -308,10 +162,9 @@
       white-space: normal;
     }
   }
-  }
-  
-  /* 底部按钮 */
-  .action-buttons {
+}
+
+.action-buttons {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -325,20 +178,16 @@
     --padding-bottom: 16px;
     font-weight: 600;
   }
-  }
-  
-  /* 响应式调整 */
-  @media (min-width: 768px) {
+}
+
+@media (min-width: 768px) {
   .recipe-image-container {
     height: 350px;
   }
   
-  .recipe-info-section {
-    padding: 24px;
-  }
-  
   .section-card {
-    margin: 24px;
+    margin: 24px auto;
+    max-width: 800px;
   }
   
   .action-buttons {
@@ -346,4 +195,4 @@
     max-width: 600px;
     margin: 0 auto;
   }
-  }
+}

myapp/src/app/tab1/tab1.page.html

@@ -51,7 +51,7 @@
             <ion-card-content class="category-content">
               <div class="category-icon-container">
                 <ion-icon [name]="category?.get('icon')" class="category-icon"></ion-icon>
-                <img style="width:64px;border-radius: 50px;" src="/assets/icon/{{category.get('name')}}.jpg" alt="">
+                <img style="width:64px;border-radius: 50px;" src="assets/icon/{{category.get('name')}}.jpg" alt="">
               </div>
               <h3 class="category-title">{{ category.get('name') }}</h3>
             </ion-card-content>

myapp/src/app/tab2/tab2.page.html

@@ -11,7 +11,7 @@
   <ion-card class="nutritionist-card">
     <!-- Card Header with Image -->
     <div class="card-header">
-      <img src="/assets/lin.jpg" alt="林舒窈营养师" class="profile-image">
+      <img src="assets/lin.jpg" alt="林舒窈营养师" class="profile-image">
       <div class="header-overlay">
         <ion-card-title class="name-title">林舒窈</ion-card-title>
         <ion-card-subtitle class="professional-title">东方食养家</ion-card-subtitle>

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail.page.html

@@ -22,10 +22,6 @@
          [alt]="recipe?.get('title')" 
          class="recipe-image">
     <div class="image-overlay">
-      <ion-chip color="success" outline>
-        <ion-icon name="pricetag-outline" slot="start"></ion-icon>
-        {{ recipe?.get('category') || '未分类' }}
-      </ion-chip>
       <ion-chip color="warning" outline>
         <ion-icon name="time-outline" slot="start"></ion-icon>
         {{ recipe?.get('cookTime') || '30分钟' }}

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail.page.scss

@@ -17,6 +17,7 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
+    width: 80px;
   }
 }
 
@@ -149,11 +150,11 @@ overflow: hidden;
 .image-overlay {
   position: absolute;
   bottom: 16px;
-  left: 240px;
+  left: 280px;
   right: 16px;
   display: flex;
   gap: 8px;
-  width: 150px;
+  width: 100px;
   ion-chip {
     --background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(5px);

myapp/src/app/tab3/page-collections/page-collections.page.scss

@@ -1,257 +1,160 @@
 ion-thumbnail {
-    --size: 64px;
-    --border-radius: 8px;
-    
-    img {
-      object-fit: cover;
-    }
+  --size: 64px;
+  --border-radius: 8px;
+  
+  img {
+    object-fit: cover;
   }
+}
+
+ion-item {
+  --padding-start: 16px;
+  --padding-end: 16px;
   
-  ion-item {
-    --padding-start: 16px;
-    --padding-end: 16px;
-    
-    h2 {
-      font-weight: 500;
-    }
-    
-    p {
-      color: var(--ion-color-medium);
-      font-size: 0.8rem;
-      margin-top: 4px;
-    }
-    
-    ion-icon[slot="end"] {
-      font-size: 24px;
-    }
+  h2 {
+    font-weight: 500;
   }
   
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 60vh;
-    text-align: center;
+  p {
     color: var(--ion-color-medium);
-    
-    ion-icon {
-      font-size: 48px;
-      margin-bottom: 16px;
-      color: var(--ion-color-danger);
-    }
-    
-    h3 {
-      font-size: 18px;
-      margin-bottom: 8px;
-      color: var(--ion-color-dark);
-    }
-    
-    p {
-      font-size: 14px;
-      margin: 0;
-    }
+    font-size: 0.8rem;
+    margin-top: 4px;
   }
   
-  @media (min-width: 768px) {
-    ion-list {
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    ion-thumbnail {
-      --size: 80px;
-    }
+  ion-icon[slot="end"] {
+    font-size: 24px;
   }
+}
 
-  /* 收藏项样式 */
+/* 收藏项样式 */
 .favorite-item {
-  --padding-start: 0;
-  --inner-padding-end: 0;
-  --background: var(--ion-color-light);
-  border-radius: 12px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+--padding-start: 0;
+--inner-padding-end: 0;
+--background: var(--ion-color-light);
+border-radius: 12px;
+margin-bottom: 12px;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .item-thumbnail {
-  --size: 80px;
-  --border-radius: 8px;
-  margin: 8px;
-  
-  .thumbnail-img {
-    border-radius: 8px;
-    object-fit: cover;
-  }
+--size: 80px;
+--border-radius: 8px;
+margin: 8px;
+
+.thumbnail-img {
+  border-radius: 8px;
+  object-fit: cover;
+}
 }
 
-.item-label {
-  margin: 10px 0;
+.item-content {
+margin: 10px 0;
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
   
   .item-title {
     font-weight: 600;
     font-size: 1.1rem;
-    margin-bottom: 5px;
+    margin: 0;
   }
   
-  .item-time {
+  .rating-container {
     display: flex;
     align-items: center;
-    color: var(--ion-color-medium);
+    color: var(--ion-color-warning);
     font-size: 0.9rem;
     
-    .time-icon {
-      margin-right: 5px;
+    ion-icon {
+      margin-right: 4px;
     }
   }
 }
 
-.heart-icon {
-  margin-right: 16px;
-  font-size: 1.5rem;
+.item-desc {
+  color: var(--ion-color-medium);
+  font-size: 0.9rem;
+  margin-bottom: 8px;
+  line-height: 1.4;
 }
 
-/* 空状态样式 */
-.empty-state {
-  height: 70vh;
+.item-footer {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   
-  .empty-icon {
-    font-size: 4rem;
-    margin-bottom: 20px;
-    opacity: 0.5;
-  }
-  
-  .empty-title {
-    color: var(--ion-color-medium);
-    font-weight: 600;
-    margin-bottom: 8px;
-  }
-  
-  .empty-text {
-    color: var(--ion-color-medium);
-    margin-bottom: 20px;
-    font-size: 0.9rem;
-  }
-}
-/* 收藏项样式 */
-.favorite-item {
-  --padding-start: 0;
-  --inner-padding-end: 0;
-  --background: var(--ion-color-light);
-  border-radius: 12px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.item-thumbnail {
-  --size: 80px;
-  --border-radius: 8px;
-  margin: 8px;
-  
-  .thumbnail-img {
-    border-radius: 8px;
-    object-fit: cover;
-  }
-}
-
-.item-content {
-  margin: 10px 0;
-  
-  .item-header {
+  .time-container {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 6px;
-    
-    .item-title {
-      font-weight: 600;
-      font-size: 1.1rem;
-      margin: 0;
-    }
+    color: var(--ion-color-medium);
+    font-size: 0.85rem;
     
-    .rating-container {
-      display: flex;
-      align-items: center;
-      color: var(--ion-color-warning);
-      font-size: 0.9rem;
-      
-      ion-icon {
-        margin-right: 4px;
-      }
+    ion-icon {
+      margin-right: 4px;
     }
   }
   
-  .item-desc {
-    color: var(--ion-color-medium);
-    font-size: 0.9rem;
-    margin-bottom: 8px;
-    line-height: 1.4;
-  }
-  
-  .item-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    
-    .time-container {
-      display: flex;
-      align-items: center;
-      color: var(--ion-color-medium);
-      font-size: 0.85rem;
-      
-      ion-icon {
-        margin-right: 4px;
-      }
-    }
+  ion-badge {
+    font-weight: normal;
+    padding: 4px 8px;
     
-    ion-badge {
-      font-weight: normal;
-      padding: 4px 8px;
-      
-      ion-icon {
-        margin-right: 4px;
-        font-size: 0.9rem;
-      }
+    ion-icon {
+      margin-right: 4px;
+      font-size: 0.9rem;
     }
   }
 }
+}
 
 .heart-icon {
-  margin-right: 16px;
-  font-size: 1.5rem;
+margin-right: 16px;
+font-size: 1.5rem;
 }
 
 .refresh-icon {
-  font-size: 1.2rem;
+font-size: 1.2rem;
 }
 
-/* 空状态样式 */
+/* 空状态样式 - 保留更完整的版本 */
 .empty-state {
-  height: 70vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  
-  .empty-icon {
-    font-size: 4rem;
-    margin-bottom: 20px;
-    opacity: 0.5;
-  }
-  
-  .empty-title {
-    color: var(--ion-color-medium);
-    font-weight: 600;
-    margin-bottom: 8px;
-  }
-  
-  .empty-text {
-    color: var(--ion-color-medium);
-    margin-bottom: 20px;
-    font-size: 0.9rem;
-  }
+height: 70vh;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+text-align: center;
+color: var(--ion-color-medium);
+
+.empty-icon {
+  font-size: 4rem;
+  margin-bottom: 20px;
+  opacity: 0.5;
+  color: var(--ion-color-danger);
+}
+
+.empty-title {
+  color: var(--ion-color-dark);
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 18px;
+}
+
+.empty-text {
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+}
+
+@media (min-width: 768px) {
+ion-list {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+ion-thumbnail {
+  --size: 80px;
+}
 }

myapp/src/app/tab3/page-records/page-records-detail/page-records-detail.page.scss

@@ -1,152 +1,121 @@
-.recipe-image-container {
-  position: relative;
-  width: 100%;
-  height: 250px;
-  overflow: hidden;
-  
-  .recipe-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .image-overlay {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-  }
-}
-
+/* 头部样式 & 菜品信息 */
 .recipe-header {
   padding: 16px;
-  
-  .recipe-title {
-    font-size: 1.8rem;
-    font-weight: bold;
-    margin-bottom: 8px;
-    color: var(--ion-color-dark);
-  }
-  
-  .recipe-meta {
-    display: flex;
-    gap: 16px;
-    margin-top: 8px;
-    
-    .meta-item {
-      display: flex;
-      align-items: center;
-      font-size: 0.9rem;
-      color: var(--ion-color-medium);
-      
-      ion-icon {
-        margin-right: 4px;
-        font-size: 1rem;
-      }
-    }
-  }
+  background: white;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column; /* 统一布局方向 */
 }
 
-.section-card {
-  margin: 16px;
-  border-radius: 12px;
+.recipe-header ion-toolbar {
+  --background: white;
+  --border-width: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  
-  ion-card-header {
-    padding-bottom: 0;
-    
-    ion-card-title {
-      display: flex;
-      align-items: center;
-      font-size: 1.2rem;
-      color: var(--ion-color-dark);
-      
-      ion-icon {
-        margin-right: 8px;
-        color: var(--ion-color-primary);
-      }
-    }
-  }
 }
 
-.step-item {
-  --padding-start: 0;
-  --inner-padding-end: 0;
-  align-items: flex-start;
-  
-  .step-number {
-    width: 28px;
-    height: 28px;
-    background: var(--ion-color-primary);
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.9rem;
-    font-weight: bold;
-    margin-right: 12px;
-  }
-  
-  ion-label {
-    margin-top: 4px;
-    margin-bottom: 4px;
-    
-    p {
-      margin: 0;
-      color: var(--ion-color-dark);
-      line-height: 1.5;
-    }
-  }
+.recipe-header .header-title,
+.recipe-header .recipe-title {
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: var(--ion-color-dark);
 }
 
-@media (min-width: 768px) {
-  .recipe-image-container {
-    height: 350px;
-  }
-  
-  .section-card {
-    margin: 20px auto;
-    max-width: 800px;
-  }
+.recipe-header .recipe-meta {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
 }
 
-/* 头部样式 */
-.recipe-header {
-ion-toolbar {
-  --background: white;
-  --border-width: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  
-  .header-title {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--ion-color-dark);
-  }
+.recipe-header .meta-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+  color: var(--ion-color-medium);
 }
+
+.recipe-header .meta-item ion-icon {
+  margin-right: 4px;
+  font-size: 1rem;
 }
 
-/* 内容区域 */
-.recipe-content {
---background: #f8f9fa;
-padding-bottom: 80px;
+/* 合并后的头部布局（适配不同场景） */
+.recipe-header.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.recipe-header.flex-between .recipe-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  flex: 1;
+  margin: 0;
+}
+
+.recipe-header.flex-between .recipe-rating {
+  display: flex;
+  align-items: center;
+}
+
+.recipe-header.flex-between .recipe-rating ion-icon {
+  font-size: 1.2rem;
+  margin-right: 2px;
+}
+
+.recipe-header.flex-between .recipe-rating .rating-text {
+  font-size: 0.9rem;
+  color: var(--ion-color-medium);
+  margin-left: 4px;
 }
 
-/* 菜品图片 */
+.recipe-header .recipe-meta.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.recipe-header .recipe-meta.flex-wrap .meta-item {
+  --padding-start: 0;
+  --inner-padding-end: 0;
+  --min-height: 32px;
+  flex: 1 0 calc(33.333% - 8px);
+}
+
+.recipe-header .recipe-meta.flex-wrap .meta-item ion-icon {
+  font-size: 1.2rem;
+}
+
+.recipe-header .recipe-meta.flex-wrap .meta-item ion-label {
+  font-size: 0.85rem;
+}
+
+/* 菜品图片容器（合并重复定义） */
 .recipe-image-container {
-position: relative;
-width: 100%;
-height: 250px;
-overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 250px;
+  overflow: hidden;
+}
 
-.recipe-image {
+.recipe-image-container .recipe-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.image-overlay {
+.recipe-image-container .image-overlay-top {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.recipe-image-container .image-overlay-bottom {
   position: absolute;
   bottom: 16px;
   left: 240px;
@@ -154,196 +123,135 @@ overflow: hidden;
   display: flex;
   gap: 8px;
   width: 150px;
-  ion-chip {
-    --background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(5px);
-  }
-}
 }
 
-/* 菜品信息部分 */
-.recipe-info-section {
-padding: 16px;
-background: white;
-margin-bottom: 16px;
+.recipe-image-container ion-chip {
+  --background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(5px);
 }
 
-.recipe-header {
-display: flex;
-justify-content: space-between;
-align-items: center;
-margin-bottom: 12px;
+/* 公共卡片样式（合并阴影层级） */
+.section-card {
+  margin: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05); /* 合并两种阴影 */
+}
 
-.recipe-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--ion-color-dark);
-  margin: 0;
-  flex: 1;
+.section-card ion-card-header,
+.section-card .section-header {
+  padding-bottom: 0;
 }
 
-.recipe-rating {
+.section-card ion-card-title,
+.section-card .section-title {
   display: flex;
   align-items: center;
-  
-  ion-icon {
-    font-size: 1.2rem;
-    margin-right: 2px;
-  }
-  
-  .rating-text {
-    font-size: 0.9rem;
-    color: var(--ion-color-medium);
-    margin-left: 4px;
-  }
-}
+  font-size: 1.2rem;
+  color: var(--ion-color-dark);
 }
 
-.recipe-meta {
-display: flex;
-flex-wrap: wrap;
-gap: 8px;
-margin-bottom: 16px;
+.section-card ion-card-title ion-icon,
+.section-card .section-title .section-icon {
+  margin-right: 8px;
+  color: var(--ion-color-primary);
+}
 
-.meta-item {
+/* 步骤列表（统一样式） */
+.step-item,
+.step-list .step-item {
   --padding-start: 0;
   --inner-padding-end: 0;
-  --min-height: 32px;
-  flex: 1 0 calc(33.333% - 8px);
-  
-  ion-icon {
-    font-size: 1.2rem;
-  }
-  
-  ion-label {
-    font-size: 0.85rem;
-    color: var(--ion-color-medium);
-  }
+  align-items: flex-start;
+  padding: 12px 0;
 }
+
+.step-item .step-number,
+.step-list .step-item .step-number {
+  width: 28px;
+  height: 28px;
+  background: var(--ion-color-primary);
+  color: white;
+  font-size: 0.9rem;
+  font-weight: bold;
+  margin-right: 12px;
 }
 
-.recipe-description {
-font-size: 0.95rem;
-color: var(--ion-color-medium);
-line-height: 1.6;
-margin: 0;
+.step-item ion-label,
+.step-list .step-item .step-text {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  font-size: 0.95rem;
+  color: var(--ion-color-medium);
+  line-height: 1.6;
 }
 
-/* 卡片部分 */
-.section-card {
-margin: 16px;
-border-radius: 12px;
-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+.step-item ion-label p {
+  margin: 0;
+  color: var(--ion-color-dark);
+  line-height: 1.5;
+}
 
-.section-header {
-  padding-bottom: 0;
-  
-  .section-title {
-    font-size: 1.1rem;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    
-    .section-icon {
-      margin-right: 8px;
-      color: var(--ion-color-primary);
-    }
-  }
+/* 其他独立样式 */
+.recipe-content {
+  --background: #f8f9fa;
+  padding-bottom: 80px;
 }
+
+.recipe-info-section {
+  padding: 16px;
+  background: white;
+  margin-bottom: 16px;
+}
+
+.recipe-description {
+  font-size: 0.95rem;
+  color: var(--ion-color-medium);
+  line-height: 1.6;
 }
 
-/* 食材列表 */
-.ingredient-list {
-.ingredient-item {
+.ingredient-list .ingredient-item {
   --padding-start: 0;
   --inner-padding-end: 0;
   --min-height: 48px;
   border-bottom: 1px dashed var(--ion-color-light-shade);
-  
-  &:last-child {
-    border-bottom: none;
-  }
-  
-  .bullet-icon {
-    color: var(--ion-color-primary);
-    font-size: 0.6rem;
-  }
-  
-  .ingredient-name {
-    font-size: 0.95rem;
-  }
-  
-  .ingredient-amount {
-    font-weight: 500;
-  }
-}
 }
 
-/* 步骤列表 */
-.step-list {
-.step-item {
-  --padding-start: 0;
-  --inner-padding-end: 0;
-  --min-height: auto;
-  align-items: flex-start;
-  padding: 12px 0;
-  
-  .step-number {
-    width: 28px;
-    height: 28px;
-    background: var(--ion-color-primary);
-    color: white;
-    font-size: 0.9rem;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 12px;
-  }
-  
-  .step-text {
-    font-size: 0.95rem;
-    color: var(--ion-color-medium);
-    line-height: 1.6;
-    white-space: normal;
-  }
+.ingredient-list .ingredient-item:last-child {
+  border-bottom: none;
 }
+
+.ingredient-list .bullet-icon {
+  color: var(--ion-color-primary);
+  font-size: 0.6rem;
 }
 
-/* 底部按钮 */
 .action-buttons {
-position: fixed;
-bottom: 0;
-left: 0;
-right: 0;
-padding: 16px;
-background: linear-gradient(to top, white 50%, transparent 100%);
-
-.cook-button {
-  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --padding-top: 16px;
-  --padding-bottom: 16px;
-  font-weight: 600;
-}
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px;
+  background: linear-gradient(to top, white 50%, transparent 100%);
 }
 
-/* 响应式调整 */
+/* 响应式调整（合并重复媒体查询） */
 @media (min-width: 768px) {
-.recipe-image-container {
-  height: 350px;
-}
+  .recipe-image-container {
+    height: 350px;
+  }
 
-.recipe-info-section {
-  padding: 24px;
-}
+  .section-card {
+    margin: 20px auto;
+    max-width: 800px;
+  }
 
-.section-card {
-  margin: 24px;
-}
+  .recipe-info-section {
+    padding: 24px;
+  }
 
-.action-buttons {
-  padding: 24px;
-  max-width: 600px;
-  margin: 0 auto;
-}
+  .action-buttons {
+    padding: 24px;
+    max-width: 600px;
+    margin: 0 auto;
+  }
 }

myapp/src/app/tab3/tab3.page.scss

@@ -1,301 +1,216 @@
 /* tab3.page.scss */
-.profile-container {
+:host {
+  --primary-green: #2ecc71;
+  --secondary-green: #27ae60;
+  --light-green: #d4efdf;
+  --text-dark: #2c3e50;
+}
+
+.profile-container,
+.login-container {
   max-width: 800px;
   margin: 0 auto;
 }
 
-.user-card {
+.login-container {
+  max-width: 500px;
+  margin: 50px auto 0;
+}
+
+.user-card,
+.login-container ion-card {
   text-align: center;
-  margin-bottom: 20px;
   border-radius: 15px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  
-  .avatar-container {
-    position: relative;
-    margin: 0 auto 15px;
-    width: fit-content;
-  }
-  
-  .glow-avatar {
-    width: 100px;
-    height: 100px;
-    margin: 0 auto;
-    border: 3px solid var(--ion-color-success);
-    box-shadow: 0 0 15px rgba(var(--ion-color-success-rgb), 0.3);
-  }
-  
-  .vip-badge {
-    position: absolute;
-    bottom: -5px;
-    right: -5px;
-    font-size: 12px;
-  }
-  
-  .username {
-    font-weight: bold;
-    margin-top: 10px;
-  }
-  
-  .user-id {
-    color: var(--ion-color-medium);
-    font-size: 14px;
-  }
+  margin-bottom: 20px;
+}
+
+.user-card .avatar-container,
+.user-section .avatar-container {
+  position: relative;
+  margin: 0 auto 15px;
+  width: fit-content;
+  display: inline-block;
+}
+
+.glow-avatar {
+  width: 100px;
+  height: 100px;
+  border: 3px solid white;
+  box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
+  transition: transform 0.3s ease;
+  animation: avatarGlow 2s ease-in-out infinite;
+}
+
+.user-card .glow-avatar {
+  border-color: var(--ion-color-success);
+  box-shadow: 0 0 15px rgba(var(--ion-color-success-rgb), 0.3);
+  animation: none;
+}
+
+.vip-badge,
+.id-badge {
+  position: absolute;
+  font-size: 12px;
+}
+
+.vip-badge { bottom: -5px; right: -5px; }
+.id-badge { bottom: -10px; right: -10px; border-radius: 15px; }
+
+.username {
+  font-weight: bold;
+  margin-top: 10px;
+  color: var(--text-dark);
+  font-size: 1.4rem;
+  margin: 0;
+}
+
+.user-id {
+  color: var(--ion-color-medium);
+  font-size: 14px;
+  color: #7f8c8d;
+  margin: 0.3rem 0;
+  font-size: 0.9rem;
 }
 
 .stats-grid {
   margin: 20px 0;
-  
-  .stat-button {
-    height: 100%;
-    
-    .stat-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      
-      .stat-icon {
-        font-size: 24px;
-        margin-bottom: 5px;
-      }
-      
-      h3 {
-        margin: 5px 0;
-        font-size: 18px;
-        font-weight: bold;
-      }
-      
-      p {
-        margin: 0;
-        font-size: 14px;
-        color: var(--ion-color-medium);
-      }
-    }
-  }
+  padding: 0 1rem;
+}
+
+.stats-grid .stat-button,
+.stats-grid .stat-card {
+  height: 100%;
+  background: white;
+  border-radius: 15px;
+  padding: 1.2rem;
+  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.1);
+  transition: all 0.3s ease;
+}
+
+.stats-grid .stat-button:active,
+.stats-grid .stat-card:active {
+  transform: scale(0.98);
+}
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-icon {
+  font-size: 24px;
+  margin-bottom: 5px;
+  font-size: 2.2rem;
+  color: var(--primary-green);
+  margin-bottom: 0.8rem;
+}
+
+.stats-grid h3 {
+  margin: 5px 0;
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--text-dark);
+  margin: 0;
+  font-size: 1.6rem;
+}
+
+.stats-grid p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--ion-color-medium);
+  color: #7f8c8d;
+  margin: 0.3rem 0 0;
+  font-size: 0.9rem;
 }
 
+.stats-grid .stat-card.history { border-left: 4px solid var(--primary-green); }
+.stats-grid .stat-card.favorite { border-left: 4px solid #e74c3c; }
+
 .menu-list {
   background: transparent;
   margin-bottom: 20px;
-  
-  ion-item {
-    --border-color: rgba(var(--ion-color-medium-rgb), 0.1);
-    --padding-start: 10px;
-    --padding-end: 10px;
-    border-radius: 10px;
-    margin-bottom: 8px;
-    
-    ion-icon {
-      font-size: 20px;
-    }
-  }
+  margin: 1.5rem 0;
 }
 
-.logout-button {
-  margin: 20px 0;
+.menu-list ion-item,
+.menu-list .menu-item {
+  --border-color: rgba(var(--ion-color-medium-rgb), 0.1);
+  --padding-start: 10px;
+  --padding-end: 10px;
+  border-radius: 10px;
+  margin-bottom: 8px;
+  --background-hover: #e8f8f1;
+  --border-radius: 12px;
+  margin: 0.5rem 1rem;
+  transition: transform 0.3s ease;
 }
 
-.login-container {
-  max-width: 500px;
-  margin: 50px auto 0;
-  
-  ion-card {
-    border-radius: 15px;
-    
-    ion-card-header {
-      text-align: center;
-    }
-    
-    ion-button {
-      margin-bottom: 10px;
-    }
-  }
+.menu-list ion-item ion-icon,
+.menu-list .menu-item ion-icon {
+  font-size: 20px;
+  transition: transform 0.3s ease;
+}
+
+.menu-list .menu-item:active { transform: scale(0.98); }
+
+.menu-list ion-label {
+  color: var(--text-dark);
+  font-weight: 500;
 }
 
-.version-info {
+.menu-list ion-note { font-size: 0.85rem; }
+
+.logout-button { margin: 20px 0; }
+
+.version-info,
+.version-section {
   text-align: center;
-  margin-top: 30px;
   font-size: 12px;
-  
-  ion-text {
-    display: block;
-    margin-bottom: 5px;
-  }
+  padding: 2rem 1rem;
 }
-:host {
-    --primary-green: #2ecc71;
-    --secondary-green: #27ae60;
-    --light-green: #d4efdf;
-    --text-dark: #2c3e50;
-  }
-  
-  .header-bar {
-    --background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
-    --color: white;
-  
-    .app-title {
-      font-weight: 500;
-      letter-spacing: 1px;
-    }
-  
-    .header-icon {
-      font-size: 1.8rem;
-      margin-right: 12px;
-    }
-  }
-  
-  .profile-content {
-    background: linear-gradient(var(--light-green) 30%, #ffffff 70%);
-  }
-  
-  .user-section {
-    padding: 2rem 1rem;
-    text-align: center;
-  
-    .avatar-container {
-      position: relative;
-      display: inline-block;
-  
-      .glow-avatar {
-        width: 100px;
-        height: 100px;
-        border: 3px solid white;
-        box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
-        transition: transform 0.3s ease;
-  
-        &:active {
-          transform: scale(0.95);
-        }
-      }
-  
-      .id-badge {
-        position: absolute;
-        bottom: -10px;
-        right: -10px;
-        border-radius: 15px;
-        font-size: 0.8rem;
-      }
-    }
-  
-    .user-info {
-      margin-top: 1.5rem;
-  
-      .username {
-        color: var(--text-dark);
-        margin: 0;
-        font-size: 1.4rem;
-        font-weight: 600;
-      }
-  
-      .user-id {
-        color: #7f8c8d;
-        margin: 0.3rem 0;
-        font-size: 0.9rem;
-      }
-    }
-  }
-  
-  .stats-grid {
-    padding: 0 1rem;
-  
-    .stat-card {
-      background: white;
-      border-radius: 15px;
-      //margin: 0.5rem;
-      padding: 1.2rem;
-      box-shadow: 0 4px 12px rgba(46, 204, 113, 0.1);
-      transition: all 0.3s ease;
-  
-      &:active {
-        transform: scale(0.98);
-      }
-  
-      &.history {
-        border-left: 4px solid var(--primary-green);
-        // 添加 flex 相关属性为初始值
-        flex: initial;
-        flex-grow: initial;
-        flex-shrink: initial;
-        flex-basis: initial;
-      }
-  
-      &.favorite {
-        border-left: 4px solid #e74c3c;
-        // 添加 flex 相关属性为初始值
-        flex: initial;
-        flex-grow: initial;
-        flex-shrink: initial;
-        flex-basis: initial;
-      }
-    }
-  
-    .stat-icon {
-      font-size: 2.2rem;
-      color: var(--primary-green);
-      margin-bottom: 0.8rem;
-    }
-  
-    .stat-content {
-      h3 {
-        color: var(--text-dark);
-        margin: 0;
-        font-size: 1.6rem;
-      }
-  
-      p {
-        color: #7f8c8d;
-        margin: 0.3rem 0 0;
-        font-size: 0.9rem;
-      }
-    }
-  }
-  
-  .menu-list {
-    background: transparent;
-    margin: 1.5rem 0;
-  
-    .menu-item {
-      --background-hover: #e8f8f1;
-      --border-radius: 12px;
-      margin: 0.5rem 1rem;
-      transition: transform 0.3s ease;
-  
-      ion-icon {
-        transition: transform 0.3s ease;
-      }
-  
-      &:active {
-        transform: scale(0.98);
-      }
-  
-      ion-label {
-        color: var(--text-dark);
-        font-weight: 500;
-      }
-  
-      ion-note {
-        font-size: 0.85rem;
-      }
-    }
-  }
-  
-  .version-section {
-    text-align: center;
-    padding: 2rem 1rem;
-  
-    ion-text {
-      display: block;
-      margin: 0.3rem 0;
-      font-size: 0.85rem;
-    }
-  }
-  
-  /* 动画效果 */
-  @keyframes avatarGlow {
-    0% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }
-    50% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.5); }
-    100% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }
-  }
-  
-  .glow-avatar {
-    animation: avatarGlow 2s ease-in-out infinite;
-  }
+
+.version-info ion-text,
+.version-section ion-text {
+  display: block;
+  margin-bottom: 5px;
+  margin: 0.3rem 0;
+  font-size: 0.85rem;
+}
+
+.header-bar {
+  --background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
+  --color: white;
+}
+
+.header-bar .app-title {
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.header-bar .header-icon {
+  font-size: 1.8rem;
+  margin-right: 12px;
+}
+
+.profile-content {
+  background: linear-gradient(var(--light-green) 30%, #ffffff 70%);
+}
+
+.user-section {
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+.user-section .user-info { margin-top: 1.5rem; }
+
+/* 动画效果 */
+@keyframes avatarGlow {
+  0% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }
+  50% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.5); }
+  100% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }
+}
+
+.glow-avatar:active { transform: scale(0.95); }
+.stats-grid .stat-card { flex: initial; }