1

src/app/tab4/tab4.page.scss

@@ -50,25 +50,75 @@ ion-card:hover {
 
 .memo-card {
     background: white;
-    border-radius: 16px;
-    margin: 12px;
-    padding: 16px;
+    border-radius: 20px;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
     transition: all 0.3s ease;
     
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(to right, #4CAF50, #2196F3);
+    }
+    
     &:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        transform: translateY(-5px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
     }
     
     .memo-title {
         color: #2c3e50;
-        font-size: 1.3em;
-        margin-bottom: 8px;
+        font-size: 1.4em;
+        font-weight: 600;
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
     }
     
     .memo-description {
         color: #666;
-        font-size: 1em;
+        font-size: 0.95em;
+        line-height: 1.5;
+        margin: 0;
+    }
+    
+    &:nth-child(1) {
+        .memo-title::before {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
+        }
+    }
+    
+    &:nth-child(2) {
+        .memo-title::before {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196F3"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5.97 4.06L14.09 6l1.41 1.41L16.91 6l1.06 1.06-1.41 1.41 1.41 1.41-1.06 1.06-1.41-1.41-1.41 1.41-1.06-1.06 1.41-1.41-1.41-1.41zm-6.78 0h5v1.5h-5v-1.5zM12 17H6v-1.5h6V17zm2.25-3H6v-1.5h8.25V14z"/></svg>');
+        }
+    }
+    
+    &:nth-child(3) {
+        .memo-title::before {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
+        }
+    }
+    
+    &:nth-child(4) {
+        .memo-title::before {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>');
+        }
     }
 }
 
@@ -227,4 +277,77 @@ ion-button {
     &:active {
         transform: scale(0.95);
     }
+}
+
+// 功能卡片网格布局
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    padding: 16px;
+    margin-top: 20px;
+}
+
+// 响应式布局调整
+@media (max-width: 480px) {
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .memo-card {
+        margin: 8px 16px;
+    }
+}
+
+// 卡片点击动画
+.memo-card:active {
+    transform: scale(0.98);
+    transition: transform 0.1s;
+}
+
+// 为每个卡片添加独特的背景色
+.memo-card {
+    &:nth-child(1) {
+        background: linear-gradient(135deg, #E8F5E9, white);
+    }
+    
+    &:nth-child(2) {
+        background: linear-gradient(135deg, #E3F2FD, white);
+    }
+    
+    &:nth-child(3) {
+        background: linear-gradient(135deg, #FFF3E0, white);
+    }
+    
+    &:nth-child(4) {
+        background: linear-gradient(135deg, #F3E5F5, white);
+    }
+}
+
+// 添加卡片内容布局
+.memo-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 140px;
+    
+    .memo-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
+// 添加图标动画
+.memo-card {
+    .memo-title::before {
+        transition: transform 0.3s ease;
+    }
+    
+    &:hover {
+        .memo-title::before {
+            transform: scale(1.2) rotate(360deg);
+        }
+    }
 }