diff --git a/lib/modules/translation/middleware/controllers/translation_middleware_controller.dart b/lib/modules/translation/middleware/controllers/translation_middleware_controller.dart
index 727ee76a7..614d8f811 100644
--- a/lib/modules/translation/middleware/controllers/translation_middleware_controller.dart
+++ b/lib/modules/translation/middleware/controllers/translation_middleware_controller.dart
@@ -16,7 +16,10 @@ class TranslationMiddlewareController extends GetxController {
       title: 'simultaneousTranslation'.tr, // 实时翻译
       // description: 'realtimeTranslationDescription', // 实时语音翻译，支持多种语言
       icon: Icons.record_voice_over,
-      iconColor: 0xFF2196F3, // 蓝色
+      startColor: Colors.blue[400]!, // 亮蓝
+      endColor: Colors.blue[600]!, //深蓝
+      iconBgColor: Colors.white, // 白色
+      iconColor: Colors.blue[500]!, // 主蓝
       targetRoute: Routes.translation,
     ),
     TranslationOption(
@@ -24,7 +27,10 @@ class TranslationMiddlewareController extends GetxController {
       title: 'callTranslation'.tr, // 通话翻译
       // description: 'simultaneousTranslationInfo', // 双向对话翻译，面对面交流
       icon: Icons.call,
-      iconColor: 0xFF4CAF50, // 绿色
+      startColor: Colors.green[400]!, // 绿色
+      endColor: Colors.green[600]!, // 深绿
+      iconBgColor: Colors.white, // 白色
+      iconColor: Colors.green[500]!, // 主绿
       targetRoute: Routes.translation,
     ),
     TranslationOption(
@@ -32,7 +38,10 @@ class TranslationMiddlewareController extends GetxController {
       title: 'faceToFaceTranslation'.tr, // 面对面翻译
       // description: 'faceToFaceTranslationDescription', // 面对面交流，支持多种语言
       icon: Icons.people,
-      iconColor: 0xFFFF9800, // 橙色
+      startColor: Colors.orange[400]!, // 橙色
+      endColor: Colors.orange[600]!, // 深橙
+      iconBgColor: Colors.white, // 白色
+      iconColor: Colors.orange[500]!, // 主橙
       targetRoute: Routes.translation,
     ),
     TranslationOption(
@@ -40,21 +49,30 @@ class TranslationMiddlewareController extends GetxController {
       title: 'audioVideoTranslation'.tr, // 多媒体翻译
       //description: 'audioVideoTranslationDescription', // 支持音频和视频翻译
       icon: Icons.videocam,
-      iconColor: 0xFF9C27B0, // 紫色
+      startColor: Colors.purple[400]!, // 亮紫
+      endColor: Colors.purple[600]!, // 深紫
+      iconBgColor: Colors.white, // 白色
+      iconColor: Colors.purple[500]!, // 主紫
       targetRoute: Routes.translation,
     ),
     TranslationOption(
       translationId: 'picture_translator',
       title: 'pictureTranslation'.tr, // 图片翻译
       icon: Icons.image,
-      iconColor: 0xFF009688, // 青色
+      startColor: Colors.teal[400]!, // 青色
+      endColor: Colors.teal[600]!, // 深青
+      iconBgColor: Colors.white, // 白色
+      iconColor: Colors.teal[500]!, // 主青
       targetRoute: Routes.pictureTranslation,
     ),
     TranslationOption(
       translationId: 'text_translator',
       title: 'textTranslation'.tr, // 文本翻译
       icon: Icons.text_fields,
-      iconColor: 0xFF3F51B5, // 棕色
+      startColor: Colors.indigo[400]!, // 靛蓝
+      endColor: Colors.indigo[600]!, // 深靛
+      iconBgColor: Colors.white, // 白色
+      iconColor: Colors.indigo[500]!, // 主靛
       targetRoute: Routes.textTranslation,
     ),
   ];
@@ -103,7 +121,10 @@ class TranslationOption {
   final String title;
   // final String description;
   final IconData icon;
-  final int iconColor;
+  final Color startColor;
+  final Color endColor;
+  final Color iconBgColor;
+  final Color iconColor;
   final String targetRoute;
 
   TranslationOption({
@@ -111,6 +132,9 @@ class TranslationOption {
     required this.title,
     // required this.description,
     required this.icon,
+    required this.startColor,
+    required this.endColor,
+    required this.iconBgColor,
     required this.iconColor,
     required this.targetRoute,
   });
diff --git a/lib/modules/translation/middleware/views/translation_middleware_view.dart b/lib/modules/translation/middleware/views/translation_middleware_view.dart
index 45804d334..1cdee57ed 100644
--- a/lib/modules/translation/middleware/views/translation_middleware_view.dart
+++ b/lib/modules/translation/middleware/views/translation_middleware_view.dart
@@ -91,7 +91,23 @@ class TranslationMiddlewareView
       onTap: () => controller.navigateToTranslationFeature(option),
       child: Container(
         decoration: BoxDecoration(
-          color: isDarkMode ? AppColors.cardBackground : Colors.white,
+          // 使用新的 startColor/endColor 构建渐变背景
+          gradient: LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: [
+              option.startColor.withOpacity(
+                isEnabled
+                    ? (isDarkMode ? 0.3 : 0.3)
+                    : (isDarkMode ? 0.15 : 0.08),
+              ),
+              option.endColor.withOpacity(
+                isEnabled
+                    ? (isDarkMode ? 0.3 : 0.3)
+                    : (isDarkMode ? 0.15 : 0.08),
+              ),
+            ],
+          ),
           borderRadius: BorderRadius.circular(16.r),
           boxShadow: [
             BoxShadow(
@@ -99,7 +115,7 @@ class TranslationMiddlewareView
                   ? Colors.black.withOpacity(0.3)
                   : Colors.grey.withOpacity(0.1),
               blurRadius: 8,
-              offset: const Offset(0, 2),
+              offset: const Offset(0, 4),
             ),
           ],
         ),
@@ -113,15 +129,13 @@ class TranslationMiddlewareView
                 width: 60.w,
                 height: 60.h,
                 decoration: BoxDecoration(
-                  color: Color(option.iconColor)
-                      .withOpacity(isEnabled ? 0.1 : 0.05),
+                  color: option.iconBgColor.withOpacity(isEnabled ? 0.2 : 0.05),
                   borderRadius: BorderRadius.circular(16.r),
                 ),
                 child: Icon(
                   option.icon,
                   size: 32.sp,
-                  color: Color(option.iconColor)
-                      .withOpacity(isEnabled ? 1.0 : 0.5),
+                  color: option.iconColor.withOpacity(isEnabled ? 1.0 : 0.5),
                 ),
               ),
               SizedBox(height: 16.h),