🎨 优化home页面纪念日模块

src/pages/home/home.vue

@@ -81,13 +81,30 @@
             class="anniversary-item"
             @click="viewAnniversary(item)"
           >
-            <view class="anniversary-icon">
+            <view class="anniversary-icon no-circle" :data-type="item.type">
-              <uni-icons :type="getIconByType(item.type)" size="24" color="#FF6B9D"></uni-icons>
+              <view class="icon-wrapper">
+                <!-- 生日类型显示图片，其他类型显示图标 -->
+                <img 
+                  v-if="item.type === 2" 
+                  src="/static/images/birthday.png" 
+                  class="birthday-icon"
+                  alt="生日"
+                />
+                <uni-icons 
+                  v-else
+                  :type="getIconByType(item.type)" 
+                  size="26" 
+                  :color="getIconColorByType(item.type)"
+                ></uni-icons>
+              </view>
             </view>
             <view class="anniversary-info">
               <text class="anniversary-name">{{ item.title }}</text>
+              <view class="anniversary-meta">
+                <!-- <text class="anniversary-type" :data-type="item.type">{{ getTypeTextByType(item.type) }}</text> -->
                 <text class="anniversary-date">{{ item.date }}</text>
               </view>
+            </view>
             <view class="anniversary-countdown">
               <text class="countdown-text">{{ getCountdownText(item) }}</text>
             </view>
@@ -240,11 +257,31 @@ const getCountdownText = (item) => {
 // 获取纪念日图标
 const getIconByType = (type) => {
   const iconMap = {
-    1: 'heart-fill',      // 恋爱纪念日
+    1: 'heart-filled',    // 恋爱纪念日 - 使用 heart-filled
-    2: 'gift-fill',       // 生日
+    2: 'star-filled',     // 生日 - 使用 star-filled
-    3: 'calendar-fill'    // 其他
+    3: 'calendar-filled'  // 其他 - 使用 calendar-filled
   }
-  return iconMap[type] || 'calendar-fill'
+  return iconMap[type] || 'calendar-filled'
+}
+
+// 获取纪念日图标颜色
+const getIconColorByType = (type) => {
+  const colorMap = {
+    1: '#FF6B9D',         // 恋爱纪念日 - 粉色
+    2: '#FFD700',         // 生日 - 金色
+    3: '#4CAF50'          // 其他 - 绿色
+  }
+  return colorMap[type] || '#FF6B9D'
+}
+
+// 获取纪念日类型文字
+const getTypeTextByType = (type) => {
+  const textMap = {
+    1: '恋爱纪念日',
+    2: '生日',
+    3: '其他'
+  }
+  return textMap[type] || '其他'
 }
 
 // 方法
@@ -595,31 +632,51 @@ onPullDownRefresh(() => {
 
       .anniversary-icon {
         margin-right: 35rpx;
-        background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
         border-radius: 50%;
         padding: 20rpx;
-        box-shadow: 0 4rpx 15rpx rgba(255, 107, 157, 0.3);
         position: relative;
         z-index: 1;
         transition: all 0.3s ease;
         
+        &[data-type="1"],
+        &[data-type="2"],
+        &[data-type="3"] {
+          background: transparent;
+          box-shadow: none;
+        }
+        
         &::after {
-          content: '';
+          display: none;
-          position: absolute;
+        }
-          top: -2rpx;
+        
-          left: -2rpx;
+        .icon-wrapper {
-          right: -2rpx;
+          background: transparent;
-          bottom: -2rpx;
+          border-radius: 0;
-          background: linear-gradient(135deg, #FF6B9D, #FF8E9E);
+          padding: 0;
-          border-radius: 50%;
+          box-shadow: none;
-          z-index: -1;
+          
-          opacity: 0.3;
+          .birthday-icon {
-          transition: all 0.3s ease;
+            width: 50rpx;
+            height: 50rpx;
+            object-fit: contain;
+            display: block;
+          }
         }
         
         &:hover {
           transform: scale(1.1);
+          
+          &[data-type="1"] {
             box-shadow: 0 6rpx 20rpx rgba(255, 107, 157, 0.4);
+          }
+          
+          &[data-type="2"] {
+            box-shadow: 0 6rpx 20rpx rgba(255, 215, 0, 0.4);
+          }
+          
+          &[data-type="3"] {
+            box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.4);
+          }
           
           &::after {
             opacity: 0.5;
@@ -643,6 +700,40 @@ onPullDownRefresh(() => {
           text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
         }
 
+        .anniversary-meta {
+          display: flex;
+          align-items: center;
+          gap: 10rpx;
+          margin-bottom: 12rpx;
+
+          .anniversary-type {
+            font-size: 24rpx;
+            font-weight: 600;
+            padding: 6rpx 12rpx;
+            border-radius: 12rpx;
+            border: 1rpx solid;
+            position: relative;
+            overflow: hidden;
+            
+            &[data-type="1"] {
+              color: #FF6B9D;
+              background: rgba(255, 107, 157, 0.1);
+              border-color: rgba(255, 107, 157, 0.3);
+            }
+            
+            &[data-type="2"] {
+              color: #FFD700;
+              background: rgba(255, 215, 0, 0.1);
+              border-color: rgba(255, 215, 0, 0.3);
+            }
+            
+            &[data-type="3"] {
+              color: #4CAF50;
+              background: rgba(76, 175, 80, 0.1);
+              border-color: rgba(76, 175, 80, 0.3);
+            }
+          }
+
           .anniversary-date {
             font-size: 26rpx;
             color: #7f8c8d;
@@ -654,6 +745,7 @@ onPullDownRefresh(() => {
             box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
           }
         }
+      }
 
       .anniversary-countdown {
         position: relative;