优化菜单样式：彩色背景+白色图标文字

src/components/Icon.vue

@@ -1,9 +1,8 @@
 <template>
-  <text class="icon" :class="'icon-' + name" :style="iconStyle"></text>
+  <text class="icon" :class="'icon-' + name" :style="iconStyle">{{ iconChar }}</text>
 </template>
 
 <script>
-// 干净的非emoji符号
 const icons = {
   home: '🏠',
   user: '👤',
@@ -37,28 +36,15 @@ const icons = {
 export default {
   name: 'Icon',
   props: {
-    name: {
+    name: { type: String, required: true },
-      type: String,
+    size: { type: [Number, String], default: 32 },
-      required: true
+    color: { type: String, default: '' }
-    },
-    size: {
-      type: [Number, String],
-      default: 32
-    },
-    color: {
-      type: String,
-      default: ''
-    }
   },
   computed: {
     iconStyle() {
       const style = {}
-      if (this.size) {
+      if (this.size) style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
-        style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
+      if (this.color) style.color = this.color
-      }
-      if (this.color) {
-        style.color = this.color
-      }
       return style
     },
     iconChar() {
@@ -74,15 +60,5 @@ export default {
   display: inline-block;
   text-align: center;
   line-height: 1;
-  font-weight: 500;
 }
-
-.icon-add { font-size: 1.3em; font-weight: 300; }
-.icon-check { color: #52c41a; }
-.icon-close { color: #ff4d4f; }
-.icon-alert { color: #fa8c16; }
-.icon-right, .icon-left { font-size: 1.4em; font-weight: bold; color: #999; }
-.icon-down, .icon-filter { font-size: 0.8em; }
-.icon-in { color: #52c41a; }
-.icon-out { color: #ff4d4f; }
 </style>

src/pages/index/index.vue

@@ -385,23 +385,30 @@ export default {
 /* 手机端 - 2列布局 */
 .menu-card {
   aspect-ratio: 1;
-  width: 44%;
+  width: 30%;
-  background: #fff;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 24rpx;
+  border-radius: 20rpx;
-  padding: 20rpx;
   margin: 10rpx;
-  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-/* 平板/PC端 */
+.menu-card:active {
+  opacity: 0.9;
+}
+
+.menu-card-title {
+  font-size: 24rpx;
+  color: #fff;
+  font-weight: bold;
+  margin-top: 10rpx;
+}
+
 @media (min-width: 768px) {
   .menu-card {
-    width: 18%;
+    width: 15%;
-    padding: 30rpx;
   }
 }